How do I access the browser clipboard with Playwright?

I recently ran into an issue where I wanted to interact with a section of the system I was testing that had 'Copy to Clipboard' functionality. This was specifically a link that I could generate and then share out. This part of our system was a part of our customer onboarding journey, and we deemed it as something we needed an automated check for.

The first thing we will do is navigate to the website: https://codepen.io/shaikmaqsood/pen/XmydxJ, and click a link or button that will copy an item to the browser clipboard. Next will be to actually interact with the browser to get the copied value. In order to interact with the clipboard, we are  going to use the evaluate method that is called on the page Class page.evaluate(). The code can be found below.

//copyToClipboard.spec.ts

import { test, expect } from "@playwright/test";

test("Validate Copy to Clipboard 1", async ({ page }) => {
  await page.goto("https://codepen.io/shaikmaqsood/pen/XmydxJ");

  await page
    .frameLocator("#result")
    .getByRole("button", { name: "Copy TEXT 1" })
    .click();

  let clipboardText1 = await page.evaluate("navigator.clipboard.readText()");
  expect(clipboardText1).toContain("Hello, I'm TEXT 1");
});

Github Code Example

There is another step you need to take in order to get this running without human intervention, and that is giving the browser permission to access the clipboard. Specifically the permissions: ["clipboard-read"] that should be added to the use:{} block. Without this option you will be faced with this modal in chrome, which you have to manually allow.

By adding the below permissions you will no longer receive this popup in your browser that is being controlled by playwright. It's also worth noting to interact with the codepen.io site in headless: true mode, I had to pass in a custom userAgent to bypass the Cloudflare are you a human check.

//playwright.config.ts

import { PlaywrightTestConfig } from "@playwright/test";

const config: PlaywrightTestConfig = {
  use: {
    browserName: "chromium",
    headless: true,
    permissions: ["clipboard-read"],
    userAgent: "some custom ua",
  },
};

export default config;

Thanks for reading! If you found this helpful, reach out and let me know on LinkedIn or consider buying me a cup of coffee. If you want more content delivered to you in your inbox subscribe below.