fix types

visual-js/visual-nightwatch/src/nightwatch/commands/sauceVisualCheck.ts

@@ -10,7 +10,11 @@ import {
 } from '@saucelabs/visual';
 import { getMetaInfo, getVisualApi } from '../../utils/api';
 import { VISUAL_BUILD_ID_KEY } from '../../utils/constants';
-import { NightwatchAPI, NightwatchCustomCommandsModel } from 'nightwatch';
+import {
+  NightwatchAPI,
+  NightwatchCustomCommandsModel,
+  ScopedElement,
+} from 'nightwatch';
 import { CheckOptions, NightwatchIgnorable, RunnerSettings } from '../../types';
 import type { Runnable } from 'mocha';
 
@@ -148,7 +152,11 @@ class SauceVisualCheck implements NightwatchCustomCommandsModel {
         sessionMetadata: metaInfo,
         suiteName,
         testName,
-        fullPageConfig: await getFullPageConfig(fullPage, options.fullPage),
+        fullPageConfig: await getFullPageConfig<ScopedElement>(
+          fullPage,
+          options.fullPage,
+          async (el) => await el.getId(),
+        ),
         clipElement:
           (await options.clipElement?.getId()) ?? clipElementFromClipSelector,
         captureDom: options.captureDom ?? globalCaptureDom,

visual-js/visual-nightwatch/src/types.ts

@@ -31,7 +31,7 @@ export interface CheckOptions {
   ignore?: NightwatchIgnorable[];
   regions?: RegionType<ElementType>[];
   diffingMethod?: DiffingMethod;
-  fullPage?: FullPageScreenshotOptions;
+  fullPage?: FullPageScreenshotOptions<ScopedElement>;
   /**
    * Whether we should take a snapshot of the DOM to compare with as a part of the diffing process.
    */

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

@@ -28,7 +28,12 @@ import {
 
 import logger from '@wdio/logger';
 import chalk from 'chalk';
-import { Ignorable, isWdioElement, WdioElement } from './guarded-types.js';
+import {
+  FullPageScreenshotWdioOptions,
+  Ignorable,
+  isWdioElement,
+  WdioElement,
+} from './guarded-types.js';
 import { backOff } from 'exponential-backoff';
 import type { Test } from '@wdio/types/build/Frameworks';
 
@@ -95,7 +100,7 @@ export type SauceVisualServiceOptions = {
   clipSelector?: string;
   clipElement?: WdioElement;
   region?: SauceRegion;
-  fullPage?: FullPageScreenshotOptions;
+  fullPage?: FullPageScreenshotWdioOptions;
   baselineOverride?: BaselineOverrideIn;
 };
 
@@ -131,7 +136,7 @@ export type CheckOptions = {
   captureDom?: boolean;
   diffingMethod?: DiffingMethod;
   disable?: (keyof DiffingOptionsIn)[];
-  fullPage?: FullPageScreenshotOptions;
+  fullPage?: FullPageScreenshotWdioOptions;
   baselineOverride?: BaselineOverrideIn;
 };
 
@@ -165,7 +170,7 @@ export default class SauceVisualService implements Services.ServiceInstance {
   captureDom: boolean | undefined;
   clipSelector: string | undefined;
   clipElement: WdioElement | undefined;
-  fullPage?: FullPageScreenshotOptions;
+  fullPage?: FullPageScreenshotWdioOptions;
   apiClient: VisualApi;
   baselineOverride?: BaselineOverrideIn;
 
@@ -442,9 +447,10 @@ export default class SauceVisualService implements Services.ServiceInstance {
           options.diffingMethod || this.diffingMethod || DiffingMethod.Balanced,
         suiteName: this.test?.parent,
         testName: this.test?.title,
-        fullPageConfig: await getFullPageConfig(
+        fullPageConfig: await getFullPageConfig<WdioElement>(
           this.fullPage,
           options.fullPage,
+          (el) => el.elementId,
         ),
         baselineOverride: options.baselineOverride || this.baselineOverride,
       });

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

@@ -1,8 +1,15 @@
 import { type } from 'arktype';
-import { makeValidate, RegionIn } from '@saucelabs/visual';
+import {
+  FullPageScreenshotOptions,
+  makeValidate,
+  RegionIn,
+} from '@saucelabs/visual';
 
 export type WdioElement = WebdriverIO.Element;
 
+export type FullPageScreenshotWdioOptions =
+  FullPageScreenshotOptions<WdioElement>;
+
 const wdioElementType = type({
   elementId: 'string',
   selector: 'string',

visual-js/visual/src/types.ts

@@ -1,9 +1,8 @@
 import { RegionIn } from './graphql/__generated__/graphql';
 import { SelectiveRegionOptions } from './common/selective-region';
 import { SauceRegion } from './common/regions';
-import { WdioElement } from '@saucelabs/wdio-sauce-visual-service/build/guarded-types';
 
-export type FullPageScreenshotOptions =
+export type FullPageScreenshotOptions<T> =
   | boolean
   | {
       /**
@@ -38,7 +37,7 @@ export type FullPageScreenshotOptions =
       /**
        * Element used for scrolling (available only in native apps)
        */
-      scrollElement?: WdioElement | Promise<WdioElement>;
+      scrollElement?: T | Promise<T>;
     };
 
 export type Ignorable<T> = T | T[] | Promise<T> | Promise<T[]> | RegionIn;

visual-js/visual/src/utils.ts

@@ -13,27 +13,27 @@ import fs from 'fs/promises';
 import * as os from 'node:os';
 import { SauceRegion } from './common/regions';
 
-export const getFullPageConfig: (
-  main?: FullPageScreenshotOptions | boolean,
-  local?: FullPageScreenshotOptions | boolean,
-) => Promise<FullPageConfigIn | undefined> = async (main, local) => {
+export const getFullPageConfig: <T>(
+  main?: FullPageScreenshotOptions<T> | boolean,
+  local?: FullPageScreenshotOptions<T> | boolean,
+  getId?: (el: T) => Promise<string> | string,
+) => Promise<FullPageConfigIn | undefined> = async (main, local, getId) => {
   const isNoConfig = !main && !local;
   const isLocalOff = local === false;
 
   if (isNoConfig || isLocalOff) {
     return;
   }
 
-  const globalCfg: FullPageScreenshotOptions =
-    typeof main === 'object' ? main : {};
-  const localCfg: FullPageScreenshotOptions =
-    typeof local === 'object' ? local : {};
-  const mergedCfg = { ...globalCfg, ...localCfg };
-  if (mergedCfg.scrollElement) {
-    mergedCfg.scrollElement = (await mergedCfg.scrollElement).elementId;
+  const globalCfg: typeof main = typeof main === 'object' ? main : {};
+  const localCfg: typeof main = typeof local === 'object' ? local : {};
+  const { scrollElement, ...rest } = { ...globalCfg, ...localCfg };
+  const result: FullPageConfigIn = rest;
+  if (scrollElement && getId) {
+    result.scrollElement = await getId(await scrollElement);
   }
 
-  return mergedCfg;
+  return result;
 };
 
 export const isSkipMode = (): boolean => {