add ignore selectors

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';
@@ -372,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;
 
@@ -386,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
@@ -410,7 +420,7 @@ export default class SauceVisualService implements Services.ServiceInstance {
         buildUuid: buildId,
         name: name,
         ignoreRegions,
-        ignoreRegionSelectors: options.ignoreSelectors,
+        ignoreSelectors,
         ignoreElements,
         diffingOptions: selectiveRegionOptionsToDiffingOptions({
           disableOnly: options.disable ?? [],
@@ -420,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,6 +4,7 @@ import {
   DiffStatus,
   ElementIn,
   FullPageConfigIn,
+  IgnoreSelectorIn,
   InputMaybe,
   RegionIn,
 } from './graphql/__generated__/graphql';
@@ -85,6 +86,9 @@ const regionType: Type<RegionType<unknown>> = type([
 ]);
 export const isRegionType = (item: unknown): item is RegionType<unknown> =>
   typeof item === 'object' && regionType.allows(item);
+
+export const isIgnoreSelectorType = (item: unknown): item is IgnoreSelectorIn =>
+  typeof item === 'object' && item!.hasOwnProperty('selector');
 export const validateRegionType = makeValidate(elementIn);
 
 export const getDiffingOptions = <T>(
@@ -106,19 +110,29 @@ export const parseRegionsForAPI = async <T>(
   ignore: (T | RegionIn | RegionType<T> | Promise<RegionIn>)[],
   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)
+  const promisedIgnorables: Promise<
+    (RegionIn | ElementIn | IgnoreSelectorIn)[]
+  >[] = ignore.map(
+    async (
+      itemOrRegionOrSelector,
+    ): Promise<Array<RegionIn | ElementIn | IgnoreSelectorIn>> => {
+      const { item, diffingOptions } = isRegionType(itemOrRegionOrSelector)
+        ? {
+            item: itemOrRegionOrSelector.element,
+            diffingOptions: getDiffingOptions(itemOrRegionOrSelector),
+          }
+        : isIgnoreSelectorType(itemOrRegionOrSelector)
         ? {
-            item: itemOrRegion.element,
-            diffingOptions: getDiffingOptions(itemOrRegion),
+            item: itemOrRegionOrSelector,
+            diffingOptions: itemOrRegionOrSelector.diffingOptions,
           }
-        : { item: itemOrRegion, diffingOptions: undefined };
+        : { item: itemOrRegionOrSelector, diffingOptions: undefined };
 
       const elements = isIgnoreRegion(item) ? [item] : await resolveItem(item);
       return elements.map((element) => ({
@@ -133,6 +147,7 @@ export const parseRegionsForAPI = async <T>(
   return {
     ignoreRegions: flattened.filter(isIgnoreRegion),
     ignoreElements: flattened.filter(isElementIn),
+    ignoreSelectors: flattened.filter(isIgnoreSelectorType),
   };
 };