How to upload files with Cypress
Tags: cypress, testing, automtion, e2e
Published: 2021-04-22 16:02:41

## 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**](https://cypress.io)?

🤔


The [**cypress-file-upload**](https://www.npmjs.com/package/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.

```js
// 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.

```js
// 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**](https://docs.cypress.io/faq/questions/using-cypress-faq#How-do-I-test-uploading-a-file).

___

**Update:** [**Cypress version 9.3.0**](https://docs.cypress.io/guides/references/changelog#9-3-0) introduced the [`.selectFile`](https://docs.cypress.io/api/commands/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**](https://talkingabouttesting.com/2021/04/15/como-fazer-upload-de-arquivos-com-cypress/) blog.

___


Would you like to learn about **test automation with Cypress**? I was hoping you could get to know my online courses on [**Udemy**](https://udemy.com/user/walmyr).

Happy testing! 🎉