从Selenium/Cucumber迁移至Playwright/Cucumber的多标签页处理方案咨询

你的核心问题是：打开新标签页后，后续步骤仍在使用初始的pageFixture.page实例，而非新标签页的Page对象。Playwright不像Selenium那样有全局的driver上下文切换，需要主动维护当前活跃的Page实例。

下面是具体的解决方案：

1. 用Cucumber World维护当前活跃Page #

在Cucumber的自定义World对象中添加currentPage属性，统一管理当前要操作的Page实例，替代直接使用固定的pageFixture.page。

首先定义自定义World（TypeScript示例）：

// support/world.ts
import { World, setWorldConstructor } from '@cucumber/cucumber';
import { Page } from '@playwright/test';

class CustomWorld implements World {
  currentPage: Page;
  context: any;
  LOC: any;

  constructor(options: any) {
    // 初始化时绑定初始页面
    this.currentPage = options.pageFixture.page;
    this.context = options.context;
    this.LOC = options.LOC;
  }
}

setWorldConstructor(CustomWorld);

2. 更新打开新标签页的步骤 #

在点击打开新标签页的步骤中，将currentPage更新为新创建的Page对象：

// File1.ts
When('I click Manage My booking', async function () {
    const [newPage] = await Promise.all([
        this.context.waitForEvent('page'),
        this.currentPage.locator(pom.manageMyBookingsButton).nth(0).click(),
    ]);
    await newPage.waitForLoadState();
    // 切换当前活跃页面到新标签页
    this.currentPage = newPage;
}); 

3. 修改所有步骤使用currentPage #

把后续步骤中所有pageFixture.page替换为this.currentPage，这样无论是否打开新标签页，步骤都会自动使用当前活跃的Page：

// File2.ts
Then('The order summary page is displayed', async function () {
    await this.currentPage.locator(orderSummary.salesConditionsCheckBox).nth(0).focus();
    expect(await this.currentPage.locator(orderSummary.salesConditionsCheckBox).nth(0).isVisible()).toBe(true);
});

When('I accept the sales conditions', async function () {
    await this.currentPage.locator(orderSummary.salesConditionsCheckBox).nth(0).focus();
    await this.currentPage.locator(orderSummary.salesConditionsCheckBox).nth(0).click();
    if(isPaymentCondition[this.LOC.market]){
        await this.currentPage.locator(orderSummary.paymentConditionsCheckBox).nth(0).focus();
        await this.currentPage.locator(orderSummary.paymentConditionsCheckBox).nth(0).click();
    }
});

额外提示 #

• 如果需要在标签页之间来回切换，可以在World中维护一个Page列表（比如this.pages: Page[]），打开新页时将其加入列表，切换时通过页面标题、URL或索引找到目标Page，再赋值给this.currentPage。
• 为避免资源泄漏，建议在Cucumber的After钩子中关闭所有打开的页面：

After(async function () {
    await Promise.all(this.context.pages().map(page => page.close()));
});

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