cypress-file-upload attachFile is not a function

Viewed 4849

I want to test my file uploading function using Cypress-file-upload but I hurt myself against .attachFile is not a function

enter image description here

I tried two solutions and I still can't make it works :

// 1st one, "find file input" works

  it('find file input', () => {
    cy.get('input[type="file"')
  })
  
  const fileName = 'french_tweets_split.csv';
  it('Testing csv uploading', () => {
    cy.fixture(fileName, 'binary')
      .then(Cypress.Blob.binaryStringToBlob)
      .then(fileContent => {
        cy.get("input[type='file']").attachFile({ fileContent, fileName, mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', encoding:'utf8' })
    })
  })
// 2nd one, "find file input" works
  it('find file input', () => {
    cy.get('input[type="file"')
  })
  
  it('Testing csv uploading', () => {
    cy.fixture('french_tweets_split.csv').then(fileContent => {
        cy.get('input[type="file"]').attachFile({
            fileContent: fileContent.toString(),
            fileName: 'french_tweets_split.csv',
            mimeType: 'text/csv'
        })
    })
  })

What am I doing wrong ?

4 Answers

You have to import the package:

support/index.js

import 'cypress-file-upload';

You need to Install cypress-file-upload dev dependency first:

npm i cypress-file-upload --save-dev

Then import it in cypress/support/index.js

import 'cypress-file-upload'

I am working with TypeScript. I had to import it in support/index.ts.

Follow below steps-

  1. Install "npm i cypress-file-upload --save-dev"
  2. In support/index.js and support/commands.js add > import 'cypress-file-upload';
  3. Use the below code snippet

cy.fixture('video.mp4') .then(fileContent => { cy.get('.qq-uploader-selector > input').attachFile({ fileContent, fileName: 'video.mp4', mimeType: 'video/mp4', encoding: 'utf8' }) })

NOTE: Use ".attachFile" along with get method instead of ".upload" to avoid "cy.get(...).upload is not a function"

Related