-
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
Clicking anchor link to download file causes page load timeout #14857
Comments
I am facing the same problem. Clicking on the Download button change window.location.href to download the file, also triggers the beforeunload event. We are downloading the file only, not redirecting towards a page actually, but for the redirection, cypress wait for a load event to be triggered by the application but as no redirection actually is happening it gets page load timeout error. I tried stopPropagation on "window:before:unload" event but didn't work. If we can invoke the load event during the wait or can execute the stopPropagation on the correct state it can be resolved I guess. Cypress version: 6.5.0 |
Hi, @jennifer-shehane I'm also facing the same issue even after updating Cypress 6.5.0. Clicking on a button downloads the file, but after downloading the file, the cypress waiting for page load which is not the expected behavior. please suggest a workaround for this problem. |
I got a workaround with the following issue, What actually was happening in my case is that after clicking the download button a redirection was happening to download the file. From the application code: window.location.href was changing to download the file on click event. When cypress gets the redirection it waits for a page load event to get fired from AUT for continuing further. As no actual page redirection was happening so it got stuck and got page load timeout. So I tried the following workaround and it is working fine for my case: Solution/Workaround: All I needed was to fire a page load event to execute other cypress commands after clicking the download button rather than getting page load timeout. So before clicking the Download button or targeted file I added an event listener ‘click’ to listen out for the event and did something to trigger the page load event. Here is a tricky part, on event handling I triggered window.location.reload. But if I instantly trigger that on click event it will work but the file will not get downloaded. So I set a timeout of 5 sec, it may vary as per our requirement to download the file, after that, I am triggering window.document.location.reload(). This reloads the page and triggers a page load event. As soon as cypress get the page load event it continues executing further commands the following solution worked for me fine: cy.window().document().then(function (doc) {
doc.addEventListener('click', () => {
setTimeout(function () { doc.location.reload() }, 5000)
})
cy.get('[ng-click="vm.export()"]').click()
}) I hope cypress will give a proper solution for this case, till then anyone can use this workaround. @jennifer-shehane @hiatien19 @kiransurakanti |
I'm experiencing the same issue here. The solution proposed by @sarja510 works until a new version fix it. |
Unfortunately, this doesn't seem to be enough. The test seems to succeed even if the file to be downloaded doesn't exist (404s etc.). You can confirm it by changing URL of the file to be downloaded: cy.intercept('/', (req) => {
req.url += '-this-url-doesnt-exist';
}); I fixed it by intercepting the request and checking the status code of the response: cy.window().document().then(function (doc) {
doc.addEventListener('click', () => {
setTimeout(function () { doc.location.reload() }, 5000)
})
/* Make sure the file exists */
cy.intercept('/', (req) => {
req.reply((res) => {
expect(res.statusCode).to.equal(200);
});
});
cy.get('[ng-click="vm.export()"]').click()
}) |
@mklepaczewski This solution worked for me, thanks, and also to @sarja510 for the original approach. huge relief to be unblocked! |
@sarja510 This solution is worked for me.Thank You. |
This might be a very stupid question, but can you please let me know what is this doing cy.get('[ng-click="vm.export()"]').click() |
then the mentioned line would find this element and click it. If your link/button has id |
@mklepaczewski thanks a lot for your prompt response. Are we verifying somewhere that the file is downloaded successfully? |
You can find it in |
Any updates on this? Will it be released soon? |
@jennifer-shehane when are you going to release patch for this issue, it is huge bug, it is 7.5.0 already and no cure of this |
Hitting this all over the place as well. I'm glad it's not just me struggling with it. Added a watch to this. Hopefully it gets sorted soon :) |
Any chance for a fix for this? 8.1 and bug still is standing strong |
We are also struggling with this. A fix would be really great! Thanks |
@sarja510 pretty slick, love it, and it is working for me :) |
Facing the same issue. Any solution? |
Hello, I'm still encountering this issue using 9.6.0. :/ The workaround is working perfectly in Chrome but in Firefox it's not allowing it to reload. Hmmm. |
For anyone who cannot afford page reloads in the middle of a test, I used the following to catch the error and continue. Cypress.on("uncaught:exception", (error) => {
if (
error.message.includes(
"Timed out after waiting `5000ms` for your remote page to load",
)
) {
return false;
}
});
Cypress.on("fail", (error) => {
if (
error.message.includes(
"Timed out after waiting `5000ms` for your remote page to load",
)
) {
return false;
}
throw error;
}); The timeout Cypress.config("pageLoadTimeout", 5000); Hacky... but worked for me |
This bug is super annoying and sometimes does happen and sometimes does not on run in a pipeline. Workaround is great for openMode but does not work if bug suddenly does not occur in runMode in pipeline. @jennifer-shehane do you have maybe any update on this ticket? |
Where can I include this code? Sorry I am new to Cypress |
The solution found here worked for me: In my case I download a CSV by a form submit. I can intercept the request, validate the response headers, change the response headers and then even validate data on the page as it renders the CSV as text (and obviously no load event issue anymore) |
From here how do you check if the file has actually been downloaded..Anything done after this step is causing page load issue |
hi all, we've been struggling with this issue and seems like we finally found a working solution that doesn't include arbitrary timeouts and works consistently. There're alternative ways to do this involving using
|
This code helps me find the root cause of my page load time-out issue! Thanks! I've commented here |
@jennifer-shehane @brian-mann - are there any updates on this? We would expect Cy to gracefully handle this kind of problem. Instead, the issue is lingering around for years and we users are forced into using hacky work arounds. Can we have an update on when this will be solved? |
I have a similar situation where i tried downloading a file. However, my download option is available inside a modal pop-up. Hence, the above workarounds doesn't seem to quite work for me. Any resolution/input on the same could really help!! |
Same issue happening for me with Cypress 12.6.0 in Chrome 110. Is there no patch yet? |
I do understand it's a problem, but for the people asking for a fix or a patch, I'd like to hear how you would see this working. Cypress simply relies on a load event that never comes in this case and if it wouldn't do that, it would impact the 99,9% of the cases where they use it for stability.
If you know the path to the file, it's simple. Use the downloadfile method, because elseway you're simply testing browser functionality.
I think that is enough to test and I'd be curious what you want to test with Cypress on a downloaded file anyway. |
It's not work because it never goes to |
I spent a long time investigating this. Cypress sets up listeners for page "stability" in a These are the relevant parts of the HTML spec
This is the most reliable solution I came up with and the same logic I think Cypress should have in its core:// in your commands.mjs file
Cypress.Commands.add("suppressWaitForPageLoad", function () {
cy.intercept("*", req => {
req.on("before:response", res => {
const isDownload = res.headers["content-disposition"]?.startsWith("attachment");
// Need to exclude requests not made by the application, such as
// background browser requests.
const origin = cy.getRemoteLocation("origin");
const isFromAUT = req.headers["referer"]?.startsWith(origin);
if (isDownload && isFromAUT) {
Cypress.log({
name: "suppressWaitForPageLoad",
message: "Bypassing wait for page load event because response has Content-Disposition: attachment"
});
cy.isStable(true, "load");
}
});
});
}); Then use it like: cy.suppressWaitForPageLoad();
cy.contains("button", "Download").click(); Firing a synthetic "load" event as shown in the post above can cause other issues. A page is only ever supposed to have one "load" event fired. |
@zbjornson, that seems like very good research and a nice solution! Is the |
@gvaatstra
I think a good first step is to just add a flag to bypass the "load" check globally and advanced test writers can decide when and how to (dis)able it. We dont need it to be prefect, we just need a way to get stuff done |
I don't know if this has been said before by someone else but if you're sure that you're clicking on a download link, you can workaround the issue by adding the download attribute to the html element before clicking it: cy.get(a)
.then(($a) => {
$a.attr("download", "");
})
.click(); That way the browser won't trigger the page change event and Cypress won't wait for a loadPage event. |
Released in This comment thread has been locked. If you are still experiencing this issue after upgrading to |
i was update Cypress 6.4.0
but i cannot click button download
file source:
source:
cypress_download.zip
The text was updated successfully, but these errors were encountered: