Testing File Upload with Cypress — Using Real Sample Files

Testing file upload is one of the most common yet tricky E2E testing scenarios. This guide shows you how to test file upload in Cypress using real sample files with accurate sizes from TrueFileSize.

Prerequisites

• Cypress 12+ (with cy.selectFile() built-in)
• A web app with file upload functionality
• Node.js 18+

Step 1: Download Sample Files to fixtures/

# Create fixtures directory
mkdir -p cypress/fixtures/uploads

# Download sample files with exact sizes
curl -o cypress/fixtures/uploads/sample-1mb.pdf \
  https://cdn.truefilesize.com/pdf/sample-1mb.pdf

curl -o cypress/fixtures/uploads/sample-500kb.jpg \
  https://cdn.truefilesize.com/jpg/sample-500kb.jpg

curl -o cypress/fixtures/uploads/sample-5mb.mp4 \
  https://cdn.truefilesize.com/mp4/sample-5mb.mp4

# For error handling tests
curl -o cypress/fixtures/uploads/sample-corrupt.pdf \
  https://cdn.truefilesize.com/corrupted/sample-corrupt.pdf

Available sample files: PDF · JPG · PNG · MP4 · Corrupted

Step 2: Basic Upload Test

// cypress/e2e/file-upload.cy.js

describe('File Upload', () => {
  beforeEach(() => {
    cy.visit('/upload');
  });

  it('uploads a PDF file successfully', () => {
    // Select file using Cypress built-in command
    cy.get('input[type="file"]').selectFile(
      'cypress/fixtures/uploads/sample-1mb.pdf'
    );

    // Verify file name appears in UI
    cy.get('.file-name').should('contain', 'sample-1mb.pdf');

    // Click upload button
    cy.get('button[type="submit"]').click();

    // Assert success
    cy.get('.upload-status').should('contain', 'Upload successful');
    cy.get('.file-size').should('contain', '1.00 MB');
  });

  it('uploads an image with preview', () => {
    cy.get('input[type="file"]').selectFile(
      'cypress/fixtures/uploads/sample-500kb.jpg'
    );

    // Verify image preview is generated
    cy.get('.image-preview img')
      .should('be.visible')
      .and('have.attr', 'src')
      .and('match', /^blob:|^data:/);

    cy.get('button[type="submit"]').click();
    cy.get('.upload-status').should('contain', 'Upload successful');
  });
});

Step 3: Test File Size Limits

it('rejects files over the size limit', () => {
  // Use a 10MB file to test a 5MB limit
  cy.get('input[type="file"]').selectFile(
    'cypress/fixtures/uploads/sample-5mb.mp4'
  );

  // Should show error for oversized file
  cy.get('.error-message')
    .should('be.visible')
    .and('contain', 'File too large');
});

it('handles empty file gracefully', () => {
  // Use a zero-byte file
  cy.writeFile('cypress/fixtures/uploads/empty.bin', '');
  cy.get('input[type="file"]').selectFile(
    'cypress/fixtures/uploads/empty.bin'
  );

  cy.get('.error-message').should('contain', 'empty');
});

Step 4: Test Multiple File Upload

it('uploads multiple files at once', () => {
  cy.get('input[type="file"][multiple]').selectFile([
    'cypress/fixtures/uploads/sample-1mb.pdf',
    'cypress/fixtures/uploads/sample-500kb.jpg',
  ]);

  cy.get('.file-list .file-item').should('have.length', 2);
  cy.get('button[type="submit"]').click();
  cy.get('.upload-status').should('contain', '2 files uploaded');
});

Step 5: Test Drag and Drop Upload

it('accepts files via drag and drop', () => {
  cy.get('.dropzone').selectFile(
    'cypress/fixtures/uploads/sample-1mb.pdf',
    { action: 'drag-drop' }
  );

  cy.get('.file-name').should('contain', 'sample-1mb.pdf');
});

Step 6: Test Error Handling with Corrupted Files

Download corrupted test files to verify your app handles invalid files gracefully:

it('handles corrupted file gracefully', () => {
  cy.get('input[type="file"]').selectFile(
    'cypress/fixtures/uploads/sample-corrupt.pdf'
  );

  cy.get('button[type="submit"]').click();

  // App should show user-friendly error, not crash
  cy.get('.error-message')
    .should('be.visible')
    .and('not.contain', 'Error:')  // No raw error messages
    .and('not.contain', 'stack');   // No stack traces
});

Recommended Test Matrix

| Test | File | Expected | |------|------|----------| | Basic upload | sample-1mb.pdf | Success | | Image preview | sample-500kb.jpg | Preview shown | | Size limit | sample-5mb.mp4 | Rejected | | Wrong type | Rename .jpg to .pdf | Type error | | Corrupted | sample-corrupt.pdf | Graceful error | | Zero byte | Empty file | Rejected | | Multi-file | PDF + JPG | Both uploaded | | Drag & drop | Any file | Success |

Full Example Repository

All the code in this guide is copy-paste ready. Download sample files from TrueFileSize and drop them into cypress/fixtures/uploads/. For larger files for stress testing, see our Download Tests page.