Merge pull request #125 from wswebcreation/fix/make-autoscroll-optional

feat: add option to disable element autoscroll

docs/OPTIONS.md

@@ -12,6 +12,14 @@ Plugin options are the options that can be set when the plugin is instantiated.
 
 The padding that needs to be added to the address bar on iOS and Android to do a proper cutout of the the viewport.
 
+### `autoElementScroll`
+
+- **Type:** `boolean`
+- **Mandatory:** No
+- **Default:** `true`
+
+This option allows you to disable the automatic scrolling of the element into the view when an element screenshot is created.
+
 ### `addIOSBezelCorners`
 
 - **Type:** `boolean`

lib/commands/saveElement.ts

@@ -28,7 +28,8 @@ export default async function saveElement(
   saveElementOptions: SaveElementOptions,
 ): Promise<ScreenshotOutput> {
   // 1a. Set some variables
-  const { addressBarShadowPadding, formatImageName, logLevel, savePerInstance, toolBarShadowPadding } = saveElementOptions.wic;
+  const { addressBarShadowPadding, autoElementScroll, formatImageName, logLevel, savePerInstance, toolBarShadowPadding } =
+    saveElementOptions.wic;
   const { executor } = methods;
   // 1b. Set the method options to the right values
   const disableCSSAnimation: boolean =
@@ -74,8 +75,11 @@ export default async function saveElement(
   } = enrichedInstanceData;
 
   // Scroll the element into top of the viewport and return the current scroll position
-  const currentPosition = await executor(scrollElementIntoView, element, addressBarShadowPadding);
-  await waitFor(500);
+  let currentPosition: number;
+  if (autoElementScroll) {
+    currentPosition = await executor(scrollElementIntoView, element, addressBarShadowPadding);
+    await waitFor(500);
+  }
 
   // 3.  Take the screenshot
   const base64Image: string = await takeBase64Screenshot(methods.screenShot);
@@ -96,10 +100,12 @@ export default async function saveElement(
     element,
   });
 
-  // When the screenshot has been taken and the element position has been determined,
-  // we can scroll back to the original position
-  // We don't need to wait for the scroll here because we don't take a screenshot after this
-  await executor(scrollToPosition, currentPosition);
+  if (autoElementScroll) {
+    // When the screenshot has been taken and the element position has been determined,
+    // we can scroll back to the original position
+    // We don't need to wait for the scroll here because we don't take a screenshot after this
+    await executor(scrollToPosition, currentPosition);
+  }
 
   // 5.  Make a cropped base64 image with resizeDimensions
   // @TODO: we have isLandscape here

lib/helpers/options.interface.ts

@@ -6,6 +6,8 @@ export interface ClassOptions {
    */
   // The padding that needs to be added to the address bar on iOS and Android to do a proper cutout of the the viewport.
   addressBarShadowPadding?: number;
+  // Automatically scroll to an element before taking a screenshot.
+  autoElementScroll?: boolean;
   // Add iOS bezel corners and notch/dynamic island to the screenshot
   addIOSBezelCorners?: boolean;
   // If no baseline image is found during the comparison the image is automatically copied to the baseline folder when this is set to `true`
@@ -74,6 +76,7 @@ export interface ClassOptions {
 
 export interface DefaultOptions {
   addressBarShadowPadding: number;
+  autoElementScroll: boolean;
   addIOSBezelCorners: boolean;
   autoSaveBaseline: boolean;
   clearFolder: boolean;

lib/helpers/options.ts

@@ -11,6 +11,7 @@ export function defaultOptions(options: ClassOptions): DefaultOptions {
      * Module options
      */
     addressBarShadowPadding: options.addressBarShadowPadding || DEFAULT_SHADOW.ADDRESS_BAR,
+    autoElementScroll: options.hasOwnProperty('autoElementScroll') ? options.autoElementScroll : true,
     addIOSBezelCorners: options.addIOSBezelCorners || false,
     autoSaveBaseline: options.autoSaveBaseline || false,
     clearFolder: options.clearRuntimeFolder || false,