使用Cypress selectFile时遇TypeError: fs.existsSync is not a function报错求助

报错原因 #

Cypress的测试代码运行在浏览器上下文中，而fs是Node.js的核心模块，浏览器环境不支持该模块，直接在测试代码里调用依赖fs的getFile方法会抛出这个错误。

解决方案 #

将文件操作逻辑移到Cypress的Node.js环境代码中（插件配置），通过Cypress任务（task）在测试代码中调用。

步骤1：在Cypress配置文件中添加任务 #

修改cypress.config.js（旧版本为cypress/plugins/index.js），把getFile的逻辑放到setupNodeEvents里：

const { defineConfig } = require('cypress');
const fs = require('fs');
const path = require('path');
const axios = require('axios'); // 替换浏览器端的文件下载逻辑，适配Node环境

// Node环境下实现文件下载转Buffer
const getBuffer = async (url) => {
  const response = await axios.get(url, { responseType: 'arraybuffer' });
  return response.data;
};

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('task', {
        getFile({ format, directory = 'files', url = null }) {
          return new Promise(async (resolve, reject) => {
            const defaultUrl = 'https://file-examples.com/wp-content/uploads/2017/10/file_example_PNG_500kB.png';
            const targetUrl = url || defaultUrl;
            
            const directoryPath = path.join(__dirname, `/../../tmp/${directory}`);
            const filePath = path.join(directoryPath, `file.${format}`);

            try {
              if (!fs.existsSync(filePath)) {
                const buffer = await getBuffer(targetUrl);
                fs.mkdirSync(directoryPath, { recursive: true });
                fs.writeFileSync(filePath, buffer, 'binary');
              }
              resolve(filePath);
            } catch (err) {
              reject(err);
            }
          });
        }
      });
    },
  },
});

步骤2：在测试代码中调用任务并使用selectFile #

在测试用例里通过cy.task获取文件路径，再传入selectFile：

cy.task('getFile', { format: 'png' }).then(filePath => {
  cy.get('input[type="file"]').selectFile(filePath, { force: true });
});

替代方案：直接传递文件Buffer（无需保存本地） #

如果不需要保存文件到本地，可以修改任务直接返回Buffer，在测试中用contents选项：

配置文件中的任务修改为：

on('task', {
  getFileBuffer(url = null) {
    const defaultUrl = 'https://file-examples.com/wp-content/uploads/2017/10/file_example_PNG_500kB.png';
    return getBuffer(url || defaultUrl);
  }
});

测试代码中使用：

cy.task('getFileBuffer').then(buffer => {
  cy.get('input[type="file"]').selectFile({
    contents: buffer,
    fileName: 'file.png',
    mimeType: 'image/png'
  }, { force: true });
});

注意事项 #

• 所有依赖Node模块的逻辑（如fs、文件下载）必须放在Cypress的插件配置中，禁止在测试代码（浏览器上下文）中直接调用。
• 如果原有getBuffer是浏览器端实现（比如用fetch），需要替换为Node环境的实现方式（如axios或http模块）。

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