如何使用 Playwright 的页面对象模型处理新选项卡答案

【问题标题】：How to handle new tabs with the page object model with Playwright如何使用 Playwright 的页面对象模型处理新选项卡
【发布时间】：2022-10-30 20:25:45
【问题描述】：

我想知道在使用 Page 对象模型时如何处理一个或多个选项卡。

如果我不使用页面对象模型函数来运行它，我的测试就会成功运行。基本上，当我单击并导航到新选项卡时，我在没有 POM 的正常测试中使用它：

const [newPage] = await Promise.all([
page.waitForEvent('popup'),
page.locator(button...).click();
]);

然后使用 newPage 作为我的新标签，它正在工作。

await newPage.locator(field).fill(testing);
...SNIP..

使用 POM 时，我无法做到这一点，并且无法继续进行其余的测试，它无法识别新选项卡，因为我无法在 POM 中声明新页面。

有人能指出我正确的方向吗？

如何使用 POM 实现相同的逻辑？谢谢

【问题讨论】：

标签： javascript e2e-testing playwright pageobjects playwright-test

【解决方案1】：

也许这会有所帮助。我也很困惑如何去做。

constructor(page) {
    this.page = page;
    this.wait_for_event = page.waitForEvent('popup');
    this.your_button = page.locator(button...);
}

async f(){
    const [newPage] = await Promise.all([
        this.wait_for_event,
        this.your_button.click(),
    ]);
    await newPage.getByPlaceholder or another method('placeholder text').fill('');
}

【讨论】：