How to upload files with Cypress

Learn how to attach files in your automated tests

Yup, the Pinches of Cypress series is back! 😄

Let's go learn?

A common requirement in the world of automated graphical user interface testing is the need to test the submission of forms in which it is possible to attach a file.

You might be wondering. How do I do this with Cypress?

🤔

The cypress-file-upload library comes to our rescue! 🦸🏻‍♀️

Alright, you wanna see a sample code, right?

Here we go then.

In this example, I test the creation of a note with the attachment of a file, its edition to replace the attached file with another one, and finally, its deletion. As a prerequisite for the test, the user must be logged in.

// cypress/integration/sample.spec.js

describe('CRUD', () => {
  beforeEach(() => {
    cy.intercept(
      'GET',
      '**/notes'
    ).as('getNotes')

    cy.login()
    cy.wait('@getNotes')
  })

  it('CRUD a note attaching files', () => {
    const faker = require('faker')
    const randomWord =faker.random.word()

    // Create a note attaching a square.png file
    cy.get('[href="/notes/new"]').click()
    cy.get('#content').type(randomWord)
    cy.get('input[type="file"]')
      .as('fileInput')
      .attachFile('square.png')
    cy.get('button[type="submit"]').click()
    cy.wait('@getNotes')

    // Read
    cy.get('.list-group-item')
      .contains(randomWord)
      .as('randomNote')
      .should('be.visible')
      .click()

    // Confirm file was correctly uploaded
    cy.get('.form-control-static a')
      .as('fileLink')
      .should('be.visible')
      .and('have.text', 'square.png')

    // Update a note attaching a squre2.png file
    cy.get('@fileInput')
      .attachFile('square2.png')
    cy.get('button[type="submit"]').click()
    cy.wait('@getNotes')

    // Confirm new file was correctly uploaded
    cy.get('@randomNote').click()
    cy.get('@fileLink')
      .should('be.visible')
      .and('have.text', 'square2.png')

    // Delete
    cy.get('.btn-danger').click()
    cy.wait('@getNotes')

    // Confirm deletion
    cy.get('@randomNote').should('not.exist')
  })
})

Note: The square.png and squre2.png files are stored in the cypress/fixtures/ directory.

Note 2: To use the .attachFile() command, I had to install the cypress-file-upload library as a dev dependency and import it into the cypress/support/commands.js file, as shown below.

// cypress/support/commands.js

import 'cypress-file-upload'

That's it.

I now have a test that logs in, creates a new note by attaching the square.png file, verifies that the note was created successfully, edits that note by attaching the square2.png file, checks that the previous file has been replaced by the new one. Finally, it deletes the note and verifies that it no longer exists.

For more details on uploading files with Cypress, I recommend reading the official documentation.

Update: Cypress version 9.3.0 introduced the .selectFile functionality, which replaces the need for the cypress-file-upload library.

Tell me, what else would you like to see in the "Pinches of Cypress" series?

This post was originally published in Portuguese on the Talking About Testing blog.

Would you like to learn about test automation with Cypress? I was hoping you could get to know my online courses on Udemy.

Happy testing! 🎉