In this blog, we are working on How to handle Alerts, Popups, Multiple Tabs operations and how to interact with them. 

As a pre-requisite we have to check whether the following dependencies or installed or not:

1. Project setup. 
2. Run pip list in PyCharm terminal to check whether playwright is installed or not. 

As shown in the above picture playwright should be installed in the project. 

If the playwright is not installed refer to Web Automation Testing using Playwright.

(A) Alerts, confirm, prompt Dialogue box

Playwright by default auto-dismisses the dialogs boxes. If we want to handle the dialogue box then we have to register a dialog handler before the action that triggers the dialog to accept or decline it. 

Handling alert(), confirm(), prompt() dialogs

• If we want to accept the dialogue box, we have to use the Built-In dialog.accept() method. 

• If we want to print the message available in the dialogue box, then we have to use dialogue .message. 

• If we want to type messages in the popup then we have to text in .accept() method. 

(a) Test Case for Sync:

Step 1: Launch the Browser. 

Step 2: Navigate to the website https://the-internet.herokuapp.com/javascript_alerts 

Step 3: Perform to confirm the operation. 

Step 4: Perform prompt operation. 

Step 5: Close the page and browser. 

from playwright.sync_api import sync_playwright 
with sync_playwright() as page: 
    browser = page.chromium.launch(headless=False) 
    page = browser.new_page() 
    page.goto("https://the-internet.herokuapp.com/javascript_alerts") 
 
    # Playwright auto handles the all js alerts 
 
    #JS Confirm 
    promp = page.locator("text=Click for JS Confirm") 
    page.on("dialog", lambda dialog: dialog.accept()) 
    promp.click() 
    page.wait_for_timeout(4000) 
 
    #JS Prompt 
    promp1 = page.locator("text=Click for JS Prompt") 
    page.on("dialog", lambda dialog: print(dialog.message)) 
    page.on("dialog", lambda dialog: dialog.accept("Playwright POC")) 
    promp1.click() 
    page.wait_for_timeout(4000) 
 
    # Sweet Alert popups 
    page.goto("https://sweetalert2.github.io/") 
    page.locator("//button[normalize-space()='Show success message']").click() 
    txt = page.locator("#swal2-title").inner_text() 
    print(txt) 
    page.locator(".swal2-confirm").click() 
     
   page.close() 

• Code Explanation:

In the above Code snippet. We have taken the example of JavaScript alerts. 

1. The statement from line no. 3 to 5 is used to launch the browser and navigate to a website. 
2. The statement from line no. 11 to 14 is used to accept and confirm the JS Alert.  
3. The Statement from line no. 17 to 21 is used to pass the message as Playwright POC in the JS Text box and print that text on the screen. 

(b) Test Case for Async:

Step 1: – Launch the Browser. 

Step 2: – Navigate to the website https://the-internet.herokuapp.com/javascript_alerts 

Step 3: – Perform to confirm the operation. 

Step 4: – Perform prompt operation. 

Step 5: – Close the page and browser. 

import asyncio 
from playwright.async_api import async_playwright 
async def New_tabs(): 
    async with async_playwright() as page: 
        browser = await page.chromium.launch(headless=False) 
        page = await browser.new_page() 
        await page.goto("https://the-internet.herokuapp.com/javascript_alerts") 
 
        # Playwright auto handles the all java script alerts 
 
        # JS Confirm 
        promp = page.locator("text=Click for JS Confirm") 
        page.on("dialog", lambda dialog: dialog.accept()) 
        await promp.click() 
        await page.wait_for_timeout(4000) 
 
        # JS Prompt 
        promp1 = page.locator("text=Click for JS Prompt") 
        page.on("dialog", lambda dialog: print(dialog.message)) 
        page.on("dialog", lambda dialog: dialog.accept("Playwright POC")) 
        await promp1.click() 
        await page.wait_for_timeout(4000) 
 
        await page.close() 
        await browser.close() 
     
asyncio.run(New_tabs()) 

(B) Handling New Tabs

Reason for handling new tabs:  

We need to handle new tabs as playwrights don’t handle it automatically. A new tab event is generated when we click on some element and then the further operation is performed on a new tab, then we have to switch to the new tab, then only we can perform the further operations. 

Switch to a new tab:

Playwright provides a Built-In method to switch to the new I.e expect_popup() method to handle the new tabs. How to handle the tab is explained in the below test case. 

(a) Test Case for Sync API:

Step 1:- Launch the Browser. 

Step 2:- Navigate to the website https://the-internet.herokuapp.com/windows 

Step 3:- Click on the click here element. 

Step 4:- Switch to the new tab. 

Step 5:- Capture the text as New Window and print it on screen. 

Step 6:- Close the page and browser. 

In the above code snippet, we are using the page.expect_popup() method.  

1. Statement from 4 to 6 is used to launch the browser and navigate to a website. 
2. The statement at line no. 8 generates a popup and we are handling that popup using expect_popup() method and storing it in a variable named newtab. 
3. In the Statement on line no. 9, we are clicking on the locator by using the text of locator. After successfully clicking on the locator, a new tab is opened. 
4. The statement at line no. 10 switches to the new tab and uses the variable new tab. value keyword. 

(b) Test Case for Async API:

Step 1:- Launch the Browser. 

Step 2:- Navigate to the website https://the-internet.herokuapp.com/windows 

Step 3:- Click on the click here element. 

Step 4:- Switch to the new tab. 

Step 5:- Capture the text as New Window and print it on screen. 

Step 6:- Navigate back to a parent window. 

Step 7:- Close the page and browser. 

import asyncio 
from playwright.async_api import async_playwright 
async def New_tabs(): 
    async with async_playwright() as page: 
        browser = await page.chromium.launch(headless=False) 
        page = await browser.new_page() 
 
        # Handling new tab and switching to it 
        await page.goto("https://the-internet.herokuapp.com/windows") 
        with page.expect_popup() as newtab: 
            await page.locator("text=Click Here").click() 
        page1 = newtab.value 
 
        verify_txt = page1.locator(".example h3").inner_text() 
        print(verify_txt) 
        await page.wait_for_timeout(4000) 
 
        # Navigates back to the parent tab 
 await page.bring_to_front() 
 
asyncio.run(New_tabs()) 
        page.close() 
        browser.close() 

In the above code snippet, we are using the page.expect_popup() method.  

1. The statement from 5 to 9 is used to launch the browser and navigate to a website. 
2. The statement at line no. 10 generates a popup and we are handling that popup using expect_popup() method and storing it in a variable named newtab. 
3. In the Statement on line no. 11, we are clicking on the locator by using the text of the locator. After successfully clicking on the locator, a new tab is opened. 
4. The statement at line no. 12 switches to the new tab and uses the variable newtab. value keyword. 
5. The statement in line no. 19 navigates to the parent tab. 
6. The statement from 20 to 21 is used to close the page and browser. 

Switching back to the parent tab:

To Navigate back to the parent window or tab, Playwright provides the Built-In method I.e page.bring_to_front(), which navigates back to the parent window. 

Read the next Playwright blog Here.