Playwright扩展Page对象后调用locator报错：TypeError: page.locator不是函数

问题根源 #

你在base.extend中替换page时，使用了对象字面量{...page, login: ...}的方式。这种方式仅能复制Page实例的自身属性，而Playwright的locator、waitForSelector等核心方法是定义在Page类的原型链上的，因此新生成的page对象无法访问这些原生方法，最终触发TypeError: page.locator is not a function错误。

修复方案 #

不要创建新对象覆盖原page，而是直接在Playwright原生的Page实例上挂载自定义页面对象，这样既能保留所有原生方法，又能添加自定义的页面对象属性。

修改后的index.ts代码 #

const { test: base, expect } = require('@playwright/test')

import { LoginPage } from '../pages/login.page';
import { AssignFields } from '../pages/assignFields.page';

// （可选）TypeScript类型扩展，解决属性类型提示问题
import { Page } from '@playwright/test';
declare module '@playwright/test' {
  interface Page {
    login: LoginPage;
    assignfields: AssignFields;
  }
}

const test = base.extend({
    page: async ({ page }, use) => {
        // 直接在原生Page实例上挂载页面对象
        page.login = new LoginPage(page);
        page.assignfields = new AssignFields(page);
        await use(page);
    }
})

export { test, expect };

验证说明 #

修改后，你的测试用例assignFields.spec.ts无需任何改动，既可以正常调用page.locator()等原生方法，也能通过page.login、page.assignfields访问自定义页面对象的方法，完全符合你统一导入页面对象的需求。

内容的提问来源于stack exchange，提问作者Jaime Junior