-
Notifications
You must be signed in to change notification settings - Fork 3.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
Enable access to clipboard in test #2752
Comments
Related issues
|
Accessing clipboard can be worked around, but the main issue is that the Assuming it happens somehow (or is fixed upstream), the checking the clipboard's contents can be done e.g. by using clipboardy:
const clipboardy = require('clipboardy');
module.exports = ( on ) => {
on('task', {
getClipboard () {
return clipboardy.readSync();
}
});
}; In your spec: describe('test', () => {
it('test', () => {
cy.document().then( doc => {
doc.body.innerHTML = '<input id="inp">';
});
cy.get('#inp').type('test{selectall}');
cy.document().then( doc => {
// this currently doesn't work unless you manually put focus
// into the AUT preview window (e.g. by clicking)
doc.execCommand('copy');
});
cy.task('getClipboard').should('contain', 'test');
});
}); |
I have a workaround for pasting in the interim. It fits the use case I have for pasting data, so I thought I'd share. See https://gist.github.com/nickytonline/bcdef8ef00211b0faf7c7c0e7777aaf6 |
See also #2851 |
Is there a reason why Cypress would block a .click() action when clicking a button that is doing a copy action? I keep getting a growl on our site during test runs and it states "Copy to clipboard not compatible with this browser! Try Chrome!" except, i'm running Cypress with Chrome. HTML (The formatting might look off, that's just to fit it on screen without a scrollbar):
This fails every time I do a After the test has run in the Test Runner I can click the button and I'll get the proper green growl that states it's been copied to my clipboard, but it won't work while the test is running. Any ideas? I originally thought this was an issue with clipboardy, but it works elsewhere on our site, and I eventually stripped clipboardy out of the test entirely just to see what would happen with the click. That's when i found Cypress seems to be blocking the action. |
We're currently experiencing the same: You can't copy to clipboard in cypress… in Firefox. In Chrome it seems to work fine.
As nobody want's to introduce https to the e2e testing stage (I think), maybe cypress could use the mentioned "clipboardWrite" permission in Firefox? |
@zepatrik Here's my current approach:
This is what that looks like when implemented in Typescript: describe('My website page', () => {
it('copies signup links to clipboard', () => {
cy.visit(`/${school.id}/users`, {
onBeforeLoad(win: Window): void {
cy.spy(win.navigator.clipboard, 'writeText').as('copy');
},
});
cy.contains('button', 'Share signup link').click();
cy.get('@copy').should('be.calledWithExactly', `http://localhost:3000/${school.id}/signup`);
});
}); Note that this approach doesn't solve every problem. For example, if you use the invisible |
At least for apps using the Clipboard api to write to the clipboard, this worked to check the contents of the clipboard.
|
@DRiewaldt I am facing the exact same issue, I am using chrome Version 87.0.4280.141 (Official Build) (x86_64) |
hello @sammacorpy @DRiewaldt I have the same issue. |
Hi @dwelle , What do you refer with manually put focus? In which element? |
I have not, I'm actually back here to see if there was any movement on this front. I'm hoping the Cypress team adds functionality for clipboard access, that'd be crazy handy. |
@DRiewaldt can you provide a small repo with the app and test code - as simple as possible? So we can take a look at this. |
Initial work to show how to access the clipboard from the test is in this recipe https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__clipboard |
I can't, company code. And I don't have the skill to create an example. Though, it seems you already whipped one up. I'll look through your example, and see if helps me. It seems clipboardy just doesn't work anywhere now. I'll have to go through and make sure I didn't somehow bork something, and see what's different than your example. Thanks for the response. |
clipboardy works in version 7.7.0 and completely refuses to work since version 8.0.0 (browser chrome) I don’t know what it’s connected with, but I suffer from a lack of this feature |
clipboardy is not working in chrome browser with headless mode, but it's working with interactive mode. Is it kind of limitation with headless mode? |
Cypress default events are simulated. That means that all events like cy.click or cy.type are fired from javascript. That's why these events will be untrusted (event.isTrusted will be false) and they can behave a little different from real native events. @Kanapriya check this out https://github.com/dmtrKovalenko/cypress-real-events . this works with clipboardy in all modes |
@Kanapriya @a-chatterjee I am in Cypress Version: 7.7.0. Here are the test results I observed:
@jennifer-shehane is it limitation we can't run clipboard related cases in chrome headless module? |
@lipingguo0 This is a limitation. That is why this issue is still open. Accessing the clipboard data is not consistent and we don't have a clear API built into Cypress to do this. |
try this code? |
For me adding a custom command and just triggering a custom "paste" event works. Cypress.Commands.add(
'pasteClipboard',
{ prevSubject: true },
(query, htmlContent) => {
return cy
.wrap(query)
.trigger('paste', createHtmlPasteEvent(htmlContent));
}, const createHtmlPasteEvent = (htmlContent) =>
Object.assign(new Event('paste', { bubbles: true, cancelable: true }), {
clipboardData: {
getData: (type = 'text/html') => htmlContent,
types: ['text/html'],
},
}); |
Try using cy.window() and you can use the navigator.clipboard as normal for pasting and copying.
|
Hello! None of the previous proposal worked for me. My baseUrl is not I manage to test my feature that was using the clipboard adding the following in my Cypress.on('window:before:load', (win) => {
let copyText;
if (!win.navigator.clipboard) {
win.navigator.clipboard = {
__proto__: {},
};
}
win.navigator.clipboard.__proto__.writeText = (text) => (copyText = text);
win.navigator.clipboard.__proto__.readText = () => copyText;
}); At first, I was "overriding" the It doesn't feel like a clean solution, but I do not see any possible issue at this time. |
This worked for us. Thank you.
This didn't appear to work for me. |
My test to check the contents of the clipboard was flaky on Chrome, but it seems to do the trick.
from this answser |
I spent a lot of time to resolve and I ended up on same. :)...Thanks. |
It seems this feature is not available in Cypress in any way. |
It also disables one test that writes in the clipboard due lack of support in the clipboard api refs cypress-io/cypress#2752 w3c/clipboard-apis#182 w3c/clipboard-apis#52
This approach is working for
It still does not work for me when using |
note that in linux ARM64, |
- before loading the window, we are overwritting `win.navigator.clipboard.__proto__.writeText` and `win.navigator.clipboard.__proto__.readText` - @see cypress-io/cypress#2752 (comment)
I just wanted to add on to this -- thank you so much, this is eventually what worked for me, but updated to go in cypress.config I've got it written as:
Thanks again for the solution! |
Current behavior:
There is no way to access the clipboard in a test, as far as I can tell.
Desired behavior:
There should be an easy way to test what the clipboard holds. Useful for websites where text is placed in the clipboard using JS to transfere it somewhere.
Versions
all versions
The text was updated successfully, but these errors were encountered: