{"id":21406329,"url":"https://github.com/visual-regression-tracker/agent-playwright","last_synced_at":"2026-03-05T19:02:19.016Z","repository":{"id":38172765,"uuid":"267663668","full_name":"Visual-Regression-Tracker/agent-playwright","owner":"Visual-Regression-Tracker","description":null,"archived":false,"fork":false,"pushed_at":"2024-08-22T08:16:45.000Z","size":654,"stargazers_count":13,"open_issues_count":3,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-07-10T15:50:02.144Z","etag":null,"topics":["javascript"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Visual-Regression-Tracker.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-28T18:18:10.000Z","updated_at":"2025-02-06T16:27:43.000Z","dependencies_parsed_at":"2024-11-10T16:15:43.913Z","dependency_job_id":null,"html_url":"https://github.com/Visual-Regression-Tracker/agent-playwright","commit_stats":{"total_commits":72,"total_committers":5,"mean_commits":14.4,"dds":"0.23611111111111116","last_synced_commit":"87737ac4340e13633d9a801bc844dd171c4fe313"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/Visual-Regression-Tracker/agent-playwright","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Visual-Regression-Tracker%2Fagent-playwright","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Visual-Regression-Tracker%2Fagent-playwright/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Visual-Regression-Tracker%2Fagent-playwright/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Visual-Regression-Tracker%2Fagent-playwright/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Visual-Regression-Tracker","download_url":"https://codeload.github.com/Visual-Regression-Tracker/agent-playwright/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Visual-Regression-Tracker%2Fagent-playwright/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265227897,"owners_count":23731059,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript"],"created_at":"2024-11-22T16:38:53.451Z","updated_at":"2026-03-05T19:02:13.948Z","avatar_url":"https://github.com/Visual-Regression-Tracker.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Native integration for [Playwright](https://github.com/microsoft/playwright) with [Visual Regression Tracker](https://github.com/Visual-Regression-Tracker/Visual-Regression-Tracker)\n\n[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=Visual-Regression-Tracker_agent-playwright\u0026metric=coverage)](https://sonarcloud.io/summary/new_code?id=Visual-Regression-Tracker_agent-playwright)\n[![Code Smells](https://sonarcloud.io/api/project_badges/measure?project=Visual-Regression-Tracker_agent-playwright\u0026metric=code_smells)](https://sonarcloud.io/summary/new_code?id=Visual-Regression-Tracker_agent-playwright)\n\n## Npm\n\nhttps://www.npmjs.com/package/@visual-regression-tracker/agent-playwright\n\n## Install\n\n`npm install @visual-regression-tracker/agent-playwright`\n\n## Usage\n\n### Import\n\n```js\nimport {\n  PlaywrightVisualRegressionTracker,\n  Config,\n} from \"@visual-regression-tracker/agent-playwright\";\nimport { chromium, Browser, Page, BrowserContext } from \"@playwright/test\";\n```\n\n### Configure connection\n\n#### Explicit config from code\n\n```js\nconst config: Config = {\n  // URL where backend is running\n  // Required\n  apiUrl: \"http://localhost:4200\",\n\n  // Project name or ID\n  // Required\n  project: \"Default project\",\n\n  // User apiKey\n  // Required\n  apiKey: \"tXZVHX0EA4YQM1MGDD\",\n\n  // Current git branch\n  // Required\n  branchName: \"develop\",\n\n  // Log errors instead of throwing exceptions\n  // Optional - default false\n  enableSoftAssert: true,\n\n  // Unique ID related to one CI build\n  // Optional - default null\n  ciBuildId: \"SOME_UNIQUE_ID\",\n};\n\nconst browserName = chromium.name();\nconst vrt = new PlaywrightVisualRegressionTracker(browserName, config);\n```\n\n#### Or, as JSON config file `vrt.json`\n\n_Used only if not explicit config provided_\n_Is overriden if ENV variables are present_\n\n```json\n{\n  \"apiUrl\": \"http://localhost:4200\",\n  \"project\": \"Default project\",\n  \"apiKey\": \"tXZVHX0EA4YQM1MGDD\",\n  \"ciBuildId\": \"commit_sha\",\n  \"branchName\": \"develop\",\n  \"enableSoftAssert\": false\n}\n```\n\n#### Or, as environment variables\n\n_Used only if not explicit config provided_\n\n```\nVRT_APIURL=\"http://localhost:4200\"\nVRT_PROJECT=\"Default project\"\nVRT_APIKEY=\"tXZVHX0EA4YQM1MGDD\"\nVRT_CIBUILDID=\"commit_sha\"\nVRT_BRANCHNAME=\"develop\"\nVRT_ENABLESOFTASSERT=true\n```\n\n### Setup\n\n```js\nvrt.start();\n```\n\n### Teardown\n\n```js\nvrt.stop();\n```\n\n### Navigate to needed page\n\n```js\n// set up Playwright\nconst browser = await browserType.launch({ headless: false });\nconst context = await browser.newContext();\nconst page = await context.newPage();\n\n// navigate to url\nawait page.goto(\"https://google.com/\");\n```\n\n### Track page\n\n```js\nawait vrt.trackPage(page, imageName[, options])\n```\n\n- `page` \u003c[Page](https://playwright.dev/#version=v1.0.2\u0026path=docs%2Fapi.md\u0026q=class-page)\u003e Playwright page\n- `imageName` \u003c[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type)\u003e name for the taken screenshot image\n- `options` \u003c[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)\u003e optional configuration with:\n- - `diffTollerancePercent` \u003c[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)\u003e specify acceptable difference from baseline, between `0-100`.\n- - `comment` \u003c[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type)\u003e comment for test run\n- - `ignoreAreas` \u003c[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)\u003c[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)\u003e\u003e\n- - - `x` \u003c[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)\u003e X-coordinate relative of left upper corner\n- - - `y` \u003c[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)\u003e Y-coordinate relative of left upper corner\n- - - `width` \u003c[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)\u003e area width in px\n- - - `height` \u003c[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)\u003e area height in px\n- - `screenshotOptions` \u003c[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)\u003e configuration for Playwrights `screenshot` method\n- - - `fullPage` \u003c[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type)\u003e When true, takes a screenshot of the full scrollable page, instead of the currently visibvle viewport. Defaults to `false`.\n- - - `omitBackground` \u003c[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type)\u003e Hides default white background and allows capturing screenshots with transparency. Defaults to `false`.\n- - - `clip` \u003c[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)\u003e An object which specifies clipping of the resulting image. Should have the following fields:\n- - - - `x` \u003c[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)\u003e x-coordinate of top-left corner of clip area\n- - - - `y` \u003c[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)\u003e y-coordinate of top-left corner of clip area\n- - - - `width` \u003c[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)\u003e width of clipping area\n- - - - `height` \u003c[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)\u003e height of clipping area\n- - - `timeout` \u003c[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)\u003e Maximum time in milliseconds, defaults to 30 seconds, pass 0 to disable timeout.\n- - `agent` \u003c[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)\u003e Additional information to mark baseline across agents that have different:\n- - - `os` \u003c[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type)\u003e operating system name, like Windows, Mac, etc.\n- - - `device` \u003c[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type)\u003e device name, PC identifier, mobile identifier etc.\n- - - `viewport` \u003c[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type)\u003e viewport size.\n- `retryCount` \u003c[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)\u003e Maximum time to retry screenshot if case of diff\n\n### Track elementHandle\n\n```js\nawait vrt.trackElementHandle(elementHandle, imageName[, options])\n```\n\n- `elementHandle` \u003c[ElementHandle](https://playwright.dev/docs/api/class-elementhandle)|[Locator](https://playwright.dev/docs/api/class-locator)\u003e Playwright ElementHandle or Locator\n- `imageName` \u003c[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type)\u003e name for the taken screenshot image\n- `options` \u003c[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)\u003e optional configuration with:\n- - `diffTollerancePercent` \u003c[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)\u003e specify acceptable difference from baseline, between `0-100`.\n- - `comment` \u003c[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type)\u003e comment for test run\n- - `ignoreAreas` \u003c[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)\u003c[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)\u003e\u003e\n- - - `x` \u003c[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)\u003e X-coordinate relative of left upper corner\n- - - `y` \u003c[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)\u003e Y-coordinate relative of left upper corner\n- - - `width` \u003c[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)\u003e area width in px\n- - - `height` \u003c[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)\u003e area height in px\n- - `screenshotOptions` \u003c[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)\u003e configuration for Playwrights `screenshot` method\n- - - `omitBackground` \u003c[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type)\u003e Hides default white background and allows capturing screenshots with transparency. Defaults to `false`.\n- - - `timeout` \u003c[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)\u003e Maximum time in milliseconds, defaults to 30 seconds, pass 0 to disable timeout.\n- - `agent` \u003c[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)\u003e Additional information to mark baseline across agents that have different:\n- - - `os` \u003c[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type)\u003e operating system name, like Windows, Mac, etc.\n- - - `device` \u003c[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type)\u003e device name, PC identifier, mobile identifier etc.\n- - - `viewport` \u003c[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type)\u003e viewport size.\n- `retryCount` \u003c[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)\u003e Maximum time to retry screenshot if case of diff\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisual-regression-tracker%2Fagent-playwright","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvisual-regression-tracker%2Fagent-playwright","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisual-regression-tracker%2Fagent-playwright/lists"}