Using the Clipboard in Playwright: Copy, Paste, Automate

Playwright is known for its powerful browser automation, but did you know it can also interact with your system clipboard? Whether you're copying content between fields, testing paste behavior, or 
verifying clipboard contents, Playwright has your back with a few caveats.

In this post, we’ll cover:

1. Reading from the clipboard in Playwright
2. Writing to the clipboard
3. Simulating copy-paste actions
4. Key differences between system and browser clipboard access

In browsers, clipboard access is typically handled via the navigator.clipboard API. It’s secure, asynchronous, and yes — supported in Playwright through page.evaluate.

✅ Read from the clipboard in a test

You can access the clipboard using navigator.clipboard.readText() inside page.evaluate – but this only works in secure contexts (i.e., HTTPS or localhost) and Chromium-based browsers.

const clipboardText = await page.evaluate(async () => {
  return await navigator.clipboard.readText();
});
console.log('Clipboard contains:', clipboardText);

This may not work in Firefox/WebKit or headless mode unless permissions are granted correctly.

✅ Write to the clipboard during automation

Same idea — use navigator.clipboard.writeText():

await page.evaluate(async () => {
  await navigator.clipboard.writeText('Hello from Playwright!');
});

✅ Simulate copy/paste actions using keyboard shortcuts

This is super common in e2e tests. Example of selecting a text input, copying, and pasting:

// Type some text
await page.fill('#myInput', 'Some text');
await page.focus('#myInput');

// Select all + copy
await page.keyboard.press('Control+A'); // or 'Meta+A' on macOS
await page.keyboard.press('Control+C');

// Move focus to another input and paste
await page.focus('#otherInput');
await page.keyboard.press('Control+V');

✅ System clipboard vs browser clipboard

1. navigator.clipboard: Accesses the system clipboard but has permissions/security constraints.
2. Keyboard shortcuts: Usually simulate user behavior — great for testing real workflows.
3. There's no native Playwright API (like page.clipboard) — all clipboard work is done through browser APIs or simulated keyboard interactions.

Example for clipboard copy and paste

When writing tests, you might need to copy and paste some text. Playwright has a nice API for that.

test('on paste should autofill', async ({ page, context }) => {
  // grant access to clipboard (you can also set this in the playwright.config.ts file)
  await context.grantPermissions(['clipboard-read', 'clipboard-write']);

  // focus on the input
  await page.locator('input').focus();

  // copy text to clipboard
  await page.evaluate(() => navigator.clipboard.writeText('123'));

  // Get clipboard content
  const handle = await page.evaluateHandle(() => navigator.clipboard.readText());
  const clipboardContent = await handle.jsonValue();

  // paste text from clipboard
  await page.locator(first).press('ControlOrMeta+A');

  // check if the input has the value
  await expect(page.locator(input)).toHaveValue('123');
});

To grant access globally, you can set it in the playwright.config.ts file:

import type { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  use: {
    //...
    permissions: ['clipboard-read', 'clipboard-write'],
  },
};

export default config;

Playwright gives you full control over the clipboard — whether you're simulating user behavior or verifying real copy/paste logic. Just remember:

1. Use navigator.clipboard with page.evaluate for direct access.
2. Use keyboard shortcuts for reliability across browsers.
3. Always grant clipboard permissions in the browser context.