How Can I Test A File Download Using Cypress When Running In Chrome

14
votes

I have the following test that needs to verify that clicking a link downloads a PDF. This is especially important as we are using Gatsby, which in turn uses Reach Router's Link Component, and it is relatively easy to misconfigure things so that the router takes over the link and navigates to a 404 page instead of initiating a download.

describe.skip(`Downloads`, () => {
  it(`Downloads the expected file`, () => {
    cy.visit(pagePath)
    cy.getByHref(downloadPath)
      .should(`have.attr`, `target`, `_blank`)
      .click()
    cy.location(`pathname`).should(`eq`, pagePath)
  })
})

While this isn't perfect, it does at least check that there is no navigation as a result of clicking the link.

The problem is that when running this test using cy run, which runs the tests in Chrome, the test hangs, due to Chrome's download dialogue.

How can I prevent the test from hanging?

Note that the downloadPath resolves to a pdf in the static directory, for example /static/example.pdf. There is no server component.

Also note that this is a different question to: How can I use Cypress.io to assert that a file download has been initiated without actually downloading?

3
javascriptgoogle-chrometestingdownloadcypress
Have you checked this issue ? I think it is exactly what you are describing github.com/cypress-io/cypress/issues/433 – Apolo
Also, this is being worked on: github.com/cypress-io/cypress/issues/311 – Apolo
May be this can help dev.to/viveknayyar/… – VivekN
@VivekN Thanks. I hadn't considered checking the file, but this relies on using wait with a fixed time which is a recipe for flaky tests in my experience. – Undistraction

3 Answers

1
votes

Actually I searched alot about it and found that It is not possible to run tests in headless mode with browser extensions installed, because the only supported browser in headless mode is Electron, and Electron doesn't support extensions as stated in the documentation.

Running headless Chrome is not supported yet. See this issue: #488 https://github.com/cypress-io/cypress/issues/488

And this is a an issue not so old it was tagged in Feb 2019

https://github.com/cypress-io/cypress/issues/832 https://github.com/cypress-io/cypress/issues/1235

0
votes

There are a lot of ways to test this, so it depends. You’ll need to be aware of what actually causes the download, then think of a way to test that mechanism.

If your server sends specific disposition headers which cause a browser to prompt for download, you can figure out what URL this request is made to, and use cy.request() to hit that directly. Then you can test that the server send the right response headers.

If it’s an anchor that initiates the download, you could test that it has the right href property. As long as you can verify that clicking the button is going to make the right HTTP request, there’s nothing else to test for.

In the end, it’s up to you to know your implementation and to test enough to cover everything.

-2
votes

You can prevent the test from hanging by disabling the dialog asking where to save the file. Once you do that chrome will happily download your file and Cypress can continue running your test.

In chrome go to settings->Advanced->Downloads->Ask where to save each file before downloading and make sure it is off.

There are more complicated solutions in the links Apolo provided but this is a quick workaround.