如何使用Cypress对客户端下载功能进行E2E测试并获取下载路径

没问题，我来教你搞定这个客户端下载的E2E测试！因为是纯客户端生成的下载（没有后端请求），Cypress依然可以通过配置和文件系统访问来验证下载路径是否符合预期，具体步骤如下：

1. 配置Cypress的下载目录 #

首先，我们需要在cypress.config.js里指定一个自定义的下载目录，同时添加Node任务来读取该目录的文件（Cypress的浏览器测试环境无法直接访问文件系统，需要借助Node层的任务）：

const { defineConfig } = require("cypress");
const fs = require('fs');
const path = require('path');

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // 注册任务：获取指定目录下的所有文件
      on('task', {
        getDownloadedFiles(folderPath) {
          // 确保目录存在，避免报错
          if (!fs.existsSync(folderPath)) {
            fs.mkdirSync(folderPath, { recursive: true });
            return [];
          }
          return fs.readdirSync(folderPath);
        },
        // 可选任务：清空下载目录，避免残留文件干扰测试
        clearDownloads(folderPath) {
          if (fs.existsSync(folderPath)) {
            fs.readdirSync(folderPath).forEach(file => {
              fs.unlinkSync(path.join(folderPath, file));
            });
          }
          return null;
        }
      });
    },
    // 指定自定义下载目录，后续用于断言路径是否符合预期
    downloadsFolder: 'cypress/downloads/client-downloads',
  },
});

2. 编写测试用例验证下载路径 #

接下来修改你的测试用例，加入清空目录、点击按钮、验证路径的完整逻辑：

it('Download button should save file to expected path', () => {
  // 先清空下载目录，避免之前的测试残留文件干扰结果
  cy.task('clearDownloads', Cypress.config('downloadsFolder'));

  // 点击下载按钮
  cy.get('.download').click();

  // 智能等待文件下载完成（自动重试直到文件出现，比固定等待更可靠）
  cy.wrap(null).should(() => {
    const files = fs.readdirSync(Cypress.config('downloadsFolder'));
    expect(files.length).to.be.greaterThan(0, '下载文件未出现在指定目录');
  });

  // 验证下载路径是否符合预期
  cy.task('getDownloadedFiles', Cypress.config('downloadsFolder')).then(files => {
    // 拼接完整的下载路径
    const fullFilePath = path.join(Cypress.config('downloadsFolder'), files[0]);
    
    // 断言路径包含我们预先配置的预期目录
    expect(fullFilePath).to.include(Cypress.config('downloadsFolder'));
    
    // 如果知道预期的文件名，还可以额外验证文件名的正确性
    // expect(files[0]).to.equal('expected-filename.pdf');
  });
});

关键说明 #

• Cypress会自动捕获客户端生成的下载（比如Blob、dataURL触发的下载），并将文件保存到你配置的downloadsFolder目录中
• 使用cy.task是Cypress推荐的访问文件系统的方式，能避开浏览器环境的权限限制
• 用cy.wrap().should()的方式等待文件出现，会自动重试直到条件满足，比固定时长的cy.wait()更适配不同大小的文件下载

内容的提问来源于stack exchange，提问作者Sangram Badi