介紹

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

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

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

先決條件

要按照範(fàn)例進(jìn)行操作，請確保您已安裝並設(shè)定 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 步：資料夾結(jié)構(gòu)
確保您的專案具有以下資料夾結(jié)構(gòu)來儲存測試檔案並在測試期間上傳它們：

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資料夾上傳檔案。
• 斷言檢查上傳檔案的名稱是否正確顯示在頁面上。

驗(yàn)證文件上傳

驗(yàn)證檔案上傳就像檢查檔案名稱或路徑是否出現(xiàn)在上傳後的網(wǎng)頁上一樣簡單。但是，對於複雜的場景（例如，驗(yàn)證檔案內(nèi)容或大?。赡苄枰欧鞫藱z查或存根。

範(fàn)例：使用附加資料驗(yàn)證檔案上傳

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 不提供對驗(yàn)證檔案下載的本機(jī)支援（因?yàn)闉g覽器下載的檔案不受 Cypress 的控制），但我們可以透過直接檢查本機(jī)檔案系統(tǒng)中的下載檔案來解決此問題。

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

透過 npm 安裝它：

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

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

import 'cypress-file-upload';

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

範(fàn)例：下載檔案

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() 驗(yàn)證檔案是否存在。

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

範(fàn)例：驗(yàn)證下載的檔案內(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 檔案並檢查它是否包含預(yù)期的文字。

Cypress 中文件上傳和下載的最佳實(shí)踐

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

結(jié)論

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

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

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

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

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