{"id":20560123,"url":"https://github.com/webdriverio/visual-testing","last_synced_at":"2026-03-15T20:55:22.837Z","repository":{"id":34644226,"uuid":"181739821","full_name":"webdriverio/visual-testing","owner":"webdriverio","description":"Image comparison / visual regression testing for WebdriverIO","archived":false,"fork":false,"pushed_at":"2026-01-08T21:03:28.000Z","size":1410545,"stargazers_count":150,"open_issues_count":19,"forks_count":60,"subscribers_count":14,"default_branch":"main","last_synced_at":"2026-01-12T16:44:35.136Z","etag":null,"topics":["testing","visual","wdio","webdriver","webdriverio"],"latest_commit_sha":null,"homepage":"https://webdriver.io/docs/visual-testing","language":"TypeScript","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/webdriverio.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"tidelift":"npm/webdriverio","open_collective":"webdriverio"}},"created_at":"2019-04-16T17:54:25.000Z","updated_at":"2025-12-23T06:55:06.000Z","dependencies_parsed_at":"2023-02-10T21:15:45.936Z","dependency_job_id":"b7639eba-9d08-43d8-a3ea-5be0692df416","html_url":"https://github.com/webdriverio/visual-testing","commit_stats":{"total_commits":327,"total_committers":13,"mean_commits":"25.153846153846153","dds":0.3302752293577982,"last_synced_commit":"9e10044c9393847f6685a1b4fe48975de2eb8174"},"previous_names":["wswebcreation/wdio-image-comparison-service","webdriverio-community/visual-testing"],"tags_count":162,"template":false,"template_full_name":null,"purl":"pkg:github/webdriverio/visual-testing","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdriverio%2Fvisual-testing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdriverio%2Fvisual-testing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdriverio%2Fvisual-testing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdriverio%2Fvisual-testing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webdriverio","download_url":"https://codeload.github.com/webdriverio/visual-testing/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdriverio%2Fvisual-testing/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28721975,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-24T08:27:05.734Z","status":"ssl_error","status_checked_at":"2026-01-24T08:27:01.197Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["testing","visual","wdio","webdriver","webdriverio"],"created_at":"2024-11-16T03:53:13.560Z","updated_at":"2026-01-24T09:01:31.180Z","avatar_url":"https://github.com/webdriverio.png","language":"TypeScript","readme":"# WebdriverIO Visual Testing 🔎 [![tests](https://github.com/webdriverio/visual-testing/actions/workflows/tests.yml/badge.svg)](https://github.com/webdriverio/visual-testing/actions/workflows/tests.yml) [![Build Status](https://app.eu-central-1.saucelabs.com/buildstatus/wdio-image-comparison-service)](https://app.eu-central-1.saucelabs.com/u/wdio-image-comparison-service)\n\nFor documentation on visual testing with WebdriverIO, please refer to the [docs](https://webdriver.io/docs/visual-testing). This project contains all relevant modules for running visual tests with WebdriverIO. Within the `./packages` directory you will find:\n\n-   `@wdio/visual-testing`: the WebdriverIO service for integrating visual testing\n-   `webdriver-image-comparison`: An image compare module that can be used for different NodeJS Test automation frameworks that support the WebDriver protocol\n\n## Storybook Runner (BETA)\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick to find out more documentation about the Storybook Runner BETA\u003c/summary\u003e\n\n\u003e Storybook Runner is still in BETA, the docs will later move to the [WebdriverIO](https://webdriver.io/docs/visual-testing) documentation pages.\n\nThis module now supports Storybook with a new Visual Runner. This runner automatically scans for a local/remote storybook instance and will create element screenshots of each component. This can be done by adding\n\n```ts\nexport const config: WebdriverIO.Config = {\n    // ...\n    services: [\"visual\"],\n    // ....\n};\n```\n\nto your `services` and running `npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook` through the command line.\nIt will use Chrome in headless mode as the default browser.\n\n\u003e [!NOTE]\n\u003e\n\u003e -   Most of the Visual Testing options will also work for the Storybook Runner, see the [WebdriverIO](https://webdriver.io/docs/visual-testing) documentation.\n\u003e -   The Storybook Runner will overwrite all your capabilities and can only run on the browsers that it supports, see [`--browsers`](#browsers).\n\u003e -   The Storybook Runner does not support an existing config that uses Multiremote capabilities and will throw an error.\n\u003e -   The Storybook Runner only supports Desktop Web, not Mobile Web.\n\n### Storybook Runner Service Options\n\nService options can be provided like this\n\n```ts\nexport const config: WebdriverIO.Config  = {\n    // ...\n    services: [\n      [\n        'visual',\n        {\n            // Some default options\n            baselineFolder: join(process.cwd(), './__snapshots__/'),\n            debug: true,\n            // The storybook options, see cli options for the description\n            storybook: {\n                additionalSearchParams: new URLSearchParams({foo: 'bar', abc: 'def'}),\n                clip: false,\n                clipSelector: ''#some-id,\n                numShards: 4,\n                // `skipStories` can be a string ('example-button--secondary'),\n                // an array (['example-button--secondary', 'example-button--small'])\n                // or a regex which needs to be provided as as string (\"/.*button.*/gm\")\n                skipStories: ['example-button--secondary', 'example-button--small'],\n                url: 'https://www.bbc.co.uk/iplayer/storybook/',\n                version: 6,\n                // Optional - Allows overriding the baselines path. By default it will group the baselines by category and component (e.g. forms/input/baseline.png)\n                getStoriesBaselinePath: (category, component) =\u003e `path__${category}__${component}`,\n            },\n        },\n      ],\n    ],\n    // ....\n}\n```\n\n### Storybook Runner CLI options\n\n#### `--additionalSearchParams`\n\n-   **Type:** `string`\n-   **Mandatory:** No\n-   **Default:** ''\n-   **Example:** `npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --additionalSearchParams=\"foo=bar\u0026abc=def\"`\n\nIt will add additional search parameters to the Storybook URL.\nSee the [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) documentation for more information. The string must be a valid URLSearchParams string.\n\n\u003e [!NOTE]\n\u003e The double quotes are needed to prevent the `\u0026` from being interpreted as a command separator.\n\u003e For example with `--additionalSearchParams=\"foo=bar\u0026abc=def\"` it will generate the following Storybook URL for stories test: `http://storybook.url/iframe.html?id=story-id\u0026foo=bar\u0026abc=def`.\n\n#### `--browsers`\n\n-   **Type:** `string`\n-   **Mandatory:** No\n-   **Default:** `chrome`, you can select from `chrome|firefox|edge|safari`\n-   **Example:** `npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --browsers=chrome,firefox,edge,safari`\n-   **NOTE:** Only available through the CLI\n\nIt will use the provided browsers to take component screenshots\n\n\u003e [!NOTE]\n\u003e Make sure you have the browsers you want to run on installed on your local machine\n\n#### `--clip`\n\n-   **Type:** `boolean`\n-   **Mandatory:** No\n-   **Default:** `true`\n-   **Example:** `npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --clip=false`\n\nWhen disabled it will create a viewport screenshot. When enabled it will create element screenshots based on the [`--clipSelector`](#clipselector) which will reduce the amount of whitespace around the component screenshot and reduce the screenshot size.\n\n#### `--clipSelector`\n\n-   **Type:** `string`\n-   **Mandatory:** No\n-   **Default:** `#storybook-root \u003e :first-child` for Storybook V7 and `#root \u003e :first-child:not(script):not(style)` for Storybook V6, see also [`--version`](#version)\n-   **Example:** `npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --clipSelector=\"#some-id\"`\n\nThis is the selector that will be used:\n\n-   to select the element to take the screenshot of\n-   for the element to wait to be visible before a screenshot is taken\n\n#### `--devices`\n\n-   **Type:** `string`\n-   **Mandatory:** No\n-   **Default:** You can select from the [`deviceDescriptors.ts`](./packages/service/src/storybook/deviceDescriptors.ts)\n-   **Example:** `npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --devices=\"iPhone 14 Pro Max\",\"Pixel 3 XL\"`\n-   **NOTE:** Only available through the CLI\n\nIt will use the provided devices that match the [`deviceDescriptors.ts`](./packages/service/src/storybook/deviceDescriptors.ts) to take component screenshots\n\n\u003e [!NOTE]\n\u003e\n\u003e -   If you miss a device config, then feel free to submit a [Feature request](https://github.com/webdriverio/visual-testing/issues/new?assignees=\u0026labels=\u0026projects=\u0026template=--feature-request.md)\n\u003e -   This will only work with Chrome:\n\u003e     -   if you provide `--devices` then all Chrome instances will run in **Mobile Emulation** mode\n\u003e     -   if you also provide other browser then Chrome, like `--devices --browsers=firefox,safari,edge` it will automatically add Chrome in Mobile emulation mode\n\u003e -   The Storybook Runner will by default create element snapshots, if you want to see the complete Mobile Emulated screenshot then provide `--clip=false` through the command line\n\u003e -   The file name will for example look like `__snapshots__/example/button/desktop_chrome/example-button--large-local-chrome-iPhone-14-Pro-Max-430x932-dpr-3.png`\n\u003e -   **[SRC:](https://chromedriver.chromium.org/mobile-emulation#h.p_ID_167)** Testing a mobile website on a desktop using mobile emulation can be useful, but testers should be aware that there are many subtle differences such as:\n\u003e     -   entirely different GPU, which may lead to big performance changes;\n\u003e     -   mobile UI is not emulated (in particular, the hiding url bar affects page height);\n\u003e     -   disambiguation popup (where you select one of a few touch targets) is not supported;\n\u003e     -   many hardware APIs (for example, orientationchange event) are unavailable.\n\n#### `--headless`\n\n-   **Type:** `boolean`\n-   **Mandatory:** No\n-   **Default:** `true`\n-   **Example:** `npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --headless=false`\n-   **NOTE:** Only available through the CLI\n\nThis will run the tests by default in headless mode (when the browser supports it) or can be disabled\n\n#### `--numShards`\n\n-   **Type:** `number`\n-   **Mandatory:** No\n-   **Default:** `true`\n-   **Example:** `npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --numShards=10`\n\nThis will be the number of parallel instances that will be used to run the stories. This will be limited by the `maxInstances` in your `wdio.conf`-file.\n\n\u003e [!IMPORTANT]\n\u003e When running in `headless`-mode then do not increase the number to more than 20 to prevent flakiness due to resource restrictions\n\n#### `--skipStories`\n\n-   **Type:** `string|regex`\n-   **Mandatory:** No\n-   **Default:** null\n-   **Example:** `npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --skipStories=\"/.*button.*/gm\"`\n\nThis can be:\n\n-   a string (`example-button--secondary,example-button--small`)\n-   or a regex (`\"/.*button.*/gm\"`)\n\nto skip certain stories. Use the `id` of the story that can be found in the URL of the story. For example, the `id` in this URL `http://localhost:6006/?path=/story/example-page--logged-out` is `example-page--logged-out`\n\n#### `--url`\n\n-   **Type:** `string`\n-   **Mandatory:** No\n-   **Default:** `http://127.0.0.1:6006`\n-   **Example:** `npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --url=\"https://example.com\"`\n\nThe URL where your Storybook instance is hosted.\n\n#### `--version`\n\n-   **Type:** `number`\n-   **Mandatory:** No\n-   **Default:** 7\n-   **Example:** `npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --version=6`\n\nThis is the version of Storybook, it defaults to `7`. This is needed to know if the V6 [`clipSelector`](#clipselector) needs to be used.\n\n### Storybook Interaction Testing\n\nStorybook Interaction Testing allows you to interact with your component by creating custom scripts with WDIO commands to set a component into a certain state. For example, see the code snippet below:\n\n```ts\nimport { browser, expect } from \"@wdio/globals\";\n\ndescribe(\"Storybook Interaction\", () =\u003e {\n    it(\"should create screenshots for the logged in state when it logs out\", async () =\u003e {\n        const componentId = \"example-page--logged-in\";\n        await browser.waitForStorybookComponentToBeLoaded({ id: componentId });\n\n        await expect($(\"header\")).toMatchElementSnapshot(\n            `${componentId}-logged-in-state`\n        );\n        await $(\"button=Log out\").click();\n        await expect($(\"header\")).toMatchElementSnapshot(\n            `${componentId}-logged-out-state`\n        );\n    });\n\n    it(\"should create screenshots for the logged out state when it logs in\", async () =\u003e {\n        const componentId = \"example-page--logged-out\";\n        await browser.waitForStorybookComponentToBeLoaded({ id: componentId });\n\n        await expect($(\"header\")).toMatchElementSnapshot(\n            `${componentId}-logged-out-state`\n        );\n        await $(\"button=Log in\").click();\n        await expect($(\"header\")).toMatchElementSnapshot(\n            `${componentId}-logged-in-state`\n        );\n    });\n});\n```\n\nTwo tests on two different components are executed. Each test first sets a state and then takes a screenshot. You will also notice that a new custom command has been introduced, which can be found [here](#new-custom-command).\n\nThe above spec file can be saved in a folder and added to the command line with the following command:\n\n```sh\npnpm run test.local.desktop.storybook.localhost -- --spec='tests/specs/storybook-interaction/*.ts'\n```\n\nThe Storybook runner will first automatically scan your Storybook instance and then add your tests to the stories that need to be compared. If you don't want the components that you use for interaction testing to be compared twice, you can add a filter to remove the \"default\" stories from the scan by providing the [`--skipStories`](#--skipstories) filter. This would look like this:\n\n```sh\npnpm run test.local.desktop.storybook.localhost -- --skipStories=\"/example-page.*/gm\" --spec='tests/specs/storybook-interaction/*.ts'\n```\n\n### New Custom Command\n\nA new custom command called `browser.waitForStorybookComponentToBeLoaded({ id: 'componentId' })` will be added to the `browser/driver`-object that will automatically load the component and wait for it to be done, so you don't need to use the `browser.url('url.com')` method. It can be used like this\n\n```ts\nimport { browser, expect } from \"@wdio/globals\";\n\ndescribe(\"Storybook Interaction\", () =\u003e {\n    it(\"should create screenshots for the logged in state when it logs out\", async () =\u003e {\n        const componentId = \"example-page--logged-in\";\n        await browser.waitForStorybookComponentToBeLoaded({ id: componentId });\n\n        await expect($(\"header\")).toMatchElementSnapshot(\n            `${componentId}-logged-in-state`\n        );\n        await $(\"button=Log out\").click();\n        await expect($(\"header\")).toMatchElementSnapshot(\n            `${componentId}-logged-out-state`\n        );\n    });\n\n    it(\"should create screenshots for the logged out state when it logs in\", async () =\u003e {\n        const componentId = \"example-page--logged-out\";\n        await browser.waitForStorybookComponentToBeLoaded({ id: componentId });\n\n        await expect($(\"header\")).toMatchElementSnapshot(\n            `${componentId}-logged-out-state`\n        );\n        await $(\"button=Log in\").click();\n        await expect($(\"header\")).toMatchElementSnapshot(\n            `${componentId}-logged-in-state`\n        );\n    });\n});\n```\n\nThe options are:\n\n#### `additionalSearchParams`\n\n-   **Type:** [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)\n-   **Mandatory:** No\n-   **Default:** `new URLSearchParams()`\n-   **Example:**\n\n```ts\nawait browser.waitForStorybookComponentToBeLoaded({\n    additionalSearchParams: new URLSearchParams({ foo: \"bar\", abc: \"def\" }),\n    id: \"componentId\",\n});\n```\n\nThis will add additional search parameters to the Storybook URL, in the example above the URL will be `http://storybook.url/iframe.html?id=story-id\u0026foo=bar\u0026abc=def`.\nSee the [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) documentation for more information.\n\n#### `clipSelector`\n\n-   **Type:** `string`\n-   **Mandatory:** No\n-   **Default:** `#storybook-root \u003e :first-child` for Storybook V7 and `#root \u003e :first-child:not(script):not(style)` for Storybook V6\n-   **Example:**\n\n```ts\nawait browser.waitForStorybookComponentToBeLoaded({\n    clipSelector: \"#your-selector\",\n    id: \"componentId\",\n});\n```\n\nThis is the selector that will be used:\n\n-   to select the element to take the screenshot of\n-   for the element to wait to be visible before a screenshot is taken\n\n#### `id`\n\n-   **Type:** `string`\n-   **Mandatory:** yes\n-   **Example:**\n\n```ts\nawait browser.waitForStorybookComponentToBeLoaded({ '#your-selector', id: 'componentId' })\n```\n\nUse the `id` of the story that can be found in the URL of the story. For example, the `id` in this URL `http://localhost:6006/?path=/story/example-page--logged-out` is `example-page--logged-out`\n\n#### `timeout`\n\n-   **Type:** `number`\n-   **Mandatory:** No\n-   **Default:** 1100 milliseconds\n-   **Example:**\n\n```ts\nawait browser.waitForStorybookComponentToBeLoaded({\n    id: \"componentId\",\n    timeout: 20000,\n});\n```\n\nThe max timeout we want to wait for a component to be visible after loading on the page\n\n#### `url`\n\n-   **Type:** `string`\n-   **Mandatory:** No\n-   **Default:** `http://127.0.0.1:6006`\n-   **Example:**\n\n```ts\nawait browser.waitForStorybookComponentToBeLoaded({\n    id: \"componentId\",\n    url: \"https://your.url\",\n});\n```\n\nThe URL where your Storybook instance is hosted.\n\n\u003c/details\u003e\n\n## Contributing\n\n### Updating the packages\n\nYou can update the packages with a simple CLI tool. Make sure you've installed all dependencies, you can then run\n\n```sh\npnpm update.packages\n```\n\nThis will trigger a CLI that will ask you the following questions\n\n```logs\n==========================\n🤖 Package update Wizard 🧙\n==========================\n\n? Which version target would you like to update to? (Minor|Latest)\n? Do you want to update the package.json files? (Y/n)\n? Do you want to remove all \"node_modules\" and reinstall dependencies? (Y/n)\n? Would you like reinstall the dependencies? (Y/n)\n```\n\nThis will result in the following logs\n\n\u003cdetails\u003e\n    \u003csummary\u003eOpen to see an example of the logs\u003c/summary\u003e\n    \n```logs\n==========================\n🤖 Package update Wizard 🧙\n==========================\n\n? Which version target would you like to update to? Minor\n? Do you want to update the package.json files? yes\nUpdating root 'package.json' for minor updates...\nUpdating packages for minor updates in /Users/wswebcreation/Git/wdio/visual-testing...\nUsing pnpm\nUpgrading /Users/wswebcreation/Git/wdio/visual-testing/package.json\n[====================] 38/38 100%\n\n@typescript-eslint/eslint-plugin ^8.7.0 → ^8.8.0\n@typescript-eslint/parser ^8.7.0 → ^8.8.0\n@typescript-eslint/utils ^8.7.0 → ^8.8.0\n@vitest/coverage-v8 ^2.1.1 → ^2.1.2\nvitest ^2.1.1 → ^2.1.2\n\nRun pnpm install to install new versions.\nUpdating packages for minor updates in /Users/wswebcreation/Git/wdio/visual-testing/packages/ocr-service...\nUsing pnpm\nUpgrading /Users/wswebcreation/Git/wdio/visual-testing/packages/ocr-service/package.json\n[====================] 11/11 100%\n\nAll dependencies match the minor package versions :)\nUpdating packages for minor updates in /Users/wswebcreation/Git/wdio/visual-testing/packages/visual-reporter...\nUsing pnpm\nUpgrading /Users/wswebcreation/Git/wdio/visual-testing/packages/visual-reporter/package.json\n[====================] 11/11 100%\n\neslint-config-next 14.2.13 → 14.2.14\nnext 14.2.13 → 14.2.14\n\nRun pnpm install to install new versions.\nUpdating packages for minor updates in /Users/wswebcreation/Git/wdio/visual-testing/packages/visual-service...\nUsing pnpm\nUpgrading /Users/wswebcreation/Git/wdio/visual-testing/packages/visual-service/package.json\n[====================] 5/5 100%\n\nAll dependencies match the minor package versions :)\nUpdating packages for minor updates in /Users/wswebcreation/Git/wdio/visual-testing/packages/webdriver-image-comparison...\nUsing pnpm\nUpgrading /Users/wswebcreation/Git/wdio/visual-testing/packages/webdriver-image-comparison/package.json\n[====================] 8/8 100%\n\nAll dependencies match the minor package versions :)\n? Do you want to remove all \"node_modules\" and reinstall dependencies? yes\nRemoving root dependencies in /Users/wswebcreation/Git/wdio/visual-testing...\nRemoving dependencies in ocr-service...\nRemoving dependencies in visual-reporter...\nRemoving dependencies in visual-service...\nRemoving dependencies in webdriver-image-comparison...\n? Would you like reinstall the dependencies? yes\nInstalling dependencies in /Users/wswebcreation/Git/wdio/visual-testing...\n\n\u003e @wdio/visual-testing-monorepo@ pnpm.install.workaround /Users/wswebcreation/Git/wdio/visual-testing\n\u003e pnpm install --shamefully-hoist\n\nScope: all 5 workspace projects\nLockfile is up to date, resolution step is skipped\nPackages: +1274\n++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++\nProgress: resolved 1274, reused 1265, downloaded 0, added 1274, done\n\ndependencies:\n\n-   @wdio/ocr-service 2.0.0 \u003c- packages/ocr-service\n-   @wdio/visual-service 6.0.0 \u003c- packages/visual-service\n\ndevDependencies:\n\n-   @changesets/cli 2.27.8\n-   @inquirer/prompts 5.5.0\n-   @tsconfig/node20 20.1.4\n-   @types/eslint 9.6.1\n-   @types/jsdom 21.1.7\n-   @types/node 20.16.4\n-   @types/react 18.3.5\n-   @types/react-dom 18.3.0\n-   @types/xml2js 0.4.14\n-   @typescript-eslint/eslint-plugin 8.8.0\n-   @typescript-eslint/parser 8.8.0\n-   @typescript-eslint/utils 8.8.0\n-   @vitest/coverage-v8 2.1.2\n-   @wdio/appium-service 9.1.2\n-   @wdio/cli 9.1.2\n-   @wdio/globals 9.1.2\n-   @wdio/local-runner 9.1.2\n-   @wdio/mocha-framework 9.1.2\n-   @wdio/sauce-service 9.1.2\n-   @wdio/shared-store-service 9.1.2\n-   @wdio/spec-reporter 9.1.2\n-   @wdio/types 9.1.2\n-   eslint 9.11.1\n-   eslint-plugin-import 2.30.0\n-   eslint-plugin-unicorn 55.0.0\n-   eslint-plugin-wdio 9.0.8\n-   husky 9.1.6\n-   jsdom 25.0.1\n-   pnpm-run-all2 6.2.3\n-   release-it 17.6.0\n-   rimraf 6.0.1\n-   saucelabs 8.0.0\n-   ts-node 10.9.2\n-   typescript 5.6.2\n-   vitest 2.1.2\n-   webdriverio 9.1.2\n\n. prepare$ husky\n└─ Done in 204ms\nDone in 9.5s\nAll packages updated!\n\n````\n\n\u003c/details\u003e\n\n### Questions\n\nPlease join our [Discord](https://discord.webdriver.io) Server if you have any questions or issues contributing to this project. Catch us contributors in the `🙏-contributing` channel.\n\n### Issues\n\nIf you have questions, bugs or feature requests, please file an issue. Before submitting an issue, please search the issue archive to help reduce duplicates, and read the [FAQ](https://webdriver.io/docs/visual-testing/faq/).\n\nIf you can't find it there you can submit an issue where you can submit:\n\n-   🐛**Bug report**: Create a report to help us improve\n-   📖**Documentation**: Suggest improvements or report missing/unclear documentation.\n-   💡**Feature request**: Suggest an idea for this module.\n-   💬**Question**: Ask questions.\n\n### Development Workflow\n\nTo create a PR for this project and start contributing follow this step-by-step guide:\n\n-   Fork the project.\n-   Clone the project somewhere on your computer\n\n    ```sh\n    $ git clone https://github.com/webdriverio/visual-testing.git\n    ```\n\n-   Go to the directory and setup the project\n\n    ```sh\n    $ cd visual-testing\n    $ corepack enable\n    $ pnpm pnpm.install.workaround\n    ```\n\n-   Run the watch mode that will automatically transpile the code\n\n    ```sh\n    $ pnpm watch\n    ```\n\n    to build the project, run:\n\n    ```sh\n    $ pnpm build\n    ```\n\n-   Ensure that your changes don't break any tests, run:\n\n    ```sh\n    $ pnpm test\n    ```\n\nThis project uses [changesets](https://github.com/changesets/changesets) to automatically create changelogs and releases.\n\n### Testing\n\nSeveral tests need to be executed to be able to test the module. When adding a PR all tests must at least pass the local tests. Each PR is automatically tested against Sauce Labs, see [our GitHub Actions pipeline](https://github.com/webdriverio/visual-testing/actions/workflows/tests.yml). Before approving a PR the core contributors will test the PR against emulators/simulators / real devices.\n\n#### Local Testing\n\nFirst, a local baseline needs to be created. This can be done with:\n\n```sh\n// With the webdriver protocol\n$ pnpm run test.local.init\n````\n\nThis command will create a folder called `localBaseline` that will hold all the baseline images.\n\nThen run:\n\n```sh\n// With the webdriver protocol\npnpm run test.local.desktop\n```\n\nThis will run all tests on a local machine on Chrome.\n\n#### Local Storybook Runner Testing (Beta)\n\nFirst, a local baseline needs to be created. This can be done with:\n\n```sh\npnpm run test.local.desktop.storybook\n```\n\nThis will Storybook tests with Chrome in headless mode against a Demo Storybook repo located at https://govuk-react.github.io/govuk-react/.\n\nTo run the tests with more browsers you can run\n\n```sh\npnpm run test.local.desktop.storybook -- --browsers=chrome,firefox,edge,safari\n```\n\n\u003e [!NOTE]\n\u003e Make sure you have the browsers you want to run on installed on your local machine\n\n#### CI testing with Sauce Labs (not needed for a PR)\n\nThe command below is used to test the build on GitHub Actions, it can only be used there and not for local development.\n\n```\n$ pnpm run test.saucelabs\n```\n\nIt will test against a lot of configurations that can be found [here](./tests/configs/wdio.saucelabs.web.conf.ts).\nAll PRs are automatically checked against Sauce Labs.\n\n## Releasing\n\nTo release a version of any of the packages listed above, do the following:\n\n-   trigger the [release pipeline](https://github.com/webdriverio/visual-testing/actions/workflows/release.yml)\n-   a release PR is generated, have this be reviewed and approved by another WebdriverIO member\n-   merge the PR\n-   trigger the [release pipeline](https://github.com/webdriverio/visual-testing/actions/workflows/release.yml) again\n-   a new version should be released 🎉\n\n## Credits\n\n`@wdio/visual-testing` uses an open-source license from [LambdaTest](https://www.lambdatest.com/) and [Sauce Labs](https://saucelabs.com/).\n","funding_links":["https://tidelift.com/funding/github/npm/webdriverio","https://opencollective.com/webdriverio"],"categories":["Plugins"],"sub_categories":["Services"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebdriverio%2Fvisual-testing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebdriverio%2Fvisual-testing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebdriverio%2Fvisual-testing/lists"}