mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
3eb7c29ea4
## Summary test: add image compare widget basic e2e tests ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10597-test-add-image-compare-widget-basic-e2e-tests-3306d73d365081699125e86b6caa7188) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com>
82 lines
2.7 KiB
TypeScript
82 lines
2.7 KiB
TypeScript
import { expect } from '@playwright/test'
|
|
|
|
import type { ComfyPage } from '../fixtures/ComfyPage'
|
|
import { comfyPageFixture as test } from '../fixtures/ComfyPage'
|
|
|
|
test.describe('Image Compare', () => {
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
|
|
await comfyPage.workflow.loadWorkflow('widgets/image_compare_widget')
|
|
await comfyPage.vueNodes.waitForNodes()
|
|
})
|
|
|
|
function createTestImageDataUrl(label: string, color: string): string {
|
|
const svg =
|
|
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">` +
|
|
`<rect width="200" height="200" fill="${color}"/>` +
|
|
`<text x="50%" y="50%" fill="white" font-size="24" ` +
|
|
`text-anchor="middle" dominant-baseline="middle">${label}</text></svg>`
|
|
return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
|
|
}
|
|
|
|
async function setImageCompareValue(
|
|
comfyPage: ComfyPage,
|
|
value: { beforeImages: string[]; afterImages: string[] }
|
|
) {
|
|
await comfyPage.page.evaluate(
|
|
({ value }) => {
|
|
const node = window.app!.graph.getNodeById(1)
|
|
const widget = node?.widgets?.find((w) => w.type === 'imagecompare')
|
|
if (widget) {
|
|
widget.value = value
|
|
widget.callback?.(value)
|
|
}
|
|
},
|
|
{ value }
|
|
)
|
|
await comfyPage.nextFrame()
|
|
}
|
|
|
|
test(
|
|
'Shows empty state when no images are set',
|
|
{ tag: '@smoke' },
|
|
async ({ comfyPage }) => {
|
|
const node = comfyPage.vueNodes.getNodeLocator('1')
|
|
await expect(node).toBeVisible()
|
|
|
|
await expect(node).toContainText('No images to compare')
|
|
await expect(node.locator('img')).toHaveCount(0)
|
|
await expect(node.locator('[role="presentation"]')).toHaveCount(0)
|
|
}
|
|
)
|
|
|
|
test(
|
|
'Slider defaults to 50% with both images set',
|
|
{ tag: ['@smoke', '@screenshot'] },
|
|
async ({ comfyPage }) => {
|
|
const beforeUrl = createTestImageDataUrl('Before', '#c00')
|
|
const afterUrl = createTestImageDataUrl('After', '#00c')
|
|
await setImageCompareValue(comfyPage, {
|
|
beforeImages: [beforeUrl],
|
|
afterImages: [afterUrl]
|
|
})
|
|
|
|
const node = comfyPage.vueNodes.getNodeLocator('1')
|
|
const beforeImg = node.locator('img[alt="Before image"]')
|
|
const afterImg = node.locator('img[alt="After image"]')
|
|
await expect(beforeImg).toBeVisible()
|
|
await expect(afterImg).toBeVisible()
|
|
|
|
const handle = node.locator('[role="presentation"]')
|
|
await expect(handle).toBeVisible()
|
|
|
|
expect(
|
|
await handle.evaluate((el) => (el as HTMLElement).style.left)
|
|
).toBe('50%')
|
|
await expect(beforeImg).toHaveCSS('clip-path', /50%/)
|
|
|
|
await expect(node).toHaveScreenshot('image-compare-default-50.png')
|
|
}
|
|
)
|
|
})
|