Native integration for Playwright with Visual Regression Tracker


Npm

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

Install

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

Usage

$3

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

$3

#### Explicit config from code

`js
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_

`json
{
"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
`

$3

`js
vrt.start();
`

$3

`js
vrt.stop();
`

$3

`js
// 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/");
`

$3

`js
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
- - ignoreAreas <Array<Object>>
- - - 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

$3

`js
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
- - ignoreAreas <Array<Object>>
- - - 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