Handling Alerts | Advanced Playwright TypeScript Tutorial | Part VIII | LambdaTest

From The House of LambdaTest LambdaTest Tutorials
1

:rocket: Hello folks! Our new tutorial is live! :tada:

:video_camera: Watch this video to master handling different types of alerts in Playwright with TypeScript—from simple alerts to confirmation and prompt dialogs, we’ve got you covered!

Dive in, learn, and let us know your thoughts! :speech_balloon:

2

It is a nice video, and below is the method to handle different types of alerts in Playwright with TypeScript, which I personally work for.

Handling Alerts Using Playwright’s page.on(‘dialog’) Event One way to handle JavaScript alerts in Playwright is by listening for the dialog event, which is emitted when an alert or prompt appears.

import { chromium, Page } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  // Listen for the 'dialog' event
  page.on('dialog', async dialog => {
    console.log(dialog.message()); // Print the message of the alert
    await dialog.accept(); // Accept the alert
  });

  // Trigger the alert on the page
  await page.goto('https://example.com');
  await page.click('button#alertButton'); // Assuming the button triggers an alert

  await browser.close();
})();

This approach allows you to handle any alert or prompt that appears on the page, allowing you to automate the acceptance or dismissal of alerts.

3

Ofcourse i agree with you @ishrth_fathima and the video was so well explained but below is how I learned to handle different alerts in playwright :slight_smile: Handling Alerts by Interacting with Alert Box If you want to interact with the alert more specifically, such as dismissing or entering text into a prompt, you can use Playwright’s dialog.accept() and dialog.dismiss() methods.

import { chromium, Page } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  // Listen for dialog
  page.on('dialog', async (dialog) => {
    console.log(dialog.type()); // Get the dialog type (alert, confirm, prompt)
    
    if (dialog.type() === 'alert') {
      console.log('Alert message:', dialog.message());
      await dialog.accept(); // Accept the alert
    } else if (dialog.type() === 'confirm') {
      await dialog.dismiss(); // Dismiss the confirm dialog
    } else if (dialog.type() === 'prompt') {
      await dialog.accept('Hello!'); // Provide input to the prompt and accept
    }
  });

  await page.goto('https://example.com');
  await page.click('button#alert'); // Trigger alert

  await browser.close();
})();

This method is great when dealing with different types of dialog boxes (alert, confirm, prompt) and allows for more precise control over the interaction.

4

If you are automating testing scenarios and want to make sure the alert is handled automatically (without needing manual interaction), Playwright can automatically accept or dismiss the alert as part of the script.

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  // Automatically handle dialog and accept it
  page.on('dialog', async dialog => await dialog.accept());

  await page.goto('https://example.com');
  await page.click('button#trigger-alert'); // This triggers the alert

  await browser.close();
})();

This solution is particularly useful when you don’t need to interact with the alert and just need to ensure the test continues without interruption.