How to verify if a file is downloaded in Cypress?

When using Cypress for automated testing, verifying whether a file has been successfully downloaded typically involves the following steps:

1. Configure the Download Path

First, configure Cypress to know where to locate downloaded files by specifying downloadsFolder in the cypress.json configuration file. For example:

json
{
  "downloadsFolder": "cypress/downloads"
}

This means all downloaded files from tests will be saved in the project's cypress/downloads directory.

2. Trigger the File Download

In your test, simulate or trigger a file download action, typically by clicking a link or button. For example:

javascript
cy.get('.download-button').click();

3. Verify File Existence

After the file is downloaded, verify that it exists in the specified folder using the cy.readFile or cy.task commands. For example, to check for a file named report.pdf, use:

javascript
cy.readFile('cypress/downloads/report.pdf').should('exist');

4. (Optional) Verify File Content

If required, further verify the content of the downloaded file. Using cy.readFile, you can both check for the file's existence and read its content, for example:

javascript
cy.readFile('cypress/downloads/report.pdf').then((content) => {
  expect(content).to.include('Expected Content in PDF');
});

Example Scenario

Consider a scenario where we test the export functionality in a project management system, allowing users to export project reports as PDF files. The test script could be:

javascript
describe('Project Report Download', () => {
  it('should download the project report successfully', () => {
    // Login
    cy.login('user@example.com', 'password'); // Assume login is a custom command
    // Navigate to project page
    cy.visit('/projects/123');
    // Click download report button
    cy.get('.download-report-btn').click();
    // Check if report is downloaded
    cy.readFile('cypress/downloads/project-report-123.pdf').should('exist');
    // (Optional) Check report content
    cy.readFile('cypress/downloads/project-report-123.pdf').then((content) => {
      expect(content).to.include('Project Overview');
    });
  });
});

The above describes the basic steps for verifying file downloads in Cypress, including an example scenario. This approach ensures that the file download functionality is properly verified in automated testing.