Open a _blank link and continue the test with Playwright

Question

I am testing two websites that are linked between each other. I starts on website one where there is a link (_blank) to the second website. And I want to continue my test on that tab.

test('test', async ({ page }) => {
  const browser = await chromium.launch();
  const context = await browser.newContext();

  await page.goto('https://example.io/');

  const [newPage] = await Promise.all([
   context.waitForEvent('page'),
   page.locator('a.browser-button').first().click() // Opens tab
    ])
   await newPage.waitForLoadState();
   console.log(await newPage.title());

  await page.screenshot({ path: 'test.png', fullPage: true });
  await browser.close();
});

So I click on the button, a new tab opens. And then I want to continue from there. Instead I get the error:

Timeout of 30000ms exceeded. context.waitForEvent('page')

I have tried as in documentation as well, dont get it to work either: https://playwright.dev/docs/pages

Answer 1

I'd remove the target=_blank attribute on the element and then click it.

await page.$eval("a.browser-button", el => el.removeAttribute("target"))

Then click it and it will open in the same window. Unless you're really determined to test it as is.