How to Handle Alert in Playwright

Dialog boxes on a web page can be used to raise an alert, or to get confirmation on any input or to have a kind of input from the users. Using Playwright, you can handle different types of JavaScript dialogs.

Table of Content

1. Dialog Types
2. Dialog Methods
3. Dialog Examples
4. Handle Alert Dialog
5. Handle Confirmation Dialog
6. Handle Prompt Dialog
7. Video Tutorial

1. Dialog Types

1. alert
2. confirm
3. prompt
4. beforeunload

In this article, we will discuss the first three. Dialog beforeunload, we will discuss in a separate article. 

2. Dialog Methods

Following methods you can use in Playwright with Dialog

3. Dialog Examples

Demo Link: http://autopract.com/selenium/alert5/

After visiting above URL you can click on buttons to generate different types of dialogs.

4. Handle Alert Dialog

Once you will click on Trigger an Alert button you will see below alert.

After clicking on OK button you will see message You clicked on Ok button. just above the Trigger an Alert button

Code

test.only('Verify Alert', async ({ page }) => {
    await page.goto('http://autopract.com/selenium/alert5/');

    page.on('dialog', async dialog => {
        // Verify type of dialog
        expect(dialog.type()).toContain('alert');   
        
        // verify message of alert
        expect(dialog.message()).toContain('This is an Alert Box.');
        
        //click on alert ok button
        await dialog.accept();
      });
      
      // Click on Trigger an alert button
      await page.click('#alert-button');
      
      // Verify Message displayed after clicking on ok button
      await expect(page.locator('#msg')).toHaveText( 'You clicked on Ok button.')
    });

In above code type() method is used to get the type of dialog, message() to get the message on the dialog, and accept() to click on OK button.

5. Handle Confirmation Dialog

Once you will click on Trigger a Confirmation button you will see below dialog.

If you will click on OK button you will see message Data saved successfully!  just above Trigger an Alert button and if you will click on Cancel button you will see Save Canceled! Message.

Code

test.only('Verify Confirm Dialog OK', async ({ page }) => {
    await page.goto('http://autopract.com/selenium/alert5/');
  
    page.on('dialog', async dialog => {
        // Verify type of dialog
        expect(dialog.type()).toContain('confirm');
            
        // Verify Dialog Message
        expect(dialog.message()).toContain('Do you want to save changes?');
            
        //Click on OK Button
        await dialog.accept();
    });
        
    // Click on Trigger a Confirmation button
    await page.click('#confirm-button');

    // Verify message displayed after clicking on OK button
    await expect(page.locator('#msg')).toHaveText( 'Data saved successfully!')
});

To click on Cancel button use dismiss() instead of accept() method and change the message assertion to Save Canceled!

6. Handle Prompt Dialog

Once you will click on Trigger a Prompt button you will see below dialog.

Here 10 is the default value. If you will click on OK button after any value in input say 15 you will see message You have entered number: 15 just above Trigger an Alert button and if you will click on Cancel button you will see  You have entered number: null message.

Code:

test.only('Accept Value in Prompt', async ({ page }) => {
    await page.goto('http://autopract.com/selenium/alert5/');
  
    page.on('dialog', async dialog => {
    
        // Verify Dialog Type is prompt  
        expect(dialog.type()).toContain('prompt');  
        
        // Verify Dialog Message  
        expect(dialog.message()).toContain('Please enter any number');
        
        //Verify Default Input Value
        expect(dialog.defaultValue()).toContain('10');
        
        // Click on OK Button with any value
        await dialog.accept('15');
    });
        
    // Click on Prompt Button
    await page.click('#prompt-button');
        
    // Verify Message after clicking on Ok button
    await expect(page.locator('#msg')).toHaveText( 'You have entered number: 15')
});