🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

@visual-regression-tracker/agent-playwright

Package Overview
Dependencies
Maintainers
0
Versions
27
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@visual-regression-tracker/agent-playwright

Native integration for Playwright with Visual Regression Tracker

5.3.1
latest
Source
npm
Version published
Weekly downloads
9.8K
-8.23%
Maintainers
0
Weekly downloads
 
Created
Source

Native integration for Playwright with Visual Regression Tracker

Coverage Code Smells

Npm

https://www.npmjs.com/package/@visual-regression-tracker/agent-playwright

Install

npm install @visual-regression-tracker/agent-playwright

Usage

Import

import {
  PlaywrightVisualRegressionTracker,
  Config,
} from "@visual-regression-tracker/agent-playwright";
import { chromium, Browser, Page, BrowserContext } from "@playwright/test";

Configure connection

Explicit config from code

const config: Config = {
  // URL where backend is running
  // Required
  apiUrl: "http://localhost:4200",

  // Project name or ID
  // Required
  project: "Default project",

  // User apiKey
  // Required
  apiKey: "tXZVHX0EA4YQM1MGDD",

  // Current git branch
  // Required
  branchName: "develop",

  // Log errors instead of throwing exceptions
  // Optional - default false
  enableSoftAssert: true,

  // Unique ID related to one CI build
  // Optional - default null
  ciBuildId: "SOME_UNIQUE_ID",
};

const browserName = chromium.name();
const vrt = new PlaywrightVisualRegressionTracker(browserName, config);

Or, as JSON config file vrt.json

Used only if not explicit config provided Is overriden if ENV variables are present

{
  "apiUrl": "http://localhost:4200",
  "project": "Default project",
  "apiKey": "tXZVHX0EA4YQM1MGDD",
  "ciBuildId": "commit_sha",
  "branchName": "develop",
  "enableSoftAssert": false
}

Or, as environment variables

Used only if not explicit config provided

VRT_APIURL="http://localhost:4200"
VRT_PROJECT="Default project"
VRT_APIKEY="tXZVHX0EA4YQM1MGDD"
VRT_CIBUILDID="commit_sha"
VRT_BRANCHNAME="develop"
VRT_ENABLESOFTASSERT=true

Setup

vrt.start();

Teardown

vrt.stop();

Navigate to needed page

// set up Playwright
const browser = await browserType.launch({ headless: false });
const context = await browser.newContext();
const page = await context.newPage();

// navigate to url
await page.goto("https://google.com/");

Track page

await vrt.trackPage(page, imageName[, options])
  • page <Page> Playwright page
  • imageName <string> name for the taken screenshot image
  • options <Object> optional configuration with:
    • diffTollerancePercent <number> specify acceptable difference from baseline, between 0-100.
    • comment <string> comment for test run
      • x <number> X-coordinate relative of left upper corner
      • y <number> Y-coordinate relative of left upper corner
      • width <number> area width in px
      • height <number> area height in px
    • screenshotOptions <Object> configuration for Playwrights screenshot method
      • fullPage <boolean> When true, takes a screenshot of the full scrollable page, instead of the currently visibvle viewport. Defaults to false.
      • omitBackground <boolean> Hides default white background and allows capturing screenshots with transparency. Defaults to false.
      • clip <Object> An object which specifies clipping of the resulting image. Should have the following fields:
        • x <number> x-coordinate of top-left corner of clip area
        • y <number> y-coordinate of top-left corner of clip area
        • width <number> width of clipping area
        • height <number> height of clipping area
      • timeout <number> Maximum time in milliseconds, defaults to 30 seconds, pass 0 to disable timeout.
    • agent <Object> Additional information to mark baseline across agents that have different:
      • os <string> operating system name, like Windows, Mac, etc.
      • device <string> device name, PC identifier, mobile identifier etc.
      • viewport <string> viewport size.
  • retryCount <number> Maximum time to retry screenshot if case of diff

Track elementHandle

await vrt.trackElementHandle(elementHandle, imageName[, options])
  • elementHandle <ElementHandle|Locator> Playwright ElementHandle or Locator
  • imageName <string> name for the taken screenshot image
  • options <Object> optional configuration with:
    • diffTollerancePercent <number> specify acceptable difference from baseline, between 0-100.
    • comment <string> comment for test run
      • x <number> X-coordinate relative of left upper corner
      • y <number> Y-coordinate relative of left upper corner
      • width <number> area width in px
      • height <number> area height in px
    • screenshotOptions <Object> configuration for Playwrights screenshot method
      • omitBackground <boolean> Hides default white background and allows capturing screenshots with transparency. Defaults to false.
      • timeout <number> Maximum time in milliseconds, defaults to 30 seconds, pass 0 to disable timeout.
    • agent <Object> Additional information to mark baseline across agents that have different:
      • os <string> operating system name, like Windows, Mac, etc.
      • device <string> device name, PC identifier, mobile identifier etc.
      • viewport <string> viewport size.
  • retryCount <number> Maximum time to retry screenshot if case of diff

Keywords

visual-regression-tracker

FAQs

Package last updated on 27 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts