Playwright页面对象模型下新标签页交互断言失败问题

我在项目中采用页面对象模型（Page Object Model），项目结构示例如下：

页面对象文件代码 #

import { Locator, Page } from "@playwright/test";

export class checkoutProcess{
    readonly page: Page;
    readonly proceedButton: Locator;

    constructor(page:Page) {
        this.page = page;
        this.proceedButton = page.locator('//a[@id="btnProceedToOrder"]');
    }
}

动作类文件（继承页面对象） #

import { checkoutProgress } from "../../Page Objects/checkoutProgress";

export class checkoutActions extends checkoutProgress{
    async completeCheckout() {
      //使用页面对象的操作
      await this.proceedButton.click(); //示例  
    }
}

测试用例文件（调用动作类） #

import { expect, test } from "@playwright/test";
import { checkoutActions } from "../../Actions/checkoutActions";

test.describe('Survey Management Tests', () => {
    let checkout;
   

    test.beforeEach(async ({page}) => {
        checkout = new checkoutActions(page);
        await page.goto('/');
    });
    test('Checkout', async () => { 
        await checkout.completeCheckout();
    });
});

现在我在某个动作中点击了一个会打开新标签页的链接，对新标签页进行断言时失败。我推测问题出在页面对象中使用了错误的Page实例（定位器是准确的），即this.page.locator('')的调用存在问题。请问该假设是否正确？调试时点击链接后新标签页会自动获得焦点，无需手动切换。

你的假设是正确的。

核心原因是：当前页面对象和动作类绑定的始终是初始化时传入的原标签页Page实例，即便新标签页自动获得焦点，this.page依然指向原页面对象。用原页面实例去定位新标签页的元素必然失败——原页面中不存在这些元素。

解决思路：
点击打开新标签页的链接时，需要捕获新标签页对应的Page实例，更新动作类/页面对象中的this.page引用，或者基于新实例创建对应的页面对象/动作类。

示例代码调整（以动作类为例）：

async completeCheckoutAndSwitchToNewTab() {
  // 点击前监听新页面弹出事件
  const newTabPromise = this.page.waitForEvent('popup');
  await this.proceedButton.click();
  // 获取新标签页的Page实例
  const newTab = await newTabPromise;
  // 更新当前实例的page属性，后续操作将基于新标签页执行
  this.page = newTab;
}

后续对新标签页的断言操作，基于更新后的this.page执行即可正常定位元素。

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