wdio - ignore selectors (#158)

visual-js/.changeset/curvy-foxes-watch.md

@@ -0,0 +1,6 @@
+---
+"@saucelabs/wdio-sauce-visual-service": patch
+"@saucelabs/visual": patch
+---
+
+add ignore region selectors for appium native fullpage

visual-js/visual-wdio/src/SauceVisualService.ts

@@ -24,6 +24,8 @@ import {
   VisualApi,
   WebdriverSession,
   getVisualResults,
+  isIgnoreSelectorType,
+  IgnoreSelectorIn,
 } from '@saucelabs/visual';
 
 import logger from '@wdio/logger';
@@ -114,6 +116,11 @@ type CucumberWorld = {
 export type CheckOptions = {
   ignore?: Array<Ignorable>;
 
+  /**
+   * XPath selectors to ignore changes (available only with full-page screenshots and mobile native apps).
+   */
+  ignoreSelectors?: Array<string>;
+
   regions?: Array<RegionType<Ignorable>>;
   /**
    * A querySelector compatible selector of an element that we should crop the screenshot to.
@@ -367,11 +374,12 @@ export default class SauceVisualService implements Services.ServiceInstance {
 
       const resolveIgnorable = async (
         element: Ignorable | Promise<RegionIn>,
-      ): Promise<Array<RegionIn | ElementIn>> => {
+      ): Promise<Array<RegionIn | ElementIn | IgnoreSelectorIn>> => {
         if (isIgnoreRegion(element)) return [element];
 
         const awaited = await element;
         if (isIgnoreRegion(awaited)) return [awaited];
+        if (isIgnoreSelectorType(awaited)) return [awaited];
 
         const wdioElements = isWdioElement(awaited) ? [awaited] : awaited;
 
@@ -381,14 +389,21 @@ export default class SauceVisualService implements Services.ServiceInstance {
         }));
       };
 
-      const { ignoreRegions, ignoreElements } = await parseRegionsForAPI(
-        [...(options.regions ?? []), ...(options.ignore ?? [])],
-        resolveIgnorable,
-      );
+      const { ignoreRegions, ignoreElements, ignoreSelectors } =
+        await parseRegionsForAPI(
+          [...(options.regions ?? []), ...(options.ignore ?? [])],
+          resolveIgnorable,
+        );
 
       const sessionId = browser.sessionId;
       const jobId = (browser.capabilities as any)['jobUuid'] || sessionId;
 
+      const fullPageConfig = await getFullPageConfig<WdioElement>(
+        this.fullPage,
+        options.fullPage,
+        (el) => el.elementId,
+      );
+
       const clipSelector = options.clipSelector ?? this.clipSelector;
       const clipElement = clipSelector
         ? await browser.$(clipSelector).elementId
@@ -405,6 +420,7 @@ export default class SauceVisualService implements Services.ServiceInstance {
         buildUuid: buildId,
         name: name,
         ignoreRegions,
+        ignoreSelectors,
         ignoreElements,
         diffingOptions: selectiveRegionOptionsToDiffingOptions({
           disableOnly: options.disable ?? [],
@@ -414,11 +430,7 @@ export default class SauceVisualService implements Services.ServiceInstance {
           options.diffingMethod || this.diffingMethod || DiffingMethod.Balanced,
         suiteName: this.test?.parent,
         testName: this.test?.title,
-        fullPageConfig: await getFullPageConfig<WdioElement>(
-          this.fullPage,
-          options.fullPage,
-          (el) => el.elementId,
-        ),
+        fullPageConfig,
         baselineOverride: options.baselineOverride || this.baselineOverride,
       });
       uploadedDiffIds.push(...result.diffs.nodes.flatMap((diff) => diff.id));

visual-js/visual-wdio/src/guarded-types.ts

@@ -1,6 +1,7 @@
 import { type } from 'arktype';
 import {
   FullPageScreenshotOptions,
+  IgnoreSelectorIn,
   makeValidate,
   RegionIn,
 } from '@saucelabs/visual';
@@ -28,4 +29,5 @@ export type Ignorable =
   | WdioElement[]
   | Promise<WdioElement>
   | Promise<WdioElement[]>
-  | RegionIn;
+  | RegionIn
+  | IgnoreSelectorIn;

visual-js/visual/src/utils.ts

@@ -4,8 +4,10 @@ import {
   DiffStatus,
   ElementIn,
   FullPageConfigIn,
+  IgnoreSelectorIn,
   InputMaybe,
   RegionIn,
+  SelectorType,
 } from './graphql/__generated__/graphql';
 import { FullPageScreenshotOptions, RegionType, VisualEnvOpts } from './types';
 import { selectiveRegionOptionsToDiffingOptions } from './common/selective-region';
@@ -85,6 +87,13 @@ const regionType: Type<RegionType<unknown>> = type([
 ]);
 export const isRegionType = (item: unknown): item is RegionType<unknown> =>
   typeof item === 'object' && regionType.allows(item);
+
+// arktype has problem to check enums
+export const isIgnoreSelectorType = (item: any): item is IgnoreSelectorIn =>
+  typeof item === 'object' &&
+  typeof item.selector === 'object' &&
+  Object.values(SelectorType).includes(item.selector.type) &&
+  typeof item.selector.value === 'string';
 export const validateRegionType = makeValidate(elementIn);
 
 export const getDiffingOptions = <T>(
@@ -103,24 +112,47 @@ export const getDiffingOptions = <T>(
  * @param resolveItem A callback to resolve an element and gather the required data for the API.
  */
 export const parseRegionsForAPI = async <T>(
-  ignore: (T | RegionIn | RegionType<T> | Promise<RegionIn>)[],
+  ignore: (
+    | T
+    | RegionIn
+    | RegionType<T>
+    | Promise<RegionIn>
+    | IgnoreSelectorIn
+  )[],
   resolveItem: (
     item: T | Promise<RegionIn>,
-  ) => Promise<(RegionIn | ElementIn)[]>,
+  ) => Promise<(RegionIn | ElementIn | IgnoreSelectorIn)[]>,
 ): Promise<{
   ignoreRegions: RegionIn[];
   ignoreElements: ElementIn[];
+  ignoreSelectors: IgnoreSelectorIn[];
 }> => {
-  const promisedIgnorables: Promise<(RegionIn | ElementIn)[]>[] = ignore.map(
-    async (itemOrRegion): Promise<Array<RegionIn | ElementIn>> => {
-      const { item, diffingOptions } = isRegionType(itemOrRegion)
-        ? {
-            item: itemOrRegion.element,
-            diffingOptions: getDiffingOptions(itemOrRegion),
-          }
-        : { item: itemOrRegion, diffingOptions: undefined };
-
-      const elements = isIgnoreRegion(item) ? [item] : await resolveItem(item);
+  const promisedIgnorables: Promise<
+    (RegionIn | ElementIn | IgnoreSelectorIn)[]
+  >[] = ignore.map(
+    async (
+      itemOrRegionOrSelector,
+    ): Promise<Array<RegionIn | ElementIn | IgnoreSelectorIn>> => {
+      const { item, diffingOptions } = (() => {
+        if (isRegionType(itemOrRegionOrSelector)) {
+          return {
+            item: itemOrRegionOrSelector.element,
+            diffingOptions: getDiffingOptions(itemOrRegionOrSelector),
+          };
+        } else if (isIgnoreSelectorType(itemOrRegionOrSelector)) {
+          return {
+            item: itemOrRegionOrSelector,
+            diffingOptions: itemOrRegionOrSelector.diffingOptions,
+          };
+        }
+
+        return { item: itemOrRegionOrSelector, diffingOptions: undefined };
+      })();
+
+      const elements =
+        isIgnoreRegion(item) || isIgnoreSelectorType(item)
+          ? [item]
+          : await resolveItem(item);
       return elements.map((element) => ({
         ...element,
         diffingOptions,
@@ -133,6 +165,7 @@ export const parseRegionsForAPI = async <T>(
   return {
     ignoreRegions: flattened.filter(isIgnoreRegion),
     ignoreElements: flattened.filter(isElementIn),
+    ignoreSelectors: flattened.filter(isIgnoreSelectorType),
   };
 };