@wdio/visual-service 3.0.1 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @wdio/visual-service
 
+## 3.1.0
+
+### Minor Changes
+
+- 43ed502: Add font loading features:
+  - add `waitForFontsLoaded` so the module automatically waits for all fonts to be loaded, enabled by default
+  - add `enableLayoutTesting` so all text will become transparent so
+    - font rendering issues won't cause flakiness
+    - image comparison can be done on layout
+
+### Patch Changes
+
+- Updated dependencies [43ed502]
+  - webdriver-image-comparison@4.1.0
+
+## 3.0.2
+
+### Patch Changes
+
+- 14b6ae6: Support BS real device names
+  Fix hide/remove elements
+
 ## 3.0.1
 
 ### Patch Changes

package/dist/service.d.ts

@@ -6,6 +6,10 @@ export default class WdioImageComparisonService extends BaseClass {
     private _browser?;
     private _isNativeContext;
     constructor(options: ClassOptions, _: WebdriverIO.Capabilities, config: WebdriverIO.Config);
+    /**
+     * Set up the service if users want to use it in standalone mode
+     */
+    remoteSetup(browser: WebdriverIO.Browser | WebdriverIO.MultiRemoteBrowser): Promise<void>;
     before(capabilities: WebdriverIO.Capabilities, _specs: string[], browser: WebdriverIO.Browser | WebdriverIO.MultiRemoteBrowser): Promise<void>;
     beforeTest(test: Frameworks.Test): void;
     afterCommand(commandName: string, _args: string[], result: number | string, error: any): void;

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;IAMpF,MAAM,CACR,YAAY,EAAE,WAAW,CAAC,YAAY,EACtC,MAAM,EAAE,MAAM,EAAE,EAChB,OAAO,EAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,kBAAkB;IAuBjE,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;CA6HpF"}
+{"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"}

package/dist/service.js

@@ -25,6 +25,12 @@ export default class WdioImageComparisonService extends BaseClass {
         this.#config = config;
         this._isNativeContext = undefined;
     }
+    /**
+     * Set up the service if users want to use it in standalone mode
+     */
+    async remoteSetup(browser) {
+        await this.before(browser.capabilities, [], browser);
+    }
     async before(capabilities, _specs, browser) {
         this._browser = browser;
         this._isNativeContext = determineNativeContext(this._browser);
@@ -36,14 +42,20 @@ export default class WdioImageComparisonService extends BaseClass {
             await this.#extendMultiremoteBrowser(capabilities);
         }
         /**
-         * add custom matcher for visual comparison
+         * add custom matcher for visual comparison when expect has been added.
+         * this is not the case in standalone mode
          */
-        expect.extend({
-            toMatchScreenSnapshot,
-            toMatchFullPageSnapshot,
-            toMatchElementSnapshot,
-            toMatchTabbablePageSnapshot,
-        });
+        try {
+            expect.extend({
+                toMatchScreenSnapshot,
+                toMatchFullPageSnapshot,
+                toMatchElementSnapshot,
+                toMatchTabbablePageSnapshot,
+            });
+        }
+        catch (err) {
+            log.warn('Expect package not found. This means that the custom matchers `toMatchScreenSnapshot|toMatchFullPageSnapshot|toMatchElementSnapshot|toMatchTabbablePageSnapshot` are not added and can not be used. Please make sure to add it to your `package.json` if you want to use the Visual custom matchers.');
+        }
     }
     beforeTest(test) {
         this.#currentFile = test.file;
@@ -57,15 +69,17 @@ export default class WdioImageComparisonService extends BaseClass {
     }
     #getBaselineFolder() {
         const isDefaultBaselineFolder = normalize(FOLDERS.DEFAULT.BASE) === this.folders.baselineFolder;
-        const baselineFolder = (isDefaultBaselineFolder ? this.#currentFilePath : this.folders.baselineFolder);
+        const baselineFolder = (isDefaultBaselineFolder && this.#currentFilePath ? this.#currentFilePath : this.folders.baselineFolder);
         /**
          * support `resolveSnapshotPath` WebdriverIO option
          * @ref https://webdriver.io/docs/configuration#resolvesnapshotpath
          *
          * We only use this option if the baselineFolder is the default one, otherwise the
          * service option for setting the baselineFolder should be used
+         *
+         * We also check `this.#config` because for standalone usage of the service, the config is not available
          */
-        if (typeof this.#config.resolveSnapshotPath === 'function' && this.#currentFile && isDefaultBaselineFolder) {
+        if (this.#config && typeof this.#config.resolveSnapshotPath === 'function' && this.#currentFile && isDefaultBaselineFolder) {
             return this.#config.resolveSnapshotPath(this.#currentFile, '.png');
         }
         return baselineFolder;

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACR,OAAO,EACP,YAAY,EACZ,wBAAwB,EACxB,uBAAuB,EACvB,0BAA0B,EAC1B,yBAAyB,EACzB,yBAAyB,EACzB,wBAAwB,EAC3B,MAAM,4BAA4B,CAAA;AAOnC;;;;;GAKG;AACH,KAAK,sBAAsB,GACrB,yBAAyB,GACzB,0BAA0B,GAC1B,wBAAwB,GACxB,wBAAwB,GACxB,yBAAyB,GACzB,uBAAuB,CAAC;AAE9B,wBAAgB,UAAU,CACtB,aAAa,EAAE,sBAAsB,EACrC,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,MAAM,GACxB,OAAO,CAMT;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,MAAM,EAAE,iBAAiB,SAAI,GAAG;IAC1E,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACjB,CAKA;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,MAAM,EAAE,gBAAgB,EAAE;IAAC,MAAM,EAAC,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,GAAG,MAAM,CAOhH;AAkFD;;GAEG;AACH,wBAAsB,eAAe,CAAC,cAAc,EAAE,WAAW,CAAC,OAAO,GAAG,OAAO,CAAC,YAAY,CAAC,CA+DhG;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAE,IAAI,EAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,CAGtG;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAClC,MAAM,EAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,kBAAkB,GAC7D,OAAO,CAQT"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACR,OAAO,EACP,YAAY,EACZ,wBAAwB,EACxB,uBAAuB,EACvB,0BAA0B,EAC1B,yBAAyB,EACzB,yBAAyB,EACzB,wBAAwB,EAC3B,MAAM,4BAA4B,CAAA;AAQnC;;;;;GAKG;AACH,KAAK,sBAAsB,GACrB,yBAAyB,GACzB,0BAA0B,GAC1B,wBAAwB,GACxB,wBAAwB,GACxB,yBAAyB,GACzB,uBAAuB,CAAC;AAE9B,wBAAgB,UAAU,CACtB,aAAa,EAAE,sBAAsB,EACrC,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,MAAM,GACxB,OAAO,CAMT;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,MAAM,EAAE,iBAAiB,SAAI,GAAG;IAC1E,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACjB,CAKA;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,MAAM,EAAE,gBAAgB,EAAE;IAAC,MAAM,EAAC,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,GAAG,MAAM,CAOhH;AA4GD;;GAEG;AACH,wBAAsB,eAAe,CAAC,cAAc,EAAE,WAAW,CAAC,OAAO,GAAG,OAAO,CAAC,YAAY,CAAC,CA4DhG;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAE,IAAI,EAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,CAGtG;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAClC,MAAM,EAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,kBAAkB,GAC7D,OAAO,CAQT"}

package/dist/utils.js

@@ -1,4 +1,5 @@
 import { IOS_OFFSETS } from 'webdriver-image-comparison';
+import { NOT_KNOWN } from 'webdriver-image-comparison/dist/helpers/constants.js';
 export function getFolders(methodOptions, folders, currentTestPath) {
     return {
         actualFolder: methodOptions.actualFolder ?? folders.actualFolder,
@@ -86,6 +87,28 @@ async function getMobileInstanceData({ currentBrowser, isAndroid, isMobile }) {
         deviceScreenSize,
     };
 }
+/**
+ * Get the device name
+ */
+function getDeviceName(currentBrowser) {
+    const { capabilities: { 
+    // We use a few `@ts-ignore` here because this is returned by the driver
+    // and not recognized by the types because they are not requested
+    // @ts-ignore
+    deviceName: returnedDeviceName = NOT_KNOWN, }, requestedCapabilities } = currentBrowser;
+    let deviceName = NOT_KNOWN;
+    // First check if it's a BrowserStack session, they don't:
+    // - return the "requested" deviceName in the session capabilities
+    // - don't use the `appium:deviceName` capability
+    const isBrowserStack = 'bstack:options' in requestedCapabilities;
+    const bsOptions = requestedCapabilities['bstack:options'];
+    const capName = 'deviceName';
+    if (isBrowserStack && bsOptions && capName in bsOptions) {
+        deviceName = bsOptions[capName];
+    }
+    const { 'appium:deviceName': requestedDeviceName } = requestedCapabilities;
+    return (deviceName !== NOT_KNOWN ? deviceName : requestedDeviceName || returnedDeviceName || NOT_KNOWN).toLowerCase();
+}
 /**
  * Get the instance data
  */
@@ -112,14 +135,11 @@ export async function getInstanceData(currentBrowser) {
     // @ts-ignore
     app: rawApp = NOT_KNOWN, 
     // @ts-ignore
-    deviceName: rawDeviceName = NOT_KNOWN, 
-    // @ts-ignore
     platformVersion: rawPlatformVersion = NOT_KNOWN, } = currentCapabilities;
-    const { 'appium:deviceName': requestedDeviceName } = requestedCapabilities;
     const appName = rawApp !== NOT_KNOWN
         ? rawApp.replace(/\\/g, '/').split('/').pop().replace(/[^a-zA-Z0-9]/g, '_')
         : NOT_KNOWN;
-    const deviceName = (requestedDeviceName || rawDeviceName || '').toLowerCase();
+    const deviceName = getDeviceName(currentBrowser);
     const nativeWebScreenshot = !!(requestedCapabilities['appium:nativeWebScreenshot']);
     const platformVersion = (rawPlatformVersion === undefined || rawPlatformVersion === '') ? NOT_KNOWN : rawPlatformVersion.toLowerCase();
     const { devicePixelRatio: mobileDevicePixelRatio, devicePlatformRect, deviceScreenSize, } = await getMobileInstanceData({ currentBrowser, isAndroid, isMobile });

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.0.1",
+  "version": "3.1.0",
   "license": "MIT",
   "homepage": "https://webdriver.io/docs/visual-testing",
   "repository": {
@@ -22,7 +22,7 @@
   "dependencies": {
     "@wdio/logger": "^8.24.12",
     "@wdio/types": "^8.26.2",
-    "webdriver-image-comparison": "^4.0.2"
+    "webdriver-image-comparison": "^4.1.0"
   },
   "scripts": {
     "build": "run-s clean build:*",