剧作家和黄瓜中的多选项卡

Question

我正在研究 POC，看看我们是否可以将现有的 selenium/cucumber 测试迁移到 playwright/cucumber，但在处理多选项卡情况时，我找不到方法。

我在 2 个不同的文件中有这 3 个步骤

文件1.ts：

When('I click Manage My booking', async function () {

    const [newPage] = await Promise.all([
        this.context.waitForEvent('page'),
        pageFixture.page.locator(pom.manageMyBookingsButton).nth(0).click(),
      ]);
    await newPage.waitForLoadState();

}); 

文件2.ts

Then('The order summary page is displayed', async function () {

    await pageFixture.page.locator(orderSummary.salesConditionsCheckBox).nth(0).focus();
    expect(await pageFixture.page.locator(orderSummary.salesConditionsCheckBox).nth(0).isVisible()).toBe(true);
});

When('I accept the sales conditions', async function () {

    await pageFixture.page.locator(orderSummary.salesConditionsCheckBox).nth(0).focus();
    await pageFixture.page.locator(orderSummary.salesConditionsCheckBox).nth(0).click();
    if(isPaymentCondition[this.LOC.market]){

        await pageFixture.page.locator(orderSummary.paymentConditionsCheckBox).nth(0).focus();
        await pageFixture.page.locator(orderSummary.paymentConditionsCheckBox).nth(0).click();
    }
});

这是我的功能文件的片段：

功能文件1：1句话打开一个新选项卡

When I click Manage My booking
Then The order summary page is displayed
When I accept the sales conditions

功能文件2：1句话不打开新标签

When I click the next button from the cart
Then The order summary page is displayed
When I accept the sales conditions

在 selenium 中，我可以打开第二个选项卡，使用新选项卡更新 webdriver 实例，所有步骤都会考虑到这一点，因为它们都使用相同的 webdriver 实例，如果我愿意，我可以在选项卡之间来回切换.

有人对如何与剧作家一起做到这一点有建议或提示吗？

Answer 1

这是我为自己的困境找到的唯一解决方案。 将所有 pageFixture.page 替换为 pageFixture.page.context().pages()[pageFixture.page.context().pages().length - 1]]

我的步骤定义现在如下所示：

文件1.ts：

When('I click Manage My booking', async function () {

    const [newPage] = await Promise.all([
        this.context.waitForEvent('page'),
        pageFixture.page.context().pages()[pageFixture.page.context().pages().length - 1]].locator(pom.manageMyBookingsButton).nth(0).click(),
      ]);
    await newPage.waitForLoadState();

}); 

文件2.ts

Then('The order summary page is displayed', async function () {

    await pageFixture.page.context().pages()[pageFixture.page.context().pages().length - 1]].locator(orderSummary.salesConditionsCheckBox).nth(0).focus();
    expect(await pageFixture.page.context().pages()[pageFixture.page.context().pages().length - 1]].locator(orderSummary.salesConditionsCheckBox).nth(0).isVisible()).toBe(true);
});

When('I accept the sales conditions', async function () {

    await pageFixture.page.context().pages()[pageFixture.page.context().pages().length - 1]].locator(orderSummary.salesConditionsCheckBox).nth(0).focus();
    await pageFixture.page.context().pages()[pageFixture.page.context().pages().length - 1]].locator(orderSummary.salesConditionsCheckBox).nth(0).click();
    if(isPaymentCondition[this.LOC.market]){

        await pageFixture.page.context().pages()[pageFixture.page.context().pages().length - 1]].locator(orderSummary.paymentConditionsCheckBox).nth(0).focus();
        await pageFixture.page.context().pages()[pageFixture.page.context().pages().length - 1]].locator(orderSummary.paymentConditionsCheckBox).nth(0).click();
    }
});

这将使我的测试始终在最后一个打开的选项卡上运行，这对我有用，因为我没有任何测试需要在打开另一个选项卡后在第一个选项卡上执行操作。如果有一天我这样做了，那么这将不再有效。

我希望有一个功能，如果我们想像在 selenium 中那样，我们可以执行

pageFixture.page = newPage

并更新默认页面。