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

Question

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?

Answer 1

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