如何在 Cypress 中驗證上傳和下載-js教程-PHP中文網

How to Validate Upload and Download in Cypress

介紹

處理檔案上傳和下載是端對端測試中的常見場景。在這篇文章中，我們將探討如何使用 Cypress 處理檔案上傳和下載。儘管 Cypress 缺乏對這些操作的內建支持，但您可以透過利用一些庫和 Cypress 強大的命令集來實現此功能。

讀完本指南後，您將了解如何：

使用 Cypress 上傳檔案。
驗證文件上傳是否成功。
下載檔案並在 Cypress 中驗證其內容。

先決條件

要按照範例進行操作，請確保您已安裝並設定 Cypress。如果您使用的是 Cypress v13.6.2，它與本文中顯示的方法相容。

Cypress 中的檔案上傳

要在 Cypress 中上傳文件，我們將使用 cypress-file-upload 插件，它提供了一種在測試期間模擬文件上傳操作的簡單方法。
第 1 步：安裝 cypress-file-upload 外掛程式
要在 Cypress 中處理檔案上傳，您首先需要安裝 cypress-file-upload 軟體套件。

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

登入後複製

接下來，將其匯入 Cypress 支援資料夾內的Commands.js 檔案：

import 'cypress-file-upload';

登入後複製

第 2 步：資料夾結構
確保您的專案具有以下資料夾結構來儲存測試檔案並在測試期間上傳它們：

cypress/
    fixtures/
        exampleFile.pdf  // Test file for uploading
    e2e/
        fileUploadTests.cy.js  // Test file to upload and validate

登入後複製

第 3 步：上傳檔案
安裝外掛程式後，您可以使用attachFile命令從fixtures資料夾上傳檔案。

上傳檔案的方法如下：

describe('File Upload Test in Cypress', () => {
  it('should upload a file successfully', () => {
    // Visit the page with a file upload input
    cy.visit('/upload');

    // Select the file input element and upload a file from the fixtures folder
    cy.get('input[type="file"]').attachFile('exampleFile.pdf');

    // Validate that the file was uploaded (depends on your app's specific response)
    cy.get('.file-name').should('contain', 'exampleFile.pdf');
  });
});

登入後複製

在此測試中：

我們存取文件輸入所在的頁面。
我們使用attachFile()來模擬從fixtures資料夾上傳檔案。
斷言檢查上傳檔案的名稱是否正確顯示在頁面上。

驗證文件上傳

驗證檔案上傳就像檢查檔案名稱或路徑是否出現在上傳後的網頁上一樣簡單。但是，對於複雜的場景（例如，驗證檔案內容或大小），您可能需要伺服器端檢查或存根。

範例：使用附加資料驗證檔案上傳

describe('File Upload and Validation', () => {
  it('should upload a file and validate metadata', () => {
    cy.visit('/upload');

    cy.get('input[type="file"]').attachFile('exampleFile.pdf');

    // Assert that the file metadata like size is displayed correctly
    cy.get('.file-size').should('contain', 'Size: 1MB');
  });
});

登入後複製

Cypress 中的檔案下載
Cypress 不提供對驗證檔案下載的本機支援（因為瀏覽器下載的檔案不受 Cypress 的控制），但我們可以透過直接檢查本機檔案系統中的下載檔案來解決此問題。

第 1 步：安裝 cypress-downloadfile
要驗證 Cypress 中的檔案下載，我們可以使用 cypress-downloadfile 外掛程式。

透過 npm 安裝它：

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

登入後複製

接下來，將外掛程式加入您的commands.js 檔案：

import 'cypress-file-upload';

登入後複製

第 2 步：下載並驗證檔案
現在您可以編寫一個測試來下載文件並驗證其內容。

範例：下載檔案

cypress/
    fixtures/
        exampleFile.pdf  // Test file for uploading
    e2e/
        fileUploadTests.cy.js  // Test file to upload and validate

登入後複製

在此測試中：

我們使用 cy.downloadFile() 從 URL 下載檔案並將其儲存在 cypress/downloads 資料夾中。
下載後，我們使用 cy.readFile() 驗證檔案是否存在。

第 3 步：驗證文件內容
您可能需要驗證下載檔案的內容以確保下載成功。對於基於文字的檔案（例如 .txt、.csv），Cypress 的 cy.readFile() 可用於斷言檔案的內容。

範例：驗證下載的檔案內容

describe('File Upload Test in Cypress', () => {
  it('should upload a file successfully', () => {
    // Visit the page with a file upload input
    cy.visit('/upload');

    // Select the file input element and upload a file from the fixtures folder
    cy.get('input[type="file"]').attachFile('exampleFile.pdf');

    // Validate that the file was uploaded (depends on your app's specific response)
    cy.get('.file-name').should('contain', 'exampleFile.pdf');
  });
});

登入後複製

此測試下載一個 .txt 檔案並檢查它是否包含預期的文字。