如何使用Playwright在同一浏览器窗口中打开新标签页？

要在同一浏览器窗口打开新标签页，核心是复用同一个Browser Context创建新页面——直接调用browser.newPage()默认会创建新上下文，导致打开新窗口。以下是修改后的代码及说明：

步骤1：保存Browser Context实例 #

在全局声明Context变量，在beforeEach中创建共享上下文并生成初始页面：

import { test, Page, BrowserContext } from '@playwright/test';

let page: Page;
let context: BrowserContext; // 新增：保存上下文实例

test.beforeEach(async ({ browser }) => {
    context = await browser.newContext(); // 创建共享上下文
    page = await context.newPage(); // 从上下文生成页面，属于同一窗口的标签页
    await page.goto(url);
    await page.fill(sso.inputEmailField, email);
    await page.click(sso.submitButton);
    await page.fill(sso.inputPasswdField, password);
    await page.click(sso.submitButton);
    await page.click(sso.submitButton);
});

步骤2：在测试用例中打开新标签页 #

获取目标URL后，通过同一个Context创建新页面，即可在同一窗口打开新标签页：

test('1001 users', async () => {
    await page.click("a[data-testid='import-quiz-button']");
    await page.click('"Submit"');
    await page.click("a[data-testid='start-quiz-button']");
    const targetUrl = await page.locator("button[data-testid='copy-link-button']").innerText();
    
    // 打开同一窗口的新标签页
    const newTab = await context.newPage();
    await newTab.goto(targetUrl);
    
    // 可在此添加对新标签页的操作，例如验证页面内容
    // await expect(newTab.locator('xxx')).toBeVisible();
});

步骤3：清理资源 #

在afterAll中关闭Context，一次性关闭所有关联的标签页：

test.afterAll(async () => {
    await context.close(); // 关闭上下文，自动关闭所有标签页
});

补充：模拟用户快捷键打开新标签页 #

如果是要通过点击页面链接并按住快捷键（Ctrl/Cmd）打开新标签页，可使用click方法的modifiers参数：

// Windows/Linux用Control，Mac用Meta
await page.click('a[data-testid="your-link"]', { modifiers: ['Control'] });

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