如何使用 Playwright 打开新标签页（例如，点击按钮以在新标签页中打开新部分）

Question

我希望找到一个更简单的解决方案来应对当前的情况。例如，您打开谷歌（或其他网站），并且想通过点击按钮（例如Gmail）来使用Playwright在新标签页中打开该页面。

let browser, page, context;
describe('Check the main page view', function () {
    before(async () => {
        for (const browserType of ['chromium']) {
            browser = await playwright[browserType].launch({headless: false});
            context = await browser.newContext();
            page = await context.newPage();
            await page.goto(baseUrl);
        }
    });
    after(async function () {
        browser.close();
    });
    
        await page.click(tax);
        const taxPage = await page.getAttribute(taxAccount, 'href');

        const [newPage] = await Promise.all([
        context.waitForEvent('page'),
        page.evaluate((taxPage) => window.open(taxPage, '_blank'), taxPage)]);

        await newPage.waitForLoadState();
        console.log(await newPage.title());

- Olya

Answer 1

it('Open a new tab', async function () {
     await page.click(button, { button: "middle" });
     await page.waitForTimeout(2000); //waitForNavigation and waitForLoadState do not work in this case
     let pages = await context.pages();
     expect(await pages[1].title()).equal('Title');

- Olya

---

这是一个有用的解决方案，我在waitForTimeoutCall中添加了任意的2000毫秒，以避免当该方法没有传递任何参数时造成混淆。 - emery

上下文从哪里来？ - Eliktz

使用此解决方案存在一些限制。例如，它依赖于固定的超时时间来等待新标签页的创建，这在所有情况下可能不可靠。此外，它不验证通过单击按钮是否实际打开了新标签页，因此可能并不总是可靠的。 - Niwrad

let context = await page.context(); - Matt Kleinsmith

Answer 2

您可以向 click 函数传递一个modifier。在 Mac OS 中，它应该是 Meta，因为您可以通过按下 cmd+click 在新标签页中打开链接。而在 Windows 中，应该使用 Control。

const browser = await playwright["chromium"].launch({headless : false});
const page = await browser.newPage();
await page.goto('https://www.facebook.com/');
var pagePromise = page.context().waitForEvent('page', p => p.url() =='https://www.messenger.com/');
await page.click('text=Messenger', { modifiers: ['Meta']});
const newPage = await pagePromise;
await newPage.bringToFront();
await browser.close();

- hardkoded

Answer 3

现在在playwright文档中提到了等待新页面的方法，如下所示：

// Start waiting for new page before clicking. Note no await.
const pagePromise = context.waitForEvent('page');
await page.getByText('open new tab').click();
const newPage = await pagePromise;
await newPage.waitForLoadState();
console.log(await newPage.title());

- Dig-Doug

Answer 4

在我的情况下，我会在弹出框中单击链接（例如按住Ctrl键并单击链接），然后它会打开新的标签页并在新的标签页上工作。

await page.click('#open')
const [newTab] = await Promise.all([
    page.waitForEvent('popup'),
    await page.keyboard.down('Control'),
    await page.frameLocator('//iframe[@title="New tab."]').locator('a').click(), // in popup
    await page.keyboard.up('Control'),
    console.log("clicked on link")
]);
await newTab.waitForFunction(()=>document.title === 'new tab title')
await newTab.fill('#firstname')
await newTab.close() // close the current tab
await page.click('#exitbutton') //back to parent tab and work on it
....
....
await page.close() // close the parent tab

- Manova