-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
browser testing: enable (or make it easier) to copy/paste text #6746
Comments
I'm not sure. There are some issue on playwright microsoft/playwright#15860 microsoft/playwright#24039, which suggest workaround using Have you tried testing-library's clipboard api? https://testing-library.com/docs/user-event/clipboard |
yeah I tried RTL with
and also
but it didn't work |
to be clear, I don't want to interact with window.navigator.clipboard. I need to test what happens when you paste into a specific text input |
Once again, it looks working with this example of mine 😅 https://stackblitz.com/edit/vitest-dev-vitest-ccmzqe?file=test%2Frepro.test.ts (please test it locally to use playwright) Note that Screenshotimport { test } from 'vitest';
import { page, userEvent } from '@vitest/browser/context';
test('clipboard', async () => {
document.body.innerHTML = `
<input placeholder="first" />
<input placeholder="second" />
`;
// write "hello" and copy to clipboard
await userEvent.click(page.getByPlaceholder('first'));
await userEvent.keyboard('hello');
await userEvent.keyboard('{Control>}{a}{/Control}');
await userEvent.keyboard('{Control>}{c}{/Control}');
// paste twice into second
await userEvent.click(page.getByPlaceholder('second'));
await userEvent.keyboard('{Control>}{v}{/Control}');
await userEvent.keyboard('{Control>}{v}{/Control}');
// hellohello
console.log(page.getByPlaceholder('second').query()?.value);
}); (Tested with playwright chromium and webdriverio chrome) Can you share how you code looks like? |
"Control+C/X/V" combo seems to mostly work on playwright microsoft/playwright#8114 and webdriverio https://webdriver.io/docs/api/expect-webdriverio/#tohaveclipboardtext, so we could implement testling-library-like |
Hmm weird, It's working on my Linux PC. Do you use Mac? According to microsoft/playwright#8114, you might need |
The copy/paste PRs are welcome. |
after my conversation in discord with @hi-ogawa, we figured out the issue:
For other people with the same issue, this is how you copy/paste content: Macimport { test } from 'vitest';
import { page, userEvent } from '@vitest/browser/context';
test('clipboard', async () => {
document.body.innerHTML = `
<input placeholder="first" />
<input placeholder="second" />
`;
// write "hello" and copy to clipboard
await userEvent.click(page.getByPlaceholder('first'));
await userEvent.keyboard('hello');
await userEvent.keyboard('{selectall}');
await userEvent.keyboard('{Meta>}{c}{/Meta}');
// paste twice into second
await userEvent.click(page.getByPlaceholder('second'));
await userEvent.keyboard('{Meta>}{v}{/Meta}');
await userEvent.keyboard('{Meta>}{v}{/Meta}');
// hellohello
console.log(page.getByPlaceholder('second').query()?.value);
}); Linux/Windowsimport { test } from 'vitest';
import { page, userEvent } from '@vitest/browser/context';
test('clipboard', async () => {
document.body.innerHTML = `
<input placeholder="first" />
<input placeholder="second" />
`;
// write "hello" and copy to clipboard
await userEvent.click(page.getByPlaceholder('first'));
await userEvent.keyboard('hello');
await userEvent.keyboard('{selectall}');
await userEvent.keyboard('{Control>}{c}{/Control}');
// paste twice into second
await userEvent.click(page.getByPlaceholder('second'));
await userEvent.keyboard('{Control>}{v}{/Control}');
await userEvent.keyboard('{Control>}{v}{/Control}');
// hellohello
console.log(page.getByPlaceholder('second').query()?.value);
}); |
oh, nevermind. Playwright supports the import { test } from 'vitest';
import { page, userEvent } from '@vitest/browser/context';
test('clipboard', async () => {
document.body.innerHTML = `
<input placeholder="first" />
<input placeholder="second" />
`;
// write "hello" and copy to clipboard
await userEvent.click(page.getByPlaceholder('first'));
await userEvent.keyboard('hello');
await userEvent.keyboard('{selectall}');
await userEvent.keyboard('{ControlOrMeta>}{c}{/ControlOrMeta}');
// paste twice into second
await userEvent.click(page.getByPlaceholder('second'));
await userEvent.keyboard('{ControlOrMeta>}{v}{/ControlOrMeta}');
await userEvent.keyboard('{ControlOrMeta>}{v}{/ControlOrMeta}');
// hellohello
console.log(page.getByPlaceholder('second').query()?.value);
}); |
Clear and concise description of the problem
I want to paste text into an element
Suggested solution
no idea 😅 I'm sure the drivers must have support for the clipboard api somehow
Alternative
No response
Additional context
No response
Validations
The text was updated successfully, but these errors were encountered: