Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-19 22:09:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

test: refactor clip-path assertions to use pure numeric bounds without regex

Browse Source
This commit is contained in:
Kelly Yang
2026-04-08 17:19:27 -07:00
parent 337f95c81d
commit 9bdeaa663c
1 changed files with 29 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
browser_tests/tests/imageCompare.spec.ts
View File

@@ -74,6 +74,15 @@ test.describe('Image Compare', { tag: '@widget' }, () => {
.toBe(true)
}
async function getClipPathInsetRightPercent(imgLocator: Locator) {
return imgLocator.evaluate((el) => {
// Accessing raw style avoids cross-browser getComputedStyle normalization issues
// Format is uniformly "inset(0 60% 0 0)" per Vue runtime inline style bindings
const parts = (el as HTMLElement).style.clipPath.split(' ')
return parts.length > 1 ? parseFloat(parts[1]) : -1
})
}
// ---------------------------------------------------------------------------
// Rendering
// ---------------------------------------------------------------------------
@@ -116,9 +125,12 @@ test.describe('Image Compare', { tag: '@widget' }, () => {
await expect(handle).toBeVisible()
expect(
await handle.evaluate((el) => (el as HTMLElement).style.left)
await handle.evaluate((el) => (el as HTMLElement).style.left),
'Slider should default to 50% before screenshot'
).toBe('50%')
await expect(beforeImg).toHaveCSS('clip-path', /50%/)
await expect
.poll(() => getClipPathInsetRightPercent(beforeImg))
.toBeCloseTo(50, 0)
await waitForImagesLoaded(node)
await comfyPage.page.mouse.move(0, 0)
@@ -149,7 +161,9 @@ test.describe('Image Compare', { tag: '@widget' }, () => {
// Left edge: sliderPosition ≈ 5 → clip-path inset right ≈ 95%
await moveToPercentage(comfyPage.page, afterImg, 5)
await expect(beforeImg).toHaveCSS('clip-path', /9\d[\d.]*%/)
await expect
.poll(() => getClipPathInsetRightPercent(beforeImg))
.toBeGreaterThan(90)
await expect
.poll(() =>
handle.evaluate((el) => parseFloat((el as HTMLElement).style.left))
@@ -158,10 +172,9 @@ test.describe('Image Compare', { tag: '@widget' }, () => {
// Right edge: sliderPosition ≈ 95 → clip-path inset right ≈ 5%
await moveToPercentage(comfyPage.page, afterImg, 95)
await expect(beforeImg).toHaveCSS(
'clip-path',
/inset\(0\S* [0-9]+[\d.]*%/
)
await expect
.poll(() => getClipPathInsetRightPercent(beforeImg))
.toBeLessThan(10)
await expect
.poll(() =>
handle.evaluate((el) => parseFloat((el as HTMLElement).style.left))
@@ -407,9 +420,9 @@ test.describe('Image Compare', { tag: '@widget' }, () => {
// Visual regression screenshots
// ---------------------------------------------------------------------------
for (const { pct, clipPattern } of [
{ pct: 25, clipPattern: /7\d[\d.]*%/ },
{ pct: 75, clipPattern: /2\d[\d.]*%/ }
for (const { pct, expectedClipMin, expectedClipMax } of [
{ pct: 25, expectedClipMin: 70, expectedClipMax: 80 },
{ pct: 75, expectedClipMin: 20, expectedClipMax: 30 }
]) {
test(
`Screenshot at ${pct}% slider position`,
@@ -427,7 +440,12 @@ test.describe('Image Compare', { tag: '@widget' }, () => {
const afterImg = node.locator('img[alt="After image"]')
await waitForImagesLoaded(node)
await moveToPercentage(comfyPage.page, afterImg, pct)
await expect(beforeImg).toHaveCSS('clip-path', clipPattern)
await expect
.poll(() => getClipPathInsetRightPercent(beforeImg))
.toBeGreaterThan(expectedClipMin)
await expect
.poll(() => getClipPathInsetRightPercent(beforeImg))
.toBeLessThan(expectedClipMax)
await expect(node).toHaveScreenshot(`image-compare-slider-${pct}.png`)
}