Playwright自动化测试报错：TypeError: _LoginPage.default is not a constructor

错误原因分析 #

报错TypeError: _LoginPage.default is not a constructor本质是模块导入导出不匹配，通常由以下几种情况导致：

• TypeScript配置的模块解析问题：若tsconfig.json中module设为CommonJS，TypeScript会将ES模块的默认导出转换为CommonJS的exports.default，此时直接用import LoginPage from ...会拿到包含default属性的对象，而非类本身，无法实例化。
• 导入路径错误：fixture.ts中../pages/shared/LoginPage的路径可能存在大小写、目录层级错误（部分系统对路径大小写敏感）。
• 文件扩展名问题：导入时未指定.ts扩展名，且tsconfig.json未配置正确的resolveExtensions，导致模块解析失败。

具体解决步骤 #

方案1：调整TypeScript配置 #

修改tsconfig.json，让模块解析适配ES模块：

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "NodeNext",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

esModuleInterop和allowSyntheticDefaultImports会自动处理CommonJS与ES模块的导入兼容问题。

方案2：修改导入方式 #

若不想调整配置，可改用以下导入语句：

// fixture.ts中替换原导入语句
import { default as LoginPage } from '../pages/shared/LoginPage';

或者：

import * as LoginPageModule from '../pages/shared/LoginPage';
const LoginPage = LoginPageModule.default;

方案3：修正导入路径 #

确认fixture.ts所在目录到LoginPage.ts的相对路径准确，比如fixture.ts在utils目录、LoginPage.ts在pages/shared时，../pages/shared/LoginPage是正确路径，否则调整层级或拼写。

额外注意事项 #

你的login.spec.ts中调用异步方法未加await，会导致测试流程混乱，后续会出现其他错误，需修正：

test('Login to the XYZ website', async ({loginPage}) => {
    await loginPage.gotoLoginPage();
    await loginPage.login('hahaha', '123');
})

内容的提问来源于stack exchange，提问作者Anish Krishnan