You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

@visual-regression-tracker/agent-playwright

Package Overview
Dependencies
Maintainers
1
Versions
26
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@visual-regression-tracker/agent-playwright

Native integration for Playwright with Visual Regression Tracker


Version published
Weekly downloads
3.9K
increased by142.75%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

Native integration for Playwright with Visual Regression Tracker

Codacy Badge Codacy Badge

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

FAQs

Package last updated on 13 Jul 2023

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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc