File Upload in Cypress

File Upload in Cypress

For this we will need to install a new Cypress node module (cypress-file-upload)

Run the below command in terminal

C:\Users\T460\AppData\Local\Cypress\Cache\4.9.0\Cypress\test> npm install --save-dev cypress-file-upload

Now try to open package.json file and you will see dependency got added

 "devDependencies": {

    "cypress": "^4.9.0",

    "cypress-file-upload": "^4.0.7"

  }

For this we will use concept of Fixtures

Fixtures are used to load state of Data from the File

https://docs.cypress.io/api/commands/fixture.html#Images

Add below line in commands.js (present at path----->C:\Users\T460\AppData\Local\Cypress\Cache\4.9.0\Cypress\test\cypress\support)

import 'cypress-file-upload';

Put any image under fixture (download.png)

Sample Code 

context('Window', () => {

  beforeEach(() => {

    cy.visit('https://the-internet.herokuapp.com/upload')

  })

  it('open in Mac 15', () => {

    // https://on.cypress.io/window

    cy.viewport('macbook-15')

    cy.screenshot()

    cy.wait(200)

  })

  it('Upload the file and assert the name of the file',()=>{

const filepath='download.png'

cy.get("#file-upload").attachFile(filepath)

cy.get("#file-submit").click()

cy.get("#uploaded-files").contains('download')

})

})

Test Execution in Cypress