Cypress - 文件上传

为了在 Cypress 中执行文件上传任务，我们首先需要使用下面提到的命令安装一个插件：

   npm install –dev cypress-file-upload

您的计算机上将出现以下屏幕：

安装完成后，我们需要在 command.js 文件中添加语句 import 'cypress-file-upload'。此文件位于 Cypress 项目的 support 文件夹内。

此外，我们将把要上传的文件添加到 fixtures 文件夹（Picture.png 文件）。将显示以下屏幕：

要上传文件，我们需要使用 Cypress 命令 attachFile 并将要上传的文件路径作为参数传递给它。

实现

在 Cypress 中上传文件的命令实现如下：

describe('Tutorialspoint Test', function () {
   // test case
   it('Test Case6', function (){
      //file to be uploaded path in project folder
      const p = 'Picture.png'
      // launch URL
      cy.visit("https://the-internet.herokuapp.com/upload")
      //upload file with attachFile
      cy.get('#file-upload').attachFile(p)
      //click on upload
      cy.get('#file-submit').click()
      //verify uploaded file
      cy.get('#uploaded-files').contains('Picture')
   });
});

执行结果

输出如下：

执行日志显示文件 Picture.png 已上传，并且文件名已反映在页面上。