如何在 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 文件并检查它是否包含预期的文本。