Storybook-runner

.github/workflows/release.yml

@@ -29,7 +29,7 @@ jobs:
           git config --global user.name "WebdriverIO Release Bot"
 
       - name: 📦 Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
           version: 8
 

.github/workflows/tests.yml

@@ -48,7 +48,7 @@ jobs:
           ref: ${{ github.event.pull_request.head.sha }}
 
       - name: 📦 Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
           version: 8
 
@@ -59,7 +59,7 @@ jobs:
           cache: pnpm
 
       - name: 🧩 Install Dependencies
-        run: pnpm install
+        run: pnpm pnpm.install.workaround
 
       - name: 🏗️ Build
         working-directory: ./
@@ -90,7 +90,7 @@ jobs:
           ref: ${{ github.event.pull_request.head.sha }}
 
       - name: 📦 Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
           version: 8
 
@@ -101,7 +101,7 @@ jobs:
           cache: pnpm
 
       - name: 🧩 Install Dependencies
-        run: pnpm install
+        run: pnpm pnpm.install.workaround
 
       - name: 🏗️ Build
         working-directory: ./
@@ -154,7 +154,7 @@ jobs:
           ref: ${{ github.event.pull_request.head.sha }}
 
       - name: 📦 Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
           version: 8
 
@@ -165,7 +165,7 @@ jobs:
           cache: pnpm
 
       - name: 🧩 Install Dependencies
-        run: pnpm install
+        run: pnpm pnpm.install.workaround
 
       - name: 🏗️ Build
         working-directory: ./
@@ -218,7 +218,7 @@ jobs:
           ref: ${{ github.event.pull_request.head.sha }}
 
       - name: 📦 Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
           version: 8
 
@@ -229,7 +229,7 @@ jobs:
           cache: pnpm
 
       - name: 🧩 Install Dependencies
-        run: pnpm install
+        run: pnpm pnpm.install.workaround
 
       - name: 🏗️ Build
         working-directory: ./
@@ -282,7 +282,7 @@ jobs:
           ref: ${{ github.event.pull_request.head.sha }}
 
       - name: 📦 Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
           version: 8
 
@@ -293,7 +293,7 @@ jobs:
           cache: pnpm
 
       - name: 🧩 Install Dependencies
-        run: pnpm install
+        run: pnpm pnpm.install.workaround
 
       - name: 🏗️ Build
         working-directory: ./
@@ -346,7 +346,7 @@ jobs:
           ref: ${{ github.event.pull_request.head.sha }}
 
       - name: 📦 Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
           version: 8
 
@@ -357,7 +357,7 @@ jobs:
           cache: pnpm
 
       - name: 🧩 Install Dependencies
-        run: pnpm install
+        run: pnpm pnpm.install.workaround
 
       - name: 🏗️ Build
         working-directory: ./
@@ -410,7 +410,7 @@ jobs:
           ref: ${{ github.event.pull_request.head.sha }}
 
       - name: 📦 Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
           version: 8
 
@@ -421,7 +421,7 @@ jobs:
           cache: pnpm
 
       - name: 🧩 Install Dependencies
-        run: pnpm install
+        run: pnpm pnpm.install.workaround
 
       - name: 🏗️ Build
         working-directory: ./

README.md

@@ -15,7 +15,7 @@ For documentation on visual testing with WebdriverIO, please refer to the [docs]
 This 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
 
 ```ts
-export const config: Options.Testrunner = {
+export const config: WebdriverIO.Config = {
     // ...
     services: ["visual"],
     // ....
@@ -37,7 +37,7 @@ It will use Chrome in headless mode as the default browser.
 Service options can be provided like this
 
 ```ts
