Playwright页面对象模型(POM)如何返回元素供其他文件调用？

安全阿岳

2026-9-25

Playwright 实现可复用元素返回方法的方案

Playwright 中和 Protractor 的 $ 选择器功能对等的 API 是 page.locator()，该方法返回的 Locator 对象为惰性求值模式，和 Protractor 的 ElementFinder 特性一致，天然支持封装后跨文件复用。

对应实现示例

1. 元素封装文件（对应你给出的 Element file）

// login.elements.js
class LoginElements {
  constructor(page) {
    // 传入当前page实例
    this.page = page;
  }

  login() {
    // 返回登录按钮定位器，等价于Protractor的$选择器返回结果
    return this.page.locator('.modal-footer .btn.btn-primary');
  }
}

module.exports = LoginElements;

2. 页面操作文件（对应你给出的 Page file）

// login.page.js
const LoginElements = require('./login.elements');

class LoginPage {
  constructor(page) {
    this.page = page;
    // 初始化元素实例
    this.elementPage = new LoginElements(page);
  }

  async loginPage() {
    // 调用元素方法返回的定位器执行点击，注意所有操作都要加await
    await this.elementPage.login().click();
  }
}

module.exports = LoginPage;

注意事项

Playwright 所有元素操作都是异步方法，调用时必须添加 await 关键字，这是和 Protractor 同步写法最大的差异
如果不需要单独拆分元素层和页面操作层，也可以直接把定位器定义为页面对象的属性，写法更简洁：

// 简化版页面对象写法
class LoginPage {
  constructor(page) {
    this.page = page;
    // 直接定义定位器属性
    this.loginBtn = page.locator('.modal-footer .btn.btn-primary');
  }

  async clickLogin() {
    await this.loginBtn.click();
  }
}