如何使用 Playwright 打开新的浏览器选项卡？答案

【问题标题】：How to open a new browser tab using Playwright?如何使用 Playwright 打开新的浏览器选项卡？
【发布时间】：2022-12-09 22:43:50
【问题描述】：

我在剧作家标签方面遇到了一些问题。

我正在尝试使用 Playwright 在同一浏览器窗口中打开另一个选项卡。不幸的是，我发现的只是如何打开一个新窗口，而不是一个选项卡。这是我的代码

let page: Page;

test.beforeEach(async ({ browser }) => {
    page = await browser.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)
});

test.afterAll(async () => {
    await page.close();
});

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 url = await (page.locator("button[data-testid='copy-link-button']")).innerText()
})

我想在另一个浏览器选项卡 like that 中打开选定的 url

【问题讨论】：

标签： typescript playwright

【解决方案1】：

browser.newPage 上的帮助页面指出“在新的浏览器上下文中创建新页面”。

为了在当前上下文中创建一个新选项卡，您需要使用 browserContext 将 browser 替换为 fixture 中的上下文并使用它来创建新选项卡：

test.beforeEach(async ({ context }) => {
  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)
});

【讨论】：