如何使用 Puppeteer 粘贴文本? [英] How do you paste text using Puppeteer?

问题描述

我正在尝试为我的 React 应用程序中的输入编写一个测试(使用 jest-puppeteer)，以独特的方式处理自动完成或复制/粘贴字符串.

I am trying to write a test (using jest-puppeteer) for an input in my React application that handles autocomplete or copy/pasted strings in a unique way.

我希望通过使用 Puppeteer，我可以将文本粘贴到输入中，然后验证页面是否正确更新.不幸的是，我找不到有关如何执行此操作的任何可行示例.

I was hoping by using Puppeteer, I could paste text into the input and then validate that the page is updated correctly. Unfortunately, I can't find any working example of how to do this.

我尝试使用 page.keyboard 来模拟 CMD+C &CMD+V 但这些命令在 Puppeteer 中似乎不起作用.

I've tried using page.keyboard to simulate CMD+C & CMD+V but it does not appear that these sorts of commands work in Puppeteer.

我还尝试使用诸如 clipboardy 之类的库来写入和读取操作系统剪贴板.虽然剪贴板确实适用于写入(复制)，但似乎读取(粘贴)不会影响 Puppeteer 运行的页面.

I've also tried using a library such as clipboardy to write and read to the OS clipboard. While clipboardy does work for write (copy), it seems read (paste) does not affect the page run by Puppeteer.

我使用各种方法成功复制了文本，但无法粘贴到输入中.我已经通过将 "copy" 和 "paste" 的事件侦听器添加到文档中来验证这个假设."copy" 事件触发，但没有任何方法导致 "paste" 事件触发.

I have successfully copied the text using a variety of methods but have no way to paste into the input. I've validated this assumption by adding event listeners for "copy" and "paste" to the document. The "copy" events fire, but no method has resulted in the "paste" event firing.

以下是我尝试过的几种方法:

Here are a few approaches I have tried:

await clipboardy.write('1234'); // writes "1234" to clipboard
await page.focus("input");
await clipboardy.read(); // Supposedly pastes from clipboard
// assert input has updated

await clipboardy.write('1234');
await page.focus("input");
await page.keyboard.down('Meta');
await page.keyboard.press('KeyV');
await page.keyboard.up('Meta');
// assert input has updated

await page.evaluate(() => {
  const input = document.createElement('input');
  document.body.appendChild(input);
  input.value = '1234';
  input.focus();
  input.select();
  document.execCommand('copy');
  document.body.removeChild(input);
});
wait page.focus("input");
await page.keyboard.down('Meta');
await page.keyboard.press('KeyV');
await page.keyboard.up('Meta');

我认为这里唯一缺少的部分是粘贴文本；但是如何使用 Puppeteer 粘贴文本?

I think the only missing piece here is pasting the text; but how do you paste text using Puppeteer?

推荐答案

这对我有用 clipboardy，但当我在无头中启动它时不会:

This works for me with clipboardy, but not when I launch it in headless :

await clipboardy.write('foo')

const input= await puppeteerPage.$(inputSelector)
await input.focus()

await puppeteerPage.keyboard.down('Control')
await puppeteerPage.keyboard.press('V')
await puppeteerPage.keyboard.up('Control')

如果你让它在无头中工作，请告诉我.

If you make it works in headless tell me.

我也尝试了 clipBoard API 但我不能t 编译:

I tried it the clipBoard API too but I couldn t make it compile:

const browser = await getBrowser()
const context = browser.defaultBrowserContext();
// set clipBoard API permissions
context.clearPermissionOverrides()
context.overridePermissions(config.APPLICATION_URL, ['clipboard-write'])
puppeteerPage = await browser.newPage()

await puppeteerPage.evaluate((textToCopy) =>{
  navigator.clipboard.writeText(textToCopy)
}, 'bar')

const input= await puppeteerPage.$(inputSelector)
await input.focus()

await puppeteerPage.evaluate(() =>{
  navigator.clipboard.readText()
})

这篇关于如何使用 Puppeteer 粘贴文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！