From 14d7aecf7102026183dbaaa983caa9190c454cfc Mon Sep 17 00:00:00 2001
From: Johnpaul <polymenjohn1@gmail.com>
Date: Tue, 27 Jan 2026 22:50:18 +0100
Subject: [PATCH] test: exclude top 15% of viewport from mobile screenshot
 tests

- Add viewport clipping to mobile baseline tests to reduce flakiness
- Clip top 15% of viewport for all @mobile screenshot tests
- Affects:
  - mobileBaseline.spec.ts: empty canvas and default workflow tests
  - pan.spec.ts: touch pan test
  - move.spec.ts: touch node move test
- This helps reduce test flakiness from variable mobile UI elements
---
 browser_tests/tests/mobileBaseline.spec.ts    | 31 +++++++++++++++++--
 .../vueNodes/interactions/canvas/pan.spec.ts  | 15 ++++++++-
 .../vueNodes/interactions/node/move.spec.ts   | 21 +++++++++----
 3 files changed, 58 insertions(+), 9 deletions(-)

diff --git a/browser_tests/tests/mobileBaseline.spec.ts b/browser_tests/tests/mobileBaseline.spec.ts
index ff766a434..2f6742f9e 100644
--- a/browser_tests/tests/mobileBaseline.spec.ts
+++ b/browser_tests/tests/mobileBaseline.spec.ts
@@ -9,13 +9,40 @@ test.describe('Mobile Baseline Snapshots', () => {
       expect(await comfyPage.getGraphNodesCount()).toBe(0)
     }).toPass({ timeout: 256 })
     await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot('mobile-empty-canvas.png')
+
+    // Get viewport size and clip top 15%
+    const viewportSize = comfyPage.page.viewportSize()
+    const clipRegion = viewportSize
+      ? {
+          x: 0,
+          y: Math.floor(viewportSize.height * 0.15),
+          width: viewportSize.width,
+          height: Math.ceil(viewportSize.height * 0.85)
+        }
+      : undefined
+
+    await expect(comfyPage.canvas).toHaveScreenshot('mobile-empty-canvas.png', {
+      clip: clipRegion
+    })
   })
 
   test('@mobile default workflow', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('default')
+
+    // Get viewport size and clip top 15%
+    const viewportSize = comfyPage.page.viewportSize()
+    const clipRegion = viewportSize
+      ? {
+          x: 0,
+          y: Math.floor(viewportSize.height * 0.15),
+          width: viewportSize.width,
+          height: Math.ceil(viewportSize.height * 0.85)
+        }
+      : undefined
+
     await expect(comfyPage.canvas).toHaveScreenshot(
-      'mobile-default-workflow.png'
+      'mobile-default-workflow.png',
+      { clip: clipRegion }
     )
   })
 
diff --git a/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts b/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts
index a91a9b928..dbe387b2b 100644
--- a/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts
@@ -11,8 +11,21 @@ test.describe('Vue Nodes Canvas Pan', () => {
 
   test('@mobile Can pan with touch', async ({ comfyPage }) => {
     await comfyPage.panWithTouch({ x: 64, y: 64 }, { x: 256, y: 256 })
+
+    // Get viewport size and clip top 15%
+    const viewportSize = comfyPage.page.viewportSize()
+    const clipRegion = viewportSize
+      ? {
+          x: 0,
+          y: Math.floor(viewportSize.height * 0.15),
+          width: viewportSize.width,
+          height: Math.ceil(viewportSize.height * 0.85)
+        }
+      : undefined
+
     await expect(comfyPage.canvas).toHaveScreenshot(
-      'vue-nodes-paned-with-touch.png'
+      'vue-nodes-paned-with-touch.png',
+      { clip: clipRegion }
     )
   })
 })
diff --git a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts
index ac4759934..4c88401bf 100644
--- a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts
@@ -1,8 +1,5 @@
-import {
-  type ComfyPage,
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '../../../../fixtures/ComfyPage'
+import { comfyExpect as expect, comfyPageFixture as test } from '../../../../fixtures/ComfyPage';
+import type { ComfyPage } from '../../../../fixtures/ComfyPage';
 import type { Position } from '../../../../fixtures/types'
 
 test.describe('Vue Node Moving', () => {
@@ -60,8 +57,20 @@ test.describe('Vue Node Moving', () => {
     const newHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
     await expectPosChanged(loadCheckpointHeaderPos, newHeaderPos)
 
+    // Get viewport size and clip top 15%
+    const viewportSize = comfyPage.page.viewportSize()
+    const clipRegion = viewportSize
+      ? {
+          x: 0,
+          y: Math.floor(viewportSize.height * 0.15),
+          width: viewportSize.width,
+          height: Math.ceil(viewportSize.height * 0.85)
+        }
+      : undefined
+
     await expect(comfyPage.canvas).toHaveScreenshot(
-      'vue-node-moved-node-touch.png'
+      'vue-node-moved-node-touch.png',
+      { clip: clipRegion }
     )
   })
 })