@wdio/visual-service 3.1.0 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,117 @@
 # @wdio/visual-service
 
+## 4.0.0
+
+### Major Changes
+
+- b717d9a: # 💥 Breaking changes
+
+  - the new element screenshot is producing "smaller" screenshots on certain Android OS versions (not all), but it's more "accurate" so we accept this
+
+  # 🚀 New Features
+
+  ## Add StoryBook📖 support
+
+  Automatically scan local/remote storybook instances to create element screenshots of each component by adding
+
+  ```ts
+  export const config: Options.Testrunner = {
+    // ...
+    services: ["visual"],
+    // ....
+  };
+  ```
+
+  to your `services` and running `npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook` through the command line.
+  It will automatically use Chrome. The following options can be provided through the command line
+
+  - `--headless`, defaults to `true`
+  - `--numShards {number}`, this will be the amount of parallel instances that will be used to run the stories. This will be limited by the `maxInstances` in your `wdio.conf`-file. When running in `headless`-mode then do not increase the number to more than 20 to prevent flakiness
+  - `--clip {boolean}`, try to take an element instead of a viewport screenshot, defaults to `true`
+  - `--clipSelector {string}`, this is the selector that will be used to:
+
+    - select the element to take the screenshot of
+    - the element to wait for to be visible before a screenshot is taken
+
+    defaults to `#storybook-root > :first-child` for V7 and `#root > :first-child:not(script):not(style)` for V6
+
+  - `--version`, the version of storybook, defaults to 7. This is needed to know if the V6 `clipSelector` needs to be used.
+  - `--browsers {edge,chrome,safari,firefox}`, defaults to Chrome
+  - `--skipStories`, this can be:
+    - a string (`example-button--secondary,example-button--small`)
+    - or a regex (`"/.*button.*/gm"`) to skip certain stories
+
+  You can also provide service options
+
+  ```ts
+  export const config: Options.Testrunner = {
+      // ...
+      services: [
+        [
+          'visual',
+          {
+              // Some default options
+              baselineFolder: join(process.cwd(), './__snapshots__/'),
+              debug: true,
+              // The storybook options
+              storybook: {
+                  clip: false,
+                  clipSelector: ''#some-id,
+                  numShards: 4,
+                  skipStories: ['example-button--secondary', 'example-button--small'],
+                  url: 'https://www.bbc.co.uk/iplayer/storybook/',
+                  version: 6,
+              },
+          },
+        ],
+      ],
+      // ....
+  }
+  ```
+
+  The baseline images will be stored in the following structure:
+
+  ```log
+  {projectRoot}
+  |_`__snapshots__`
+    |_`{category}`
+      |_`{componentName}`
+        |_{browserName}
+          |_`{{component-id}-element-{browser}-{resolution}-dpr-{dprValue}}.png`
+  ```
+
+  which will look like this
+
+  ![image](https://github.com/webdriverio/visual-testing/assets/11979740/7c41a8b4-2498-4e85-be11-cb1ec601b760)
+
+  > [!NOTE]
+  > Storybook 6.5 or higher is supported
+
+  # 💅 Polish
+
+  - `hideScrollBars` is disabled by default when using the Storybook runner
+  - By default, all element screenshots in the browser, except for iOS, will use the native method to take element screenshots. This will make taking an element screenshot more than 5% faster. If it fails it will fall back to the "viewport" screenshot and create a cropped element screenshot.
+  - Taking an element screenshot becomes 70% faster due to removing the fixed scroll delay of 500ms and changing the default scrolling behaviour to an instant scroll
+  - refactor web element screenshots and update the screenshots
+  - added more UTs to increase the coverage
+
+  # 🐛 Bug Fixes
+
+  - When the element has no height or width, we default to the viewport screen size to prevent not cropping any screenshot. An error like below will be logged in red
+
+  ```logs
+
+  The element has no width or height. We defaulted to the viewport screen size of width: ${width} and height: ${height}.
+
+  ```
+
+  - There were cases where element screenshots were automatically rotated which was not intended
+
+### Patch Changes
+
+- Updated dependencies [b717d9a]
+  - webdriver-image-comparison@5.0.0
+
 ## 3.1.0
 
 ### Minor Changes

package/dist/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const V6_CLIP_SELECTOR = "#root > :first-child:not(script):not(style)";
+export declare const CLIP_SELECTOR = "#storybook-root > :first-child:not(script):not(style)";
+export declare const NUM_SHARDS = 1;
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,gDAAgD,CAAA;AAC7E,eAAO,MAAM,aAAa,0DAA0D,CAAA;AACpF,eAAO,MAAM,UAAU,IAAI,CAAA"}

package/dist/constants.js

@@ -0,0 +1,3 @@
+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;

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="./expect-webdriverio.js" />
 import type { WicElement } from 'webdriver-image-comparison/dist/commands/element.interfaces.js';
 import WdioImageComparisonService from './service.js';
+import VisualLauncher from './storybook/launcher.js';
 import type { Output, Result, WdioCheckFullPageMethodOptions, WdioSaveFullPageMethodOptions, WdioSaveElementMethodOptions, WdioSaveScreenMethodOptions, WdioCheckElementMethodOptions, WdioCheckScreenMethodOptions } from './types.js';
 declare global {
     namespace WebdriverIO {
@@ -84,4 +85,5 @@ declare global {
     }
 }
 export default WdioImageComparisonService;
+export declare const launcher: typeof VisualLauncher;
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gEAAgE,CAAA;AAChG,OAAO,0BAA0B,MAAM,cAAc,CAAA;AACrD,OAAO,KAAK,EACR,MAAM,EACN,MAAM,EACN,8BAA8B,EAC9B,6BAA6B,EAC7B,4BAA4B,EAC5B,2BAA2B,EAC3B,6BAA6B,EAC7B,4BAA4B,EAC/B,MAAM,YAAY,CAAA;AAEnB,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,WAAW,CAAC;QAClB,UAAU,OAAO;YACb;;eAEG;YACH,WAAW,CACP,OAAO,EAAE,UAAU,EACnB,GAAG,EAAE,MAAM,EACX,kBAAkB,CAAC,EAAE,4BAA4B,GAClD,OAAO,CAAC,MAAM,CAAC,CAAC;YAEnB;;eAEG;YACH,UAAU,CACN,GAAG,EAAE,MAAM,EACX,iBAAiB,CAAC,EAAE,2BAA2B,GAChD,OAAO,CAAC,MAAM,CAAC,CAAC;YAEnB;;eAEG;YACH,kBAAkB,CACd,GAAG,EAAE,MAAM,EACX,yBAAyB,CAAC,EAAE,6BAA6B,GAC1D,OAAO,CAAC,MAAM,CAAC,CAAC;YAEnB;;eAEG;YACH,gBAAgB,CACZ,GAAG,EAAE,MAAM,EACX,mBAAmB,CAAC,EAAE,6BAA6B,GACpD,OAAO,CAAC,MAAM,CAAC,CAAC;YAEnB;;eAEG;YACH,YAAY,CACR,OAAO,EAAE,UAAU,EACnB,GAAG,EAAE,MAAM,EACX,mBAAmB,CAAC,EAAE,6BAA6B,GACpD,OAAO,CAAC,MAAM,CAAC,CAAC;YAEnB;;eAEG;YACH,WAAW,CACP,GAAG,EAAE,MAAM,EACX,kBAAkB,CAAC,EAAE,4BAA4B,GAClD,OAAO,CAAC,MAAM,CAAC,CAAC;YAEnB;;eAEG;YACH,mBAAmB,CACf,GAAG,EAAE,MAAM,EACX,oBAAoB,CAAC,EAAE,8BAA8B,GACtD,OAAO,CAAC,MAAM,CAAC,CAAC;YAEnB;;eAEG;YACH,iBAAiB,CACb,GAAG,EAAE,MAAM,EACX,oBAAoB,CAAC,EAAE,8BAA8B,GACtD,OAAO,CAAC,MAAM,CAAC,CAAC;SACtB;QACD,UAAU,OAAO;SAAG;QACpB,UAAU,YAAY;YAClB,kBAAkB,CAAC,EAAC;gBAChB,OAAO,CAAC,EAAE,MAAM,CAAC;aACpB,CAAA;SACJ;KACJ;IAED,UAAU,iBAAiB,CAAC;QAGxB,UAAU,QAAQ,CAAC,CAAC,EAAE,CAAC;YACnB;;;;;eAKG;YACH,qBAAqB,CACjB,GAAG,EAAE,MAAM,EACX,cAAc,CAAC,EAAE,MAAM,GAAG,iBAAiB,CAAC,cAAc,EAC1D,OAAO,CAAC,EAAE,4BAA4B,GACvC,CAAC,CAAA;YACJ,qBAAqB,CACjB,GAAG,EAAE,MAAM,EACX,OAAO,CAAC,EAAE,4BAA4B,GACvC,CAAC,CAAA;YACJ;;;;;eAKG;YACH,uBAAuB,CACnB,GAAG,EAAE,MAAM,EACX,cAAc,CAAC,EAAE,MAAM,GAAG,iBAAiB,CAAC,cAAc,EAC1D,OAAO,CAAC,EAAE,8BAA8B,GACzC,CAAC,CAAA;YACJ,uBAAuB,CACnB,GAAG,EAAE,MAAM,EACX,OAAO,CAAC,EAAE,8BAA8B,GACzC,CAAC,CAAA;YACJ;;;;;eAKG;YACH,sBAAsB,CAClB,GAAG,EAAE,MAAM,EACX,cAAc,CAAC,EAAE,MAAM,GAAG,iBAAiB,CAAC,cAAc,EAC1D,OAAO,CAAC,EAAE,6BAA6B,GACxC,CAAC,CAAA;YACJ,sBAAsB,CAClB,GAAG,EAAE,MAAM,EACX,OAAO,CAAC,EAAE,6BAA6B,GACxC,CAAC,CAAA;YACJ;;;;;eAKG;YACH,2BAA2B,CACvB,GAAG,EAAE,MAAM,EACX,cAAc,CAAC,EAAE,MAAM,GAAG,iBAAiB,CAAC,cAAc,EAC1D,OAAO,CAAC,EAAE,8BAA8B,GACzC,CAAC,CAAA;YACJ,2BAA2B,CACvB,GAAG,EAAE,MAAM,EACX,OAAO,CAAC,EAAE,8BAA8B,GACzC,CAAC,CAAA;SACP;KACJ;CACJ;AAED,eAAe,0BAA0B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -1,2 +1,4 @@
 import WdioImageComparisonService from './service.js';
+import VisualLauncher from './storybook/launcher.js';
 export default WdioImageComparisonService;
+export const launcher = VisualLauncher;

package/dist/matcher.js

@@ -2,7 +2,7 @@ import { getBrowserObject } from './utils.js';
 const DEFAULT_EXPECTED_RESULT = 0;
 const asymmetricMatcher = typeof Symbol === 'function' && Symbol.for
     ? Symbol.for('jest.asymmetricMatcher')
-    : 1267621;
+    : 0x13_57_a5;
 function isAsymmetricMatcher(expected) {
     return Boolean(expected && typeof expected === 'object' && '$$typeof' in expected && expected.$$typeof === asymmetricMatcher && 'asymmetricMatch' in expected);
 }

package/dist/service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"service.d.ts","sourceRoot":"","sources":["../src/service.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,UAAU,EAAE,MAAM,aAAa,CAAA;AAC3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EACH,SAAS,EAUZ,MAAM,4BAA4B,CAAA;AAqBnC,MAAM,CAAC,OAAO,OAAO,0BAA2B,SAAQ,SAAS;;IAI7D,OAAO,CAAC,QAAQ,CAAC,CAAsD;IACvE,OAAO,CAAC,gBAAgB,CAAqB;gBAEjC,OAAO,EAAE,YAAY,EAAE,CAAC,EAAE,WAAW,CAAC,YAAY,EAAE,MAAM,EAAE,WAAW,CAAC,MAAM;IAM1F;;OAEG;IACG,WAAW,CAAC,OAAO,EAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,kBAAkB;IAIzE,MAAM,CACR,YAAY,EAAE,WAAW,CAAC,YAAY,EACtC,MAAM,EAAE,MAAM,EAAE,EAChB,OAAO,EAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,kBAAkB;IA4BjE,UAAU,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI;IAKhC,YAAY,CAAE,WAAW,EAAC,MAAM,EAAE,KAAK,EAAC,MAAM,EAAE,EAAE,MAAM,EAAC,MAAM,GAAC,MAAM,EAAE,KAAK,EAAC,GAAG;CA+HpF"}
+{"version":3,"file":"service.d.ts","sourceRoot":"","sources":["../src/service.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,UAAU,EAAE,MAAM,aAAa,CAAA;AAC3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EACH,SAAS,EAUZ,MAAM,4BAA4B,CAAA;AAqBnC,MAAM,CAAC,OAAO,OAAO,0BAA2B,SAAQ,SAAS;;IAI7D,OAAO,CAAC,QAAQ,CAAC,CAAsD;IACvE,OAAO,CAAC,gBAAgB,CAAqB;gBAEjC,OAAO,EAAE,YAAY,EAAE,CAAC,EAAE,WAAW,CAAC,YAAY,EAAE,MAAM,EAAE,WAAW,CAAC,MAAM;IAM1F;;OAEG;IACG,WAAW,CAAC,OAAO,EAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,kBAAkB;IAIzE,MAAM,CACR,YAAY,EAAE,WAAW,CAAC,YAAY,EACtC,MAAM,EAAE,MAAM,EAAE,EAChB,OAAO,EAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,kBAAkB;IA4BjE,UAAU,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI;IAKhC,YAAY,CAAE,WAAW,EAAC,MAAM,EAAE,KAAK,EAAC,MAAM,EAAE,EAAE,MAAM,EAAC,MAAM,GAAC,MAAM,EAAE,KAAK,EAAC,GAAG;CAgIpF"}

package/dist/service.js

@@ -127,6 +127,7 @@ export default class WdioImageComparisonService extends BaseClass {
                     },
                     getElementRect: this.getElementRect.bind(currentBrowser),
                     screenShot: this.takeScreenshot.bind(currentBrowser),
+                    takeElementScreenshot: this.takeElementScreenshot.bind(currentBrowser),
                 }, instanceData, getFolders(elementOptions, self.folders, self.#getBaselineFolder()), element, tag, {
                     wic: self.defaultOptions,
                     method: elementOptions,

package/dist/storybook/Types.d.ts

@@ -0,0 +1,80 @@
+import type { Logger } from '@wdio/logger';
+import type { RemoteCapability } from 'node_modules/@wdio/types/build/Capabilities.js';
+import type { Folders } from 'webdriver-image-comparison';
+export interface StorybookData {
+    id: string;
+    title: string;
+    name: string;
+    importPath: string;
+    tags: string[];
+    storiesImports?: string[];
+    type?: 'docs' | 'story';
+    kind?: string;
+    story?: string;
+    parameters?: {
+        __id: string;
+        docsOnly: boolean;
+        fileName: string;
+    };
+}
+export interface IndexRes {
+    v: number;
+    entries: {
+        [key: string]: StorybookData;
+    };
+}
+export interface StoriesRes {
+    v: number;
+    stories: {
+        [key: string]: StorybookData;
+    };
+}
+export type Stories = {
+    [key: string]: StorybookData;
+};
+export type CreateTestFileOptions = {
+    clip: boolean;
+    clipSelector: string;
+    directoryPath: string;
+    folders: Folders;
+    framework: string;
+    numShards: number;
+    log: Logger;
+    skipStories: string[] | RegExp;
+    storiesJson: Stories;
+    storybookUrl: string;
+};
+export interface CapabilityMap {
+    chrome: RemoteCapability;
+    firefox: RemoteCapability;
+    safari: RemoteCapability;
+    edge: RemoteCapability;
+}
+export type CreateTestContent = {
+    clip: boolean;
+    clipSelector: string;
+    folders: Folders;
+    framework: string;
+    skipStories: string[] | RegExp;
+    stories: StorybookData[];
+    storybookUrl: string;
+};
+export type CreateItContent = {
+    clip: boolean;
+    clipSelector: string;
+    folders: Folders;
+    framework: string;
+    skipStories: string[] | RegExp;
+    storyData: StorybookData;
+    storybookUrl: string;
+};
+export type CategoryComponent = {
+    category: string;
+    component: string;
+};
+export type ScanStorybookReturnData = {
+    storiesJson: Stories;
+    storybookUrl: string;
+    tempDir: string;
+};
+//# sourceMappingURL=Types.d.ts.map

package/dist/storybook/Types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Types.d.ts","sourceRoot":"","sources":["../../src/storybook/Types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAC1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gDAAgD,CAAA;AACtF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAEzD,MAAM,WAAW,aAAa;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE;QACT,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,OAAO,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;KACpB,CAAC;CACL;AAED,MAAM,WAAW,QAAQ;IACrB,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,aAAa,CAAA;KAAE,CAAC;CAC7C;AAED,MAAM,WAAW,UAAU;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,aAAa,CAAA;KAAE,CAAC;CAC7C;AAED,MAAM,MAAM,OAAO,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,aAAa,CAAA;CAAE,CAAC;AAEvD,MAAM,MAAM,qBAAqB,GAAG;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAC,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;IAC/B,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACxB,CAAA;AAED,MAAM,WAAW,aAAa;IAC1B,MAAM,EAAE,gBAAgB,CAAC;IACzB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,MAAM,EAAE,gBAAgB,CAAC;IACzB,IAAI,EAAE,gBAAgB,CAAC;CAC1B;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;IAC/B,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;CACxB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;IAC/B,SAAS,EAAE,aAAa,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;CACxB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,CAAA;AAEvE,MAAM,MAAM,uBAAuB,GAAG;IAAE,WAAW,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAC,CAAA"}

package/dist/storybook/Types.js

@@ -0,0 +1 @@
+export {};

package/dist/storybook/launcher.d.ts

@@ -0,0 +1,10 @@
+import type { Capabilities, Options } from '@wdio/types';
+import type { ClassOptions } from 'webdriver-image-comparison';
+import { BaseClass } from 'webdriver-image-comparison';
+export default class VisualLauncher extends BaseClass {
+    #private;
+    constructor(options: ClassOptions);
+    onPrepare(config: Options.Testrunner, capabilities: Capabilities.RemoteCapabilities): Promise<void>;
+    onComplete(): Promise<void>;
+}
+//# sourceMappingURL=launcher.d.ts.map

package/dist/storybook/launcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"launcher.d.ts","sourceRoot":"","sources":["../../src/storybook/launcher.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AACxD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AActD,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,SAAS;;gBAGrC,OAAO,EAAE,YAAY;IAK3B,SAAS,CAAE,MAAM,EAAE,OAAO,CAAC,UAAU,EAAE,YAAY,EAAE,YAAY,CAAC,kBAAkB;IA0DpF,UAAU;CAenB"}

package/dist/storybook/launcher.js

@@ -0,0 +1,82 @@
+import { rmdirSync } from 'node:fs';
+import logger from '@wdio/logger';
+import { SevereServiceError } from 'webdriverio';
+import { BaseClass } from 'webdriver-image-comparison';
+import { createStorybookCapabilities, createTestFiles, getArgvValue, isCucumberFramework, isStorybookMode, parseSkipStories, scanStorybook, } from './utils.js';
+import { CLIP_SELECTOR, NUM_SHARDS, V6_CLIP_SELECTOR } from '../constants.js';
+const log = logger('@wdio/visual-service');
+export default class VisualLauncher extends BaseClass {
+    #options;
+    constructor(options) {
+        super(options);
+        this.#options = options;
+    }
+    async onPrepare(config, capabilities) {
+        const isStorybook = isStorybookMode();
+        const framework = config.framework;
+        const isCucumber = isCucumberFramework(framework);
+        if (isCucumber && isStorybook) {
+            throw new SevereServiceError('\n\nRunning Storybook in combination with the cucumber framework adapter is not supported.\nOnly Jasmine and Mocha are supported.\n\n');
+        }
+        else if (isStorybook) {
+            log.info('Running `@wdio/visual-service` in Storybook mode.');
+            const { storiesJson, storybookUrl, tempDir } = await scanStorybook(config, log, this.#options);
+            // Set an environment variable so it can be used in the onComplete hook
+            process.env.VISUAL_STORYBOOK_TEMP_SPEC_FOLDER = tempDir;
+            // Determine some run options
+            // --version
+            const versionOption = this.#options?.storybook?.version;
+            const versionArgv = getArgvValue('--version', value => Math.floor(parseFloat(value)));
+            const version = versionOption ?? versionArgv ?? 7;
+            // --numShards
+            const maxInstances = config?.maxInstances ?? 1;
+            const numShardsOption = this.#options?.storybook?.numShards;
+            const numShardsArgv = getArgvValue('--numShards', value => parseInt(value, 10));
+            const numShards = Math.min(numShardsOption || numShardsArgv || NUM_SHARDS, maxInstances);
+            // --clip
+            const clipOption = this.#options?.storybook?.clip;
+            const clipArgv = getArgvValue('--clip', value => value !== 'false');
+            const clip = clipOption ?? clipArgv ?? true;
+            // --clipSelector
+            const clipSelectorOption = this.#options?.storybook?.clipSelector;
+            const clipSelectorArgv = getArgvValue('--clipSelector', value => value);
+            // V6 has '#root' as the root element, V7 has '#storybook-root'
+            const clipSelector = (clipSelectorOption ?? clipSelectorArgv) ?? (version === 6 ? V6_CLIP_SELECTOR : CLIP_SELECTOR);
+            // --skipStories
+            const skipStoriesOption = this.#options?.storybook?.skipStories;
+            const skipStoriesArgv = getArgvValue('--skipStories', value => value);
+            const skipStories = skipStoriesOption ?? skipStoriesArgv ?? [];
+            const parsedSkipStories = parseSkipStories(skipStories, log);
+            // Create the test files
+            createTestFiles({
+                clip,
+                clipSelector,
+                directoryPath: tempDir,
+                folders: this.folders,
+                framework,
+                log,
+                numShards,
+                skipStories: parsedSkipStories,
+                storiesJson,
+                storybookUrl,
+            });
+            // Create the capabilities
+            createStorybookCapabilities(capabilities, log);
+        }
+    }
+    async onComplete() {
+        const tempDir = process.env.VISUAL_STORYBOOK_TEMP_SPEC_FOLDER;
+        if (tempDir) {
+            log.info(`Cleaning up temporary folder for storybook specs: ${tempDir}`);
+            try {
+                rmdirSync(tempDir, { recursive: true });
+                log.info(`Temporary folder for storybook specs has been removed: ${tempDir}`);
+            }
+            catch (err) {
+                log.error(`Failed to remove temporary folder for storybook specs: ${tempDir} due to: ${err.message}`);
+            }
+            // Remove the environment variables
+            delete process.env.VISUAL_STORYBOOK_TEMP_SPEC_FOLDER;
+        }
+    }
+}

package/dist/storybook/utils.d.ts

@@ -0,0 +1,74 @@
+import type { Logger } from '@wdio/logger';
+import type { Capabilities, Options } from '@wdio/types';
+import type { ClassOptions } from 'webdriver-image-comparison';
+import type { CategoryComponent, CreateItContent, CreateTestContent, CreateTestFileOptions, ScanStorybookReturnData, Stories } from './Types.js';
+/**
+ * Check if we run for Storybook
+ */
+export declare function isStorybookMode(): boolean;
+/**
+ * Check if the framework is cucumber
+ */
+export declare function isCucumberFramework(framework: string): boolean;
+/**
+ * Check if the framework is Jasmine
+ */
+export declare function isJasmineFramework(framework: string): boolean;
+/**
+ * Check if the framework is Mocha
+ */
+export declare function isMochaFramework(framework: string): boolean;
+/**
+ * Check if there is an instance of Storybook running
+ */
+export declare function checkStorybookIsRunning(url: string): Promise<void>;
+/**
+ * Sanitize the URL to ensure it's in a proper format
+ */
+export declare function sanitizeURL(url: string): string;
+/**
+ * Extract the category and component from the story ID
+ */
+export declare function extractCategoryAndComponent(id: string): CategoryComponent;
+/**
+ * Get the stories JSON from the Storybook instance
+ */
+export declare function getStoriesJson(url: string): Promise<Stories>;
+/**
+ * Get arg value from the process.argv
+ */
+export declare function getArgvValue(argName: string, parseFunc: (value: string) => any): any;
+/**
+ * Creates a it function for the test file
+ * @TODO: improve this
+ */
+export declare function itFunction({ clip, clipSelector, folders: { baselineFolder }, framework, skipStories, storyData, storybookUrl }: CreateItContent): string;
+/**
+ * Write the test file
+ */
+export declare function writeTestFile(directoryPath: string, fileID: string, log: Logger, testContent: string): void;
+/**
+ * Create the test content
+ */
+export declare function createTestContent({ clip, clipSelector, folders, framework, skipStories, stories, storybookUrl }: CreateTestContent, itFunc?: typeof itFunction): string;
+/**
+ * Create the file data
+ */
+export declare function createFileData(describeTitle: string, testContent: string): string;
+/**
+ * Create the test files
+ */
+export declare function createTestFiles({ clip, clipSelector, directoryPath, folders, framework, log, numShards, skipStories, storiesJson, storybookUrl }: CreateTestFileOptions, createTestCont?: typeof createTestContent, createFileD?: typeof createFileData, writeTestF?: typeof writeTestFile): void;
+/**
+ * Create the storybook capabilities based on the specified browsers
+ */
+export declare function createStorybookCapabilities(capabilities: Capabilities.RemoteCapabilities, log: Logger): void;
+/**
+ * Scan the storybook instance
+ */
+export declare function scanStorybook(config: Options.Testrunner, log: Logger, options: ClassOptions, getArgvVal?: typeof getArgvValue, checkStorybookIsRun?: typeof checkStorybookIsRunning, sanitizeURLFunc?: typeof sanitizeURL, getStoriesJsonFunc?: typeof getStoriesJson): Promise<ScanStorybookReturnData>;
+/**
+ * Parse the stories to skip
+ */
+export declare function parseSkipStories(skipStories: string | string[], log: Logger): RegExp | string[];
+//# sourceMappingURL=utils.d.ts.map

package/dist/storybook/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/storybook/utils.ts"],"names":[],"mappings":"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"}

package/dist/storybook/utils.js

@@ -0,0 +1,362 @@
+import fetch from 'node-fetch';
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join, resolve } from 'node:path';
+/**
+ * Check if we run for Storybook
+ */
+export function isStorybookMode() {
+    return process.argv.includes('--storybook');
+}
+/**
+ * Check if the framework is cucumber
+ */
+export function isCucumberFramework(framework) {
+    return framework.toLowerCase() === 'cucumber';
+}
+/**
+ * Check if the framework is Jasmine
+ */
+export function isJasmineFramework(framework) {
+    return framework.toLowerCase() === 'jasmine';
+}
+/**
+ * Check if the framework is Mocha
+ */
+export function isMochaFramework(framework) {
+    return framework.toLowerCase() === 'mocha';
+}
+/**
+ * Check if there is an instance of Storybook running
+ */
+export async function checkStorybookIsRunning(url) {
+    try {
+        const res = await fetch(url, { method: 'GET', headers: {} });
+        if (res.status !== 200) {
+            throw new Error(`Unxpected status: ${res.status}`);
+        }
+    }
+    catch (e) {
+        console.error(`It seems that the Storybook instance is not running at: ${url}. Are you sure it's running?`);
+        process.exit(1);
+    }
+}
+/**
+ * Sanitize the URL to ensure it's in a proper format
+ */
+export function sanitizeURL(url) {
+    if (!url.startsWith('http://') && !url.startsWith('https://')) {
+        url = 'http://' + url;
+    }
+    url = url.replace(/(iframe\.html|index\.html)\s*$/, '');
+    if (!url.endsWith('/')) {
+        url += '/';
+    }
+    return url;
+}
+/**
+ * Extract the category and component from the story ID
+ */
+export function extractCategoryAndComponent(id) {
+    // The ID is in the format of `category-component--storyName`
+    const [categoryComponent] = id.split('--');
+    const [category, component] = categoryComponent.split('-');
+    return { category, component };
+}
+/**
+ * Get the stories JSON from the Storybook instance
+ */
+export async function getStoriesJson(url) {
+    const indexJsonUrl = new URL('index.json', url).toString();
+    const storiesJsonUrl = new URL('stories.json', url).toString();
+    const fetchOptions = { headers: {} };
+    try {
+        const [indexRes, storiesRes] = await Promise.all([
+            fetch(indexJsonUrl, fetchOptions),
+            fetch(storiesJsonUrl, fetchOptions),
+        ]);
+        for (const response of [storiesRes, indexRes]) {
+            if (response.ok) {
+                const data = await response.json();
+                return data.stories || data.entries;
+            }
+        }
+    }
+    catch (err) {
+        console.error(err);
+    }
+    throw new Error(`Failed to fetch index data from the project. Ensure URLs are available with valid data: ${storiesJsonUrl}, ${indexJsonUrl}.`);
+}
+/**
+ * Get arg value from the process.argv
+ */
+export function getArgvValue(argName, parseFunc) {
+    const argWithEqual = argName + '=';
+    const argv = process.argv;
+    for (let i = 0; i < argv.length; i++) {
+        if (argv[i] === argName && i + 1 < argv.length) {
+            return parseFunc(argv[i + 1]);
+        }
+        else if (argv[i].startsWith(argWithEqual)) {
+            const value = argv[i].slice(argWithEqual.length);
+            return parseFunc(value);
+        }
+    }
+    return undefined;
+}
+/**
+ * Creates a it function for the test file
+ * @TODO: improve this
+ */
+export function itFunction({ clip, clipSelector, folders: { baselineFolder }, framework, skipStories, storyData, storybookUrl }) {
+    const { id } = storyData;
+    const screenshotType = clip ? 'n element' : ' viewport';
+    const DEFAULT_IT_TEXT = 'it';
+    let itText = DEFAULT_IT_TEXT;
+    if (isJasmineFramework(framework)) {
+        itText = 'xit';
+    }
+    else if (isMochaFramework(framework)) {
+        itText = 'it.skip';
+    }
+    if (Array.isArray(skipStories)) {
+        itText = skipStories.includes(id) ? itText : DEFAULT_IT_TEXT;
+    }
+    else if (skipStories instanceof RegExp) {
+        itText = skipStories.test(id) ? itText : DEFAULT_IT_TEXT;
+    }
+    // Setup the folder structure
+    const { category, component } = extractCategoryAndComponent(id);
+    const methodOptions = {
+        baselineFolder: join(baselineFolder, `./${category}/${component}/`),
+    };
+    const it = `
+    ${itText}(\`should take a${screenshotType} screenshot of ${id}\`, async () => {
+        await browser.url(\`${storybookUrl}iframe.html?id=${id}\`);
+        await $('${clipSelector}').waitForDisplayed();
+        await waitForAllImagesLoaded();
+        ${clip
+        ? `await expect($('${clipSelector}')).toMatchElementSnapshot('${id}-element', ${JSON.stringify(methodOptions)})`
+        : `await expect(browser).toMatchScreenSnapshot('${id}', ${JSON.stringify(methodOptions)})`}
+    });
+    `;
+    return it;
+}
+/**
+ * Write the test file
+ */
+export function writeTestFile(directoryPath, fileID, log, testContent) {
+    const filePath = join(directoryPath, `${fileID}.test.js`);
+    try {
+        writeFileSync(filePath, testContent);
+        log.info(`Test file created at: ${filePath}`);
+    }
+    catch (err) {
+        log.error(`It seems that the writing the file to '${filePath}' didn't succeed due to the following error: ${err}`);
+        process.exit(1);
+    }
+}
+/**
+ * Create the test content
+ */
+export function createTestContent({ clip, clipSelector, folders, framework, skipStories, stories, storybookUrl }, 
+// For testing purposes only
+itFunc = itFunction) {
+    const itFunctionOptions = { clip, clipSelector, folders, framework, skipStories, storybookUrl };
+    return stories.reduce((acc, storyData) => acc + itFunc({ ...itFunctionOptions, storyData }), '');
+}
+const waitForAllImagesLoaded = `
+async function waitForAllImagesLoaded() {
+    await browser.executeAsync(async (done) => {
+        const timeout = 11000; // 11 seconds
+        let timedOut = false;
+
+        const timeoutPromise = new Promise((resolve, reject) => {
+            setTimeout(() => {
+                timedOut = true;
+                reject('Timeout: Not all images loaded within 11 seconds');
+            }, timeout);
+        });
+
+        const isImageLoaded = (img) => img.complete && img.naturalWidth > 0;
+
+        // Check for <img> elements
+        const imgElements = Array.from(document.querySelectorAll('img'));
+        const imgPromises = imgElements.map(img => isImageLoaded(img) ? Promise.resolve() : new Promise(resolve => {
+            img.onload = () => !timedOut && resolve();
+            img.onerror = () => !timedOut && resolve();
+        }));
+
+        // Check for CSS background images
+        const allElements = Array.from(document.querySelectorAll('*'));
+        const bgImagePromises = allElements.map(el => {
+            const bgImage = window.getComputedStyle(el).backgroundImage;
+            if (bgImage && bgImage !== 'none' && bgImage.startsWith('url')) {
+                const imageUrl = bgImage.slice(5, -2); // Extract URL from the 'url("")'
+                const image = new Image();
+                image.src = imageUrl;
+                return isImageLoaded(image) ? Promise.resolve() : new Promise(resolve => {
+                    image.onload = () => !timedOut && resolve();
+                    image.onerror = () => !timedOut && resolve();
+                });
+            }
+            return Promise.resolve();
+        });
+
+        try {
+            await Promise.race([Promise.all([...imgPromises, ...bgImagePromises]), timeoutPromise]);
+            done();
+        } catch (error) {
+            done(error);
+        }
+    });
+}
+`;
+/**
+ * Create the file data
+ */
+export function createFileData(describeTitle, testContent) {
+    return `
+describe(\`${describeTitle}\`, () => {
+    ${testContent}
+});
+${waitForAllImagesLoaded}
+`;
+}
+/**
+ * Create the test files
+ */
+export function createTestFiles({ clip, clipSelector, directoryPath, folders, framework, log, numShards, skipStories, storiesJson, storybookUrl }, 
+// For testing purposes only
+createTestCont = createTestContent, createFileD = createFileData, writeTestF = writeTestFile) {
+    const storiesArray = Object.values(storiesJson)
+        // By default only keep the stories, not the docs
+        .filter((storyData) => storyData?.type === 'story' || !storyData.parameters?.docsOnly);
+    const fileNamePrefix = 'visual-storybook';
+    const createTestContentData = { clip, clipSelector, folders, framework, skipStories, stories: storiesArray, storybookUrl };
+    if (numShards === 1) {
+        const testContent = createTestCont(createTestContentData);
+        const fileData = createFileD('All stories', testContent);
+        writeTestF(directoryPath, `${fileNamePrefix}-1-1`, log, fileData);
+    }
+    else {
+        const totalStories = storiesArray.length;
+        const storiesPerShard = Math.ceil(totalStories / numShards);
+        for (let shard = 0; shard < numShards; shard++) {
+            const startIndex = shard * storiesPerShard;
+            const endIndex = Math.min(startIndex + storiesPerShard, totalStories);
+            const shardStories = storiesArray.slice(startIndex, endIndex);
+            const testContent = createTestCont({ ...createTestContentData, stories: shardStories });
+            const fileId = `${fileNamePrefix}-${shard + 1}-${numShards}`;
+            const describeTitle = `Shard ${shard + 1} of ${numShards}`;
+            const fileData = createFileD(describeTitle, testContent);
+            writeTestF(directoryPath, fileId, log, fileData);
+        }
+    }
+}
+/**
+ * Create the storybook capabilities based on the specified browsers
+ */
+export function createStorybookCapabilities(capabilities, log) {
+    const isHeadless = getArgvValue('--headless', value => value !== 'false') ?? true;
+    const browsers = getArgvValue('--browsers', (value) => value.split(',')) ?? ['chrome'];
+    if (Array.isArray(capabilities)) {
+        const chromeCapability = {
+            browserName: 'chrome',
+            'goog:chromeOptions': {
+                args: [
+                    'disable-infobars',
+                    ...(isHeadless ? ['--headless'] : []),
+                ],
+            },
+            'wdio-ics:options': {
+                logName: 'local-chrome',
+            },
+        };
+        const firefoxCapability = {
+            browserName: 'firefox',
+            'moz:firefoxOptions': {
+                args: [...(isHeadless ? ['-headless'] : []),]
+            },
+            'wdio-ics:options': {
+                logName: 'local-firefox',
+            },
+        };
+        const safariCapability = {
+            browserName: 'safari',
+            'wdio-ics:options': {
+                logName: 'local-safari',
+            },
+        };
+        const edgeCapability = {
+            browserName: 'MicrosoftEdge',
+            'ms:edgeOptions': {
+                args: [...(isHeadless ? ['--headless'] : [])]
+            },
+            'wdio-ics:options': {
+                logName: 'local-edge',
+            },
+        };
+        const capabilityMap = {
+            chrome: chromeCapability,
+            firefox: firefoxCapability,
+            safari: safariCapability,
+            edge: edgeCapability,
+        };
+        const newCapabilities = browsers
+            .filter((browser) => browser in capabilityMap)
+            .map((browser) => capabilityMap[browser]);
+        capabilities.length = 0;
+        // Add the new capability to the capabilities array
+        capabilities.push(...newCapabilities);
+    }
+    else {
+        log.error('The capabilities are not an array');
+    }
+}
+/**
+ * Scan the storybook instance
+ */
+export async function scanStorybook(config, log, options, 
+// For testing purposes only
+getArgvVal = getArgvValue, checkStorybookIsRun = checkStorybookIsRunning, sanitizeURLFunc = sanitizeURL, getStoriesJsonFunc = getStoriesJson) {
+    // Prepare storybook scanning
+    const cliUrl = getArgvVal('--url', value => value);
+    const rawStorybookUrl = cliUrl ?? process.env.STORYBOOK_URL ?? options?.storybook?.url ?? 'http://127.0.0.1:6006';
+    await checkStorybookIsRun(rawStorybookUrl);
+    const storybookUrl = sanitizeURLFunc(rawStorybookUrl);
+    // Create a temporary folder for test files and add that to the specs
+    const tempDir = resolve(tmpdir(), `wdio-storybook-tests-${Date.now()}`);
+    mkdirSync(tempDir);
+    log.info(`Using temporary folder for storybook specs: ${tempDir}`);
+    config.specs = [join(tempDir, '*.js')];
+    // Get the stories
+    const storiesJson = await getStoriesJsonFunc(storybookUrl);
+    return {
+        storiesJson,
+        storybookUrl,
+        tempDir,
+    };
+}
+/**
+ * Parse the stories to skip
+ */
+export function parseSkipStories(skipStories, log) {
+    if (Array.isArray(skipStories)) {
+        return skipStories;
+    }
+    const regexPattern = /^\/.*\/[gimyus]*$/;
+    if (regexPattern.test(skipStories)) {
+        try {
+            const match = skipStories.match(/^\/(.+)\/([gimyus]*)$/);
+            if (match) {
+                const [, pattern, flags] = match;
+                return new RegExp(pattern, flags);
+            }
+        }
+        catch (error) {
+            log.error('Invalid regular expression:', error, '. Not using a regular expression to skip stories.');
+        }
+    }
+    return skipStories.split(',').map(skipped => skipped.trim());
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@wdio/visual-service",
   "author": "Wim Selles - wswebcreation",
   "description": "Image comparison / visual regression testing for WebdriverIO",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "license": "MIT",
   "homepage": "https://webdriver.io/docs/visual-testing",
   "repository": {
@@ -20,9 +20,10 @@
   "type": "module",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@wdio/logger": "^8.24.12",
-    "@wdio/types": "^8.26.2",
-    "webdriver-image-comparison": "^4.1.0"
+    "@wdio/logger": "^8.28.0",
+    "@wdio/types": "^8.32.4",
+    "node-fetch": "^3.3.2",
+    "webdriver-image-comparison": "^5.0.0"
   },
   "scripts": {
     "build": "run-s clean build:*",