mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-05 23:50:08 +00:00
296 lines
10 KiB
TypeScript
296 lines
10 KiB
TypeScript
import { expect } from '@playwright/test'
|
|
|
|
import { comfyPageFixture as test } from '../fixtures/ComfyPage'
|
|
import { PerformanceMonitor } from '../helpers/performanceMonitor'
|
|
|
|
test.describe('Background Image Upload', () => {
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
// Reset the background image setting before each test
|
|
await comfyPage.setSetting('Comfy.Canvas.BackgroundImage', '')
|
|
})
|
|
|
|
test.afterEach(async ({ comfyPage }) => {
|
|
// Clean up background image setting after each test
|
|
await comfyPage.setSetting('Comfy.Canvas.BackgroundImage', '')
|
|
})
|
|
|
|
test('should show background image upload component in settings', async ({
|
|
comfyPage
|
|
}) => {
|
|
// Open settings dialog
|
|
await comfyPage.page.keyboard.press('Control+,')
|
|
|
|
// Navigate to Appearance category
|
|
const appearanceOption = comfyPage.page.locator('text=Appearance')
|
|
await appearanceOption.click()
|
|
|
|
// Find the background image setting
|
|
const backgroundImageSetting = comfyPage.page.locator(
|
|
'#Comfy\\.Canvas\\.BackgroundImage'
|
|
)
|
|
await expect(backgroundImageSetting).toBeVisible()
|
|
|
|
// Verify the component has the expected elements using semantic selectors
|
|
const urlInput = backgroundImageSetting.locator('input[type="text"]')
|
|
await expect(urlInput).toBeVisible()
|
|
await expect(urlInput).toHaveAttribute('placeholder')
|
|
|
|
const uploadButton = backgroundImageSetting.locator(
|
|
'button:has(.pi-upload)'
|
|
)
|
|
await expect(uploadButton).toBeVisible()
|
|
|
|
const clearButton = backgroundImageSetting.locator('button:has(.pi-trash)')
|
|
await expect(clearButton).toBeVisible()
|
|
await expect(clearButton).toBeDisabled() // Should be disabled when no image
|
|
})
|
|
|
|
test('@perf should upload image file and set as background', async ({
|
|
comfyPage
|
|
}) => {
|
|
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
|
const testName = 'upload-background-image-file'
|
|
|
|
await perfMonitor.startMonitoring(testName)
|
|
|
|
// Open settings dialog
|
|
await comfyPage.page.keyboard.press('Control+,')
|
|
|
|
// Navigate to Appearance category
|
|
const appearanceOption = comfyPage.page.locator('text=Appearance')
|
|
await appearanceOption.click()
|
|
|
|
// Find the background image setting
|
|
const backgroundImageSetting = comfyPage.page.locator(
|
|
'#Comfy\\.Canvas\\.BackgroundImage'
|
|
)
|
|
// Click the upload button to trigger file input
|
|
const uploadButton = backgroundImageSetting.locator(
|
|
'button:has(.pi-upload)'
|
|
)
|
|
|
|
// Set up file upload handler and upload
|
|
await perfMonitor.measureOperation('trigger-file-upload', async () => {
|
|
const fileChooserPromise = comfyPage.page.waitForEvent('filechooser')
|
|
await uploadButton.click()
|
|
const fileChooser = await fileChooserPromise
|
|
await fileChooser.setFiles(comfyPage.assetPath('image32x32.webp'))
|
|
})
|
|
|
|
// Wait for upload to complete and verify the setting was updated
|
|
await perfMonitor.measureOperation('process-uploaded-file', async () => {
|
|
await comfyPage.page.waitForTimeout(500) // Give time for file reading
|
|
})
|
|
|
|
// Verify the URL input now has an API URL
|
|
const urlInput = backgroundImageSetting.locator('input[type="text"]')
|
|
const inputValue = await urlInput.inputValue()
|
|
expect(inputValue).toMatch(/^\/api\/view\?.*subfolder=backgrounds/)
|
|
|
|
// Verify clear button is now enabled
|
|
const clearButton = backgroundImageSetting.locator('button:has(.pi-trash)')
|
|
await expect(clearButton).toBeEnabled()
|
|
|
|
// Verify the setting value was actually set
|
|
const settingValue = await comfyPage.getSetting(
|
|
'Comfy.Canvas.BackgroundImage'
|
|
)
|
|
expect(settingValue).toMatch(/^\/api\/view\?.*subfolder=backgrounds/)
|
|
|
|
await perfMonitor.finishMonitoring(testName)
|
|
})
|
|
|
|
test('@perf should accept URL input for background image', async ({
|
|
comfyPage
|
|
}) => {
|
|
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
|
const testName = 'input-background-image-url'
|
|
|
|
await perfMonitor.startMonitoring(testName)
|
|
|
|
const testImageUrl = 'https://example.com/test-image.png'
|
|
|
|
// Open settings dialog
|
|
await comfyPage.page.keyboard.press('Control+,')
|
|
|
|
// Navigate to Appearance category
|
|
const appearanceOption = comfyPage.page.locator('text=Appearance')
|
|
await appearanceOption.click()
|
|
|
|
// Find the background image setting
|
|
const backgroundImageSetting = comfyPage.page.locator(
|
|
'#Comfy\\.Canvas\\.BackgroundImage'
|
|
)
|
|
|
|
// Enter URL in the input field
|
|
const urlInput = backgroundImageSetting.locator('input[type="text"]')
|
|
await perfMonitor.measureOperation('input-url-text', async () => {
|
|
await urlInput.fill(testImageUrl)
|
|
await urlInput.blur()
|
|
})
|
|
|
|
// Verify clear button is now enabled
|
|
const clearButton = backgroundImageSetting.locator('button:has(.pi-trash)')
|
|
await expect(clearButton).toBeEnabled()
|
|
|
|
// Verify the setting value was updated
|
|
const settingValue = await comfyPage.getSetting(
|
|
'Comfy.Canvas.BackgroundImage'
|
|
)
|
|
expect(settingValue).toBe(testImageUrl)
|
|
|
|
await perfMonitor.finishMonitoring(testName)
|
|
})
|
|
|
|
test('@perf should clear background image when clear button is clicked', async ({
|
|
comfyPage
|
|
}) => {
|
|
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
|
const testName = 'clear-background-image'
|
|
|
|
await perfMonitor.startMonitoring(testName)
|
|
|
|
const testImageUrl = 'https://example.com/test-image.png'
|
|
|
|
// First set a background image
|
|
await perfMonitor.measureOperation('set-initial-setting', async () => {
|
|
await comfyPage.setSetting('Comfy.Canvas.BackgroundImage', testImageUrl)
|
|
})
|
|
|
|
// Open settings dialog
|
|
await comfyPage.page.keyboard.press('Control+,')
|
|
|
|
// Navigate to Appearance category
|
|
const appearanceOption = comfyPage.page.locator('text=Appearance')
|
|
await appearanceOption.click()
|
|
|
|
// Find the background image setting
|
|
const backgroundImageSetting = comfyPage.page.locator(
|
|
'#Comfy\\.Canvas\\.BackgroundImage'
|
|
)
|
|
// Verify the input has the test URL
|
|
const urlInput = backgroundImageSetting.locator('input[type="text"]')
|
|
await expect(urlInput).toHaveValue(testImageUrl)
|
|
|
|
// Verify clear button is enabled
|
|
const clearButton = backgroundImageSetting.locator('button:has(.pi-trash)')
|
|
await expect(clearButton).toBeEnabled()
|
|
|
|
// Click the clear button
|
|
await perfMonitor.measureOperation('click-clear-button', async () => {
|
|
await clearButton.click()
|
|
})
|
|
|
|
// Verify the input is now empty
|
|
await expect(urlInput).toHaveValue('')
|
|
|
|
// Verify clear button is now disabled
|
|
await expect(clearButton).toBeDisabled()
|
|
|
|
// Verify the setting value was cleared
|
|
const settingValue = await comfyPage.getSetting(
|
|
'Comfy.Canvas.BackgroundImage'
|
|
)
|
|
expect(settingValue).toBe('')
|
|
|
|
await perfMonitor.finishMonitoring(testName)
|
|
})
|
|
|
|
test('should show tooltip on upload and clear buttons', async ({
|
|
comfyPage
|
|
}) => {
|
|
// Open settings dialog
|
|
await comfyPage.page.keyboard.press('Control+,')
|
|
|
|
// Navigate to Appearance category
|
|
const appearanceOption = comfyPage.page.locator('text=Appearance')
|
|
await appearanceOption.click()
|
|
|
|
// Find the background image setting
|
|
const backgroundImageSetting = comfyPage.page.locator(
|
|
'#Comfy\\.Canvas\\.BackgroundImage'
|
|
)
|
|
// Hover over upload button and verify tooltip appears
|
|
const uploadButton = backgroundImageSetting.locator(
|
|
'button:has(.pi-upload)'
|
|
)
|
|
await uploadButton.hover()
|
|
|
|
// Wait for tooltip to appear and verify it exists
|
|
await comfyPage.page.waitForTimeout(700) // Tooltip delay
|
|
const uploadTooltip = comfyPage.page.locator('.p-tooltip:visible')
|
|
await expect(uploadTooltip).toBeVisible()
|
|
|
|
// Move away to hide tooltip
|
|
await comfyPage.page.locator('body').hover()
|
|
await comfyPage.page.waitForTimeout(100)
|
|
|
|
// Set a background to enable clear button
|
|
const urlInput = backgroundImageSetting.locator('input[type="text"]')
|
|
await urlInput.fill('https://example.com/test.png')
|
|
await urlInput.blur()
|
|
|
|
// Hover over clear button and verify tooltip appears
|
|
const clearButton = backgroundImageSetting.locator('button:has(.pi-trash)')
|
|
await clearButton.hover()
|
|
|
|
// Wait for tooltip to appear and verify it exists
|
|
await comfyPage.page.waitForTimeout(700) // Tooltip delay
|
|
const clearTooltip = comfyPage.page.locator('.p-tooltip:visible')
|
|
await expect(clearTooltip).toBeVisible()
|
|
})
|
|
|
|
test('@perf should maintain reactive updates between URL input and clear button state', async ({
|
|
comfyPage
|
|
}) => {
|
|
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
|
const testName = 'reactive-widget-updates'
|
|
|
|
await perfMonitor.startMonitoring(testName)
|
|
|
|
// Open settings dialog
|
|
await comfyPage.page.keyboard.press('Control+,')
|
|
|
|
// Navigate to Appearance category
|
|
const appearanceOption = comfyPage.page.locator('text=Appearance')
|
|
await appearanceOption.click()
|
|
|
|
// Find the background image setting
|
|
const backgroundImageSetting = comfyPage.page.locator(
|
|
'#Comfy\\.Canvas\\.BackgroundImage'
|
|
)
|
|
const urlInput = backgroundImageSetting.locator('input[type="text"]')
|
|
const clearButton = backgroundImageSetting.locator('button:has(.pi-trash)')
|
|
|
|
// Initially clear button should be disabled
|
|
await expect(clearButton).toBeDisabled()
|
|
|
|
// Type some text - clear button should become enabled
|
|
await perfMonitor.measureOperation('input-partial-text', async () => {
|
|
await urlInput.fill('test')
|
|
})
|
|
await expect(clearButton).toBeEnabled()
|
|
|
|
// Clear the text manually - clear button should become disabled again
|
|
await perfMonitor.measureOperation('clear-input-manually', async () => {
|
|
await urlInput.fill('')
|
|
})
|
|
await expect(clearButton).toBeDisabled()
|
|
|
|
// Add text again - clear button should become enabled
|
|
await perfMonitor.measureOperation('input-full-url', async () => {
|
|
await urlInput.fill('https://example.com/image.png')
|
|
})
|
|
await expect(clearButton).toBeEnabled()
|
|
|
|
// Use clear button - should clear input and disable itself
|
|
await perfMonitor.measureOperation('clear-via-button', async () => {
|
|
await clearButton.click()
|
|
})
|
|
await expect(urlInput).toHaveValue('')
|
|
await expect(clearButton).toBeDisabled()
|
|
|
|
await perfMonitor.finishMonitoring(testName)
|
|
})
|
|
})
|