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! π
Top comments (0)