Verify file upload and download functionality

Preconditions (2)

Step 1: Click on the upload button and select 'testfile.txt' from fixtures

Step 2: Submit the upload form

Step 3: Verify the upload success message is displayed

Step 4: Click the download link for the uploaded file

Step 5: Verify the downloaded file content matches 'testfile.txt'

✅ Expected Result: File uploads successfully with confirmation message and downloaded file content matches the uploaded file exactly

Automation Requirements - Cypress

Assertions Needed:

Upload success message is visible

Downloaded file content equals the uploaded file content

Best Practices:

Use cy.fixture() to load test files

Use cy.get() with data-cy attributes for stable selectors

Avoid hardcoded waits; use cy.intercept() or cy.wait() for network calls

Validate file content programmatically after download

Automated Solution

Cypress

describe('File Upload and Download Test', () => {
  it('should upload a file and verify download content', () => {
    cy.visit('/file-upload')

    // Upload file
    cy.get('[data-cy=file-upload-input]').attachFile('testfile.txt')
    cy.get('[data-cy=upload-submit]').click()

    // Verify upload success message
    cy.get('[data-cy=upload-success]').should('be.visible').and('contain.text', 'Upload successful')

    // Intercept download request
    cy.intercept('GET', '/download/testfile.txt').as('fileDownload')

    // Click download link
    cy.get('[data-cy=download-link]').click()

    // Wait for download request to complete
    cy.wait('@fileDownload').then((interception) => {
      // Verify downloaded file content matches fixture
      cy.fixture('testfile.txt', 'utf8').then((fixtureContent) => {
        expect(interception.response.body).to.equal(fixtureContent)
      })
    })
  })
})

This test visits the file upload page and uses attachFile to upload a test file from fixtures. It clicks the submit button and checks for a visible success message to confirm upload.

For download, it intercepts the GET request to the file URL, clicks the download link, and waits for the request to finish. Then it compares the downloaded file content from the response body with the original fixture content to ensure they match exactly.

Selectors use data-cy attributes for stability. No hardcoded waits are used; instead, cy.intercept and cy.wait ensure synchronization.

Common Mistakes - 3 Pitfalls

Using CSS classes or IDs that change frequently as selectors

Using cy.wait with fixed time instead of intercepting network calls

Not verifying the actual content of the downloaded file

Bonus Challenge

Now add data-driven testing with 3 different files to upload and verify

Show Hint