[Feature]: Copy & Paste Clipboard emulation

[done3t]

Your question

Is there any function to simulate Copy&Paste in playwright? like Ctrl+C Ctrl+V in my PC.
I had tried to make e2e tests for a product just like Google Sheets, I wanted to copy a cell and then paste it to another.
I had tried these way to do that:

1. use document.execCommand('copy'), document.execCommand('paste'),
2. use page.keyboard.press('Control+c'), page.keyboard.press('Control+v')
   but these are didn't work. (I had get permissions: ['clipboard-read', 'clipboard-write'] for the context.)

It's any another way to simulate Copy&Paste?

Thanks for reading and hope to get your answer

---

Note from maintainers

Following works in all browsers

  const modifier = isMac ? 'Meta' : 'Control';
  await page.setContent(`<div contenteditable>123</div>`);
  await page.focus('div');
  await page.keyboard.press(`${modifier}+KeyA`);
  await page.keyboard.press(`${modifier}+KeyC`);
  await page.keyboard.press(`${modifier}+KeyV`);
  await page.keyboard.press(`${modifier}+KeyV`);
  expect(await page.evaluate(() => document.querySelector('div').textContent)).toBe('123123');

[aslushnikov]

As of now, there's no copy-paste support. But IIUC Joel has some in-flight browser patches to make it possible in future!

[done3t]

As of now, there's no copy-paste support. But IIUC Joel has some in-flight browser patches to make it possible in future!

Thank you, I'm look forward to this feature

[Westbrook]

Oooh, this totally looks like it's working in Firefox, right now! It'll be very cool to see this get into Chromium and Webkit, soon.

[xuanzhaopeng]

Hey @mxschmitt , i noticed we added it into 1.15 and removed, then to 1.16 and then removed.

Do you think this one can be supported in 1.17?

Cheers

[akgupta0777]

@aslushnikov
If we cannot use copy paste in playwright. Do we have clipboard access ? can I access the contents of clipboard ?
Please Help.

[ChristofFritz]

It would be really helpful to be able to emulate the copy & paste events on document level. Currently we can't test this behavior in our app because playwright won't trigger the copy & paste events on document level when pressing 'Meta+C' / 'Meta+V'

[cscheffauer]

Upvote for this 👍🏻

[adimit]

Sorry for the me-too comment, but this is a big adoption hurdle for us, as one of our users' main workflows depends on copy & paste. We'd appreciate the keyboard event simulation, as that is what our users will most often use.

Triggering DOM events directly isn't our primary focus, as we already have UI elements that trigger these—but we do rely on their working correctly under the hood as our site fires them during several crucial workflows. Thanks!

[kingmatte]

Adding my voice to the chorus! We have multiple tests that require access to the clipboard.

[PedroDivergence]

+1 👍

[mrmckeb]

We've recently hit something around this issue. We have a test that we want to check that a link is copied to the clipboard, and then follow that link later.

Right now, we can't do this reliably as the clipboard context seems to be the OS clipboard - so I assume this would create issues with test parallelisation.

We also want to run this in Chromium, Firefox, and Webkit.

[kiramoonsun]

+1

[aslushnikov]

This issue has three parts in it that we'd like to track separately:

• clipboard isolation: [feature] clipboard isolation #13097
• dedicated clipboard API: [Feature] a dedicated clipboard API #15860
• basic clipboard support via shortcuts: Ctrl+C/V and Cmd+C/V: this issue

The shortcuts work now across the board and will be shipped in 1.24, so I'm closing this issue. Please upvote dedicated issues if you need them to help us prioritize accordingly!

[chris13524]

The note from the maintainers above has this snippet:

const modifier = isMac ? 'Meta' : 'Control';

What's the best way to obtain isMac?

Right now I'm doing:

const isMac = process.env.HOME?.startsWith('/Users/')

[kevin940726]

@chris13524 You can use os.platform() or process.platform and check if it is darwin.

[WesleyYue]

For reference, here is the complete code needed for copy + paste

export async function ctrlC(page: Page): Promise<void> {
  const isMac = os.platform() === "darwin";
  const modifier = isMac ? "Meta" : "Control";
  await page.keyboard.press(`${modifier}+KeyC`);
}

export async function ctrlV(page: Page): Promise<void> {
  const isMac = os.platform() === "darwin";
  const modifier = isMac ? "Meta" : "Control";
  await page.keyboard.press(`${modifier}+KeyV`);
}

You also need to grant clipboard permissions with this:

test("<test description>", async ({ page, context }) => {
    await context.grantPermissions(["clipboard-read", "clipboard-write"]);
    ....
}

[AlexGalays]

Tried every variation of things shown here and it still won't copy+paste specifically for MacOS + chromium.

[WesleyYue]

@AlexGalays you tried my code above? That works for me on macOS + chromium

[AlexGalays]

@AlexGalays you tried my code above? That works for me on macOS + chromium

Yes I did! After further tests, the difference with webkit is that the effects of

await page.keyboard.press(`${modifier}+KeyV`)

are not immediately visible, it's not synchronous: The content is not yet modified. I have to add a timeout wait of about 100ms. Works totally fine in webkit.

Edit: Nevermind... proseMirror has a 50ms timeout when handling pastes.

Thanks for your help :)

[Mmallineni]

How does it work with Playwright Java ?

[Overdrivr]

Does this technique works in headless mode ? So far I could only get it working in --headed

[skogsmaskin]

Does this technique works in headless mode ? So far I could only get it working in --headed

It works on Linux (Chromium) in headless mode, but not on Mac (where it only works in headed mode for me 😢 ).

[gladykov]

For those who as me, wanted to put string into clipboard, those 2 npm packages didn't work under Linux X11 in headless mode:

clipboardy (based on xsel), copy-paste (based on xclip)

What finally worked was this:

 
    async copy(text: string) {
        const command = `navigator.clipboard.writeText(${JSON.stringify(text)})`
        await executeJS(command)
    }

    async executeJS(js: string) {
        return page.evaluate((javascript) => {
            // eslint-disable-next-line no-eval
            eval(javascript);
        }, js);
    }

[steven-the-qa]

I made a blog post about how to do this with a copy-to-clipboard button https://blog.stevenboutcher.com/paste-text-from-your-clipboard-in-playwright-typescript?showSharer=true