{"id":15022467,"url":"https://github.com/percy/percy-playwright","last_synced_at":"2025-07-12T11:13:56.627Z","repository":{"id":37961158,"uuid":"419014937","full_name":"percy/percy-playwright","owner":"percy","description":"Playwright client library for visual testing with Percy","archived":false,"fork":false,"pushed_at":"2025-04-04T10:07:00.000Z","size":350,"stargazers_count":17,"open_issues_count":6,"forks_count":5,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-05T14:43:00.529Z","etag":null,"topics":["percy","percy-sdk","playwright","testing","visual-testing"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/percy.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":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-19T16:56:18.000Z","updated_at":"2024-11-20T12:31:50.000Z","dependencies_parsed_at":"2024-02-17T00:31:34.628Z","dependency_job_id":"23c82823-e4c3-487b-817e-e34f7408b615","html_url":"https://github.com/percy/percy-playwright","commit_stats":{"total_commits":151,"total_committers":10,"mean_commits":15.1,"dds":0.1920529801324503,"last_synced_commit":"f8cb7f4f6c153f8280ac833e7385bcdebc016377"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/percy%2Fpercy-playwright","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/percy%2Fpercy-playwright/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/percy%2Fpercy-playwright/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/percy%2Fpercy-playwright/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/percy","download_url":"https://codeload.github.com/percy/percy-playwright/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247353675,"owners_count":20925325,"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":["percy","percy-sdk","playwright","testing","visual-testing"],"created_at":"2024-09-24T19:57:59.793Z","updated_at":"2025-07-12T11:13:56.621Z","avatar_url":"https://github.com/percy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @percy/playwright\n[![Version](https://img.shields.io/npm/v/@percy/playwright.svg)](https://npmjs.org/package/@percy/playwright)\n![Test](https://github.com/percy/percy-playwright/workflows/Test/badge.svg)\n\n[Percy](https://percy.io) visual testing for Playwright.\n\n## Installation\n\n```sh-session\n$ npm install --save-dev @percy/cli @percy/playwright\n```\n\n## Usage\n\nThis is an example using the `percySnapshot` function. For other examples of `playwright`\nusage, see the [Playwright docs](https://playwright.dev/docs/library).\n\n```javascript\nconst { chromium } = require('playwright');\nconst percySnapshot = require('@percy/playwright');\n\n(async () =\u003e {\n  const browser = await chromium.launch();\n  const page = await browser.newPage();\n  await page.goto('http://example.com/', { waitUntil: 'networkidle2' });\n  await percySnapshot(page, 'Example Site');\n\n  await browser.close();\n})();\n```\n\nRunning the code above directly will result in the following logs:\n\n```sh-session\n$ node script.js\n[percy] Percy is not running, disabling snapshots\n```\n\nWhen running with [`percy\nexec`](https://github.com/percy/cli/tree/master/packages/cli-exec#percy-exec), and your project's\n`PERCY_TOKEN`, a new Percy build will be created and snapshots will be uploaded to your project.\n\n```sh-session\n$ export PERCY_TOKEN=[your-project-token]\n$ percy exec -- node script.js\n[percy] Percy has started!\n[percy] Created build #1: https://percy.io/[your-project]\n[percy] Running \"node script.js\"\n[percy] Snapshot taken \"Example Site\"\n[percy] Stopping percy...\n[percy] Finalized build #1: https://percy.io/[your-project]\n[percy] Done!\n```\n\n## Configuration\n\n`percySnapshot(page, name[, options])`\n\n- `page` (**required**) - A `playwright` page instance\n- `name` (**required**) - The snapshot name; must be unique to each snapshot\n- `options` - [See per-snapshot configuration options](https://www.browserstack.com/docs/percy/take-percy-snapshots/overview#per-snapshot-configuration)\n\n\n## Percy on Automate\n\n## Usage\n\n```javascript\nconst { chromium } = require('playwright');\nconst percyScreenshot = require('@percy/playwright');\n\nconst desired_cap = {\n  'browser': 'chrome',\n  'browser_version': 'latest',\n  'os': 'osx',\n  'os_version': 'ventura',\n  'name': 'Percy Playwright PoA Demo',\n  'build': 'percy-playwright-javascript-tutorial',\n  'browserstack.username': 'username',\n  'browserstack.accessKey': 'accesskey'\n};\n\n(async () =\u003e {\n  const cdpUrl = `wss://cdp.browserstack.com/playwright?caps=${encodeURIComponent(JSON.stringify(desired_cap))}`;\n  const browser = await chromium.connect(cdpUrl);\n  const page = await browser.newPage();\n  await page.goto(\"https://percy.io/\");\n  await percyScreenshot(page, 'Screenshot 1');\n\n  // Options for percyScreenshot\n  // await percyScreenshot(page, 'Screenshot 1', {\n  //   fullPage: true,\n  //   percyCSS: 'body { background: red; }',\n  //   ignoreRegionSelectors: ['#ignore-this'],\n  //   customIgnoreRegions: [{ top: 10, right: 10, bottom: 120, left: 10 }],\n  // });\n\n  await browser.close();\n})();\n```\n\n## Configuration\n\n`percyScreenshot(page, name[, options])`\n\n- `page` (**required**) - A `playwright` page instance\n- `name` (**required**) - The snapshot name; must be unique to each snapshot\n- `options` (**optional**) - There are various options supported by percyScreenshot to server further functionality.\n    - `sync` - Boolean value by default it falls back to `false`, Gives the processed result around screenshot [From CLI v1.28.8+]\n    - `fullPage` - Boolean value by default it falls back to `false`, Takes full page screenshot [From CLI v1.27.6+]\n    - `freezeAnimatedImage` - Boolean value by default it falls back to `false`, you can pass `true` and percy will freeze image based animations.\n    - `freezeImageBySelectors` - List of selectors. Images will be freezed which are passed using selectors. For this to work `freezeAnimatedImage` must be set to true.\n    - `freezeImageByXpaths` - List of xpaths. Images will be freezed which are passed using xpaths. For this to work `freezeAnimatedImage` must be set to true.\n    - `percyCSS` - Custom CSS to be added to DOM before the screenshot being taken. Note: This gets removed once the screenshot is taken.\n    - `ignoreRegionXpaths` - List of xpaths. elements in the DOM can be ignored using xpath\n    - `ignoreRegionSelectors` - List of selectors. elements in the DOM can be ignored using selectors.\n    - `customIgnoreRegions` - List of custom objects. elements can be ignored using custom boundaries. Just passing a simple object for it like below.\n      - example: ```{top: 10, right: 10, bottom: 120, left: 10}```\n      - In above example it will draw rectangle of ignore region as per given coordinates.\n        - `top` (int): Top coordinate of the ignore region.\n        - `bottom` (int): Bottom coordinate of the ignore region.\n        - `left` (int): Left coordinate of the ignore region.\n        - `right` (int): Right coordinate of the ignore region.\n    - `considerRegionXpaths` - List of xpaths. elements in the DOM can be considered for diffing and will be ignored by Intelli Ignore using xpaths.\n    - `considerRegionSelectors` - List of selectors. elements in the DOM can be considered for diffing and will be ignored by Intelli Ignore using selectors.\n    - `customConsiderRegions` - List of custom objects. elements can be considered for diffing and will be ignored by Intelli Ignore using custom boundaries\n      - example:  ```{top: 10, right: 10, bottom: 120, left: 10}```\n      - In above example it will draw rectangle of consider region will be drawn.\n      - Parameters:\n        - `top` (int): Top coordinate of the consider region.\n        - `bottom` (int): Bottom coordinate of the consider region.\n        - `left` (int): Left coordinate of the consider region.\n        - `right` (int): Right coordinate of the consider region.\n    - `regions` parameter that allows users to apply snapshot options to specific areas of the page. This parameter is an array where each object defines a custom region with configurations.\n      - Parameters:\n        - `elementSelector` (optional, only one of the following must be provided, if this is not provided then full page will be considered as region)\n            - `boundingBox` (object): Defines the coordinates and size of the region.\n              - `x` (number): X-coordinate of the region.\n              - `y` (number): Y-coordinate of the region.\n              - `width` (number): Width of the region.\n              - `height` (number): Height of the region.\n            - `elementXpath` (string): The XPath selector for the element.\n            - `elementCSS` (string): The CSS selector for the element.\n\n        - `algorithm` (mandatory)\n            - Specifies the snapshot comparison algorithm.\n            - Allowed values: `standard`, `layout`, `ignore`, `intelliignore`.\n\n        - `configuration` (required for `standard` and `intelliignore` algorithms, ignored otherwise)\n            - `diffSensitivity` (number): Sensitivity level for detecting differences.\n            - `imageIgnoreThreshold` (number): Threshold for ignoring minor image differences.\n            - `carouselsEnabled` (boolean): Whether to enable carousel detection.\n            - `bannersEnabled` (boolean): Whether to enable banner detection.\n            - `adsEnabled` (boolean): Whether to enable ad detection.\n\n         - `assertion` (optional)\n            - Defines assertions to apply to the region.\n            - `diffIgnoreThreshold` (number): The threshold for ignoring minor differences.\n\n### Example Usage for regions\n\n```\nconst obj1 = {\n  elementSelector: {\n    elementCSS: \".ad-banner\" \n  },\n  algorithm: \"intelliignore\", \n  configuration: {\n    diffSensitivity: 2,\n    imageIgnoreThreshold: 0.2,\n    carouselsEnabled: true,\n    bannersEnabled: true,\n    adsEnabled: true\n  },\n  assertion: {\n    diffIgnoreThreshold: 0.4,\n  }\n};\n\n// we can use the createRegion function\n\nconst { createRegion } = percySnapshot;\n\nconst obj2 = createRegion({\n  algorithm: \"intelliignore\",\n  diffSensitivity: 3,\n  adsEnabled: true,\n  diffIgnoreThreshold: 0.4\n});\n\npercySnapshot(page, \"Homepage 1\", { regions: [obj1] });\n```\n\n### Creating Percy on automate build\nNote: Automate Percy Token starts with `auto` keyword. The command can be triggered using `exec` keyword.\n```sh-session\n$ export PERCY_TOKEN=[your-project-token]\n$ percy exec -- [playwright test command]\n[percy] Percy has started!\n[percy] [Playwright example] : Starting automate screenshot ...\n[percy] Screenshot taken \"Playwright example\"\n[percy] Stopping percy...\n[percy] Finalized build #1: https://percy.io/[your-project]\n[percy] Done!\n```\n\nRefer to docs here: [Percy on Automate](https://www.browserstack.com/docs/percy/integrate/functional-and-visual)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpercy%2Fpercy-playwright","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpercy%2Fpercy-playwright","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpercy%2Fpercy-playwright/lists"}