All topics·Intermediate·24 / 27

Events

Two patterns: waitForEvent (set up the promise BEFORE triggering the action, then await after) and page.on (listen to all occurrences continuously). The waitForEvent pattern is critical — get the order wrong and you miss the event.

waitForEvent — the setup-before-trigger pattern

Always register the waitForEvent promise BEFORE triggering the action — the event fires only once

Some actions trigger events that fire once: a new tab opens, a file downloads, a dialog appears. The pattern is always the same: set up the event listener BEFORE the action, then trigger the action, then await the result. If you reverse the order, the event may have already fired before you start listening.

ts

// Нова вкладка — встановити ДО кліку
test('receipt opens in new tab', async ({ page, context }) => {
  await page.goto('/orders/42')

  // Крок 1: встановити очікування (не await!)
  const newPagePromise = context.waitForEvent('page')

  // Крок 2: тригернути дію
  await page.getByRole('link', { name: 'View receipt' }).click()

  // Крок 3: отримати результат
  const receiptPage = await newPagePromise
  await receiptPage.waitForLoadState()
  await expect(receiptPage).toHaveURL(/\/receipts\/\d+/)
})

// Download — той самий патерн
test('export downloads CSV', async ({ page }) => {
  await page.goto('/orders')

  const downloadPromise = page.waitForEvent('download')
  await page.getByRole('button', { name: 'Export CSV' }).click()

  const download = await downloadPromise
  expect(download.suggestedFilename()).toMatch(/orders.*\.csv/)
})

// Popup — page.waitForEvent (не context)
test('payment widget opens in popup', async ({ page }) => {
  await page.goto('/checkout')

  const popupPromise = page.waitForEvent('popup')
  await page.getByRole('button', { name: 'Pay now' }).click()

  const popup = await popupPromise
  await popup.waitForLoadState()
  await expect(popup.getByRole('heading', { name: 'Payment' })).toBeVisible()
})

page.on() — listen to all occurrences

page.on() is for ongoing listening — log all requests, collect all console errors, capture all responses. Unlike waitForEvent which resolves once, page.on fires for every matching event.

ts

// Збирати JS-помилки консолі під час тесту
test('dashboard has no console errors', async ({ page }) => {
  const errors: string[] = []

  page.on('console', msg => {
    if (msg.type() === 'error') errors.push(msg.text())
  })

  await page.goto('/dashboard')
  await page.waitForLoadState('networkidle')

  expect(errors).toHaveLength(0)
})

// Логувати всі мережеві запити до певного ендпоїнту
test('orders page makes correct API call', async ({ page }) => {
  const apiCalls: string[] = []

  page.on('request', request => {
    if (request.url().includes('/api/orders')) {
      apiCalls.push(request.url())
    }
  })

  await page.goto('/orders')
  await page.waitForLoadState('networkidle')

  expect(apiCalls).toHaveLength(1)
  expect(apiCalls[0]).toContain('/api/orders')
})

// Слідкувати за відповідями
page.on('response', response => {
  if (!response.ok()) {
    console.warn(`Failed: ${response.status()} ${response.url()}`)
  }
})

page.once() and page.off() — one-shot and cleanup

page.once() registers a listener that fires only the next time the event occurs, then removes itself. Perfect for dialogs: handle the next alert, ignore any subsequent ones. page.off() removes a specific listener — useful for cleanup when the listening period ends.

ts

// page.once — обробити наступний dialog і більше нічого
page.once('dialog', dialog => dialog.accept())
await page.getByRole('button', { name: 'Delete order' }).click()
// Dialog accepted — подальші dialogs знову показуватимуться

// page.off — прибирати listener після потрібного проміжку
const logRequest = (request: Request) => {
  console.log('Request:', request.url())
}

page.on('request', logRequest)
await page.goto('/orders')          // логуємо запити тут
page.off('request', logRequest)     // прибираємо слухача
await page.goto('/dashboard')       // ці запити не логуються

waitForRequest and waitForResponse

Specific helpers for network events. The same setup-before-trigger pattern applies — set up the waiter before the action that triggers the request.

ts

// Дочекатися конкретного запиту і перевірити його body
test('filter sends correct params', async ({ page }) => {
  await page.goto('/orders')

  // Встановити ДО кліку
  const requestPromise = page.waitForRequest(req =>
    req.url().includes('/api/orders') && req.method() === 'GET'
  )

  await page.getByRole('combobox', { name: 'Status' }).selectOption('pending')
  await page.getByRole('button', { name: 'Apply' }).click()

  const request = await requestPromise
  expect(new URL(request.url()).searchParams.get('status')).toBe('pending')
})

// Дочекатися конкретної відповіді і перевірити її
test('order creation returns 201', async ({ page }) => {
  await page.goto('/orders/new')

  const responsePromise = page.waitForResponse('/api/orders')
  await page.getByRole('button', { name: 'Create order' }).click()

  const response = await responsePromise
  expect(response.status()).toBe(201)

  const body = await response.json()
  expect(body.id).toMatch(/ORD-\d+/)
})

Take the quiz