Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for How to upload files with Cypress
Walmyr
Walmyr

Posted on • Edited on

     

How to upload files with Cypress

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')})})
Enter fullscreen modeExit fullscreen mode

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'
Enter fullscreen modeExit fullscreen mode

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)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

I'm a software engineer who loves testing. I'm also a clean coder, blogger, YouTuber, Cypress.io Ambassador, online instructor, speaker, an active member of tech communities.
  • Location
    Barcelona, Spain
  • Education
    Bachelor in business management with an emphasis on system information analysis at PUCRS (2012)
  • Pronouns
    He, him, his
  • Work
    Instructor and Founder at Talking About Testing online school
  • Joined

More fromWalmyr

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp