Playwright框架中TypeScript导入需显式指定.ts后缀的问题

1. ES模块解析规则限制：因为你的package.json配置了"type": "module"，Node.js会强制按照ES模块规范处理文件。ES模块要求导入本地文件时必须指定完整的文件后缀（如.ts），否则Node无法找到对应的模块，这就是无后缀导入时出现“Cannot find module”错误的原因。
2. TypeScript类型检查规则冲突：TypeScript的类型检查逻辑允许省略.ts后缀（TS会自动补全），所以当你手动添加.ts后缀后，IDE会触发TS2691警告，认为该导入不符合TS的规范。
3. 其他无后缀导入正常的原因：那些能正常运行的无后缀导入，要么是Node.js内置模块、第三方npm包（这类模块的package.json有明确的main/exports字段，Node可自动解析），要么是被tsconfig路径映射覆盖的模块，而你的fixtures是本地TS文件，不在上述范围内。

方法1：调整TS配置对齐Node.js ES模块规则 #

修改tsconfig.json，让TypeScript认可带.ts后缀的导入，同时修复配置中的拼写错误：

{
    "compilerOptions": {
        "target": "es2018",
        "module": "Node16",
        "experimentalSpecifierResolution": "node", // 修复拼写错误：去掉多余的'r'
        "sourceMap": true,
        "esModuleInterop": true,
        "strict": false,
        "lib": [
            "dom",
            "es2018"
        ],
        "types": [
            "node",
            "cypress",
            "cypress-real-events"
        ],
        "moduleResolution": "Node16",
        "allowImportingTsExtensions": true, // 添加该选项，允许导入带.ts后缀的文件
        "noEmit": true // Playwright测试通常不需要手动编译TS，可开启该选项
    },
    "include": [
        "**/*.ts"
    ]
}

添加allowImportingTsExtensions: true后，IDE的TS2691警告会消失，同时Node.js也能正确解析带后缀的导入。

方法2：使用TS路径别名简化导入 #

通过路径别名避免手动写相对路径和后缀，同时兼容TS和Node的解析规则：

1. 在tsconfig.json的compilerOptions中添加paths配置：

"paths": {
  "@fixtures": ["./path/to/fixtures.ts"] // 根据你的实际文件路径调整，比如根目录下的tests/fixtures.ts就写"./tests/fixtures.ts"
}

2. 导入时使用别名：

import { X, Y, Z } from '@fixtures';

3. 确保运行时能解析路径别名：如果Playwright无法自动识别路径别名，可安装tsconfig-paths，并在全局初始化文件顶部添加：

import 'tsconfig-paths/register';

方法3：利用Playwright的内置TS处理 #

确保你的playwright.config.ts正确配置了全局初始化文件路径，Playwright会自动处理TS文件的编译和模块解析，无需手动添加后缀：

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

export default defineConfig({
  globalSetup: './tests/global-setup.ts', // 指定全局初始化文件的完整路径
  // 其他测试配置
});

此时在global-setup.ts中使用无后缀导入import { X, Y, Z } from '../../fixtures';即可正常运行，不会出现模块找不到的错误。

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