Post
Ask Question

Handling Frames, Windows Alert in playwright

Introduction

In this Article, we will discuss Handling alerts frames and windows in Playwright Test Automation Tool.

Prerequisite

Handling Alerts

The alert() method in JavaScript is used to display a virtual alert box in your application. It is mostly used to give a warning message to the users. It displays an alert dialog box that consists of some specified message (which is optional) and an OK button. When the dialog box pops up, we have to click "OK" to proceed.

The alert dialog box takes the focus and forces the user to read the specified message. So, we should avoid overusing this method because it stops the user from accessing the other parts of the webpage until the box is closed.

We can handle alerts in Playwright using event listeners.

The page.on method is used to register event listeners for various events that occur on the page. It takes two arguments: the event name and a callback function. The callback function will be executed when the specified event occurs.

code with explanation

import {test,expect} from '@playwright/test'

test('normal alert', async({page}) => {
    await page.goto("https://rahulshettyacademy.com/AutomationPractice/");
    // print the alert text using message function
     page.on('dialog',d=> console.log('d.message',d.message()));
// prints the type of event
     page.on('dialog',d=> console.log('d.type',d.type()));
//use the accept function to accept the alert
     page.on('dialog',d=>d.accept());
    await page.locator('#alertbtn').click();
   
})
test('confirm alert', async({page}) => {
    await page.goto("https://rahulshettyacademy.com/AutomationPractice/")
 // print the alert text using message function
    page.on('dialog',d=> console.log('d.message',d.message()));
// prints the type of event
    page.on('dialog',d=> console.log('d.type',d.type()));
//use the dismiss function to dismiss the alert
    page.on('dialog',d=>d.dismiss());
   await page.locator('#confirmbtn').click();
   
})
test('prompt alert', async({page}) => {
    await page.goto("https://the-internet.herokuapp.com/javascript_alerts");
    page.on('dialog',d=> console.log('d.message',d.message()));
    page.on('dialog',d=> console.log('d.type',d.type()));
    await page.pause(3000)
//send text to the input box in the promptalert
    page.on('dialog',d=>d.accept("testing message sent"));
    await page.pause(3000)
   await page.locator('li:nth-child(3) > button').click();
   
})

Handling Windows

Web applications often open new windows or pop-ups, presenting a challenge for us. Selenium provides methods to switch between different browser windows.

The browser window often called the main or parent window, represents the homepage or the currently open web page a user sees when opening a browser. When a Selenium automation script runs, it typically starts with the parent window.

Selenium WebDriver session involves opening a window that is initially controlled by the WebDriver.

When we click on a button or URL link in the parent window, and the action opens another window(s) within the main window, the new window(s) is called a child window.

Playwright automation framework uses WebDriver protocol that does not allow multiple windows and tabs in the same context. To handle multiple windows and tabs, you need to switch contexts between them by using the functions mentioned below:

Windows are typically represented as separate pages in Playwright. If you have multiple pages or tabs open, you can switch between them.

  • page.goto: to navigate to a new page in the current window.
  • page.close: to close the current window.

Interact with a specific window or tab

  • page.bringToFront: Function used for bringing specific windows or tabs to the front.
import {test,expect} from '@playwright/test'

test('input test', async({page}) => {
   await page.goto("https://the-internet.herokuapp.com/windows");
   await page.locator(`a[href='/windows/new']`).click();
   await page.bringToFront();
   
});

Handling Frames

Frames, used to divide a web page into multiple sections, require specific handling in Selenium. We can utilize Selenium's methods to navigate through frames seamlessly.

Frames in a webpage refer to a feature that allows web developers to divide a browser window into multiple sections, each of which can display a separate HTML document. Each of these sections, known as frames, acts as an independent HTML document with its own content, allowing developers to create more complex and dynamic web layouts.

Frames are implemented using the <frame> or <iframe> HTML tags.

In playwright, we have ‘frameLocator' method in order to interact with the frames

once we have located the frame, we have perform any actions inside the frame.

We can also interact with frames using below ways as well in playwright

  1. The mainFrame() method is used to get the main frame of the page.
  2. The frames() method is used to get an array of all frames on the page.
  3. The frame() method is used to switch to a specific frame by name or index.
  4. Actions, such as typing into an input field, can be performed within the selected frame.
  5. The bringToFront() method is used to switch back to the main frame.
import​​ {test,expect}​​ from​​ '@playwright/test'

 

test("frames",​​ async​​ ({​​ page​​ })​​ =>​​ {

   ​​ await​​ page.goto('https://the-internet.herokuapp.com/iframe')

   ​​ const​​ frame1​​ =​​ page.frameLocator('#mce_0_ifr').locator('html')

   ​​ await​​ frame1.click()    

   ​​ await​​ frame1.type('Welcome to playwright')

   ​​ await​​ page.pause()    

})

Summary

I hope this article will be helpful in handling Alerts, frames and windows using playwright

Thanks, Happy learning....!


Similar Articles