fix; make the webview determination more stable

- update images
- add more tests

Author: wswebcreation

packages/image-comparison-core/src/helpers/utils.test.ts

@@ -679,6 +679,7 @@ describe('utils', () => {
                 .mockResolvedValueOnce(undefined) // injectWebviewOverlay
                 .mockResolvedValueOnce(undefined) // executeNativeClick
                 .mockResolvedValueOnce({ x: 150, y: 300, width: 100, height: 100 }) // getMobileWebviewClickAndDimensions
+                .mockResolvedValueOnce({ vs: 'visible', focus: true }) // visibilityState debug check
 
             const result = await getMobileViewPortPosition({
                 browserInstance: mockBrowserInstance,
@@ -715,6 +716,7 @@ describe('utils', () => {
                     width: overlayWidth,
                     height: overlayHeight,
                 }) // getMobileWebviewClickAndDimensions (rounded integers from overlay)
+                .mockResolvedValueOnce({ vs: 'visible', focus: true }) // visibilityState debug check
 
             const result = await getMobileViewPortPosition({
                 browserInstance: mockBrowserInstance,
@@ -735,16 +737,15 @@ describe('utils', () => {
 
         it('should retry and succeed on Android when overlay returns zeros (Start Surface blocking)', async () => {
             const warnSpy = vi.spyOn(log, 'warn').mockImplementation(() => {})
-            const infoSpy = vi.spyOn(log, 'info').mockImplementation(() => {})
 
             vi.mocked(mockBrowserInstance.execute)
                 // --- Attempt 1: overlay returns zeros (Start Surface is blocking) ---
                 .mockResolvedValueOnce(undefined) // loadBase64Html (blob)
                 .mockResolvedValueOnce(undefined) // injectWebviewOverlay
                 .mockResolvedValueOnce(undefined) // executeNativeClick (screen center)
                 .mockResolvedValueOnce({ x: 0, y: 0, width: 0, height: 0 }) // getMobileWebviewClickAndDimensions
-                // --- Dismiss Start Surface: tap tab thumbnail area ---
-                .mockResolvedValueOnce(undefined) // executeNativeClick (thumbnail tap)
+                // --- Dismiss Start Surface: Back button ---
+                .mockResolvedValueOnce(undefined) // mobile: pressKey (Back button)
                 // --- Attempt 2: overlay returns valid data ---
                 .mockResolvedValueOnce(undefined) // loadBase64Html (blob)
                 .mockResolvedValueOnce(undefined) // injectWebviewOverlay
@@ -761,41 +762,32 @@ describe('utils', () => {
             expect(warnSpy).toHaveBeenCalledWith(
                 expect.stringContaining('overlay did not receive the native click')
             )
-            expect(infoSpy).toHaveBeenCalledWith(
-                expect.stringContaining('Tapping tab thumbnail area')
-            )
             expect(mockBrowserInstance.url).toHaveBeenCalledWith('http://example.com')
             expect(result.viewport.width).toBe(100)
             expect(result.viewport.height).toBe(100)
 
             warnSpy.mockRestore()
-            infoSpy.mockRestore()
         })
 
-        it('should return initialDeviceRectangles after all retries are exhausted on Android', async () => {
+        it('should return initialDeviceRectangles after all retries are exhausted on Android', { timeout: 15000 }, async () => {
             const warnSpy = vi.spyOn(log, 'warn').mockImplementation(() => {})
-            const infoSpy = vi.spyOn(log, 'info').mockImplementation(() => {})
             const errorSpy = vi.spyOn(log, 'error').mockImplementation(() => {})
 
             const zeroOverlay = { x: 0, y: 0, width: 0, height: 0 }
-            vi.mocked(mockBrowserInstance.execute)
-                // --- Attempt 1 ---
-                .mockResolvedValueOnce(undefined) // loadBase64Html
-                .mockResolvedValueOnce(undefined) // injectWebviewOverlay
-                .mockResolvedValueOnce(undefined) // executeNativeClick (center)
-                .mockResolvedValueOnce(zeroOverlay) // getMobileWebviewClickAndDimensions
-                .mockResolvedValueOnce(undefined) // dismissal tap
-                // --- Attempt 2 ---
-                .mockResolvedValueOnce(undefined) // loadBase64Html
-                .mockResolvedValueOnce(undefined) // injectWebviewOverlay
-                .mockResolvedValueOnce(undefined) // executeNativeClick (center)
-                .mockResolvedValueOnce(zeroOverlay) // getMobileWebviewClickAndDimensions
-                .mockResolvedValueOnce(undefined) // dismissal tap
-                // --- Attempt 3 (last, no dismissal after) ---
-                .mockResolvedValueOnce(undefined) // loadBase64Html
-                .mockResolvedValueOnce(undefined) // injectWebviewOverlay
-                .mockResolvedValueOnce(undefined) // executeNativeClick (center)
-                .mockResolvedValueOnce(zeroOverlay) // getMobileWebviewClickAndDimensions
+            const attemptMocks = () => [
+                undefined, // loadBase64Html
+                undefined, // injectWebviewOverlay
+                undefined, // executeNativeClick (center)
+                zeroOverlay, // getMobileWebviewClickAndDimensions
+            ]
+            const mocked = vi.mocked(mockBrowserInstance.execute)
+            // 5 attempts: attempts 1-4 have Back button dismissal, last attempt has none
+            for (let i = 0; i < 5; i++) {
+                for (const val of attemptMocks()) { mocked.mockResolvedValueOnce(val) }
+                if (i < 4) {
+                    mocked.mockResolvedValueOnce(undefined) // mobile: pressKey (Back button)
+                }
+            }
 
             const result = await getMobileViewPortPosition({
                 browserInstance: mockBrowserInstance,
@@ -804,15 +796,14 @@ describe('utils', () => {
                 isIOS: false,
             })
 
-            expect(warnSpy).toHaveBeenCalledTimes(3)
+            expect(warnSpy).toHaveBeenCalledTimes(5)
             expect(errorSpy).toHaveBeenCalledWith(
-                expect.stringContaining('Viewport measurement failed after 3 attempts')
+                expect.stringContaining('Viewport measurement failed after 5 attempts')
             )
             expect(mockBrowserInstance.url).toHaveBeenCalledWith('http://example.com')
             expect(result).toEqual(DEVICE_RECTANGLES)
 
             warnSpy.mockRestore()
-            infoSpy.mockRestore()
             errorSpy.mockRestore()
         })
 
@@ -825,6 +816,7 @@ describe('utils', () => {
                 .mockResolvedValueOnce(undefined) // injectWebviewOverlay
                 .mockResolvedValueOnce(undefined) // executeNativeClick (center, 'mobile: tap')
                 .mockResolvedValueOnce({ x: 0, y: 0, width: 0, height: 0 }) // getMobileWebviewClickAndDimensions
+                .mockResolvedValueOnce({ vs: 'visible', focus: true }) // visibilityState debug check
 
             const result = await getMobileViewPortPosition({
                 browserInstance: mockBrowserInstance,

packages/image-comparison-core/src/helpers/utils.ts

@@ -494,13 +494,13 @@ export async function executeNativeClick({ browserInstance, isIOS, x, y }: Execu
 /**
  * The maximum number of times we attempt to measure the viewport position on Android.
  * Chrome may start in the "Start Surface" (tab thumbnail overview) which blocks
- * native clicks from reaching the webview overlay. Each retry taps the top-left
- * area of the screen where the tab thumbnail typically sits, dismissing the Start
- * Surface so the next measurement attempt succeeds.
+ * native clicks from reaching the webview overlay. Each retry dismisses the Start
+ * Surface via a combination of native taps and WebDriver URL navigation, then
+ * re-attempts the measurement.
  *
  * iOS does not suffer from this issue, so only a single attempt is made there.
  */
-const MAX_ANDROID_VIEWPORT_MEASUREMENT_RETRIES = 3
+const MAX_ANDROID_VIEWPORT_MEASUREMENT_RETRIES = 5
 
 /**
  * Get the mobile viewport position, we determine this by:
@@ -546,6 +546,9 @@ export async function getMobileViewPortPosition({
             const { y, x, width, height } = await browserInstance.execute(getMobileWebviewClickAndDimensions, '[data-test="ics-overlay"]')
 
             // 4b. On Android, validate the overlay data.
+            // NOTE: for future detection of Chrome's Start Surface, `document.visibilityState`
+            // and `document.hasFocus()` can be used as a more direct signal. When the Start
+            // Surface is active the webview reports visibility: "hidden" and hasFocus: false.
             // When width and height are both 0 the native click never reached the overlay,
             // which typically means Chrome's Start Surface or tab overview is blocking the webview.
             if (isAndroid && width === 0 && height === 0) {
@@ -556,7 +559,7 @@ export async function getMobileViewPortPosition({
                 )
 
                 if (attempt < maxAttempts) {
-                    await dismissAndroidStartSurface({ browserInstance, screenWidth, screenHeight })
+                    await dismissAndroidStartSurface({ browserInstance })
                 }
 
                 continue
@@ -598,30 +601,31 @@ export async function getMobileViewPortPosition({
 }
 
 /**
- * Attempt to dismiss Chrome's "Start Surface" (tab thumbnail overview) on Android.
+ * Attempt to dismiss Chrome's "Start Surface" (tab thumbnail overview) on Android
+ * by pressing the Android Back button (KEYCODE_BACK = 4).
  *
- * The Start Surface places the first tab thumbnail in the top-left quadrant of
- * the screen. A native tap at ~15 % of the screen's width/height reliably hits
- * that thumbnail across phone and tablet form factors, opening the active tab
- * and dismissing the overlay so subsequent viewport measurements can succeed.
+ * The Back button is preferred over tapping a tab thumbnail because:
+ * - It reliably exits the tab overview regardless of orientation or device
+ * - It doesn't risk accidentally closing a tab by hitting the "X" button
+ *
+ * // --- Commented-out tap approach kept for reference ---
+ * // const isLandscape = screenWidth > screenHeight
+ * // const pct = isLandscape ? 0.30 : 0.15
+ * // const tapX = Math.round(screenWidth * pct)
+ * // const tapY = Math.round(screenHeight * pct)
+ * // console.log(`[VIEWPORT-DEBUG] dismissStartSurface: tapping (${tapX}, ${tapY}) on ${screenWidth}x${screenHeight} (${isLandscape ? 'landscape' : 'portrait'})`)
+ * // await executeNativeClick({ browserInstance, isIOS: false, x: tapX, y: tapY })
  */
 async function dismissAndroidStartSurface({
     browserInstance,
-    screenWidth,
-    screenHeight,
 }: {
     browserInstance: WebdriverIO.Browser
-    screenWidth: number
-    screenHeight: number
 }): Promise<void> {
     try {
-        const thumbX = Math.round(screenWidth * 0.15)
-        const thumbY = Math.round(screenHeight * 0.15)
-        log.info(`Tapping tab thumbnail area (${thumbX}, ${thumbY}) to dismiss Start Surface`)
-        await executeNativeClick({ browserInstance, isIOS: false, x: thumbX, y: thumbY })
+        await browserInstance.execute('mobile: pressKey', { keycode: 4 })
         await waitFor(1500)
     } catch (error) {
-        log.warn('Failed to dismiss Chrome Start Surface via native tap', error)
+        log.warn('Failed to dismiss Chrome Start Surface via Back button', error)
     }
 }
 

packages/image-comparison-core/src/methods/screenshots.ts

@@ -41,7 +41,7 @@ export async function getMobileFullPageNativeWebScreenshotsData(browserInstance:
     const effectiveViewportHeight = hasNoBottomBar && hasHomeBar
         ? viewportHeight - Math.round(homeBar.height / (isAndroid ? devicePixelRatio : 1))
         : viewportHeight
-    const viewportWidth= Math.round(viewport.width / (isAndroid ? devicePixelRatio : 1))
+    const viewportWidth = Math.round(viewport.width / (isAndroid ? devicePixelRatio : 1))
     const viewportX = Math.round(viewport.x / (isAndroid ? devicePixelRatio : 1))
     const viewportY = Math.round(viewport.y / (isAndroid ? devicePixelRatio : 1))
     // Start with an empty array, during the scroll it will be filled because a page could also have a lazy loading

tests/lambdaTestBaseline/galaxy_tab_s8/screenshot-EmulatorGalaxyTabS8LandscapeNativeWebScreenshot13-1067x1707.png

@@ -207,74 +207,19 @@ interface SkipRule {
 const skipRules: SkipRule[] = [
     // Android devices
     {
-        // @TODO: remove when fixed
-        titleIncludes: 'compare a screen with ignore elements',
-        deviceName: 'Pixel 9 Pro',
-        platformName: 'Android',
-        platformVersions: ['15'],
-        orientations: ['portrait'],
-        reason: '1px difference in the ignore elements screenshot',
-    },
-    {
-        // @TODO: remove when fixed
-        titleIncludes: 'compare a screen with ignore elements',
-        deviceName: 'Galaxy Tab S8',
-        platformName: 'Android',
-        platformVersions: ['13'],
-        orientations: ['landscape', 'portrait'],
-        reason: '1px difference in the ignore elements screenshot',
-    },
-    {
-        // @TODO: remove when fixed
-        titleIncludes: 'compare a screen with ignore elements',
-        deviceName: 'Galaxy Tab S8',
-        platformName: 'Android',
-        platformVersions: ['14'],
-        orientations: ['portrait'],
-        reason: '1px difference in the ignore elements screenshot',
-    },
-    {
-        // @TODO: remove when fixed
-        titleIncludes: 'should compare a full page screenshot with ignore elements',
-        deviceName: 'Galaxy Tab S8',
-        platformName: 'Android',
-        platformVersions: ['14'],
-        orientations: ['portrait', 'landscape'],
-        reason: 'it always starts with the tabbed view, so it will break at the start of the screenshot',
-    },
-    {
-        // @TODO: remove when fixed
-        titleIncludes: ['compare a screen with ignore elements', 'compare a screen successful'],
-        deviceName: 'Galaxy Tab S8',
-        platformName: 'Android',
-        platformVersions: ['14'],
-        orientations: ['landscape', 'portrait'],
-        reason: 'Fully ignored in the screenshot so it will never find a difference',
-    },
-    {
-        // @TODO: remove when fixed
-        titleIncludes: 'compare a full page screenshot successful',
-        deviceName: 'Galaxy Tab S8',
-        platformName: 'Android',
-        platformVersions: ['13', '14'],
-        orientations: ['landscape', 'portrait'],
-        reason: 'There are difference in the full page screenshot that might be related to things introduced in PR #1126',
-    },
-    {
-        // @TODO: remove when fixed
         titleIncludes: 'compare a screen with ignore elements',
         deviceName: 'Pixel 4',
         platformName: 'Android',
-        platformVersions: ['13'],
+        platformVersions: ['11'],
         orientations: ['landscape', 'portrait'],
-        reason: 'Fully ignored in the screenshot so it will never find a difference',
+        reason: 'Elements not visible in the screenshot, no value in testing',
     },
     {
-        titleIncludes: 'compare a screen successful',
+        titleIncludes: 'compare a screen with ignore elements',
         deviceName: 'Pixel 4',
         platformName: 'Android',
-        platformVersions: ['13'],
-        orientations: ['portrait'],
+        platformVersions: ['12', '13'],
+        orientations: ['landscape'],
         reason: 'Elements not visible in the screenshot, no value in testing',
     },
     {
@@ -285,14 +230,6 @@ const skipRules: SkipRule[] = [
         orientations: ['landscape'],
         reason: 'Elements not visible in the screenshot, no value in testing',
     },
-    {
-        titleIncludes: 'compare a screen with ignore elements',
-        deviceName: 'Pixel 4',
-        platformName: 'Android',
-        platformVersions: ['11', '12'],
-        orientations: ['landscape', 'portrait'],
-        reason: 'Elements not visible in the screenshot, no value in testing',
-    },
     // iOS devices
     {
         titleIncludes: 'compare a screen with ignore elements',