File download verification in Cypress - Framework Patterns

Framework Mode - File download verification

Folder Structure

  cypress/
  ├── e2e/
  │   ├── fileDownload.spec.js       # Test files for file download verification
  ├── fixtures/                      # Test data files
  ├── support/
  │   ├── commands.js                # Custom commands (e.g., file download helpers)
  │   ├── e2e.js                    # Global support for tests
  ├── downloads/                    # Folder where downloaded files are saved during tests
  cypress.config.js                 # Cypress configuration file
  package.json                     # Project dependencies and scripts
  

Test Framework Layers

• Test Layer: Located in cypress/e2e/, contains test scripts that verify file downloads by triggering downloads and checking files.
• Support Layer: In cypress/support/commands.js, includes custom commands to handle file download verification like checking file existence and content.
• Fixtures Layer: Holds test data if needed, such as expected file content or URLs.
• Downloads Folder: cypress/downloads/ is configured as the folder where Cypress saves downloaded files during tests for verification.
• Configuration Layer: cypress.config.js sets download folder, base URL, and other environment settings.

Configuration Patterns

• Download Folder Setup: Configure downloadsFolder in cypress.config.js to specify where files are saved.
• Base URL: Use baseUrl in config for environment flexibility.
• Environment Variables: Use env in config or CLI to manage credentials or URLs securely.
• Custom Commands: Define reusable commands in support/commands.js to check file existence and content after download.
• Clean Up: Optionally clear the downloads folder before tests to avoid false positives.

  // cypress.config.js example snippet
  import { defineConfig } from 'cypress'

  export default defineConfig({
    e2e: {
      baseUrl: 'https://example.com',
      downloadsFolder: 'cypress/downloads',
      setupNodeEvents(on, config) {
        // implement node event listeners here if needed
      },
    },
  })
  

Test Reporting and CI/CD Integration

• Test Reports: Use Cypress built-in reporter or integrate with mochawesome for detailed HTML reports showing pass/fail of file download tests.
• Screenshots and Videos: Enable screenshots and video recording in Cypress config to capture test runs, useful for debugging download failures.
• CI/CD Integration: Run Cypress tests in CI pipelines (GitHub Actions, Jenkins, GitLab CI) to verify file downloads on every code change.
• Artifacts: Save downloaded files or reports as build artifacts for audit and troubleshooting.

Best Practices

• Use Custom Commands: Encapsulate file existence and content checks in reusable Cypress commands for clarity and reuse.
• Clean Downloads Folder: Clear the downloads folder before each test to avoid false positives from old files.
• Explicit Waits: Use retries or waits to ensure the file has finished downloading before assertions.
• Validate File Content: Check not only file presence but also file size or content to confirm correct download.
• Keep Tests Independent: Each test should manage its own download and verification to avoid cross-test interference.

Self Check

Where would you add a new custom command to verify that a downloaded file exists and contains expected text?

Key Result

Organize Cypress tests with clear folder structure, custom commands for file checks, and config for download handling.

Practice

1. What is the main purpose of file download verification in Cypress testing?

easy

A. To speed up the test execution time

B. To ensure the downloaded file is correct and complete

C. To check the website's loading speed

D. To verify the page layout after download

Solution

1. Step 1: Understand file download verification

   File download verification checks if the file users get is the right one and fully downloaded.

2. Step 2: Identify the main goal

   The goal is to confirm the file content and completeness, not speed or layout.

3. Final Answer:

   To ensure the downloaded file is correct and complete -> Option B

4. Quick Check:

   File correctness = B [OK]

Hint: File download verification checks file correctness, not speed [OK]

Common Mistakes:

• Confusing download verification with page speed testing
• Thinking it checks page layout after download
• Assuming it speeds up tests

2. Which Cypress command is used to read the contents of a downloaded file for verification?

easy

A. cy.readFile()

B. cy.getFile()

C. cy.downloadFile()

D. cy.checkFile()

Solution

1. Step 1: Identify commands related to file handling

   cy.downloadFile() downloads files, cy.readFile() reads file contents.

2. Step 2: Choose the command to read file contents

   To verify file content, cy.readFile() is used, not cy.downloadFile().

3. Final Answer:

   cy.readFile() -> Option A

4. Quick Check:

   Read file = cy.readFile() = A [OK]

Hint: Use cy.readFile() to check file content after download [OK]

Common Mistakes:

