@visual-regression-tracker/agent-playwright

Native integration for Playwright with Visual Regression Tracker

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 = {
    // Fill with your data
    apiUrl: "http://localhost:4200",

    // Fill with your data
    branchName: "develop",

    // Fill with your data
    projectId: "76f0c443-9811-4f4f-b1c2-7c01c5775d9a",

    // Fill with your data
    token: "F5Z2H0H2SNMXZVHX0EA4YQM1MGDD",
};

const vrt = new PlaywrightVisualRegressionTracker(config, browserType);

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. Default 1
• • 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.