Browserstack运行Next.js Cypress e2e测试无法解析相对导入报错

使用Cypress Next.js插件时，通过Browserstack运行测试用例，相对路径导入模块触发报错；相同测试用例本地运行完全正常，曾尝试修改plugins/index.js实现i18n全局导入未生效。

Oops...we found an error preparing this test file:

  > cypress/integration/happy-paths/modules/promo-card-page-automation-checks.spec.js

The error was:

Error: Webpack Compilation Error
    ./cypress/integration/happy-paths/modules/promo-card-page-automation-checks.spec.js
    Module not found: Error: Can't resolve '../../../../services/i18n' in '/e2e/cypress/integration/happy-paths/modules'
    Looked for and couldn't find the file at the following paths:
    [/e2e/services/i18n]
    [/e2e/services/i18n.js]
    [/e2e/services/i18n.json]
    [/e2e/services/i18n.jsx]
    [/e2e/services/i18n.mjs]
    [/e2e/services/i18n.coffee]
    [/e2e/services/i18n/index]
    [/e2e/services/i18n/index.js]
    [/e2e/services/i18n/index.json]
    [/e2e/services/i18n/index.jsx]
    [/e2e/services/i18n/index.mjs]
    [/e2e/services/i18n/index.coffee]
     @ ./cypress/integration/happy-paths/modules/promo-card-page-automation-checks.spec.js 5:35-71

• 首先确认根路径差异：报错信息显示Browserstack运行环境的项目执行根目录为/e2e/，和本地运行时的项目根目录结构不一致。本地执行时Cypress以当前项目根目录为解析起点，Browserstack会将上传的测试相关文件统一挂载到/e2e/路径下，多层相对路径回溯时很容易因为目录层级偏移出现解析错误。
• 替换多层相对路径为webpack别名配置，从根源规避目录结构变动带来的解析问题。在Cypress配置文件中添加路径解析别名，直接指向对应目录的绝对路径，不要依赖相对层级回溯。Cypress 10+版本的cypress.config.js配置示例：

const { defineConfig } = require("cypress");
const webpackPreprocessor = require("@cypress/webpack-preprocessor");
const path = require("path");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      const preprocessorOptions = {
        webpackOptions: {
          resolve: {
            alias: {
              "@services": path.resolve(__dirname, "./services")
            },
            extensions: [".js", ".jsx", ".json", ".mjs", ".coffee"]
          }
        }
      }
      on("file:preprocessor", webpackPreprocessor(preprocessorOptions));
      return config
    }
  }
});

配置完成后，所有i18n模块的导入统一替换为import i18n from '@services/i18n'即可，不受执行环境目录结构变化影响。

• 核对Browserstack配置的文件上传范围：默认配置通常只会上传cypress目录下的文件，项目根目录下的services等测试依赖文件夹如果没被纳入上传列表，就算路径配置正确，云侧运行环境里根本不存在对应文件，也会报模块找不到的错误。需要在Browserstack配置文件（通常为browserstack.json）的测试套件规则中，添加上传规则把services等非cypress目录的依赖文件包含进去。
• 弃用plugins/index.js中的全局导入适配逻辑：Browserstack运行时的插件执行上下文和本地环境存在差异，这类全局注入逻辑在云侧环境的失效率很高，路径别名+显式声明依赖上传范围的方案稳定性更强。

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