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 已上傳，並且檔名已反映在頁面上。