-export const config: Options.Testrunner = {
+export const config: WebdriverIO.Config  = {
     // ...
     services: [
       [

package.json

@@ -26,6 +26,7 @@
     "test.local.desktop.storybook": "wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --numShards=10 --url=https://govuk-react.github.io/govuk-react/ --skipStories=\"/.*(loading-box|spinner).*/\"",
     "test.local.desktop.storybook.localhost": "wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --numShards=10",
     "test.local.desktop.storybook.localhost.custom": "npm run test.local.desktop.storybook.localhost -- --skipStories='/example-page.*/gm' --spec='tests/specs/storybook-interaction/*.ts'",
+    "test.local.desktop.storybook.runner": "wdio tests/configs/wdio.local.desktop.storybook.runner.conf.ts",
     "test.ocr.local.desktop": "wdio tests/configs/wdio.ocr.local.desktop.conf.ts",
     "test.ocr.saucelabs.desktop": "SAUCE=true wdio tests/configs/wdio.ocr.saucelabs.conf.ts",
     "test.unit.coverage": "vitest --coverage",
@@ -36,46 +37,49 @@
     "test.saucelabs.desktop": "SAUCE_ENV=desktop wdio ./tests/configs/wdio.saucelabs.web.conf.ts",
     "test.saucelabs.emu.web": "SAUCE_ENV=emu wdio ./tests/configs/wdio.saucelabs.web.conf.ts",
     "test.saucelabs.sims.web": "SAUCE_ENV=sims wdio ./tests/configs/wdio.saucelabs.web.conf.ts",
+    "pnpm.install.workaround": "pnpm install --shamefully-hoist",
     "prepare": "husky",
     "watch": "pnpm run -r --parallel watch"
   },
   "dependencies": {
     "@wdio/visual-service": "workspace:^",
-    "@wdio/ocr-service": "workspace:^"
+    "@wdio/ocr-service": "workspace:^",
+    "@wdio/storybook-runner": "workspace:^"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.5",
+    "@changesets/cli": "^2.27.7",
     "@tsconfig/node20": "^20.1.4",
     "@types/eslint": "^8.56.10",
     "@types/jsdom": "~21.1.7",
     "@types/inquirer": "^9.0.7",
     "@types/xml2js": "~0.4.14",
-    "@typescript-eslint/eslint-plugin": "^7.13.1",
-    "@typescript-eslint/parser": "^7.13.1",
-    "@typescript-eslint/utils": "^7.13.1",
+    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "@typescript-eslint/parser": "^7.15.0",
+    "@typescript-eslint/utils": "^7.15.0",
     "@vitest/coverage-v8": "^1.6.0",
-    "@wdio/appium-service": "^8.39.0",
-    "@wdio/cli": "^8.39.0",
-    "@wdio/globals": "^8.39.0",
-    "@wdio/local-runner": "^8.39.0",
-    "@wdio/mocha-framework": "^8.39.0",
-    "@wdio/sauce-service": "^8.39.0",
-    "@wdio/shared-store-service": "^8.39.0",
-    "@wdio/spec-reporter": "^8.39.0",
-    "@wdio/types": "^8.39.0",
+    "@wdio/appium-service": "^9.0.0-alpha.351",
+    "@wdio/cli": "^9.0.0-alpha.351",
+    "@wdio/globals": "^9.0.0-alpha.351",
+    "@wdio/local-runner": "^9.0.0-alpha.351",
+    "@wdio/mocha-framework": "^9.0.0-alpha.351",
+    "@wdio/sauce-service": "^9.0.0-alpha.351",
+    "@wdio/shared-store-service": "^9.0.0-alpha.351",
+    "@wdio/spec-reporter": "^9.0.0-alpha.351",
+    "@wdio/storybook-runner": "workspace:^",
+    "@wdio/types": "^9.0.0-alpha.351",
     "eslint": "^8.57.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-unicorn": "^54.0.0",
-    "eslint-plugin-wdio": "^8.37.0",
+    "eslint-plugin-wdio": "^9.0.0-alpha.351",
     "husky": "^9.0.11",
     "jsdom": "^24.1.0",
-    "npm-run-all2": "^6.2.0",
-    "release-it": "^17.4.0",
+    "npm-run-all2": "^6.2.2",
+    "release-it": "^17.4.1",
     "rimraf": "^5.0.7",
     "saucelabs": "^7.5.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.5.2",
+    "typescript": "^5.5.3",
     "vitest": "^1.6.0",
-    "webdriverio": "^8.39.0"
+    "webdriverio": "^9.0.0-alpha.351"
   }
 }

packages/ocr-service/package.json

@@ -28,11 +28,11 @@
     "watch": "pnpm run build:tsc -w"
   },
   "dependencies": {
-    "@wdio/globals": "^8.39.0",
-    "@wdio/logger": "^8.38.0",
-    "@wdio/types": "^8.39.0",
+    "@wdio/globals": "^9.0.0-alpha.351",
+    "@wdio/logger": "^9.0.0-alpha.351",
+    "@wdio/types": "^9.0.0-alpha.351",
     "fuse.js": "^7.0.0",
-    "inquirer": "^9.2.23",
+    "inquirer": "^9.3.4",
     "jimp": "^0.22.12",
     "node-tesseract-ocr": "^2.2.1",
     "tesseract.js": "^5.1.0",

packages/ocr-service/src/service.ts

@@ -49,11 +49,11 @@ export default class WdioOcrService {
             log.info('Adding commands to global browser')
             await this.#addCommandsToBrowser(this._browser)
         } else {
-            await this.#extendMultiremoteBrowser(capabilities as Capabilities.MultiRemoteCapabilities)
+            await this.#extendMultiremoteBrowser(capabilities as Capabilities.RequestedMultiremoteCapabilities)
         }
     }
 
-    async #extendMultiremoteBrowser (capabilities: Capabilities.MultiRemoteCapabilities) {
+    async #extendMultiremoteBrowser (capabilities: Capabilities.RequestedMultiremoteCapabilities) {
         const browser = this._browser as WebdriverIO.MultiRemoteBrowser
         const browserNames = Object.keys(capabilities)
         const self = this

packages/storybook-runner/.npmignore

@@ -0,0 +1,4 @@
+tsconfig.json
+src
+tests
+*.tgz

packages/storybook-runner/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 OpenJS Foundation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/storybook-runner/README.md

@@ -0,0 +1,3 @@
+# WebdriverIO Storybook Runner
+
+> A WebdriverIO browser runner for easily running Storybook tests.

packages/storybook-runner/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@wdio/storybook-runner",
+  "author": "Wim Selles - wswebcreation",
+  "description": "A WebdriverIO browser runner to run Visual Testing on Storybook",
+  "version": "1.0.2",
+  "license": "MIT",
+  "homepage": "https://webdriver.io/docs/visual-testing",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/webdriverio/visual-testing.git"
+  },
+  "keywords": [
+    "webdriverio",
+    "visual",
+    "regression",
+    "image",
+    "comparison",
+    "storybook"
+  ],
+  "exports": "./dist/index.js",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "run-s clean build:*",
+    "build:tsc": "tsc --project ./tsconfig.json",
+    "clean": "rimraf coverage dist .tmp",
+    "watch": "pnpm run build:tsc -w"
+  },
+  "dependencies": {
+    "@wdio/globals": "^8.38.2",
+    "@wdio/local-runner": "^8.38.2",
+    "@wdio/logger": "^8.38.0",
+    "@wdio/types": "^8.38.2",
+    "@wdio/visual-service": "^5.1.0",
+    "node-fetch": "^3.3.2"
+  },
+  "devDependencies": {}
+}

packages/storybook-runner/src/constants.ts

@@ -0,0 +1,6 @@
+export const FRAMEWORK_SUPPORT_ERROR = 'Running Storybook in combination with the cucumber framework adapter is not supported.\nOnly Jasmine and Mocha are supported.'
+export const MULTIREMOTE_CAPABILITIES_ERROR = 'Running Storybook in combination with Multiremote is not supported.\nRemove your `capabilities` property from your config or assign an empty array to it like `capabilities: [],'
+
+export const V6_CLIP_SELECTOR = '#root > :first-child:not(script):not(style)'
+export const CLIP_SELECTOR = '#storybook-root > :first-child:not(script):not(style)'
+export const NUM_SHARDS = 1