mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-04 23:20:07 +00:00
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:
@@ -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 }
|
||||
)
|
||||
})
|
||||
|
||||
|
||||
@@ -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 }
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -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 }
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user