javascript - How to simulate paste from clipboard in Playwright? - Stack Overflow

admin管理员组

文章数量:1326309

I am trying to test image pasting functionality using Playwright.

I mamanged to copy image to the clipboard but not able to paste it. This is my code.

 test.only("Clipboard", async ({browser}, testInfo) => {
        const context = await browser.newContext({ permissions: ["clipboard-read", "clipboard-write"] });
        const page = await context.newPage();

        await page.evaluate(async () => {
            const base64 = `data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
            AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
                9TXL0Y4OHwAAAABJRU5ErkJggg==`;

            const response = await fetch(base64);
            const blob = await response.blob();
            await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);

            const clipboardImageHolder = document.getElementById("clipboard-image");
            clipboardImageHolder.focus();
            const result = await navigator.clipboard.readText();
            console.log(result);
        });
    });

when I run the test, then I press Ctrl+v manaull; I see the image pasted in the div element

I am trying to test image pasting functionality using Playwright.

I mamanged to copy image to the clipboard but not able to paste it. This is my code.

 test.only("Clipboard", async ({browser}, testInfo) => {
        const context = await browser.newContext({ permissions: ["clipboard-read", "clipboard-write"] });
        const page = await context.newPage();

        await page.evaluate(async () => {
            const base64 = `data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
            AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
                9TXL0Y4OHwAAAABJRU5ErkJggg==`;

            const response = await fetch(base64);
            const blob = await response.blob();
            await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);

            const clipboardImageHolder = document.getElementById("clipboard-image");
            clipboardImageHolder.focus();
            const result = await navigator.clipboard.readText();
            console.log(result);
        });
    });

when I run the test, then I press Ctrl+v manaull; I see the image pasted in the div element

• javascript
• playwright

Share Improve this question Follow edited Nov 4, 2022 at 13:42 SMH asked Nov 4, 2022 at 13:37 SMHSMH 1,09933 gold badges1515 silver badges3232 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Finally, this worked for me.

  await page.evaluate(async () => {
            const base64 = `data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
            AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
                9TXL0Y4OHwAAAABJRU5ErkJggg==`;

            const response = await fetch(base64);
            const blob = await response.blob();
            const clipboardImageHolder = document.getElementById("you-are-the-one");
            clipboardImageHolder.focus();

            let pasteEvent = new Event("paste", { bubbles: true, cancelable: true });
            pasteEvent = Object.assign(pasteEvent, {
                clipboardData: {
                    items: {
                        a: {
                            kind: "file",
                            getAsFile() {
                                return new File([blob], "foo.png", { type: blob.type });
                            },
                        },
                    },
                },
            });

            console.log("event", pasteEvent);
            clipboardImageHolder.dispatchEvent(pasteEvent);
        });

I had to dispatch paste event and added clipboardData object to it.

Using the keyboard often works for me:

const clipPage = await context.newPage();
await clipPage.goto(imageUrl);
await clipPage.keyboard.press("Control+C");
await page.bringToFront();
await page.keyboard.press("Control+V");

---

As the question asker showed, permissions are needed:

const context = await browser.newContext({ permissions: ["clipboard-read", "clipboard-write"] });
const page = await context.newPage();

本文标签： javascriptHow to simulate paste from clipboard in PlaywrightStack Overflow