👉 NEW: Automatic performance & error tracing on every browser check. Learn more

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.