mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 06:20:11 +00:00
## Summary - Add e2e test covering node copy/paste (Ctrl+C/V), image paste onto a selected LoadImage node, and image paste on empty canvas creating a new LoadImage node - Extract `simulateImagePaste` into reusable `ClipboardHelper.pasteFile()` with auto-detected filename and MIME type - Add test workflow asset `load_image_with_ksampler.json` and `image32x32.webp` image asset ## Test plan - [ ] `pnpm typecheck:browser` passes - [ ] `pnpm exec eslint browser_tests/tests/copyPaste.spec.ts` passes - [ ] New test passes in CI: `Copy paste node, image paste onto LoadImage, image paste on empty canvas` - [ ] Existing copy/paste tests unaffected ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10233-test-add-copy-paste-node-and-image-paste-e2e-tests-3276d73d365081e78bb9f3f1bf34389f) by [Unito](https://www.unito.io)
63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import { readFileSync } from 'fs'
|
|
import { basename } from 'path'
|
|
|
|
import type { Locator, Page } from '@playwright/test'
|
|
|
|
import type { KeyboardHelper } from './KeyboardHelper'
|
|
import { getMimeType } from './mimeTypeUtil'
|
|
|
|
export class ClipboardHelper {
|
|
constructor(
|
|
private readonly keyboard: KeyboardHelper,
|
|
private readonly page: Page
|
|
) {}
|
|
|
|
async copy(locator?: Locator | null): Promise<void> {
|
|
await this.keyboard.ctrlSend('KeyC', locator ?? null)
|
|
}
|
|
|
|
async paste(locator?: Locator | null): Promise<void> {
|
|
await this.keyboard.ctrlSend('KeyV', locator ?? null)
|
|
}
|
|
|
|
async pasteFile(filePath: string): Promise<void> {
|
|
const buffer = readFileSync(filePath)
|
|
const bufferArray = [...new Uint8Array(buffer)]
|
|
const fileName = basename(filePath)
|
|
const fileType = getMimeType(fileName)
|
|
|
|
// Register a one-time capturing-phase listener that intercepts the next
|
|
// paste event and injects file data onto clipboardData.
|
|
await this.page.evaluate(
|
|
({ bufferArray, fileName, fileType }) => {
|
|
document.addEventListener(
|
|
'paste',
|
|
(e: ClipboardEvent) => {
|
|
e.preventDefault()
|
|
e.stopImmediatePropagation()
|
|
|
|
const file = new File([new Uint8Array(bufferArray)], fileName, {
|
|
type: fileType
|
|
})
|
|
const dataTransfer = new DataTransfer()
|
|
dataTransfer.items.add(file)
|
|
|
|
const syntheticEvent = new ClipboardEvent('paste', {
|
|
clipboardData: dataTransfer,
|
|
bubbles: true,
|
|
cancelable: true
|
|
})
|
|
document.dispatchEvent(syntheticEvent)
|
|
},
|
|
{ capture: true, once: true }
|
|
)
|
|
},
|
|
{ bufferArray, fileName, fileType }
|
|
)
|
|
|
|
// Trigger a real Ctrl+V keystroke — the capturing listener above will
|
|
// intercept it and re-dispatch with file data attached.
|
|
await this.paste()
|
|
}
|
|
}
|