How do I access the contents of the clipboard from within a headless puppeteer test? - clipboard

Question

I'm writing a test that uses puppeteer to test a component that copies something to the clipboard when it is interacted with. I want to test that the contents of the clipboard are correct after interacting. Other resources like this github issue mention using a tool like clipboardy to accomplish this. I tried using that and it works locally, but when run in my headless CI server, it complains about not having access to the X environment. Is there a way to access the clipboard without starting an X server?
I'm writing a test like this:
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

By adding the 'clipboard-read' permission to puppeteer and using the
Clipboard API, you can run navigator.clipboard.readText() to read from the
clipboard in a test. This will work even in a headless environment:
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 of context.overridePermissions()

Answer 2

In my case I couldn't override permissions, as Eduard suggested, because it requires to give origin as a parm. I'm injecting html content in my test to the page via setContent so the page address is about:blank. Setting origin to "*" doesn't work either, nor undefined.
I have ended up mocking the clipboard api:
await page.evaluate((dataInternal) => {
// mock clipboard
let clipboardText = null;
window["navigator"]["clipboard"] = {
writeText: text => new Promise(resolve => clipboardText = text),
readText: () => new Promise(resolve => resolve(clipboardText)),
}
}
then you can just do the following assert:
expect(await page.evaluate(() => navigator.clipboard.readText())).toBe("your text in clipboard");

Answer 3

In my chrome, navigator.clipboard = ... did not work, because navigator had getter and setter for clipboard.
Mocking clipboard:
await page.evaluate(() => {
const clipboard = {
async writeText(text: string) {
this.text = text;
},
};
Object.defineProperty(navigator, 'clipboard', { value: clipboard });
});
Reading clipboard content:
page.evaluate(() => navigator.clipboard.text);