• Using cy.downloadFile() to read file content
• Assuming cy.getFile() exists
• Confusing cy.checkFile() with real commands

3. Given the code snippet:

cy.downloadFile('https://example.com/report.pdf', 'cypress/downloads', 'report.pdf')
  .then(() => {
    cy.readFile('cypress/downloads/report.pdf').should('exist')
  })

What will this test verify?

medium

A. That the downloads folder is empty before download

B. That the file 'report.pdf' is empty

C. That the URL 'https://example.com/report.pdf' is reachable

D. That the file 'report.pdf' exists in the downloads folder after download

Solution

1. Step 1: Analyze the downloadFile command

   The command downloads 'report.pdf' to 'cypress/downloads'.

2. Step 2: Analyze the readFile assertion

   It checks if 'report.pdf' exists in the downloads folder after download.

3. Final Answer:

   That the file 'report.pdf' exists in the downloads folder after download -> Option D

4. Quick Check:

   File existence check = D [OK]

Hint: Check file existence with cy.readFile().should('exist') [OK]

Common Mistakes:

• Assuming it checks file content or emptiness
• Thinking it tests URL reachability
• Confusing pre-download folder state with post-download check

4. Identify the error in this Cypress test code for file download verification:

cy.downloadFile('https://example.com/data.csv', 'cypress/downloads', 'data.csv')
cy.readFile('cypress/downloads/data.csv').should('contain', 'Name, Age')

medium

A. Wrong assertion method; should use 'exist' instead of 'contain'

B. Incorrect file path in readFile command

C. Missing chaining or waiting for download to complete before reading file

D. cy.downloadFile does not exist in Cypress

Solution

1. Step 1: Check command sequence and chaining

   The download and readFile commands run separately without waiting for download to finish.

2. Step 2: Identify the need for chaining or waiting

   Without chaining or waiting, readFile may run before download completes, causing test failure.

3. Final Answer:

   Missing chaining or waiting for download to complete before reading file -> Option C

4. Quick Check:

   Wait for download before readFile = C [OK]

Hint: Chain commands or wait to ensure download finishes before reading [OK]

Common Mistakes:

• Running readFile immediately without waiting
• Assuming cy.downloadFile is not a valid command
• Using wrong assertion method for content check

5. You want to verify that a downloaded CSV file contains the header 'ID, Name, Email' and is not empty. Which Cypress test code correctly achieves this?

hard

A. cy.downloadFile('https://example.com/users.csv', 'cypress/downloads', 'users.csv')
.then(() => {
cy.readFile('cypress/downloads/users.csv').should('contain', 'ID, Name, Email').and('not.be.empty')
})

B. cy.readFile('cypress/downloads/users.csv').should('contain', 'ID, Name, Email')
cy.downloadFile('https://example.com/users.csv', 'cypress/downloads', 'users.csv')

C. cy.downloadFile('https://example.com/users.csv', 'cypress/downloads', 'users.csv')
cy.readFile('cypress/downloads/users.csv').should('exist')

D. cy.downloadFile('https://example.com/users.csv', 'cypress/downloads', 'users.csv')
.then(() => {
cy.readFile('cypress/downloads/users.csv').should('be.empty')
})

Solution

1. Step 1: Ensure download completes before reading file

   cy.downloadFile('https://example.com/users.csv', 'cypress/downloads', 'users.csv') .then(() => { cy.readFile('cypress/downloads/users.csv').should('contain', 'ID, Name, Email').and('not.be.empty') }) chains .then() after downloadFile to wait for completion.

2. Step 2: Verify file contains header and is not empty

   cy.downloadFile('https://example.com/users.csv', 'cypress/downloads', 'users.csv') .then(() => { cy.readFile('cypress/downloads/users.csv').should('contain', 'ID, Name, Email').and('not.be.empty') }) uses should('contain', ...) and .and('not.be.empty') correctly to check content and non-empty file.

3. Final Answer:

   cy.downloadFile('https://example.com/users.csv', 'cypress/downloads', 'users.csv') .then(() => { cy.readFile('cypress/downloads/users.csv').should('contain', 'ID, Name, Email').and('not.be.empty') }) -> Option A

4. Quick Check:

   Chain download and readFile with content checks = A [OK]

Hint: Chain downloadFile with readFile and use should contain + not.be.empty [OK]

Common Mistakes:

• Not chaining download and readFile causing timing issues
• Checking file existence only without content validation
• Asserting file is empty instead of not empty