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
This commit is contained in:
Johnpaul
2026-01-27 22:50:18 +01:00
parent 4b2804aec1
commit 14d7aecf71
3 changed files with 58 additions and 9 deletions

View File

@@ -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 }
)
})

View File

@@ -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 }
)
})
})

View File

@@ -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 }
)
})
})