Cypress中向require()函数传入变量时功能无法生效问题求解

问题根因 #

这个问题是Cypress底层依赖的Webpack打包规则和CommonJS模块静态加载机制共同导致的：

• 不管是Node.js原生CommonJS加载器还是Webpack的模块解析逻辑，都会在代码静态编译/打包阶段处理所有require()调用，提前定位依赖模块的位置、完成模块打包。
• 当require()传入硬编码路径时，打包阶段可以直接识别路径、把对应模块打包进最终产物，运行时就能正常加载。
• 当require()传入变量时，静态编译阶段无法获取变量的实际值，无法识别对应依赖，自然不会把目标模块打包进去，运行时就会抛出模块找不到的错误。
• 额外排查点：可以先打印fileName变量的实际值，确认换行定义的路径没有带隐形换行符、空格等不可见字符，导致路径和实际文件路径不匹配。

可行解决方案 #

方案1：适配Webpack动态require规则 #

如果必须用变量传路径，可以按照Webpack的动态解析规则，把固定路径前缀硬编码，仅可变部分用变量传入，让Webpack在打包阶段就能扫描到对应目录下的所有模块：

// 固定前缀硬编码，可变部分写变量
const baseDir = '/cypress/integration/common/pageObjects/'
const targetFile = 'cypressDemo.js'
const fileObj = require(`${baseDir}${targetFile}`)
cy.log(fileObj.elements.web.email)

如果你的Cypress项目配置了路径别名，也可以直接用别名代替绝对路径前缀。

方案2：使用ES6动态导入语法 #

如果需要在测试运行时才确定加载路径，可以用运行时执行的import()动态导入语法，支持直接传入完整路径变量：

const fileName = '/Users/ashdiksh/Documents/Automation/CypressTest/cypress/integration/common/pageObjects/cypressDemo.js'
import(fileName).then(fileObj => {
  cy.log(fileObj.elements.web.email)
})

方案3：使用Cypress内置fixture加载（适配数据文件场景） #

如果目标文件是测试数据类的JS/JSON文件，更推荐用Cypress原生的cy.fixture()方法加载，天然支持动态路径：

const fileName = 'cypressDemo'
cy.fixture(fileName).then(fileObj => {
  cy.log(fileObj.elements.web.email)
})

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