介紹

處理文件上傳和下載是端到端測試中的常見場景。在這篇文章中，我們將探討如何使用 Cypress 處理文件上傳和下載。盡管 Cypress 缺乏對這些操作的內(nèi)置支持，但您可以通過利用一些庫和 Cypress 強大的命令集來實現(xiàn)此功能。

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

• 使用 Cypress 上傳文件。
• 驗證文件上傳是否成功。
• 下載文件并在 Cypress 中驗證其內(nèi)容。

先決條件

要按照示例進行操作，請確保您已安裝并設置 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 支持文件夾內(nèi)的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文件夾上傳文件。
• 斷言檢查上傳文件的名稱是否正確顯示在頁面上。

驗證文件上傳

驗證文件上傳就像檢查文件名或路徑是否出現(xiàn)在上傳后的網(wǎng)頁上一樣簡單。但是，對于復雜的場景（例如，驗證文件內(nèi)容或大?。?，您可能需要服務器端檢查或存根。

示例：使用附加數(shù)據(jù)驗證文件上傳

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 的控制），但我們可以通過直接檢查本地文件系統(tǒng)中的下載文件來解決此問題。

第 1 步：安裝 cypress-downloadfile
要驗證 Cypress 中的文件下載，我們可以使用 cypress-downloadfile 插件。

通過 npm 安裝它：

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

接下來，將插件添加到您的commands.js 文件中：

import 'cypress-file-upload';

第 2 步：下載并驗證文件
您現(xiàn)在可以編寫一個測試來下載文件并驗證其內(nèi)容。

示例：下載文件

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 步：驗證文件內(nèi)容
您可能需要驗證下載文件的內(nèi)容以確保下載成功。對于基于文本的文件（例如 .txt、.csv），Cypress 的 cy.readFile() 可用于斷言文件的內(nèi)容。

示例：驗證下載的文件內(nèi)容

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文件夾中，以保持測試數(shù)據(jù)井然有序且可訪問。
2. 清理下載文件夾：開始新測試之前，清理下載文件夾以避免先前測試運行中的剩余文件出現(xiàn)問題。
3. 驗證服務器響應：對于文件上傳，除了 UI 斷言之外，還應始終驗證服務器端響應，以確保文件得到正確處理。
4. 使用臨時目錄進行下載：將下載的文件存儲在臨時目錄（cypress/downloads）中，以避免項目結構混亂。
5. 模擬文件上傳（可選）：在出于性能原因想要模擬文件上傳的場景中，請使用存根來繞過真實文件上傳。

結論

文件上傳和下載是 Web 應用程序測試中的關鍵操作，雖然 Cypress 本身不支持這些操作，但 cypress-file-upload 和 cypress-downloadfile 插件提供了易于使用的解決方法。

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

• 使用 Cypress 的 cypress-file-upload 插件上傳文件。
• 通過檢查文件名和元數(shù)據(jù)來驗證文件上傳。
• 使用 cypress-downloadfile 插件下載文件并驗證下載文件的存在性和內(nèi)容。

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

以上是如何在 Cypress 中驗證上傳和下載的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！