I recently had to simulate copy-paste interactions in Cypress and it was not easy to find a solution on Google, making this a tricky feature to test. Cypress allows you to stub clipboard operations and simulate a full copy-paste flow in a clean, testable way.
In this article, I will show you how to stub clipboard content and simulate pasting text into an input field using Cypress.
We want to test that a user can paste a value from their clipboard into an input field. Since Cypress doesn’t support direct clipboard interaction for security reasons, we’ll mock the clipboard’s readText() method to return a known value and assert that the value is pasted correctly into the input.
Test Example
Breakdown
1. visit the application
cy.visit("https://todomvc-app-for-testing.surge.sh/");
2. Stud Clipboard API
cy.window().then((win) => {
cy.stub(win.navigator.clipboard, “readText”).resolves(“Razvan”);
});
We stub navigator.clipboard.readText() so whenever the test calls it, it returns "Razvan"—our fake clipboard content.
3. Trigger Paste Behavior
cy.window().then((win) => {
return win.navigator.clipboard.readText().then((text) => {
cy.get(“input.new-todo”).type(text);
});
});
We call the stubbed readText() and use the result to simulate a user pasting it into the input.new-todo field.
Conclusion
Clipboard interactions might be essential parts of many applications and using this approach in Cypress we can simulate the same behavior and ensure robust E2E tests.
Enjoyed this article? Make sure to subscribe to my YouTube Channel for more Test Automation tutorials, and follow me on LinkedIn and Twitter for regular insights.
Looking to improve your test automation skills?
I’ve created a personalized 1-on-1 Mentoring program refined to boost YOUR CURRENT skills. Reach out at iamrv@razvanvancea.ro for more details and together will create a learning path adapted to your skills and goals that you are aiming for, in a timely-efficient manner🚀