Playwright自动化测试入门：LoginPage不是构造函数错误排查求助

错误原因及修复方案 #

1. 模块导入方式不匹配 #

LoginPage.js使用默认导出（export default LoginPage），但测试文件login.spec.js误用了命名导入（import { LoginPage } from '../pages/LoginPage'），导致无法正确识别构造函数。

修复：将测试文件的导入语句改为默认导入：

import {test, expect } from '@playwright/test';
import LoginPage from '../pages/LoginPage'; // 去掉包裹LoginPage的大括号

2. 元素定位变量名不匹配 #

LoginPage类构造函数中定义的用户名输入框变量是this.loginInput，密码输入框是this.passwordInput，但logintoWorld方法里错误使用了未定义的this.username和this.password，会导致填充元素时找不到对应选择器。

修复：修改logintoWorld方法中的变量名，与构造函数保持一致：

async logintoWorld(){
    await this.page.fill(this.loginInput, "manager1"); // 改为loginInput
    await this.page.fill(this.passwordInput, "myPassword"); // 改为passwordInput
    await this.page.click(this.loginButton);
}

修复后的完整代码 #

LoginPage.js #

class LoginPage{
    constructor(page){
        this.page=page;
        this.loginInput = 'input[name="username"]';
        this.passwordInput = 'input[name="password"]';
        this.loginButton = '.MuiLoadingButton-root';
    }

    async logintoWorld(){
        await this.page.fill(this.loginInput, "manager1");
        await this.page.fill(this.passwordInput, "myPassword");
        await this.page.click(this.loginButton);
    }
}

export default LoginPage; 

login.spec.js #

import {test, expect } from '@playwright/test';
import LoginPage from '../pages/LoginPage';

test('Login to testingworld', async ({ page }) => {
  await page.goto('https://mytestingworld.com/auth/login');
  const myLogin = new LoginPage(page);
  await myLogin.logintoWorld();
});

内容的提问来源于stack exchange，提问作者RRJoshi Joshi