I ran into a problem at work where I needed to verify the functionality of a copy-to-clipboard button.

Solving this wasn't as straightforward as you might think.

Here's the code for you if you're in a hurry and don't want to stay for the explanation:

export async function copyWithButtonAndPasteSomewhere(
    page: Page,
    context: BrowserContext,
    copyButton: Locator,
    whereToPaste: Locator
) {
    await context.grantPermissions(["clipboard-read", "clipboard-write"]);
    await copyButton.click();
    await whereToPaste.focus(); // could also use click() here
    await page.keyboard.press("ControlOrMeta+KeyV");
}

Breakdown

Granting Read & Write Permissions

If you don't do this, you'll be unable to complete a copy or paste. The BrowserContext needs to have permission to access your clipboard to save or retrieve its contents.

Playwright lets you do this easily with the BrowserContext.grantPermissions() method.

Read up on it here.

Copying the Text

In my use case, I had a copy-to-clipboard button. I only needed to click it.

I used a data-testid attribute on the button to make a selector like this:

const copyButton = page.getByTestId("copyButton");

// And then passed it to this helper method within the test
await copyWithButtonAndPasteSomewhere(page, context, copyButton, whereToPaste)

Pasting the Text

The last 2 lines of the helper allow us to paste from the clipboard:

1. whereToPaste.focus will put the cursor in the DOM element specified by the locator whereToPaste (I used a text input on the webpage I was testing)

2. page.keyboard.press("ControlOrMeta+V") will paste from the clipboard, whether you're pasting from a Mac or PC keyboard in the test (must be on @playwright/test v1.45 if you want to use ControlOrMeta)

Modify for Cross-Browser Support

This grantPermissions solution will only work for Chrome.

You'll want to remove that line and the context param if you want to test on browsers other than chromium

Firefox and Safari require different configuration, so it's better to manage this in the playwright.config file under projects:

projects: [{
  name: "chromium",
  use: {
    ...devices["Desktop Chrome"],
    contextOptions: {
      // chromium-specific permissions
      permissions: ['clipboard-read', 'clipboard-write'],
    },
  },
},


{
  name: "firefox",
  use: {
    ...devices["Desktop Firefox"],
    launchOptions: {
      firefoxUserPrefs: {
        'dom.events.asyncClipboard.readText': true,
        'dom.events.testing.asyncClipboard': true,
      },
    }
  },
},

{
  name: "webkit",
  use: { ...devices["Desktop Safari"] },
}]