Playwright Handle Popup

  • In this article, we will handle page popups triggered when clicked on target="_blank" links.
  • This popup can be referenced and operated upon using the popup event on the page.
  • It is said that this is an event emitted in addition to browserContext, on ('page') but only for popups relevant to the page.
  • We will be automating handling popup on our very own programsbuzz page.

  • Below the page, we will click the Twitter icon where the program buzz Twitter profile popup appears.
  • We will fetch the title of the page.
const {test, expect} = require('@playwright/test');
test('Popup Handling', async ({page})=> 
{

await page.goto("https://www.programsbuzz.com/");

const [popup] = await Promise.all([
    page.waitForEvent('popup'),
    await page.locator('div[class="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12"] a:nth-child(2)').click(),
  ]);
  await popup.waitForLoadState();
  console.log(await popup.title());
  await popup.close()
  console.log(await page.title())

});

  • So we wrapped the twitter selector within a promise function to avoid a race condition between clicking and waiting for a popup.
  • Within promise, the page will click on the Twitter icon and waits for the popup event to appear.
  • Then we wait for the popup to be in load state and print the title of both the popup and page title after closing the popup.
  • We can see the respective title on which the context is printed.
Mon, 07/18/2022 - 13:59

Authored by

Ashwin is working with iVagus as a Technical Lead. He has experience in various technologies like Cypress, JavaScript, TypeScript, Rest Assured, Selenium, Cucumber, and Java.
Tags