How to open a new browser tab using Playwright?

Question

I am facing some issues with tabs on playwright.

I am trying to open another tab on the same browser window using Playwright. Unfortunately, all I found was how to open a new window, but not a tab. Here is my code

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()
})

I would like to open selected url in another browser tab like that

Answer 1

The help page on browser.newPage states "Creates a new page in a new browser context".

In order to create a new tab in the current context, you will need to use a browserContext by replacing browser with context in the fixture and use that to create your new tab:

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)
});