如何在Playwright中模拟剪贴板粘贴图片？已复制但无法自动粘贴

你的代码已经成功将图片写入剪贴板，但缺少触发粘贴操作的核心步骤。手动按Ctrl+V能生效，说明页面的粘贴逻辑正常，只需在代码里模拟该操作或触发paste事件即可。以下是两种可行方案：

方案一：模拟键盘快捷键（最贴近手动操作） #

直接用Playwright的page.keyboard.press模拟系统粘贴快捷键，确保目标元素处于焦点状态：

test.only("Clipboard", async ({browser}, testInfo) => {
    const context = await browser.newContext({ permissions: ["clipboard-read", "clipboard-write"] });
    const page = await context.newPage();
    // 先导航到目标页面，替换为你的实际页面地址
    await page.goto("你的页面URL");

    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();
    });

    // 根据系统选择对应粘贴快捷键
    await page.keyboard.press("Control+V"); // Windows/Linux
    // await page.keyboard.press("Meta+V"); // MacOS

    // 可选：等待页面处理粘贴内容
    await page.waitForTimeout(1000);
});

方案二：手动触发paste事件传递剪贴板内容 #

如果键盘模拟存在兼容性问题，可在页面上下文里直接构造paste事件并传入图片数据：

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

    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();

        // 构造并触发paste事件
        const pasteEvent = new ClipboardEvent("paste", {
            clipboardData: new DataTransfer(),
            bubbles: true,
            cancelable: true
        });
        pasteEvent.clipboardData.items.add("image/png", blob);
        clipboardImageHolder.dispatchEvent(pasteEvent);
    });

    await page.waitForTimeout(1000);
});

关键注意点 #

• 必须先通过page.goto导航到目标页面，否则无法找到#clipboard-image元素
• 检查目标元素是否设置contenteditable="true"，部分页面仅允许可编辑元素接收粘贴内容
• 若使用headless模式，可尝试切换为headless: "new"或非headless模式测试，部分浏览器对剪贴板的headless支持有限

内容的提问来源于stack exchange，提问作者SMH