如何在测试运行时新建的标签页中使用PageObject？

你的核心问题是：通过PageObject操作新标签页时，实际仍在原页面执行操作，但直接使用newPage调用方法却正常。这通常是因为新页面的上下文未正确同步或PageObject的定位器未适配新页面的状态导致的。

原因拆解 #

1. 新页面未完成导航/加载：创建PageObject实例时，新标签页可能还停留在初始页面（如产品列表页），未跳转到包含"Add to cart"按钮的详情页，导致定位器在错误的页面上下文查找元素。
2. 提前初始化的定位器失效：在构造函数中提前定义的addToCartButton定位器，会绑定到创建时的页面状态；当新页面跳转后，该定位器未自动同步到新的页面DOM。
3. 辅助方法可能误用页面实例：productsPage.selectProductByText若未正确使用传入的newPage，而是用了类自身的原页面实例，会导致新页面状态未更新。

解决方案 #

方案1：确保新页面完成导航后再执行操作 #

在创建PageObject或调用方法前，等待新页面完成加载和导航，确保页面上下文正确：

test('As a user I want to open a new tab and visit it', async ({ page, context }) => {
  const productsPage = new ProductsPage(page);
  const [newPage] = await Promise.all([
    context.waitForEvent('page'),
    productsPage.openNewTabWithProduct(newPageLocators.sauceLabsBackpack),
  ]);

  // 等待新页面完成初始加载
  await newPage.waitForLoadState('networkidle');

  // 点击产品时，同步等待导航到详情页
  await Promise.all([
    newPage.waitForNavigation(),
    newPage.locator(newPageLocators.sauceLabsOnesie).click(),
  ]);

  // 此时新页面已在详情页，再初始化PageObject
  const sharedPage = new SharedPage(newPage);
  await sharedPage.addToCartButtonClick(); // 正确操作新标签页
});

方案2：修改PageObject，动态生成定位器 #

避免在构造函数中提前初始化定位器，改为在方法内动态创建，确保每次调用都基于当前页面状态查询：

export class SharedPage {
  /**
   * @param {import('@playwright/test').Page} page
   */
  constructor(page) {
    this.page = page;
    // 不在构造函数中提前定义定位器
  }

  async addToCartButtonClick() {
    // 每次调用时动态生成定位器，适配当前页面状态
    await this.page.locator('text=Add to cart').click();
  }
}

方案3：检查辅助方法的页面实例使用 #

确认ProductsPage的selectProductByText方法确实使用传入的newPage，而非类自身的原页面实例：

export class ProductsPage {
  constructor(page) {
    this.page = page;
  }

  async selectProductByText(targetPage, productText) {
    // 必须使用传入的targetPage，而非this.page（原页面）
    await targetPage.locator(`text=${productText}`).waitFor({ state: 'visible' });
    // 其他业务逻辑...
  }
}

额外优化：使用精准定位器 #

避免仅依赖文本定位，结合元素的测试ID或属性提升定位准确性，减少跨页面的定位冲突：

// SharedPage中改为更精准的定位器
async addToCartButtonClick() {
  await this.page.locator('[data-testid="add-to-cart-button"]').click();
}

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