Multiple tabs

Certain scenarios might requires us to handle new tab creation or multiple tabs at once. Playwright and Puppeteer both support this case and, as a consequence, Checkly does as well.

By allowing us to wait for the creation of a child tab with page.waitForEvent, Playwright enables us to “catch” it following a click on an element with target="_blank", and then seamlessly interact with any of the currently open tabs.

With Puppeteer we need to follow a different procedure, using page.waitForTarget to grab the new tab once it has been opened.


const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch()
  const context = await browser.newContext()
  const page = await context.newPage()

  await page.goto('https://www.checklyhq.com/')

  const [newPage] = await Promise.all([
    context.waitForEvent('page'),
    await page.click('text=Public roadmap')
  ])

  await page.screenshot({ path: 'screenshot-tab-old.png' })

  await newPage.click('#pull-requests-tab')
  await newPage.screenshot({ path: 'screenshot-tab-new.png' })

  await browser.close()
})()



const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()

  await page.setViewport({ width: 1440, height: 800 })

  await page.goto('https://www.checklyhq.com/')

  const pageTarget = page.target()

  await page.waitForSelector('#menu_5_drop > li:nth-child(3) > a')
  await page.click('#menu_5_drop > li:nth-child(3) > a')

  await page.screenshot({ path: 'screenshot-tab-old.png' })

  const newTarget = await browser.waitForTarget(target => target.opener() === pageTarget)

  const newPage = await newTarget.page()

  await newPage.waitForSelector('#pull-requests-tab')
  await newPage.click('#pull-requests-tab')
  await newPage.screenshot({ path: 'screenshot-tab-new.png' })

  await browser.close()
})()


You can learn more about multi-tab scripts in our Learn Headless section.