如何在Playwright的页面对象模型（POM）中处理新标签页

核心思路是把新标签页的获取逻辑封装到对应页面对象的方法中，并返回新标签页对应的页面对象实例，既符合POM的封装原则，又能顺畅操作新标签页。以下是具体实现方案：

1. 定义主页面的页面对象类 #

在主页面类中封装打开新标签页的方法，内部执行等待popup和点击操作，直接返回新标签页的页面对象：

class MainPage {
  constructor(page) {
    this.page = page;
    this.openNewTabButton = page.locator('button#open-new-tab'); // 替换为实际按钮定位器
  }

  // 封装打开新标签页并返回对应页面对象的方法
  async openNewTabAndGetPage() {
    const [newPage] = await Promise.all([
      this.page.waitForEvent('popup'),
      this.openNewTabButton.click()
    ]);
    return new NewTabPage(newPage);
  }
}

2. 定义新标签页的页面对象类 #

针对新打开的标签页，创建专属页面对象类，封装该页面的元素和操作方法：

class NewTabPage {
  constructor(page) {
    this.page = page;
    this.inputField = page.locator('input#test-field'); // 替换为实际输入框定位器
  }

  // 封装新标签页的输入操作
  async fillTestField(text) {
    await this.inputField.fill(text);
  }

  // 可根据需求添加更多页面操作方法，比如验证文本、提交表单等
}

3. 在测试用例中调用 #

初始化主页面实例后，调用封装的方法获取新标签页对象，即可直接操作新页面元素：

// 假设已初始化Playwright的page实例
const mainPage = new MainPage(page);
// 获取新标签页的页面对象
const newTabPage = await mainPage.openNewTabAndGetPage();
// 执行新标签页的操作
await newTabPage.fillTestField('testing');
// 继续后续测试步骤...

关键说明 #

• 所有页面实例的处理逻辑都封装在页面对象内部，测试用例无需直接操作原始page实例，符合POM高内聚、低耦合的设计原则。
• 若需处理多个标签页，可扩展主页面方法：比如通过Promise.all等待多个popup事件，或通过browser.pages()获取所有页面后筛选，但优先推荐waitForEvent('popup')的方式，稳定性更高。

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