admin管理员组文章数量:1327487
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
Share Improve this question edited Nov 4, 2022 at 13:42 SMH asked Nov 4, 2022 at 13:37 SMHSMH 1,0993 gold badges15 silver badges32 bronze badges2 Answers
Reset to default 3Finally, 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
版权声明:本文标题:javascript - How to simulate paste from clipboard in Playwright? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742204681a2432595.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论