Don't wait for page load when clicking a download link

[haleypearse]

Current behavior:

Clicking this download link works fine, but I can't stop cypress from waiting for a nonexistant page to load, which prevents the rest of the test from running.

Desired behavior:

Some way to disable waiting for a page to load.

[jennifer-shehane]

What do you mean when saying 'nonexistent page'? What is the normal behavior of the browser, does it navigate to the document in the browser?

This is likely a duplicate of one of the issues below.

• Issue for not waiting for load event: Ability to opt out of waiting for 'load' event before resolving cy.visit() - onload event takes too long to fire #788
• Issue for ability to visit non text/html pages Support ability to visit non text/html content-type pages (aka - visit downloaded file page) #1551

[haleypearse]

Yes, thank you! It's similar to #1551 and #788 which I hadn't been able to find. The normal behavior is simply downloading a file, no page is visited.

All I need to do is initiate a click without waiting for a page load. I tried .trigger('click'), .trigger('mousedown'.wait(100).trigger('mouseup'), Cypress.$(...click()) and a bunch of other things. Or some way to dispatch a page load event to stop the waiting, or to tell cypress to abort the waiting directly. There must be some workaround, but I haven't found it yet. But ideally there'd be a way to stop cypress from assuming there's a page to load.

[jennifer-shehane]

There's currently no way to prevent the page load from happening within Cypress itself once the application under test has initiated a page load - so the tests won't continue until that new page fires its load event.

This thread may be helpful for testing downloading a file - as this is not completely supported in Cypress yet. #949

[norvinino]

@haleypearse
I have the same problem. Do you have an answer to this please

[norvinino]

@jennifer-shehane
I have the same problem. Do you have an answer to this please

[stanislavgeorgiev]

I also have the same issue @jennifer-shehane and I'm looking for a solution. Clicking on a button which triggers a file download is usually just triggering the browser to download the file without changing the actual page thus not emitting a load event.

[DenStrelnik]

Hello @jennifer-shehane. I also have the same problem. Have you any solution to solve it?

[magarwal19]

Hi @jennifer-shehane
I am also facing this issue. Can you please let us know if there is some solution or workaround for this.

[ghost]

Hi @jennifer-shehane We have the same problem with download(( Is there any update on this matter?

[jennifer-shehane]

No, there is no workaround or way to prevent this behavior. You will have to avoid clicking the download button or use any of the workarounds in this thread: #949 until the feature for testing file download is released.

[stanislavgeorgiev]

Is there an ETA on expected release? Something in the span of 1Q 2021 or 2Q, etc.?

[jennifer-shehane]

It's on our current roadmap. We're hoping to spike into assessing the effort it would take to support soon. https://on.cypress.io/roadmap

[stanislavgeorgiev]

Great, thanks for the update!

[jennifer-shehane]

File download is now supported in Cypress 6.3.0.

You can now test file downloads in Cypress without the download prompt displaying. Any files downloaded while testing file downloads will be stored in the downloadsFolder which is set to cypress/downloads by default. The downloadsFolder will be deleted before each run unless trashAssetsBeforeRuns is set to false.

This means that if you had any code written to prevent the download prompt or to configure the download location (like in a before:browser:launch event handler), you can remove all of these workarounds.

Our file download recipe has been updated, so you can see some ways to test different types of files after they've been downloaded there.

If you're encountering any bugs while testing file downloads, please open a new issue.

[maaaariana]

Hi, @jennifer-shehane
still have the same problem downloading a file

[jennifer-shehane]

@maaaariana You may be experiencing this issue: #14857 There seem to still be some cases where this page load timeout occurs clicking to download files, but not all cases so we need to narrow down why. If you can add your example there. Thanks!

[pseidonims]

@jennifer-shehane Hi, Jennifer! Having the same issue here.

[suryakumara]

@jennifer-shehane same problem here.

[theTestingApproach]

Same issue here. Telling waiting for new page to load when clicking on a link to download a file..
Has anyone been able to resolve the issue please?
thank you

[vvzge]

Same issue here. In cypress UI this works with all browsers. (after clicking on element, a pdf is open in a new page) In headless electron everything is fine. But in headless chrome and edge i got "waiting for new page to load".

[andi-dev]

@jennifer-shehane I am facing the same issue, "waiting for new page to load" while the download has been visibly finished.

[slpngpnthr]

I am having the same issue - Page Load event timeout - after clicking on a file download link.

[SiWhite]

+1 for this issue

[stass-1]

Same for me

[icedbuffing]

I also still encounter this issue. Expected a page to load, but there is no page switch. Just a file being downloaded.

[extracker-ppetrov]

Same issue here.

[icedbuffing]

Anyone has an idea? My test fails, but it's actually not failing.

[ajapalak]

same issue here

[Gjodim]

I have the same or similar issue as well.
I am trying to click an element (regular button), but i am stuck on loading the page on which that button is located.
The button itself is visible and loaded but i get an error that the page is not loaded (i wait 60s which is more than enough)... any solution or workaround for this?

[ScottAgirs]

Same here, when trying to test for Auth0 login flow - after redirect, the page loads, but the event is not triggered and test fails 🌚

[kuchkarbayev]

Add this defaultpageLoadTimeout: 100000 in the cypress.config.js

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
    watchForFileChanges: false
  },
  defaultCommandTimeout: 10000,
  defaulpageLoadTimeout: 100000
});

