@wdio/image-comparison-core 1.1.4 → 1.2.1

package/dist/methods/takeElementScreenshots.js

@@ -12,25 +12,32 @@ export async function takeElementScreenshot(browserInstance, options, shouldUseB
     return await takeWebDriverElementScreenshot(browserInstance, options);
 }
 async function takeBiDiElementScreenshot(browserInstance, options) {
-    let base64Image;
     const isWebDriverElementScreenshot = false;
-    // We also need to clip the image to the element size, taking into account the DPR
-    // and also clip it from the document, not the viewport
-    const rect = await browserInstance.getElementRect((await options.element).elementId);
-    const clip = { x: Math.floor(rect.x), y: Math.floor(rect.y), width: Math.floor(rect.width), height: Math.floor(rect.height) };
-    const takeBiDiElementScreenshot = (origin) => takeBase64BiDiScreenshot({ browserInstance, origin, clip });
-    try {
-        // By default we take the screenshot from the viewport
-        base64Image = await takeBiDiElementScreenshot('viewport');
+    // Fix #1129: scrollElementIntoView receives a promise
+    // The element might be a promise, so we need to resolve it before using it as a browser.execute() argument
+    // if we need to use it in browser.execute()
+    const element = await options.element;
+    // Scroll the element into the viewport so any lazy‑load / intersection
+    // observers are triggered. We always capture from the *document* origin,
+    // so the clip coordinates are document‑relative and independent of scroll.
+    let currentPosition;
+    if (options.autoElementScroll) {
+        currentPosition = await browserInstance.execute(scrollElementIntoView, element, options.addressBarShadowPadding);
+        await waitFor(100);
     }
-    catch (err) {
-        // But when we get a zero dimension error (meaning the element might be bigger than the
-        // viewport or it might not be in the viewport), we need to take the screenshot from the document.
-        const isZeroDimensionError = typeof err?.message === 'string' && err.message.includes('WebDriver Bidi command "browsingContext.captureScreenshot" failed with error: unable to capture screen - Unable to capture screenshot with zero dimensions');
-        if (!isZeroDimensionError) {
-            throw err;
-        }
-        base64Image = await takeBiDiElementScreenshot('document');
+    // Get the element rect and clip the screenshot. WebDriver getElementRect
+    // returns coordinates relative to the document origin, which matches the
+    // BiDi `origin: 'document'` coordinate system.
+    const rect = await browserInstance.getElementRect(element.elementId);
+    const clip = { x: Math.floor(rect.x), y: Math.floor(rect.y), width: Math.floor(rect.width), height: Math.floor(rect.height) };
+    const base64Image = await takeBase64BiDiScreenshot({
+        browserInstance,
+        origin: 'document',
+        clip,
+    });
+    // Restore scroll position
+    if (options.autoElementScroll && currentPosition) {
+        await browserInstance.execute(scrollToPosition, currentPosition);
     }
     return {
         base64Image,
@@ -40,10 +47,14 @@ async function takeBiDiElementScreenshot(browserInstance, options) {
 async function takeWebDriverElementScreenshot(browserInstance, options) {
     let base64Image;
     let isWebDriverElementScreenshot = false;
+    // Fix #1129: scrollElementIntoView receives a promise
+    // The element might be a promise, so we need to resolve it before using it as a browser.execute() argument
+    // if we need to use it in browser.execute()
+    const element = await options.element;
     // Scroll the element into top of the viewport and return the current scroll position
     let currentPosition;
     if (options.autoElementScroll) {
-        currentPosition = await browserInstance.execute(scrollElementIntoView, options.element, options.addressBarShadowPadding);
+        currentPosition = await browserInstance.execute(scrollElementIntoView, element, options.addressBarShadowPadding);
         // We need to wait for the scroll to finish before taking the screenshot
         await waitFor(100);
     }
@@ -53,7 +64,7 @@ async function takeWebDriverElementScreenshot(browserInstance, options) {
         browserInstance,
         devicePixelRatio: options.devicePixelRatio,
         deviceRectangles: options.deviceRectangles,
-        element: options.element,
+        element,
         initialDevicePixelRatio: options.initialDevicePixelRatio,
         isEmulated: options.isEmulated,
         innerHeight: options.innerHeight,

package/dist/methods/takeElementScreenshots.test.js

@@ -74,7 +74,7 @@ describe('takeElementScreenshot', () => {
         vi.clearAllMocks();
     });
     describe('BiDi screenshots', () => {
-        it('should take BiDi screenshot from viewport when shouldUseBidi is true', async () => {
+        it('should take BiDi screenshot from document when shouldUseBidi is true', async () => {
             const result = await takeElementScreenshot(browserInstance, baseOptions, true);
             expect(result).toEqual({
                 base64Image: 'bidi-screenshot-data',
@@ -83,37 +83,50 @@ describe('takeElementScreenshot', () => {
             expect(getElementRectMock).toHaveBeenCalledWith('test-element');
             expect(takeBase64BiDiScreenshotSpy).toHaveBeenCalledWith({
                 browserInstance,
-                origin: 'viewport',
+                origin: 'document',
                 clip: { x: 10, y: 20, width: 100, height: 200 }
             });
             expect(takeWebElementScreenshotSpy).not.toHaveBeenCalled();
             expect(makeCroppedBase64ImageSpy).not.toHaveBeenCalled();
         });
-        it('should fallback to document screenshot when viewport fails with zero dimensions error', async () => {
-            takeBase64BiDiScreenshotSpy.mockRejectedValueOnce(new Error('WebDriver Bidi command "browsingContext.captureScreenshot" failed with error: unable to capture screen - Unable to capture screenshot with zero dimensions'));
-            const result = await takeElementScreenshot(browserInstance, baseOptions, true);
+        //
+        // We intentionally rely on BiDi with origin: 'document' only. If that
+        // ever fails, we surface the underlying error instead of silently
+        // falling back to a different origin with mismatched coordinates.
+        it('should scroll element into view when autoElementScroll is enabled', async () => {
+            const optionsWithScroll = { ...baseOptions, autoElementScroll: true };
+            executeMock.mockResolvedValueOnce(100); // previous scroll position
+            const result = await takeElementScreenshot(browserInstance, optionsWithScroll, true);
             expect(result).toEqual({
                 base64Image: 'bidi-screenshot-data',
                 isWebDriverElementScreenshot: false
             });
-            expect(takeBase64BiDiScreenshotSpy).toHaveBeenCalledTimes(2);
-            expect(takeBase64BiDiScreenshotSpy.mock.calls[0][0]).toEqual({
-                browserInstance,
-                origin: 'viewport',
-                clip: { x: 10, y: 20, width: 100, height: 200 }
-            });
-            expect(takeBase64BiDiScreenshotSpy.mock.calls[1][0]).toEqual({
-                browserInstance,
-                origin: 'document',
-                clip: { x: 10, y: 20, width: 100, height: 200 }
-            });
+            // First call: scrollElementIntoView, second call: scrollToPosition (restore)
+            expect(executeMock).toHaveBeenCalledTimes(2);
+            expect(executeMock.mock.calls[0]).toMatchSnapshot();
+            expect(executeMock.mock.calls[1]).toMatchSnapshot();
+            expect(waitForSpy).toHaveBeenCalledWith(100);
         });
-        it('should throw error when BiDi screenshot fails with non-zero dimension error', async () => {
-            const error = new Error('Some other BiDi error');
-            takeBase64BiDiScreenshotSpy.mockRejectedValueOnce(error);
-            await expect(takeElementScreenshot(browserInstance, baseOptions, true)).rejects.toThrow(error);
-            expect(takeBase64BiDiScreenshotSpy).toHaveBeenCalledTimes(1);
-            expect(takeWebElementScreenshotSpy).not.toHaveBeenCalled();
+        it('should not restore scroll when autoElementScroll is enabled but no previous position', async () => {
+            const optionsWithScroll = { ...baseOptions, autoElementScroll: true };
+            executeMock.mockResolvedValueOnce(undefined); // no previous position
+            await takeElementScreenshot(browserInstance, optionsWithScroll, true);
+            // Only the scrollElementIntoView call, no restore
+            expect(executeMock).toHaveBeenCalledTimes(1);
+            expect(waitForSpy).toHaveBeenCalledWith(100);
+        });
+        it('should resolve a Promise-wrapped element (ChainablePromiseElement) before passing to browser.execute()', async () => {
+            const resolvedElement = { elementId: 'promise-element' };
+            const optionsWithPromiseElement = {
+                ...baseOptions,
+                autoElementScroll: true,
+                element: Promise.resolve(resolvedElement),
+            };
+            executeMock.mockResolvedValueOnce(100);
+            await takeElementScreenshot(browserInstance, optionsWithPromiseElement, true);
+            expect(getElementRectMock).toHaveBeenCalledWith('promise-element');
+            // The resolved element (not the Promise) must be passed to browser.execute()
+            expect(executeMock.mock.calls[0][1]).toEqual(resolvedElement);
         });
     });
     describe('Legacy screenshots', () => {
@@ -184,6 +197,20 @@ describe('takeElementScreenshot', () => {
             expect(executeMock).toHaveBeenCalledTimes(1); // Only the scroll into view call
             expect(waitForSpy).toHaveBeenCalledWith(100);
         });
+        it('should resolve a Promise-wrapped element (ChainablePromiseElement) before passing to browser.execute()', async () => {
+            const resolvedElement = { elementId: 'promise-element' };
+            const optionsWithPromiseElement = {
+                ...baseOptions,
+                autoElementScroll: true,
+                element: Promise.resolve(resolvedElement),
+            };
+            executeMock.mockResolvedValueOnce(100);
+            await takeElementScreenshot(browserInstance, optionsWithPromiseElement, false);
+            // The resolved element (not the Promise) must be passed to browser.execute()
+            expect(executeMock.mock.calls[0][1]).toEqual(resolvedElement);
+            // And also passed to takeWebElementScreenshot
+            expect(takeWebElementScreenshotSpy).toHaveBeenCalledWith(expect.objectContaining({ element: resolvedElement }));
+        });
         it('should enable fallback when resizeDimensions is provided', async () => {
             const optionsWithResize = {
                 ...baseOptions,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wdio/image-comparison-core",
-  "version": "1.1.4",
+  "version": "1.2.1",
   "author": "Wim Selles - wswebcreation",
   "description": "Image comparison core module for @wdio/visual-service - WebdriverIO visual testing framework",
   "keywords": [
@@ -28,10 +28,10 @@
   "dependencies": {
     "jimp": "^1.6.0",
     "@wdio/logger": "^9.18.0",
-    "@wdio/types": "^9.20.0"
+    "@wdio/types": "^9.25.0"
   },
   "devDependencies": {
-    "webdriverio": "^9.23.0"
+    "webdriverio": "^9.25.0"
   },
   "publishConfig": {
     "access": "public"