如何使用 cypress-file-upload 上传图片或文件

Question

I am trying to upload an image for E2E testing but could succeed

First of all, I have installed

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

and then using page object model

setting_page.js enter image description here

export class SettingPage {

doc_uploadImage=('#fileDocument')

 uploadimage(){
    cy.get(this.uploadimage).attachFile('D:\Cypress(Projects)\Agorz_Automation_Project\cypress\fixtures\images.jpg')}

}

Demo.js

import { SettingPage } from "./Pages/setting_page"
import 'cypress-file-upload'

const settingpage = new SettingPage()

it.only('upload file', function () {

settingpage.uploadimage()

})

Error message screen is attached here enter image description here

I want to upload an image for testing purposes, you're help will be highly appreciated in this regard.

Answer 1

The error statement is clear which means that your given path is invalid.

Could you try moving the image file to your testing project instead like this?

.attachFile('images.jpg')}

Answer 2

cypress-file-upload "recognizes cy.fixture format, so usually this is just a file name." This means that anything that lives in your cypress/fixture directory can be referenced by a relative file path.

cy.get(this.uploadimage)
  .attachFile('images.jpg');

Answer 3

If you are wanting to use the cypress-file-upload plugin to be uploading a file in cypress you should use the attachFile command provided by the plugin

Using it to upload an image would look something like this

const filePath = 'path/to/image.jpg';
cy.get('#fileInput').attachFile(filePath);

Also in your code you are trying to use the attachFile command on an element you are selecting using this.uploadimage but that is a string that corresponds to the selector #fileDocument but that is not valid for the attachFile command.

here is what you could try to fix this, you could use the cy.get command to select the file input, then use the attachFile command on it.

export class SettingPage {
  doc_uploadImage = '#fileDocument';
  uploadimage() {   cy.get(this.doc_uploadImage).attachFile('D:\Cypress(Projects)\Agorz_Automation_Project\cypress\fixtures\images.jpg');
  }
}