如何在 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 檔案並檢查它是否包含預期的文字。

Cypress 中文件上傳和下載的最佳實踐

1. 使用Fixtures上傳：始終將要上傳的檔案儲存在fixtures資料夾中，以保持測試資料井然有序且可存取。
2. 清理下載資料夾：在開始新測試之前，清理下載資料夾以避免先前測試運行中的剩餘檔案出現問題。
3. 驗證伺服器回應：對於檔案上傳，除了 UI 斷言之外，還應始終驗證伺服器端回應，以確保檔案正確處理。
4. 使用臨時目錄進行下載：將下載的檔案儲存在臨時目錄（cypress/downloads）中，以避免專案結構混亂。
5. 模擬檔案上傳（可選）：在出於效能原因想要模擬檔案上傳的場景中，請使用存根來繞過真實檔案上傳。

結論

檔案上傳和下載是 Web 應用程式測試中的關鍵操作，雖然 Cypress 本身不支援這些操作，但 cypress-file-upload 和 cypress-downloadfile 外掛程式提供了易於使用的解決方法。

在本指南中，我們探討如何：

• 使用 Cypress 的 cypress-file-upload 外掛程式上傳檔案。
• 透過檢查檔案名稱和元資料來驗證檔案上傳。
• 使用 cypress-downloadfile 外掛程式下載檔案並驗證下載檔案的存在性和內容。

借助這些工具和技術，您可以在 Cypress 端到端測試中自信地處理文件上傳和下載！

以上是如何在 Cypress 中驗證上傳和下載的詳細內容。更多資訊請關注PHP中文網其他相關文章！