CODEWITHSUNDEEP
javascriptplaywright
Pontus
Pontus

Reputation: 73

Open a _blank link and continue the test with Playwright

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

Upvotes: 6

Views: 5967

Answers (2)

Jonathan Lane
Jonathan Lane

Reputation: 44

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.

Upvotes: 2

Soviut
Soviut

Reputation: 91545

Handling new pages is documented here

You can capture the new page from the click event.

const [newPage] = await Promise.all([
  context.waitForEvent('page'),
  page.locator('a[target="_blank"]').click() // Opens a new tab
])
await newPage.waitForLoadState();
console.log(await newPage.title());

Upvotes: 10

Related Questions