Playwright TypeScript无法解析路径别名与已安装npm包问题求助

问题a：无法解析路径别名 #

你的tsconfig里配置了@/src/*的路径别名，但Playwright默认不会自动读取tsconfig的paths配置，需要手动在Playwright配置中添加别名映射：

1. 修改playwright.config.ts，添加resolve配置：

import { defineConfig } from '@playwright/test';
import path from 'path';

export default defineConfig({
  // 其他配置...
  resolve: {
    alias: {
      '@/src': path.resolve(__dirname, './src'),
    },
  },
});

2. 如果你的测试文件是JS格式（比如sign-in.e2e.js），可通过module-alias工具兼容CommonJS环境的别名解析：
   • 安装依赖：npm install module-alias --save-dev
   • 在package.json中添加别名配置：

     {
       "_moduleAliases": {
         "@/src": "./src"
       }
     }
     

   • 在测试文件顶部引入注册脚本：

     require('module-alias/register');
     

问题b：无法解析部分已安装的npm包 #

按以下步骤排查解决：

• 重新安装依赖：删除node_modules和package-lock.json（或yarn.lock），执行npm install，确保安装过程无报错。
• 检查版本兼容性：部分包可能与当前Playwright版本冲突，尝试降级/升级对应包版本，或查看Playwright官方兼容说明。
• 确认依赖位置：运行时依赖需放在dependencies字段中，避免仅放在devDependencies导致Playwright无法读取。
• 匹配模块语法：如果package.json设置了"type": "module"，所有导入需使用ES模块语法（import）；若为CommonJS环境，统一使用require语法。

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