[suseendranm]

Same problem. Like after click login button it just showing "waiting for new page to load" in auth page. Can't believe this bug existing more than year in Cypress side.

[tkoop]

I have the same problem.

On my page I have a form that makes a POST request to the server. The server returns with these headers:

• Content-Type: application/pdf
• Content-Disposition: attachment; filename=form_response.pdf

The I get the 60 second page timeout error, even though the file downloaded correctly and into the correct Cypress downloads folder.

[anthony-bernardo]

same issue for me, do we have to create a new issue ?

[ramirezmz]

@anthony-bernardo I solved that problem adding in my cypress.config.js:
chromeWebSecurity: false

[KrzGruszcz]

I got the same problem. My workaround was to add following script before clicking the download button:

const loadScript = '<script> setTimeout(() => location.reload(), 1000); </script>';
cy.get('body').invoke('append', loadScript);

The page is reloaded after 1s and the load event is captured by Cypress.

[mikolajtutak]

I got the same problem. My workaround was to add following script before clicking the download button:

const loadScript = '<script> setTimeout(() => location.reload(), 1000); </script>';
cy.get('body').invoke('append', loadScript);

The page is reloaded after 1s and the load event is captured by Cypress.

It works for most of the runs, but changes content of the page so extra steps are required to navigate back to initial page state.

We have button which, when clicked, initiates file download, and this download works fine, file is saved inside "cypress/download" folder. I would be great if finish of this this download will satisfy Cypress "wait for page load"...

I wonder is someone found better workaround for this issue than mentioned above...

[jmicu]

i don't know why this works but it does work for me

<your selector to grab the link>.then(el => { 
  el.attr('download', '')
}).click()

i asked ChatGPT and it said this:

The reason your solution works is because you're dynamically adding the download attribute to the element before clicking it. The download attribute is a HTML5 attribute that, when present on an anchor () element, specifies that the target resource should be downloaded instead of navigating to it.

In your code snippet, el.attr('download', '') sets the download attribute of the element el to an empty value. This is sufficient for triggering the download behavior when the element is clicked.

Even though you may not see the download attribute in the DOM using developer tools, adding it dynamically through JavaScript is still effective in triggering the desired download behavior. This is because the attribute is recognized by the browser and interpreted accordingly when the element is clicked.

By adding the download attribute to the element before clicking it, you're instructing the browser to download the linked resource instead of navigating to it, thus avoiding any potential waiting for page load behavior in Cypress.

[mikolajtutak]

.then(el => {
el.attr('download', '')
}).click()

Thanks for this idea! I've tried to add "download" attribute, even "download='somefile.txt'", also I've added it manually to the tested VUE app code. Cypress is still "waiting for page to load"...

However, when I empty href attribute with "el.attr('href', '')", Cypress says it downloads file from originall_url and saves it in "cypress/downloads" folder, and then enters wait intercepted with original url, but in fact file is not downloaded...

I've also tried adding target attribute to the download link but this makes Cypress to disappear....

[ianbunag]

This doesn't seem to be a bug on Cypress' end, its just how the browsers treat anchor elements. As #8089 (comment) mentioned, adding a download attribute solves the issue by injecting it during runtime or just adding it as an actual attribute. This worked for me for Firefox but might be treated differently from e.g. chrome. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes.

[pastorga23]

I found this and it helped me

downloadAsPDF(){ cy.window().document().then(function (doc) { doc.addEventListener('click', () => { setTimeout(function () { doc.location.reload() }, 5000) }) cy.get('[id="pdf_download"]').click() }) }

[DarwinCamahalan]

.then(el => {
el.attr('download', '')
}).click()

Thanks for this idea! I've tried to add "download" attribute, even "download='somefile.txt'", also I've added it manually to the tested VUE app code. Cypress is still "waiting for page to load"...

However, when I empty href attribute with "el.attr('href', '')", Cypress says it downloads file from originall_url and saves it in "cypress/downloads" folder, and then enters wait intercepted with original url, but in fact file is not downloaded...

I've also tried adding target attribute to the download link but this makes Cypress to disappear....

This Works for me! 4/2/2024