
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! 🎉
Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse