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

Posted 2023-03-16

【中文标题】如何使用 Playwright 打开新标签（例如单击按钮在新标签中打开新部分）

【英文标题】：How to open the new tab using Playwright (ex. click the button to open the new section in a new tab)

【发布时间】：2021-01-24 08:46:56

【问题描述】：

我正在寻找针对当前情况的更简单的解决方案。例如，您打开 google（任何其他网站）并希望通过单击按钮（例如 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());

【参考方案1】：

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

【参考方案2】：

您可以将modifier 传递给click 函数。在 macos 中，它将是 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();