clipboard - 如何从 headless puppeteer 操作测试中访问剪贴板的内容？

Question

我正在编写一个测试，该测试使用 puppeteer 来测试一个组件，该组件在与之交互时将某些内容复制到剪贴板。我想测试交互后剪贴板的内容是否正确。其他资源，如 this github issue提到使用类似 clipboardy 的工具来实现这一点。我尝试使用它并且它在本地工作，但是在我的 headless CI 服务器中运行时，它提示无法访问 X 环境。有没有办法在不启动 X 服务器的情况下访问剪贴板？

我正在编写这样的测试:

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://mypage.com');

await page.click('#my-component');

// This fails in a headless environment
expect(clipboardy.readSync()).toEqual("Some text");

Answer 1

通过添加 'clipboard-read'允许操纵和使用
剪贴板 API，你可以运行 navigator.clipboard.readText()从阅读
测试中的剪贴板。即使在 headless 环境中，这也能工作:

const browser = await puppeteer.launch();
const context = browser.defaultBrowserContext();
context.overridePermissions(/* browser origin */, ['clipboard-read'])
const page = await browser.newPage();
await page.goto('https://mypage.com');

await page.click('#my-component');

expect(await page.evaluate(() => navigator.clipboard.readText()))
  .toEqual("Some text");

Documentation context.overridePermissions()