@visual-regression-tracker/agent-playwright

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

Import

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

Configure connection

const browserType = chromium; // any BrowserType supported by Playwright

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

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

  // apiKey - User apiKey
  apiKey: "tXZVHX0EA4YQM1MGDD",

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

  // enableSoftAssert - Log errors instead of exceptions
  enableSoftAssert: false,
};

const vrt = new PlaywrightVisualRegressionTracker(config, browserType);

Start build

vrt.start();

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

Send image

await vrt.track(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.
• • 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
• • 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.

Stop build

vrt.stop();