Learn how to attach files in your automated tests

Yup, thePinches of Cypress series is back! 😄

Let's go learn?

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

You might be wondering. How do I do this withCypress?

🤔

Thecypress-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.jsdescribe('CRUD',()=>{beforeEach(()=>{cy.intercept('GET','**/notes').as('getNotes')cy.login()cy.wait('@getNotes')})it('CRUD a note attaching files',()=>{constfaker=require('faker')constrandomWord=faker.random.word()// Create a note attaching a square.png filecy.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')// Readcy.get('.list-group-item').contains(randomWord).as('randomNote').should('be.visible').click()// Confirm file was correctly uploadedcy.get('.form-control-static a').as('fileLink').should('be.visible').and('have.text','square.png')// Update a note attaching a squre2.png filecy.get('@fileInput').attachFile('square2.png')cy.get('button[type="submit"]').click()cy.wait('@getNotes')// Confirm new file was correctly uploadedcy.get('@randomNote').click()cy.get('@fileLink').should('be.visible').and('have.text','square2.png')// Deletecy.get('.btn-danger').click()cy.wait('@getNotes')// Confirm deletioncy.get('@randomNote').should('not.exist')})})

Note: Thesquare.png andsqure2.png files are stored in thecypress/fixtures/ directory.

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

// cypress/support/commands.jsimport'cypress-file-upload'

That's it.

I now have a test that logs in, creates a new note by attaching thesquare.png file, verifies that the note was created successfully, edits that note by attaching thesquare2.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 withCypress, I recommend reading theofficial documentation.

Update:Cypress version 9.3.0 introduced the.selectFile functionality, which replaces the need for thecypress-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 theTalking About Testing blog.

Would you like to learn abouttest automation with Cypress? I was hoping you could get to know my online courses onUdemy.

Happy testing! 🎉