In this article, we will discuss how we can upload a file in cypress.

Method 1: Using the cypress-file-upload node package. Let’s automate the below Test scenario:

1. Go to https://the-internet.herokuapp.com/upload.
2. Select a file and upload it.
3. After upload, validate that the file was successfully uploaded.

Step 1: Install the cypress-file-upload node package using the command:

1
npm install --save-dev cypress-file-upload

cypress file upload node package install

Once you have installed the package successfully, you can see the package name in your package.json file

cypress package json file
 

Step 2: We will now import the node package in to our cypress project. To import, write the below code in cypress > support > commands.js

1
import 'cypress-file-upload';

cypress commands js file
 

Step 3:

1
2
3
4
5
6
7
8
9
10
11
12
describe('Example to demonstrate file upload in cypress', function () {
    before(function () {
        cy.visit('https://the-internet.herokuapp.com/upload')
    })

    it('File Upload using cypress-file-upload npm package', () => {
        const filepath = 'images/evening.png'
        cy.get('input[type="file"]').attachFile(filepath)
        cy.get('#file-submit').click()
        cy.get('#uploaded-files').contains('evening.png')
    })
})

file upload cypress code

1
2
3
    before(function () {
        cy.visit('https://the-internet.herokuapp.com/upload')
    })

This will open the webpage https://the-internet.herokuapp.com/upload before the execution of it blocks.

1
2
3
4
5
6
    it('File Upload using cypress-file-upload npm package', () => {
        const filepath = 'images/evening.png'
        cy.get('input[type="file"]').attachFile(filepath)
        cy.get('#file-submit').click()
        cy.get('#uploaded-files').contains('evening.png')
    })

Here we are uploading a file which is located at fixtures > images > evening.png.

test image for cypress file upload

In the filepath variable, we are storing the image path. Since cypress always searches for test data from the fixtures folder so images/evening.png will work fine. cy.get(‘input[type=”file”]’).attachFile(filepath) will add the image file path in Choose file. cy.get(‘#file-submit’).click() will click on the upload button. cy.get(‘#uploaded-files’).contains(‘evening.png’) will check the file name to validate successful upload.
 

Step 4: After successful Test Execution:

successful test execution for cypress file upload
 
Method 2: Using the in-built .selectFile() command. This was introduced with cypress v 9.3.0.

a) File upload using the default ‘select’ mode – By default, .selectFile() runs in ‘select’ mode, mimicking a user selecting one or more files on an HTML5 input element. In this mode, the subject must be a single input element with type=”file”, or a label element connected to an input (either with its for attribute or by containing the input).

1
2
3
4
5
6
it('File Upload using selectFile with select mode', () => {
  cy.visit('https://the-internet.herokuapp.com/upload')
  cy.get('#file-upload').selectFile('cypress/fixtures/images/evening.png')
  cy.get('#file-submit').click()
  cy.get('#uploaded-files').contains('evening.png')
})

Here we are just passing the location of the file to selectFile and then after upload, validating that the file upload was successful. One thing to remember is that the path of the file should be from the project root folder. In our case, the file is located under the ‘images’ folder inside the ‘fixtures’ folder, hence cypress/fixtures/images/evening.png was used.

file upload with selectFile using select mode

b) File upload using ‘drag-drop’ mode – Setting the action to drag-drop changes the behavior of the command to instead mimic a user dragging files from the operating system into the browser, and dropping them over the selected subject. In this mode, the subject can be any DOM element or the document as a whole.

1
2
3
4
5
6
it('File Upload using selectFile with drag and drop mode', () => {
  cy.visit('https://postimages.org/')
  cy.get('#uploadFile').selectFile('cypress/fixtures/images/evening.png', { action: 'drag-drop' })
  cy.get('.controls > h2', { timeout: 7000 }).should('have.text', 'Upload completed!')
  cy.get('.imagetitle').should('have.text', 'evening')
})

Here we are using the drag and drop mode for file upload. This can be achieved by passing { action: ‘drag-drop’ } with selectFile. After upload, we are validating that the file was successfully uploaded.

file upload with selectFile using drag-drop mode

c) Multiple file upload

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
it('Multiple file upload using selectFile', () => {
  cy.visit('https://postimages.org/')
  cy.get('#uploadFile').selectFile(
    [
      'cypress/fixtures/images/morning.jpg',
      'cypress/fixtures/images/evening.png',
      'cypress/fixtures/images/night.jpg',
    ],
    {action: 'drag-drop'}
  )
  cy.get('.controls > h2', {timeout: 9000}).should(
    'have.text',
    'Upload completed!'
  )
  cy.get('.imagetitle').eq(0).should('have.text', 'evening')
  cy.get('.imagetitle').eq(1).should('have.text', 'morning')
  cy.get('.imagetitle').eq(2).should('have.text', 'night')
})

Here instead of one file, we are inputting multiple files at once for upload. This is achieved by passing the file locations as an array to selectFile. Once the files are uploaded we are validating that the upload was successful.

multiple file upload with selectFile

In case you have been previously using the cypress-file-upload plugin and want to move to cypress native command selectFile(), you can check out this migration guide.

Do check out 🙂

Github: https://github.com/alapanme/Cypress-Automation
All Cypress Articles: https://testersdock.com/cypress-tutorial/