cy.readFile()无法读取动态路径文件的问题排查与解决

问题场景 #

尝试读取cypress/downloads目录下的下载文件，使用动态拼接路径的代码如下：

let filename = 'Publisher_' + new Date().toLocaleDateString('en-US').replaceAll('/', '_').toString() + '.html';
let filepath = 'cypress/downloads/' + filename.toString();
cy.readfile(filepath)

执行后cy.readFile抛出文件不存在的错误，但直接使用静态路径cy.readFile('cypress/downloads/Publisher_5_25_2023.html')却能正常读取文件。

错误信息 #

AssertionError
Timed out retrying after 4000ms: 
cy.readFile("cypress/downloads/Publisher_5_25_2023.html") failed because the file 
does not exist at the following path:

/Users/myMacbook/Desktop/cy-automation/cypress/downloads/Publisher_5_25_2023.htmlLearn more
View stack trace


Print to console
at Context.eval (http://localhost:8080/__cypress/tests?p=cypress/integration/features/publisherMenu/publisher-diary-publisher.feature:13508:23)
at Registry.runStepDefininition (http://localhost:8080/__cypress/tests?p=cypress/integration/features/publisherMenu/publisher-diary-publisher.feature:9254:48)
at Object.fn (http://localhost:8080/__cypress/tests?p=cypress/integration/features/publisherMenu/publisher-diary-publisher.feature:10155:41)
at runStepWithLogGroup (http://localhost:8080/__cypress/tests?p=cypress/integration/features/publisherMenu/publisher-diary-publisher.feature:9859:36)
at Context.eval (http://localhost:8080/__cypress/tests?p=cypress/integration/features/publisherMenu/publisher-diary-publisher.feature:10152:60)

失败原因 #

1. 时序冲突：new Date()是同步JavaScript代码，会在Cypress执行异步下载操作前就生成日期字符串。如果文件下载耗时较长，执行cy.readFile时文件还未完成下载，就会提示文件不存在。
2. 日期格式差异：toLocaleDateString('en-US')的输出受运行环境影响，部分环境会生成带前导零的日期格式（如05_25_2023），但实际下载的文件名是不带前导零的5_25_2023，导致路径匹配失败。

修复方案 #

方案1：等待文件下载完成后再读取 #

通过Cypress任务（task）遍历下载目录，匹配目标文件，确保文件存在后再读取：

// 先触发下载操作（替换为你的实际下载触发代码）
cy.get('#download-btn').click();

// 调用task获取匹配的文件名并读取
cy.task('getMatchingDownload', { dir: 'cypress/downloads', prefix: 'Publisher_' }).then((filename) => {
  const filepath = `cypress/downloads/${filename}`;
  cy.readFile(filepath);
});

在cypress.config.js中注册对应的task：

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

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('task', {
        getMatchingDownload({ dir, prefix }) {
          const files = fs.readdirSync(dir);
          // 匹配前缀为Publisher_且后缀为.html的文件
          return files.find(file => file.startsWith(prefix) && file.endsWith('.html'));
        }
      });
    },
  },
});

方案2：统一日期格式生成逻辑 #

手动构造和下载文件名完全一致的日期格式，避免toLocaleDateString的环境差异：

const date = new Date();
// 生成不带前导零的月/日格式
const month = date.getMonth() + 1; // 月份从0开始，需加1
const day = date.getDate();
const year = date.getFullYear();

const filename = `Publisher_${month}_${day}_${year}.html`;
const filepath = `cypress/downloads/${filename}`;

// 延长超时时间，确保文件下载完成
cy.readFile(filepath, { timeout: 10000 });

方案3：读取最新下载的文件 #

如果存在多个同前缀文件，可通过task获取目录中最新的文件：

cy.task('getLatestDownload', { dir: 'cypress/downloads', prefix: 'Publisher_' }).then((filepath) => {
  cy.readFile(filepath);
});

对应的task实现：

const path = require('path');

on('task', {
  getLatestDownload({ dir, prefix }) {
    const files = fs.readdirSync(dir)
      .filter(file => file.startsWith(prefix) && file.endsWith('.html'))
      .map(file => ({
        name: file,
        // 获取文件修改时间，用于排序
        time: fs.statSync(path.join(dir, file)).mtime.getTime()
      }))
      // 按修改时间倒序，取最新的文件
      .sort((a, b) => b.time - a.time);
    
    return path.join(dir, files[0].name);
  }
});

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