介绍

处理文件上传和下载是端到端测试中的常见场景。在这篇文章中，我们将探讨如何使用 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

第三步：上传文件
安装插件后，您可以使用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-downloadfile

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

require('cypress-downloadfile/lib/downloadFileCommand');

第 2 步：下载并验证文件
您现在可以编写一个测试来下载文件并验证其内容。

示例：下载文件

describe('File Download Test in Cypress', () => {
  it('should download a file and validate its content', () => {
    cy.visit('/download');

    // Download the file and save it to a custom downloads folder
    cy.downloadFile('https://example.com/sample.pdf', 'cypress/downloads', 'sample.pdf');

    // Validate that the file exists in the specified location
    cy.readFile('cypress/downloads/sample.pdf').should('exist');
  });
});

在此测试中：

• 我们使用 cy.downloadFile() 从 URL 下载文件并将其存储在 cypress/downloads 文件夹中。
• 下载后，我们使用 cy.readFile() 验证文件是否存在。

第 3 步：验证文件内容
您可能需要验证下载文件的内容以确保下载成功。对于基于文本的文件（例如 .txt、.csv），Cypress 的 cy.readFile() 可用于断言文件的内容。

示例：验证下载的文件内容

describe('Validate Downloaded File Content', () => {
  it('should download and check the content of a text file', () => {
    cy.visit('/download');

    // Download the text file
    cy.downloadFile('https://example.com/sample.txt', 'cypress/downloads', 'sample.txt');

    // Read the file and assert its content
    cy.readFile('cypress/downloads/sample.txt').then((fileContent) => {
      expect(fileContent).to.contain('This is a sample text file');
    });
  });
});

此测试下载 .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 端到端测试中自信地处理文件上传和下载！