{"id":28515040,"url":"https://github.com/percy/percy-selenium-js","last_synced_at":"2025-07-05T09:31:16.377Z","repository":{"id":36960916,"uuid":"208139657","full_name":"percy/percy-selenium-js","owner":"percy","description":"Selenium.js client library for visual regression testing with Percy","archived":false,"fork":false,"pushed_at":"2025-06-16T09:03:33.000Z","size":1258,"stargazers_count":2,"open_issues_count":5,"forks_count":2,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-06-18T01:04:28.383Z","etag":null,"topics":["percy","percy-sdk","selenium","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":"2019-09-12T20:21:34.000Z","updated_at":"2025-04-25T06:35:36.000Z","dependencies_parsed_at":"2024-02-06T12:58:48.767Z","dependency_job_id":"84cfd30d-6bb0-486d-93e4-1bbce19fcb00","html_url":"https://github.com/percy/percy-selenium-js","commit_stats":{"total_commits":276,"total_committers":6,"mean_commits":46.0,"dds":"0.12318840579710144","last_synced_commit":"33bf88642aed337fd3177e1cc5f1c484a087630e"},"previous_names":["percy/percy-seleniumjs"],"tags_count":33,"template":false,"template_full_name":null,"purl":"pkg:github/percy/percy-selenium-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/percy%2Fpercy-selenium-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/percy%2Fpercy-selenium-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/percy%2Fpercy-selenium-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/percy%2Fpercy-selenium-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/percy","download_url":"https://codeload.github.com/percy/percy-selenium-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/percy%2Fpercy-selenium-js/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260465925,"owners_count":23013449,"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","selenium","visual-testing"],"created_at":"2025-06-09T02:35:19.305Z","updated_at":"2025-07-05T09:31:16.363Z","avatar_url":"https://github.com/percy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @percy/selenium-webdriver\n[![Version](https://img.shields.io/npm/v/@percy/selenium-webdriver.svg)](https://npmjs.org/package/@percy/selenium-webdriver)\n![Test](https://github.com/percy/percy-selenium-js/workflows/Test/badge.svg)\n\n[Percy](https://percy.io) visual testing for [Selenium.js](https://www.npmjs.com/package/selenium-webdriver).\n\n## Installation\n\n```sh-session\n$ npm install --save-dev @percy/cli @percy/selenium-webdriver\n```\n\n## Usage\n\nThis is an example using the `percySnapshot` function. For other examples of `selenium-webdriver`\nusage, see the [Selenium JS docs](https://www.selenium.dev/selenium/docs/api/javascript/index.html).\n\n```javascript\nconst { Builder } = require('selenium-webdriver');\nconst percySnapshot = require('@percy/selenium-webdriver');\n\n(async function example() {\n  let driver = await new Builder().forBrowser('firefox').build();\n\n  try {\n    await driver.get('http://google.com/');\n    await percySnapshot(driver, 'Google Homepage');\n\n    await driver.get('http://example.com/');\n    await percySnapshot(driver, 'Example Site');\n  } finally {\n    await driver.quit();\n  }\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 \"Google Homepage\"\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(driver, name[, options])`\n\n- `driver` (**required**) - A `selenium-webdriver` driver 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## Upgrading\n\n### Automatically with `@percy/migrate`\n\nWe built a tool to help automate migrating to the new CLI toolchain! Migrating\ncan be done by running the following commands and following the prompts:\n\n``` shell\n$ npx @percy/migrate\n? Are you currently using @percy/selenium-webdriver (@percy/seleniumjs)? Yes\n? Install @percy/cli (required to run percy)? Yes\n? Migrate Percy config file? Yes\n? Upgrade SDK to @percy/selenium-webdriver@1.0.0? Yes\n```\n\nThis will automatically run the changes described below for you.\n\n### Manually\n\n#### Uninstalling `@percy/seleniumjs`\n\nIf you're coming from the `@percy/seleniumjs` package, make sure to uninstall that package first\nbefore installing this one.\n\n```sh-session\n$ npm uninstall @percy/seleniumjs\n```\n\nNow you can safely [install `@percy/selenium-webdriver` and `@percy/cli`](#installation).\n\n#### Installing `@percy/cli`\n\nIf you're coming from a pre-1.0 version of this package, make sure to install `@percy/cli` after\nupgrading to retain any existing scripts that reference the Percy CLI command.\n\n```sh-session\n$ npm install --save-dev @percy/cli\n```\n\n\n#### Migrating Config\n\nIf you have a previous Percy configuration file, migrate it to the newest version with the\n[`config:migrate`](https://github.com/percy/cli/tree/master/packages/cli-config#percy-configmigrate-filepath-output) command:\n\n```sh-session\n$ percy config:migrate\n```\n\n## Running Percy on Automate\n`percyScreenshot(driver, name, options)` [ needs @percy/cli 1.27.0-beta.0+ ];\n\nThis is an example test using the `percyScreenshot` method.\n\n```javascript\nconst { Builder } = require('selenium-webdriver');\nconst { percyScreenshot } = require('@percy/selenium-webdriver'); // both for selenium-webdriver/wdio\n\n(async function example() {\nconst driver = new webdriver.Builder().usingServer('https://hub-cloud.browserstack.com/wd/hub').withCapabilities(capabilities).build(); // pass automate capabilities\n\n  try {\n    await driver.get('http://google.com/');\n    await percyScreenshot(driver, 'Screenshot 1');\n\n    await driver.get('http://example.com/');\n    await percyScreenshot(driver, 'Screenshot 2');\n  } finally {\n    await driver.quit();\n  }\n})();\n```\n\n- `driver` (**required**) - A Selenium driver instance\n- `name` (**required**) - The screenshot name; must be unique to each screenshot\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.0-beta.0+]\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    - `ignoreRegionSeleniumElements` - List of selenium web-element. elements can be ignored using selenium_elements.\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    - `considerRegionSeleniumElements` - List of selenium web-element. elements can be considered for diffing and will be ignored by Intelli Ignore using selenium_elements.\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\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,obj2] });\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 -- [js test command]\n[percy] Percy has started!\n[percy] [Javascript example] : Starting automate screenshot ...\n[percy] Screenshot taken \"Javascript 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-selenium-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpercy%2Fpercy-selenium-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpercy%2Fpercy-selenium-js/lists"}