Handle Javascript Alerts and popups in Selenium

Handle​​ Javascript Alerts and popups in Selenium 4

Welcome to​​ 7th​​ article in​​ Selenium​​ 4​​ series.​​ 

What you will Learn:

• Handle JS Alerts​​ in Selenium 4

• Handle JS popups​​ in Selenium 4

• Code snippets

Handle JS Alerts​​ in Selenium 4

Let us see how to handle javascript alerts in Selenium 4.

Launch​​ https://the-internet.herokuapp.com/javascript_alerts​​ ​​ ​​ 

On this page, you would see 2 types of alerts:​​ 
JS Alert and JS Confirm.

When we click​​ ‘JS Alert’, we get the below alert with on OK button. When we click OK, we see the text result below ‘Result:’ header as shown below​​ 

When we click​​ ‘JS Confirm’, we get the below alert with on OK and Cancel button. When we click OK, we see the text result below ‘Result:’ header as shown below

When we click ‘Cancel’, we see the below text

Let us automate the actions on these 2 alerts one by one.

Let us first inspect​​ ‘JS Alert’​​ button

So the xpath would be​​ //button[@onclick='jsAlert()']

The code snippet looks as below:

Run the script,​​ observe that the alert is seen

Let us continue this use case​​ by​​ performing​​ below​​ operations:
i)​​ switch to alert
ii) grab the text on this alert​​ ‘I am a JS Alert’
iii) click OK​​ to close the alert

The below code will do the needful

Run the script,​​ observe that the console prints the desired text

Let us next inspect ‘JS Confirm’ button

The below code will​​ bring up the​​ ‘JS Confirm’ alert​​ and click the ‘Cancel’ button

Run script, notice the text on console

Handle JS popup​​ in Selenium 4

When we click​​ ‘JS Prompt’​​ popup, we get the below popup with on OK and Cancel button​​ plus the text field where we can enter some text. When we​​ enter some text and​​ click OK,​​ we​​ see the text​​ that we had entered​​ under​​ ‘Result:’ header

If we click Cancel,​​ we see the below text

Let us automate the actions on this popup.

Let us first inspect​​ ‘JS Prompt’

See below. On line number 32, we are entering some text in the text field that we see on the popup​​ 

Run the script, below is console log

Let us extend this use case a little bit.​​ 

When we enter some text as shown above and click Ok, we see the text that we entered under the ‘Result’ header as shown below​​ 

So let us add a simple validation

Run​​ the script and notice the console output

So this is how we can work with JS alerts and popups.

Code snippet

package sel4scripts;

import org.openqa.selenium.Alert;

import org.openqa.selenium.By;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.chrome.ChromeDriver;

import io.github.bonigarcia.wdm.WebDriverManager;

public class JavascriptAlertsPopups {

 public static void main(String[] args) throws InterruptedException {

  WebDriverManager.chromedriver().setup();  

  WebDriver driver = new ChromeDriver();  

  //JS Alert

  driver.get("https://the-internet.herokuapp.com/javascript_alerts");

 driver.findElement(By.xpath("//button[@onclick='jsAlert()']")).click();

  Alert al = driver.switchTo().alert();

  System.out.println(al.getText());

  al.accept();

  //JS Confirm

 driver.findElement(By.xpath("//button[@onclick='jsConfirm()']")).click();

  Alert co = driver.switchTo().alert();

  System.out.println(co.getText());

  co.dismiss();

  //JS Prompt

  driver.findElement(By.xpath("//button[@onclick='jsPrompt()']")).click();

  Alert pop1 = driver.switchTo().alert();

  System.out.println(pop1.getText());

  pop1.sendKeys("Welcome to Selenium 4");

  pop1.accept();

  //validation

  if(driver.getPageSource().contains("You entered: Welcome to Selenium 4"))

   System.out.println("Successfully clicked OK button on popup");

 }

}

Thank you for reading!