Playwright中Vite导入别名失效问题求助

当IDE能正常解析@/等导入别名，但Playwright测试文件导入带别名的文件后“消失”，核心原因是Playwright不会自动读取Vite或TS的别名配置，需要手动同步配置并确保测试环境的路径解析逻辑正确。以下是具体解决步骤：

1. 让Playwright识别TS路径别名 #

Playwright默认不读取tsconfig.json中的paths配置，可通过tsconfig-paths工具同步配置：

• 安装依赖：

  npm install -D tsconfig-paths
  

• 在playwright.config.ts顶部添加配置加载代码：

  require('tsconfig-paths/register')({
    configFile: './tsconfig.app.json'
  })
  
  import { defineConfig, devices } from '@playwright/test';
  // ... 其他Playwright配置
  

2. 直接配置Playwright的路径别名 #

若不想额外依赖工具，可在playwright.config.ts中手动同步Vite的别名配置：

import { defineConfig, devices } from '@playwright/test';
import { fileURLToPath, URL } from 'node:url';

export default defineConfig({
  // ... 其他测试配置
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '@selectors': fileURLToPath(new URL('./src/tests/shared/selectors', import.meta.url)),
      '@routes': fileURLToPath(new URL('./src/utils/tests/e2e/routes', import.meta.url)),
    },
  },
});

3. 确保测试文件的TS配置生效 #

• 为E2E测试单独创建tsconfig.e2e.json，继承主配置并聚焦测试文件：

  {
    "extends": "./tsconfig.app.json",
    "include": ["src/tests/e2e/**/*"],
    "compilerOptions": {
      "types": ["@playwright/test"]
    }
  }
  

• 在playwright.config.ts中指定该配置文件：

  export default defineConfig({
    testDir: './src/tests/e2e',
    tsconfig: './tsconfig.e2e.json',
    // ... 其他配置
  });
  

4. 排查桶文件导入问题 #

针对@/utils这类桶文件的特殊问题：

• 检查src/utils/index.ts是否正确导出所有模块，无语法错误或遗漏
• 避免桶文件内部出现循环导入，这会导致Playwright解析失败
• 确保桶文件内的子模块导入路径（别名/相对路径）无冲突

内容的提问来源于stack exchange，提问作者Théo Lavaux