如何在 Typescript 中使用 Playwright 访问剪贴板内容

Question

我在 Node.js 下的 Chromium 中运行了一个剧作家测试。我正在使用剧作家1.19.2。该测试单击“复制 UUID”链接，然后将 UUID 复制到剪贴板中。从剧作家那里访问剪贴板内容的最佳方式是什么？

Answer 1

如果@demouser123链接的问题中建议的解决方案不起作用，可以尝试以下方法：

test('copy uuid', async ({ page, context }) => {
    // Grant clipboard permissions to browser context
    await context.grantPermissions(["clipboard-read", "clipboard-write"]);
    
    /* Your test code */
    
    // Get clipboard content after the link/button has been clicked
    const handle = await page.evaluateHandle(() => navigator.clipboard.readText());
    const clipboardContent = await handle.jsonValue();
    
    // Check that the clipboard contains correct UUID
    expect(clipboardContent).toEqual('00000000-0000-0000-0000-000000000000');
});

Answer 2

到目前为止，还没有专门用于剪贴板复制粘贴模拟的事件。 Playwright github 中有一些开放事件，您可以跟踪以供将来参考 - #8114、#15860、#13097

唯一的解决方法是您可以模拟问题 #8114 中提到的

Ctrl+C

、

Ctrl+V

事件

  const modifier = isMac ? 'Meta' : 'Control';
  await page.setContent(`<div contenteditable>123</div>`);
  await page.focus('div');
  await page.keyboard.press(`${modifier}+KeyA`);
  await page.keyboard.press(`${modifier}+KeyC`);
  await page.keyboard.press(`${modifier}+KeyV`);
  await page.keyboard.press(`${modifier}+KeyV`);
  expect(await page.evaluate(() => document.querySelector('div').textContent)).toBe('123123');

Answer 3

实际上将数据放入剪贴板的更好方法是

page.evaluate("navigator.clipboard.writeText('123')")

Answer 4

要在浏览器上下文中高效地从剪贴板读取数据，您可以使用以下代码片段：

const ClipboardContent =等待this.page.evaluate(() => navigator.clipboard.readText()); 但是，请确保您在配置文件中启用了必要的权限。具体来说，您需要包括：

剧作家配置文件 “权限”：[“剪贴板读取”] 此添加将允许您的应用程序访问剪贴板以读取文本。