Where we learn technology

Author: Mandeep Kaur

Actions Class in selenium WebDriver for User Actions

1.Overview

In this article, we are going to explore the most fundamental phenomenon that is Actions class in selenium WebDriver.

2. Actions Class

  • We have performed single actions like sendKeys, click event till now.
  • But there are events where we need to perform multiple actions like drag and drop, right-click or pressing a key from the keyboard etc.
  • So here comes the Actions class to deal with such composite actions.
  • By selenium documentation, they have defined the Actions class as:

Actions Class
  • In simple terms, Actions class handles various types of keyword and mouse events and is available under package 
import org.openqa.selenium.interactions.Actions;
  • Syntax:
Actions actions = new Actions(driver);
  • For creating an object of an action class, you need to pass the driver object to the constructor of action class like the following :

Methods in Actions Class

Now, you can perform any composite actions as shown above with the action object. We will see a couple of examples below where composite actions are being performed.

To Note: There are two major methods in actions class are build and perform.

build() compiles all the steps into a single step and then perform() executes the step, also for single-step perform() method can be used, then there is no need to execute the build() method.

3. Mouse Hover with Actions class

  • A mouse hovers cause an event to trigger actions such as where a user places a mouse over a particular element like hovering over a tab or link. 
  • moveToElement is the method used for hovering action:

Mouse Hovering Methods

Let’s understand moveToElement(WebElement target) by code:

package com.selenium.sessions;

import org.junit.jupiter.api.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;

/**
 * 
 * @author Mandeep kaur
 * @Date May 19,2020
 */
public class ActionClass {

	@Test
	public void performsActionClass() throws InterruptedException {

		String path = System.getProperty("user.dir");
		System.setProperty("webdriver.chrome.driver", path + "/src/main/resources/chromedriver");

		System.setProperty("webdriver.chrome.silentOutput", "true");
		WebDriver driver = new ChromeDriver();

		driver.get("https://www.makemytrip.com/visa/");

		// Locate more element on the web page
		WebElement moreObj = driver.findElement(By.xpath("//li[10]/a/span[2]/span[1]"));

		Thread.sleep(1000);

		// Locate International Hotels once hovered over more element
		WebElement moveToInternationalHotels = driver.findElement(By.xpath("//li[10]/div/a[3]"));

		Actions action = new Actions(driver);

		// hover to More element then hover to International hotel and build the steps
		// in singe unit and perform the step
		action.moveToElement(moreObj).moveToElement(moveToInternationalHotels).build().perform();

		Thread.sleep(1000);
		driver.close();

	}

}

Explanation :

First, we found out the elements where mouse hovering is required i.e more element and other is International hotels.

Then we are hovering over these elements with the moveToElement method, post that we build these steps it in a single unit using build() method and execute it with perform() method.

And we can see the above code output as:

Now, Let’s proceed with other method moveToElement(target, xOffset, yOffset);

This method is used to take the mouse on particular points on target elements.

The following is an example to deal with a slider:

Now the scenario is we need to move this slider, but how do we do that?

Let’s see the below code first to achieve this task:

package com.selenium.sessions;

import org.junit.jupiter.api.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;

/**
 * 
 * @author Mandeep kaur
 * @Date May 19,2020
 */
public class ActionClass {

	@Test
	public void moveToElementOffset_whenSuccess() throws InterruptedException {

		String path = System.getProperty("user.dir");
		System.setProperty("webdriver.chrome.driver", path + "/src/main/resources/chromedriver");

		System.setProperty("webdriver.chrome.silentOutput", "true");
		WebDriver driver = new ChromeDriver();

		driver.get("https://jqueryui.com/slider/");

		// Get the location of IFrame
		WebElement iFrame = driver.findElement(By.xpath("//iframe[@class='demo-frame']"));

		driver.switchTo().frame(iFrame);

		// get the slider element
		WebElement slider = driver.findElement(By.xpath("//div[@id='slider']"));

		// Get the location of X,Y coordinates
		System.out.println(slider.getLocation());

		Thread.sleep(1000);

		Actions action = new Actions(driver);

		// move the element on target by X , Y coordinates
		action.moveToElement(slider, 8, 8).click().build().perform();

		Thread.sleep(1000);

		driver.close();
	}

}

Let’s break the code into the statement to get the clarity of the concept:

  1. First, we need to locate the frame, as the slider is present in the frame.

Let’s discuss little about iFrames, what are these:

  • iFrames stands for an inline frame. It is like another web page within a web page. 
  • In this case, a different document is used to embed within the current HTML document.
  • when you execute any method say findByElement for an element present in an iFrame, it will throw an exception as an element not found. 
  • For this, we first need to switch the focus to the frame to get the Element.
  • Syntax: driver.switchTo().frame();

Switching to Frame

And most importantly how we will get to know that frame is present or not, for that you need to right-click on the element and you will get View Frame Source like below

And in DOM you will get to see an iFrame tag

where <iframe> tag states an inline frame.

We can switch to the frame by index , by frame name or id or by WebElement.

2. In the above code, we have to switch the frame with WebElement.

3. Find the target element and get the location of X and Y coordinates by using getLocation().

4. Once we got the coordinates then we can slide the cursor accordingly by passing the target, x and y coordinates:

action.moveToElement(slider, 8, 8).click().build().perform(); 

 As can be seen below our slider has moved with coordinates given:

4. Drag And Drop with Actions Class

Now, there are situations where we need to perform drag and drop operation. We can also perform this scenario with the action class.

  • There is a method called dragAndDrop which drags a source element and drops on a target element.
  • We need to solve the scenario given below

Drag and Drop Image

So, here we just have to put “Drag me to my target” box to “Dropped!” box

Let’s do it by code:

Code for Drag and Drop

package com.selenium.sessions;

import org.junit.jupiter.api.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;

/**
 * 
 * @author Mandeep kaur
 * @Date May 19,2020
 */
public class ActionClass {

	@Test
	public void dragAndDropExample_whenSuccess() throws InterruptedException {

		String path = System.getProperty("user.dir");
		System.setProperty("webdriver.chrome.driver", path + "/src/main/resources/chromedriver");

		System.setProperty("webdriver.chrome.silentOutput", "true");
		WebDriver driver = new ChromeDriver();

		driver.get("https://jqueryui.com/droppable/");

		// Get the location of IFrame
		WebElement iFrame = driver.findElement(By.xpath("//iframe[@class='demo-frame']"));

		driver.switchTo().frame(iFrame);

		// get the source element 
		WebElement source = driver.findElement(By.id("draggable"));

		// get the target element 
		WebElement target = driver.findElement(By.id("droppable"));

		Thread.sleep(1000);

		//create an object of Action class
		Actions action = new Actions(driver);
		
		// perform drag and Drop operation
		action.dragAndDrop(source, target).build().perform();

		Thread.sleep(1000);
		
		driver.close();

	}

}

So, it’s pretty clear from the above code that first it requires us to switch to the iframe as the elements are present in an iframe. Then we have to find our source and target element and just perform dragAndDrop Operation on it as has been done for you above.

And the output will be shown as follows:

 We can also have another example where certain actions need to be performed from Keyboard. User has to send some inputs from the Keyboard.

Let’s see this happening in the following example in the code:

As described in the above code, first we find the elements where keyboard actions have to be performed then with movetoElement function we move to userName element and KeyDown function to  press the shift key and sending the userName in upper case, post that KeyUp function  to  release the shift key and next we are highlighting the userName

In the end, we are clicking on signUp button with the help of Enter Key.

package com.selenium.sessions;

import org.junit.jupiter.api.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.Keys;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Action;
import org.openqa.selenium.interactions.Actions;

/**
 *
 * @author Mandeep kaur
 * @Date May 19,2020
 */
public class ActionClass {

@Test
public void keyBoardEvents_whenSuccess() {

String path = System.getProperty(“user.dir”);
System.setProperty(“webdriver.chrome.driver”, path + “/src/main/resources/chromedriver”);

System.setProperty(“webdriver.chrome.silentOutput”, “true”);
WebDriver driver = new ChromeDriver();

driver.get(“https://www.facebook.com/“);

WebElement userName = driver.findElement(By.xpath(“//*[@name=’firstname’]”));

WebElement signUp = driver.findElement(By.xpath(“//*[@name=’websubmit’]”));

// In this step, we are moving the userName element and KeyDown function press
// the shift key and sends the userName and KeyUp function perform release the
// Key and next we are highlighting the userName


Actions builder = new Actions(driver);
builder.moveToElement(userName).click().keyDown(userName, Keys.SHIFT).sendKeys(userName, “testuser”)
.keyUp(userName, Keys.SHIFT).doubleClick(userName).build().perform();

// Enter the sign up keys after we passed the userName

signUp.sendKeys(Keys.ENTER);

driver.close();
}
}

5.Conclusion

In this article, we learnt about Actions class and how we can perform various composite actions using actions classes.

Thanks for reading it! 

Cheers!!

Naveen AutomationLabs

Blog Contributors:

Author:  Mandeep Kaur

Mandeep, having 5+ years of Testing experience in automation using Selenium (Java). Expertise in API and Performance testing using JMeter.

https://www.linkedin.com/in/mandeepkaur93

Reviewer: Naveen Khunteta

https://www.linkedin.com/in/naveenkhunteta

Please follow and like us:

Handling Browser Window PopUp in Selenium WebDriver

1. Overview

In this article, we will discuss the concept of browser window popup also the practical implementation to handle the browser window popup with selenium web driver.

2. Browser window Popup

  • Browser window popup is a window popup that suddenly pops up on after clicking on some link or on selecting an option. It just likes another web page where maximization and minimization of the web page can be done.
  • This is having its own title and url or it could be an advertisement pop up also.
  • When do we need to handle this browser window popup: if the scenario is something like: you click on some link on the main window (parent window) and some other screen pops out just another webpage (child window ), now child window demands to submit some important information and press OK once information is filled.
  • Let’s see how the browser window appears:

Browser window popup Example

3. Steps to deal with browser window popup

1. Operate on the main window that opens the popup window. For instance, click on some link on the main window.

2. Need to know the name or id of the popup window. The window Id can be fetched from Window Handler API available in selenium. it uniquely identifies the address of all the windows open at a time. Below are the methods to handle the windows:

Syntax:

driver.getWindowHandle();

  • This function allows the handling of the current window by getting the current window Handle.
  • It returns the type String.
  • On the selenium official site, this is defined as


String parentWindowObj = driver.getwindowhandle();

driver.getwindowhandles();

  • As the method name suggests windowHandles, that means there are multiple windows and to handle all these opened windows we have to use this function.
  • It returns the Set of String.
    • Set<String> handles = driver.getwindowhandles();
  • Set stores the unique values and handle of all the windows that will be unique.
  • Below description clearly says the same:
  • Set values are not stored based on the index, so to iterate over the set, we need to use the Iterator to get the handler values and this method will give you an iterator of string.
  • This Iterator will be available in java. util package.
Iterator<String> it = handler.iterator();

//get the window ID for Parent a& Child now
String parentWindowID = it.next();
String childWindowID = it.next();

3. switch the driver to the popup window

driver.switchTo.window(childWindowID);

4. Perform some actions in the popup window such as get the title or close the button/tab etc.

driver.switchTo().window(childWindowID);
String title = driver.getTitle();
System.out.println("child window title is : " + title);

//close the pop up window now by using driver.close() method.
driver.close();

tip: Make sure, you are using close() to close the pop up. If you use quit() it will close parent and child both.
This is the basic difference between close() & quit().

5. Switch back to the parent window by passing the parentWindowID.

driver.switchTo().window(parentWindowID);
String title = driver.getTitle();
System.out.println("parent window title is : " + title);

//close the parent window by using quit:
driver.quit();

Let’s see the below code for a complete understanding of the concept:

Full code to handle Browser window popup:
package SeleniumSessions;

import java.util.Iterator;
import java.util.Set;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import io.github.bonigarcia.wdm.WebDriverManager;

public class BrowserWindowPopUp {

public static void main(String[] args) {

WebDriverManager.chromedriver().setup();
WebDriver driver = new ChromeDriver();

driver.get(“http://www.popuptest.com/goodpopups.html”);

driver.findElement(By.linkText(“Good PopUp #3”)).click();

Set<String> handles = driver.getWindowHandles();

Iterator<String> it = handles.iterator();

String parentWindowID = it.next();
System.out.println(“parent window id is : ” + parentWindowID);

String childWindowID = it.next();
System.out.println(“child pop up window id is : ” + childWindowID);

driver.switchTo().window(childWindowID);

System.out.println(“child window title is ” + driver.getTitle());

driver.close();

driver.switchTo().window(parentWindowID);
System.out.println(“parent window title is ” + driver.getTitle());

}

}

Important Tip:

One thing to notice here is that we have to come back to parent window if any further actions have to performed on Parent window. Without switching to parent window will not allow us to perform any action on parent window page.

Let’s add another example to get more understanding of the concept:

Suppose four windows are open and we want to switch to the third window.  

  • First Approach: using Set and iterator we have already seen above.
  • Second Approach: Using ArrayList. The benefit of this approach is you can easily deal with any window. The parent window will start with an index 0.

Let’s see the code with ArrayList:

package SeleniumSessions;

import java.util.ArrayList;

import java.util.Set;

import org.openqa.selenium.By;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.chrome.ChromeDriver;

public class BrowserWindowHandleList {

public static void main(String[] args) {

System.setProperty(“webdriver.chrome.driver”, “/Users/NaveenKhunteta/Downloads/chromedriver”);

WebDriver driver = new ChromeDriver();

driver.get(“http://www.popuptest.com/goodpopups.html”);

driver.findElement(By.linkText(“Good PopUp #3”)).click();

Set<String> handles = driver.getWindowHandles();

ArrayList<String> ar = new ArrayList<String>(handles);

System.out.println(ar);

String parentWindowID = ar.get(0);

System.out.println(parentWindowID);

String childWindowID = ar.get(1);

System.out.println(childWindowID);

driver.switchTo().window(childWindowID);

System.out.println(“child window title is “ + driver.getTitle());

driver.close();

driver.switchTo().window(parentWindowID);

System.out.println(“parent window title is “ + driver.getTitle());

}

}

 

And we’ll get the output as following:

As can be seen through the above code, you can easily browse through the windows following this approach.

6. Conclusion

We have learnt to handle  browser window popup using windowhandler API in Selenium WebDriver. We have solved this use cases by using Set and List both.

That’s about it.



Cheers!!

Naveen AutomationLabs

Blog Contributors:

Author:  Mandeep Kaur

Mandeep, having 5+ years of Testing experience in automation using Selenium (Java). Expertise in API and Performance testing using JMeter.
https://www.linkedin.com/in/mandeepkaur93
 
Reviewer: Naveen Khunteta 
https://www.linkedin.com/in/naveenkhunteta

Please follow and like us:

JS Alert Popup, Auth Pop Up and File Upload Pop Up Handling in Selenium WebDriver

1.Introduction

In this article, we’re going to illustrate how to handle alert or javascript Popup using selenium WebDriver.

2. Basics

Let’s get started by understanding what are these alerts or javascript popups.

  • Javascript Alert/popup is a notification/warning or message displayed on the User interface in box format to notify the user about some information or asks for permission to perform certain kind of operations.
  • Alert is a method in javascript and  displays an alert box with a specified message and an OK button.
  • what do we need to generate this alert on UI is simply open inspect window and click on console and type alert(“Hi this is an automation User!!”) . 
  • you will be able to see the popup similar to this:

3. Types of Alerts

  1. Simple Alert
  2. Confirmation Alert
  3. Prompt Alert

Let’s have a look at the first one:

Simple Alert:

This alert is called simple alert because it just notifies the user some information or warning with an “OK” or “Close” button as shown in the following image.

  • The above popup can not be handled with finding XPath of OK Button as we can not inspect or spy over this button.
  • So, to handle the above Popup, we need to look at Alert interface of selenium WebDriver

Alert Interface

  • Alert is an interface in selenium provide some methods to handle the alert
  • Syntax:
  • Alert alert= driver.switchTo().alert();
  • To handle the Alert, we first need to switch to alert using switchTo() method.
  • WebDriver interface contains method switchTo() which has return as interface and contains method alert() which has return type as Alert interface. 
  • RemoteAlert class in RemoteWebDriver class implement this Alert Interface
  • For complete code reference, visit over
  • RemoteWebDriver Implementation
  • alert() switches to the alert and return an alert reference and throw “NoAlertPresentException” if no alert exists.
  • Next, Let’s what actions we can perform once we switched to an alert

1.void dismiss(): This method clicks on the ‘Cancel’ button of the alert or dismiss the popup . It returns void.

Syntax:

driver.switchTo().alert().dismiss();

2.void accept(): This method click on the ‘OK’ button of the alert and returns void

Syntax:

driver.switchTo().alert().accept();

3.String getText() : This method captures the alert message and returns the String.

Syntax:

driver.switchTo().alert().getText();

4.void sendKeys(String Text):This method passes some data to alert input text and it returns void 

Syntax:

driver.switchTo().alert().sendKeys(“Text”);

Back to simple alert , let’s see following snippet code

 

Simple Alert

As can be seen, for simple Alert we just need to click on OK button and with one statement by switching to alert and accepting it we can achieve this scenario.

  • Confirmation Alert

  • Confirmation Alert is the alert which asks for confirmation from the user to perform certain actions.
  • User can opt for OK or Cancel button based on the requirements and also we can not inspect over this alert also.
  • Let’s see how it looks like

Following code snippet for the same:

package com.example.automation;
import org.openqa.selenium.Alert;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

/**
 * @author Mandeep Kaur
 * @Date 6 May,2020
 */
public class SeleniumConfig {
    public static void main(String[] args) throws InterruptedException {
        String path = System.getProperty("user.dir");
        System.setProperty("webdriver.chrome.silentOutput", "true");
        System.setProperty("webdriver.chrome.driver", path + "/chromedriver");
        WebDriver driver = new ChromeDriver();

        driver.get("https://testuserautomation.github.io/Alerts/");
        driver.findElement(By.xpath("//button[2]")).click();

       Alert alert = driver.switchTo().alert();
       System.out.println(alert.getText());
        //For OK button in alert, accept the PopUp
        alert.accept();
        Thread.sleep(2000);
        WebElement text =driver.findElement(By.xpath("//*[@id='demo']"));
        //verify the text after accepting the popUp
        System.out.println(text.getText());
        driver.close();

    }
}

As shown in the code, we have accepted the alert and verify the text we got after running the above piece of code and we get output similar to:

  • Prompt Alert

  • This Alert is to get input from the user in the form of text.
  • From the above methods, we have to use alert.sendKeys() method to send the text in an alert
  • After entering the input, the user can press the OK or Cancel Button.
  • Let’s prompt Alert on UI

 

prompt Alert

Now , see the code snippet for the same:

package com.example.automation;
import org.openqa.selenium.Alert;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;


/**
 * @author Mandeep Kaur
 * @Date 6 May,2020
 */
public class SeleniumConfig {
    public static void main(String[] args) throws InterruptedException {
        String path = System.getProperty("user.dir");
        System.setProperty("webdriver.chrome.silentOutput", "true");
        System.setProperty("webdriver.chrome.driver", path + "/chromedriver");
        WebDriver driver = new ChromeDriver();

        driver.get("https://testuserautomation.github.io/Alerts/");
        driver.findElement(By.xpath("//button[3]")).click();

       Alert alert = driver.switchTo().alert();
       System.out.println(alert.getText());
       //Send Text to the Alert
        alert.sendKeys("TestAutomationUser!!");
        //For OK button in alert, accept the PopUp
        alert.accept();
        Thread.sleep(2000);
        WebElement text =driver.findElement(By.xpath("//*[@id='test']"));
        //verify the text after accepting the popUp
        System.out.println(text.getText());
        driver.close();

    }
}

We can see that here before accepting the Popup, we have sent the “TestAutomationUser” to the alert and verified the text after we accepted the popup and output will be like following

 
 
 
Do we have some other pop ups as well? 
Answer is YESSS…
 
 
Now, there are few other Popups such as Authentication popup and window-based  popup like file Upload , we need to have strong understanding to tackle such popups :
Let’s quickly discuss about Basic Authentication Popup First: 
 
1) Basic Authentication popup : It asks user to enter username and password to the popup  when the browser gets launched and it looks like something :
As can be comprehended from the above snapshot that we need to pass username and password and we can’t spy over this popup.
Let’s look at below code snippet to handle this popup

 

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

/**
* @author Mandeep Kaur
* @Date 6 May,2020
*/
public class SeleniumConfig {
public static void main(String[] args) throws InterruptedException {
String path = System.getProperty(“user.dir”);
System.setProperty(“webdriver.chrome.silentOutput”, “true”);
System.setProperty(“webdriver.chrome.driver”, path + “/chromedriver”);
WebDriver driver = new ChromeDriver();

//send username : admin and password: admin in url before launching the browser
driver.get(“https://admin:admin@the-internet.herokuapp.com/basic_auth”);

//validate if popup is closed successfully and capture the text

WebElement successMessage = driver.findElement(By.xpath(“//div[@class=’example’]//p”));

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

}
}

It’s pretty clear from the above code that we just need to pass the username and password in the URL and after “@” the complete URL, after that, we can verify the success message, this is how we can achieve our goal.

2) Window-based File Upload popup :

Window-based popup interacts with window operations, selenium doesn’t provide direct support to handle this type of popup  but there is a workaround to operate on such cases. let’s look down to understand this in detail:

Window/ Mac-based popup appears like this once you click on choose file:

Let’s see the code to handle this popup:

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

/**
* @author Mandeep Kaur
* @Date 6 May,2020
*/
public class SeleniumConfig {
public static void main(String[] args) throws InterruptedException {
String path = System.getProperty(“user.dir”);
System.setProperty(“webdriver.chrome.silentOutput”, “true”);
System.setProperty(“webdriver.chrome.driver”, path + “/chromedriver”);
WebDriver driver = new ChromeDriver();

//launch the url
driver.get(“https://the-internet.herokuapp.com/upload”);

//inspect over the choose file element and send File from your directory to it
WebElement uploadFile = driver.findElement(By.xpath(“//input[@name=’file’]”));
uploadFile.sendKeys(“/Users/Documents/index.html”);

//click on upload button
driver.findElement(By.xpath(” //input[@class=’button’]”)).click();

//verify the message
WebElement successMessage= driver.findElement(By.xpath(“//div[@class=’example’]//h3”));
System.out.println(successMessage.getText());

driver.close();
}
}

Explanation:

1. We first need to inspect over choose file Button and capture XPath, HTML to look like below where it should have <input> tag and type should be file:

<input id=”file-upload” type=”file” name=”file” xpath=”1″>

 

2. Next, need to send File to upload using sendKeys(String fileNameWithExtension);

3. It will upload the file and we can verify the file is uploaded or not by capturing the success message like following:

4. Conclusion

In this write-up, we have learnt about javascript alerts, a few other types of popups and various ways to handle all these popups.

 

That’s all for this post, hope you have learnt about PopUps 🙂

 

Cheers!!

Naveen AutomationLabs

 

Blog Contributors:

Author:  Mandeep Kaur
Mandeep, having 5+ years of Testing experience in automation using Selenium (Java). Expertise in API and Performance testing using JMeter.
https://www.linkedin.com/in/mandeepkaur93
 
Reviewer: Naveen Khunteta 
https://www.linkedin.com/in/naveenkhunteta

 

Please follow and like us:

Difference between ImplicitlyWait, ExplicitWait and FluentWait in Selenium WebDriver

1.Overview

In this article, we’ll look at the most fundamental mechanism in selenium – synchronisation(wait).

2. Synchronisation in Selenium

  • Synchronisation helps the user to troubleshoot issues when launching or navigating to different web pages while executing the selenium scripts.
  • When the entire web page gets refreshed or elements are getting re-loaded there should be synchronisation between the selenium scripts, script execution speed and web application speed.
  • At times, there can be a lot of Ajax components or some images and when we want to interact with these elements it may not visible. Thus, a time fall back can be seen in such cases and we get an exception as “ElementNotVisibleException“.
  • Selenium doesn’t provide any default synchronisation but it provides synchronisation in the form of different types of waits which we will see below.

3. Different Types of waits in Selenium WebDriver

  • Implicit Wait
  • Explicit Wait
  • Fluent Wait

These waits are dynamic waits. To understand the statement let’s consider a situation when you have given a TimeOut value of 20 seconds. If the element is loaded in 5 seconds, then rest 15 seconds will be ignored.

Let’s have a look at each one of these commands:

  1. Implicit Wait

As per Selenium Documentation, An implicit wait is to tell WebDriver to poll the DOM for a certain amount of time when trying to find an element or elements if they are not immediately available. The default setting is 0. Once set, the implicit wait is set for the life of the WebDriver object instance.

  • Implicit wait waits for a certain time till page gets loaded. After setting a particular time web driver will wait for that time before throwing an exception “No Such Element Exception“.
  • Implicitly wait is applied globally, which means it is always available for all the web elements throughout the driver instance.
  • Syntax: driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
  • Implicitly accepts two parameters the first parameter time: 10 given as timeout wait and other is TimeUnit can be given in seconds, minutes, hours days just put dot key after TimeUnit, we can see all the options available.

Implicit Wait
 

So do I need to use Implicitly Wait? Answer is really NO..

Dis-advantages of Implicitly Wait:

  • undocumented and practically undefined behaviour.
  • runs in the remote part of selenium (the part controlling the browser).
  • only works on find element(s) methods.
  • returns either element found or (after timeout) not found.
  • if checking for absence of element must always wait until timeout.
  • cannot be customised other than global timeout.

This list is gathered from observations and reading bug reports and cursory reading of selenium source code.

Let me tell you one thing : <Always use explicit wait. Forget that implicit wait exists>                                              --Naveen Khunteta

2. Explicit Wait

Explicit wait is of two types:

a) WebDriverWait (Class) : 

b) FluentWait (Class)

Both are classes and implements Wait interface.

WebDriverWait class is an extension of FluentWait class. It doesn’t have its own methods.

  • Explicit wait waits for a certain condition till specific element is not loaded.
  • Its implementation is given by WebDriverWait Class in selenium with some expected conditions.
  • This can be useful when certain elements on the webpage are not available immediately and need some time to load for e.g when you click on some submit button after you fill some registration form, then it takes some time in processing and displaying the data on UI.
  • Selenium has its predefined conditions provided in ExpectedConditions class.
  • Below is the syntax to define explicit wait and the expected conditions to be selected based on our needs:

Expected Conditions

So do I need to use Explicit Wait? Answer is YESSSS..

  • documented and defined behaviour.
  • runs in the local part of selenium (in the language of your code).
  • works on any condition you can think of.
  • returns either success or timeout error.
  • can define absence of element as success condition.
  • can customise delay between retries and exceptions to ignore.

Fluent Wait:

As per Official Selenium API Documentation, FluentWait is:

An implementation of the Wait interface that may have its timeout and polling interval configured on the fly.

Each FluentWait instance defines the maximum amount of time to wait for a condition, as well as the frequency with which to check the condition. Furthermore, the user may configure the wait to ignore specific types of exceptions whilst waiting, such as NoSuchElementExceptions when searching for an element on the page.

  • FluentWait is used when we can define the maximum time to wait for a condition, It also defines the frequency with which WebDriver will check if the condition appears before throwing the “ElementNotVisibleException”.
  • We can configure the wait to ignore specific types of exceptions while waiting, such as NoSuchElementException when searching for an element on the page.
  • The fluent wait is a class and an implementation of Wait interface and also parent class of WebDriverWait.
  • We can customise the below apply method to give any conditions based on our specifications.

Syntax:

Let’s below code snippet :

Code for Fluent Wait

package com.example.automation;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.*;
import java.time.Duration;
import java.util.function.Function;

/**
 * @author Mandeep Kaur
 * @Date 2 May,2020
 */
public class SeleniumConfig {
    public static void main(String[] args) {
        String path = System.getProperty("user.dir");
        System.setProperty("webdriver.chrome.silentOutput", "true");
        System.setProperty("webdriver.chrome.driver", path + "/chromedriver");
        WebDriver driver = new ChromeDriver();
        driver.get("https://www.facebook.com/");
        // Create object of WebDriverWait class

        Wait wait = new FluentWait(driver)
                //Wait for the condition
                .withTimeout(Duration.ofSeconds(10))
                //checking for its presenceonce every 5 seconds.
                .pollingEvery(Duration.ofSeconds(5))
                //Which will ignore the Exception
                .ignoring(Exception.class);

        WebElement element = wait.until(new Function<WebDriver, WebElement>() {
            @Override
            public WebElement apply(WebDriver driver) {
                return driver.findElement(By.name("lastname"));

            }
        });
        element.sendKeys("Martin");
    }
}

Explanation:

To put it simply, Fluent Wait looks for a web element repeatedly at regular intervals until timeout happens or until the object is found.

  • The above code defines time out value as 10 seconds and polling frequency as 5 seconds that means for every 5 seconds it keeps on checking for element.
  • It directs WebDriver to wait for a maximum of 10 seconds to verify a specific condition. If the condition occurs during those 10 seconds, it will perform the next step in the test script. If not, it will throw an “ElementNotVisibleException”.

So when should I use FluentWait?

  • When you do not see suitable expected wait condition in explicit wait.
  • To handle dynamic AJAX web elements with polling mechansim
  • You need to do more than just waiting along with Polling Mechanism, IgnoredException and when you want to create your own custom wait condition (in apply method) for non WebDriver use cases as well.
So can I use FluentWait features like, polling interval, ignoreAll with WebDriverWait? 
Ans
: Yes, of course you can do that, as I have explained earlier WebDriverWait is child class of FluentWait, so it has access on all parent class public methods.

Refer this WebDriver API on GIT:

https://github.com/SeleniumHQ/selenium/blob/master/java/client/src/org/openqa/selenium/support/ui/FluentWait.java

Final Conclusion:

a. Wait is an Interface in Selenium and having only one method declaration:

public interface Wait {

until(Function<? super F, T> isTrue);

}

b. FluentWait is a class which is implementing Wait Interface, it’s having its own methods shown above and overridden until() method from the wait Interface. 

public class FluentWait implements Wait<T> { }

c. WebDriverWait is extending FluentWait class but has no methods init except one overridden method, that is: timeoutException(){}.

WebDriverWait can use all the methods of FluentWait class – pollingEvery(), withMessage(), ignoreAll etc..

FluentWait can be used for both WebDriver and non WebDriver use cases. It just needs a condition – waitForCondition.

3. Concept of Thread.sleep()

  • It is a static wait and execution of the scripts will be on hold till specified time configured in the function.
  • Thread is a class in JAVA and sleep is static method.
  • sleep() methods accept duration in milliseconds. ( 1 s= 1000 ms).
  • It throws  IllegalArgumentException – if the value of ms is negative.
  • sleep() throws a checked exception which we must either throw or handle it using try catch like done below
  • Syntax:

try{
Thread.sleep(5000);
}
catch(InterruptedException e){
}

Note: it’s never a good idea to use thread.sleep () as unlike dynamic waits it will wait for the entire time configured in the function till the element gets loaded.

4. PageLoadTimeOut & SetScriptTimeOut property

PageLoadTimeOut

  • PageLoadTimeOut is focused on the time a webpage needs to be loaded – the page load timeout limits the time that the script allows for a web page to be displayed.
  • If the page loads within the time, then the script continues. If the page does not load within the timeout the script will be stopped by a TimeoutException.
  • The timeout is set at the driver level. After creating the driver instance with the appropriate driver capabilities.
  • Syntax :

   driver.manage().timeouts().pageLoadTimeout(2, TimeUnit.SECONDS);

SetScriptTimeOut

  • From WebDriver documentation: setScriptTimeout(long time, java.util.concurrent.TimeUnit unit) sets the amount of time to wait for an asynchronous script to finish execution before throwing an error.
  • This works only for Async scripts (executeAsyncScript: calls which takes some time to respond back)
  • Syntax:

driver.manage().timeouts().setScriptTimeout(1, TimeUnit.SECONDS);

5. Conclusion:

In this article , we learnt about the various waits in selenium WebDriver.

Some References taken from:

 
Blog Contributors:
Author:  Mandeep Kaur
Mandeep, having 5+ years of Testing experience in automation using Selenium (Java). Expertise in API and Performance testing using JMeter.
https://www.linkedin.com/in/mandeepkaur93
 
Reviewer: Naveen Khunteta 
https://www.linkedin.com/in/naveenkhunteta
Please follow and like us:

Handle DropDown using select Class in selenium

Handle DropDown using select Class in selenium

 

1. Overview

In this article, we’ll explore the select class from the org.openqa.selenium.support.ui.Select package to work on Drop-Down.

2. Type of DropDowns/DropBox/ListBox

There are generally two types of DropDowns

  1. Single select DropDown
  2. Multi-select DropDown

  • Single select DropDown when we can select only one option from the DropDown list like below:

Values to select will be displayed like this:

  • Multi-select DropDown when we can select more than one option from the DropDown list like below

3. Role of Select Class in Selenium:

  • The Select class is a WebDriver class which provides the implementation of the HTML

  • This class can be found under org.openqa.selenium.support.ui.Select package.

  • Select is an ordinary class as any other class , so its object is created by passing the WebElement to its constructor.

  • It will throw error as asking to add arguments to the command:

            Syntax : Select select = new Select(); 

So, specify the web element location using the select Element as done below:

Declaring the dropDown element as an instance of the Select class

Let’s find out what operations we can perform with the help of this Select class reference i.e. selectFromDropDownObj

 

Select Methods

As it can be seen from the above figure, we can select/deselect the values from the drop-down list based on our requirements.

Let’s explore some of the above methods to get better understanding of the same:

We can select our drop-down values with these below methods

  1. selectByIndex
  2. SelectByVisibleText
  3. selectByValue

Let’s examine the below code first:

  • selectByIndex (int index): This Function takes an index value from drop-down list and it starts from 0 for the first value and returns void.
  • selectByVisibleText(String text): This Function takes text in String format from the drop-down list and returns void.
  • selectByValue(String value): For this first inspect the element from DOM and select the value as shown below:

Note : The Most preferred way is to select by byVisibleText() because in ByIndex(),  index can be changed for dynamic drop down values but it can be used for static dropdown values like Month, Year and Date. 

Let’s explore getOptions Method:

Syntax:

List<WebElementallOptionsObj =selectFromDropDownObj.getOptions();

for(WebElement getAllOptions:allOptionsObj)
System.out.println(getAllOptions.getText());

This will print all the options contains in the DropDown and we get our Output same as below:

 

console Output

Another useful Method isMultiple:

This method tells us whether dropDown is single select or multi-select, it doesn’t accept anything and returns a boolean value.

 

isMultiple()

Now, if requirements changed that selected value needs to be deselected then we can perform below actions on the same.

  • deselectByIndex(int index) : void –Deselect the option at the given index.
  • deselectByValue(String Value): void –Deselect the matching option with given argument Value.
  • deselectByVisibleText(String Text) : void – Deselect the matching option with given argument Text.

Now, let’s jump into the second Type of DropDown i.e Multi-select:

Before that let’s take a glance at below code

 

select Multiple options

  1. In the above code , we first inspect the select element and then as usual instead of one select methods we can use more than one select methods. 
  2. One catchy method here is getFirstSelectedOption() it returns the WebElement and display which value from the dropdown is selected first by using getText.

That’s it we have mastered over the select class.

Below code for your reference and output of the same:

 

and output on the browser will be similar to :

package com.example.automation;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;
import java.util.List;
/**
* @author Mandeep Kaur
* @Date 29 April,2020
*/
*/
*/
public class SeleniumConfig {

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

String path = System.getProperty(“user.dir”);
System.setProperty(“webdriver.chrome.silentOutput”, “true”);
System.setProperty(“webdriver.chrome.driver”, path + “/chromedriver”);

WebDriver driver = new ChromeDriver();
driver.get(“https://testuserautomation.github.io/DropDown/”);

//inspect over the Drop Down menu
WebElement selectCitiesObj = driver.findElement(By.xpath(“//select[@name=’Cities’]”));
Select selectFromDropDownObj = new Select(selectCitiesObj);

//select by index , index will start from 0 for first value
selectFromDropDownObj.selectByIndex(0);

//select by value, value to be found in HTML DOM
selectFromDropDownObj.selectByValue(“Texas”);

//select by Text given in the dropDownList
selectFromDropDownObj.selectByVisibleText(“CA”);

//getOptions : to get all the options from the drop-down
List allOptionsObj = selectFromDropDownObj.getOptions();

for (WebElement getAllOptions : allOptionsObj)
System.out.println(getAllOptions.getText());

//isMultiple : is it multi select drop-down if no then it returns false:
boolean isSuccess = selectFromDropDownObj.isMultiple();
System.out.println(isSuccess);

//MultiSelect DropDown
WebElement selectBillsObj = driver.findElement(By.xpath(“//select[@id=’Bill’]”));
Select selectBillFromDropDownObj = new Select(selectBillsObj);

selectBillFromDropDownObj.selectByValue(“Travel”);
System.out.println(selectBillFromDropDownObj.getFirstSelectedOption().getText());
selectBillFromDropDownObj.selectByIndex(3);
driver.close();

}
}

4.Conclusion

In this article , we have learnt about the handling of drop-down using select class in selenium.

Cheers!!

Naveen AutomationLabs

Blog Contributors:

Author:  Mandeep Kaur
Mandeep, having 5+ years of Testing experience in automation using Selenium (Java). Expertise in API and Performance testing using JMeter.
https://www.linkedin.com/in/mandeepkaur93
 
Reviewer: Naveen Khunteta 
https://www.linkedin.com/in/naveenkhunteta

 

 

 

 

Please follow and like us:

Handling of Dynamic Web Table in Selenium

  1. Overview

In this article , we will learn to handle Dynamic Web Table in Selenium WebDriver .

2. Basic Concepts:

  • A table with rows and columns on a web page is called a web table. In HTML, a table is created using  tag. 
  • Table contains  headers represented as, rows asand Coloums as tag
  • There are two types of web Tables

  1. Static web table: Number of rows and columns will be static means constant that will not be changed. Here we just need to find the WebElement of the particular row or column and simply can perform operations on the cell.
  2. Dynamic table: Number of rows and columns will be dynamic. It will be kept on changing based on data and this the area where we will be focussing on.

3. Ways to Handle Dynamic WebTable:

  1. The standard way where we will iterate over the rows and columns and reach to a particular cell and get the cell value.
  2. By using custom XPath

Before proceeding further, let’s see how dynamic table looks like :

Table with checkbox , rows and coloumns

And below is the HTML representation of the above web table:

So, based on the data input we can increase or decrease our number of rows or columns.

Since we have seen what a web table is and how it is created, now let’s take the simple scenario :

1)click on checkbox where firstName is Will and remember it’s a dynamic table, hence “WILL” now on 3rd row can be shifted to other row based on the insertion or deletion of data.

  • Let’s implement it by First Method:

Let’s accomplish this task first by looking at the code snippet below

We’ll break this code into steps to get a deeper understanding of it:

Step1 : Capture xpath of the FirstName Row and observe the pattern

  • First Row xpath: //table/tbody/tr[2]/td[2] –>jessica
  • second Row xpath: //table/tbody/tr[3]/td[2] –>Ammy 
  • Third Row xpath: //table/tbody/tr[4]/td[2] –>Will and so on
  • Here can we say that our rowis getting changed and our columnis constant.

Step2: Catch before and after XPath from the point our row started changing as done in the code.

Step 3: Now, we have captured the before and after XPath.Find out the total row size by size() function of the java collections.

Step 4: Start iterating over the rows, start the row index with 2 as the first row would be reserved for headers.

Step 5:Get the text of all the rows and store it to the variable firstNames and print it to see if we are able to capture it

Step 6 : Final step of our task , that click the checkbox where FirstName is Will

For this step, we put one condition that if firstNames contains WILL then only checkbox has to be clicked. if it exists it will click the checkbox prior to WILL.

Since WILL is existing in the table , it will click the checkbox and we can capture it from the browser:

and our output on the console is similiar to following :

  • By Second Method : with Custom XPath

We can achieve our task with single statement :

 driver.findElement(By.xpath(“//td[contains(text(),’Will’)]//preceding-sibling::td//input[@type=’checkbox’]”)).click();

yes , that ‘it , below code for your reference

Let’s try to understand this method :

firstly visit over XPath_Axes , here you will get to know how to traverse from one node to another node.

Next, in the above we have spied over FirstName with text Will and we found out Will Sibling is td when we proceed upwards and then we get our input as a checkbox and from here we can simply capture it.

4. Which Method to choose

As can be conveyed from the above methods, the custom method is the best way to handle web dynamic table :

Reasons :

  1. In the First Method, it’s a lengthy method whereas the second method is just a single line statement
  2. In the first Method, we had to use for loop with conditions and then selecting the value, on the other hand, we need not have to use for loop
  3. As we are iterating through till all the rows it makes code slower in the first Method considering the other method can be seen fast, dynamic and efficient

Code Snippet with both methods :

package com.example.automation;
import java.util.List;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
/**
@author Mandeep Kaur
@Date 28 April,2020
*/
public class SeleniumConfig {
public static void main(String[] args) {
String path = System.getProperty("user.dir"); System.setProperty("webdriver.chrome.silentOutput", "true"); System.setProperty("webdriver.chrome.driver", path + "/chromedriver");
WebDriver driver = new ChromeDriver(); driver.get("https://testuserautomation.github.io/WebTable/");
// Method 1
String before_xpath = "//table/tbody/tr["; String after_xpath = "]/td[2]";
List rows = driver.findElements(By.xpath("//table/tbody/tr"));
int rowSize = rows.size();
System.out.println(rowSize);
for (int i = 2; i <= rowSize; i++) {
String firstNames = driver.findElement(By.xpath(before_xpath + i + after_xpath)).getText();
System.out.println(firstNames);
// Now click the checkBox where first Name would be Will
if (firstNames.contains("Will")) {
// click the checkBox
driver.findElement(By.xpath("//tbody/tr[" + i + "]/td[1]/input")).click(); System.out.println("candidate has been selected");
break;
}
}
// Method 2 : By custom xpath:
driver.findElement(By.xpath("//td[contains(text(),'Will')]//preceding-sibling::td//input[@type='checkbox']")) .click();
driver.close();
}
}

5. Conclusion

In this article , we learnt about how to handle dynamic Web Tables.


Cheers!!

Naveen AutomationLabs

Blog Contributors:

Author:  Mandeep Kaur
Mandeep, having 5+ years of Testing experience in automation using Selenium (Java). Expertise in API and Performance testing using JMeter.
https://www.linkedin.com/in/mandeep-kaur-486ba9106
 
Reviewer: Naveen Khunteta 
https://www.linkedin.com/in/naveenkhunteta

 

 

 

 

Please follow and like us:

Selenium WebDriver -Navigation Commands – Difference between get() and navigate().to() methods.

1. Overview  

In this short article, we’ll be focusing on various Navigation commands that allow the browser to move forwards, backwards in the browser’s history.

2. Difference Between the driver.get(“url”) and driver.navigate().to(“url”);

On the basis of Method Calls:

driver.get() used to launch a particular website, we can’t use forward and backward button whereas driver.navigate().to() is also used to launch the particular website by passing the URL but we can use forward and backward button to navigate between the pages during test case writing.

Other than this, both are exactly same, both are synonyms of each other.

On account of Server API Calls:

driver.get() method internally sends HTTP POST request to Selenium Server Standalone.  

driver.navigate().to method sends HTTP POST request to Selenium Server Standalone.

Both are calling HTTP POST method: /session/:sessionId/url

GET /session/:sessionId/url Retrieve the URL of the current page.
POST /session/:sessionId/url Navigate to a new URL.

3. Method Explanation

All Navigation methods are defined in RemoteNavigation class which is implementing Navigation Interface.

 

 

Now, to access the navigation methods, just type driver.navigate(). like below:

Let’s try to understand these methods in detail:

  1. Navigate To Command – driver.navigate().to(“url”)

There are two ways to define this method:

This method Loads a new web page in the current browser window. It accepts a String parameter and returns void.

 

 

This method accepts URL class instance by importing package import java.net.URL; and returns void.

2)     Forward Command – driver.navigate().forward();

This method enables the web browser to click on the forward button in the existing browser window, it takes you forward by one page on the browser’s history.  It neither accepts nor returns anything.

3) Back Commanddriver.navigate().back();

This method enables the web browser to click on the back button in the existing browser window. it takes you backwards by one page on the browser’s history. It neither accepts nor returns anything.

4)  Refresh Command- driver.navigate().refresh();

This method refreshes the current page. It neither accepts nor returns anything.

 

 

 

Let’s look at this function in more details with below code snippet:

Upon executing the above code, we will get the output on console similar to:

Now many of us would be wondering why this exception occurs?

Let’s break down our answer to get a deeper understanding:

  • When WebDriver executes the above code then it assigns an internal id  to every WebElement and it refers this id to interact with that element and now we are refreshing our web Brower with driver.navigate().refresh();

  • It refreshes the entire page due to which the section of the DOM also gets refreshed and so is the element. In this scenario the internal id(something like “id =725541f2-6c3b-4a31-acd5-7c14ef0f8f97” as shown in below snapshot ) which WebDriver was using has become stale(old), so now for every operation on this WebElement, we will get StaleElementReferenceException .

To overcome this problem, the most recommended way is to reinitialize the element again and this time WebDriver will assign a different Id to this element, and example for this has been done for you below :

Let’s see complete code with all the navigate operations together:

package com.example.automation;

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

/**
*
@author Mandeep Kaur
*
@Date 23 April,2020
*/

public class SeleniumConfig {
public static void main(String[] args) {

String path = System.getProperty(“user.dir”);
System.setProperty(“webdriver.chrome.silentOutput”, “true”);
System.setProperty(“webdriver.chrome.driver”, path + “/chromedriver”);
WebDriver driver = new ChromeDriver();

//Navigate to the google
driver.navigate().to(“https://www.google.com/”);

//Navigate to the yahoo
driver.navigate().to(“https://in.yahoo.com/?p=us”);

//Navigate back to google
driver.navigate().back();

//Navigate back to yahoo
driver.navigate().forward();

//Navigate to the instagram
driver.navigate().to(“https://www.facebook.com/”);

//Refresh the page
driver.navigate().refresh();

//close the driver
driver.close();
}

}

4. Conclusion

In this article, we learnt about various selenium navigation commands.

 

Blog Contributors:

Author:  Mandeep Kaur
Mandeep, having 5+ years of Testing experience in automation using Selenium (Java). Expertise in API and Performance testing using JMeter.
https://www.linkedin.com/in/mandeep-kaur-486ba9106
 
Reviewer: Naveen Khunteta 
https://www.linkedin.com/in/naveenkhunteta

Please follow and like us:

Overview of WebDriver and WebElement Interface in Selenium

Overview of WebDriver and WebElement Interface in Selenium

 
1. Introduction 
 
In this article, we are going to explore these powerful interfaces WebDriver and WebElement.
 
2. WebDriver Hierarchy
 
Before proceeding any further, let’s have a look at WebDriver Hierarchy first:
 
 
 
 
Explanation:
  • WebDriver is an interface and extends SearchContext Interface, which declares two methods findElement and findElements Methods (FindElement/FindElements in above image).
  • WebDriver has many abstract methods like: get(String url), close(), quit(),getTitle(), getCurrentUrl etc.
  • RemoteWebDriver class which implements WebDriver Interface, this class implement all the methods in WebDriver including findElement and findElements.
  • ChromeDriver Class extends ChromiumDriver Class which further extends RemoteWebDriver class.
  • And finally, IEDriver, SafariDriver and FirefoxDriver classes directly extends RemoteWebDriver class.
  • Click here to view complete source code implementation and for selenium java APIs visit here.
 
 
Let’s understand with a simple example:
 
When we say WebDriver driver = new ChromeDriver();
 
We can access all methods using ChromeDriver instance.
 

Below is the image for the same :

 

 
  
3. WebElement Interface
 
Now, let’s explore WebElement Interface:
 
  •  As explained on Selenium Official Site a WebElement represents HTML element.
  • The interface also extends SearchContext, TakesScreenshot interfaces.
  • In general, whatever we see in the HTML page is a WebElement whether it’s a link, search-text, button, Drop-Down, Web-Table etc. So, we can say that every action on a Web-Page while automating your Web Application will have to go through WebElement interface.
 
4. Ways to Define WebElement
 
       1)With the help of WebDriver instance
 
WebElement element = driver.findElement(By.);
 
findElement() – Basically it is a  method which finds a first single matched WebElement on the web page and returns the WebElement.
 
And similarly findElements() – It  returns List of matching WebElements that can be used to perform further actions.
 
Below code snippet where driver.findElements returning the List of WebElement.
 

By is an abstract class by which we can extract below methods which also be called as locators:
 
 

 
       
 
       
    2) By returning WebElement WebElement element = driver.findElement(By) and with above locators we can locate the WebElement on      the web page
 
    3)Using By Locator By by = By.name(“userName”);
WebElement element = driver.findElement(by);
 
 
 
 
5. Operations on WebElement
 
Once we figured out the WebElement with the help of locators then we can perform any actions on it.
 
Let’s look at below example:
 
WebElement userNameObj = driver.findElement(By.name(“userName”));
 
In above line of code, we found the WebElement with locator by name with WebElement instance as userNameObj.
Post that we need to send some userName to the WebElement, for that we need to write code as below
userNameObj.sendKeys(“sva”);
With the help of sendKeys, I just simply passed the username.
 
Let’s spend some time to look which all the post operations we can perform on WebElement:
 
 
 
 
 
 
 
 
 
As shown above, we can easily perform all these operation click(), clear(), sendKeys(), getText() and getAttribute() etc.
 
Below is the code snippet for your reference:
 
 
 
 
 
 

package com.example.automation;

import org.openqa.selenium.By;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.WebElement;

import org.openqa.selenium.chrome.ChromeDriver;

import java.util.List;

/**

* @author Mandeep Kaur

* @Date 21 April,2020

*/

public class SeleniumConfig {

public static void main(String[] args) {

String path = System.getProperty(“user.dir”);

System.setProperty(“webdriver.chrome.silentOutput”, “true”);

System.setProperty(“webdriver.chrome.driver”, path + “/chromedriver”);

WebDriver driver = new ChromeDriver();

driver.get(“http://newtours.demoaut.com/”);

WebElement userNameObj = driver.findElement(By.name(“userName”));

userNameObj.sendKeys(“sva”);

WebElement userPasswordObj = driver.findElement(By.name(“password”));

userPasswordObj.sendKeys(“123”);

WebElement loginObj = driver.findElement(By.name(“login”));

loginObj.click();

// get all the elements tag name a

List<WebElement> allLinksObj = driver.findElements(By.tagName(“a”));

// get the total count of elements

int linkCounts = allLinksObj.size();

for (int i = 0; i < linkCounts; i++) {

System.out.println(allLinksObj.get(i).getText());

}

driver.close();

}

}

 
6. Conclusion
 
In this article, we learnt about WebDriver and WebElement Interface.
 
 
 
Cheers!

Naveen AutomationLabs

 
Blog Contributors:
Author:  Mandeep Kaur
Mandeep, having 5+ years of Testing experience in automation using Selenium (Java). Expertise in API and Performance testing using JMeter.
 
Reviewer: Naveen 
 
 
Please follow and like us:

Selenium WebDriver Architecture Overview & WebDriver APIs

Selenium WebDriver Architecture Overview & WebDriver APIs

 
1. Overview
 
This article describes about Selenium WebDriver Architecture and to know about how selenium works internally.
 

2. The Basics

  • Selenium WebDriver is a browser automation framework that allows you to execute your tests against different browser.
  • WebDriver interacts and controls the actual browser in either locally or remotely. 
  • We can use WebDriver to automate and validate Web-Applications.
 
3. How selenium WebDriver Works Internally
 
Let’s take a look at the below architecture:
 
 
 
The above picture depicts, there are four components of Selenium Architecture:
 
1. Selenium Client Library
2. JSON Wire Protocol over HTTP
3. Browser Drivers
4. Browsers
 
We will try to understand each of these four components briefly:
 
1. Selenium Client Library
 
Selenium supports multiple libraries such as Java, Ruby, Python, etc.
It means that we can write our code with any of these scripting/programming languages.
Selenium Client Library sends the request in the form of API to the Browser Driver with the help of JSON Wire Protocol over HTTP (hypertext Transfer Protocol).
 
 

2. JSON Wire Protocol over HTTP

  • JSON stands for JavaScript Object Notation. It is a lightweight data-interchange format which transfers the data between a server and a client on the web.
  • JSON Wire Protocol is a REST API that transfers the data between HTTP server .Every Browser Driver uses a HTTP server to receive HTTP requests.

3. Browser Driver

  • Browser Drivers are used to communicate with browsers.
  • Each browser has its specific Browser WebDriver.
  • When a browser driver is received any command then that command will be executed on the respective browser and the response will go back in the form of HTTP response.
Following are the operations performed when we run our automation script using specific Browser driver:
 
1. For each Selenium command, a HTTP () request is created and sent to the browser driver.
2. The browser driver uses a HTTP server for getting the HTTP requests.
3. HTTP Server sends all the steps to perform a function which are executed on the browser.
4. The HTTP server sends the status back to the automation script.

 
3. Browsers
 
Selenium supports multiple browsers such as Firefox, Chrome, IE, Safari etc.
 
 
Now let’s proceed to see the real implementation of the same:
 
 
 
 
 
Note: Because there are many Browsers in the market today, Selenium community has created WebDriver as an interface.

This interface defines some set of methods whose implementation will be provided by implementing classes such as ChromeDriver, FirefoxDriver, SafariDriver etc.

WebDriver’s main feature is to control and provide instructions to the Browser. So, you can choose any driver based on your browser. In above case we have chosen ChromeDriver.
 
Below code for your reference:
 
package com.example.testAutomation;import org.openqa.selenium.WebDriver;import org.openqa.selenium.chrome.ChromeDriver;

/**
 * @author Mandeep Kaur
 * @Date 17 April,2020
 */
public class SeleniumConfig {
   
public static void main(String[] args) {

        String path = System.getProperty(“user.dir”);
        System.setProperty(
“webdriver.chrome.driver”, path + “/chromedriver”);
        WebDriver driver =
new ChromeDriver();
        driver.get(
“https://www.hubspot.com/”);

    }
}

 
4. Now, let’s see what will happen internally when you execute the above script:
 
1. Upon executing the above code, Selenium client library (java) will convert the automation script to Rest API and communicates with the Chrome Driver over JSON Wire Protocol. 

2. Once API interacts with Browser Driver, then the Browser Driver will pass that request to the browser over HTTP and then the commands in your selenium script will be executed on the browser.

3. Based on the Rest Methods Type: Get/Post/Delete, response will be generated on the browser end and it will be sent over HTTP to the browser driver and from the Browser Driver over JSON Wire Protocol sends it to the UI Console.

4. Click on this link for complete understanding of JSON Wire Protocol

 
Let’s try understanding this with an example:
 
Below are the API’s gets evoked when we write any operation using selenium .
For example, when we write driver.get(“url”) below highlighted API will be executed Internally.
 
 
 
 
 
Let’s move on to the practical implementation to see how exactly it works:
 
1. Download the selenium Standalone server from here and place it to a directory and keep your chrome/gecko driver in the same directory.
2. Open command Terminal/command Prompt and navigate to the above directory and run the command java -jar selenium-server-
standalone-3.141.59.jar and we will get our selenium server up and running as can be seen below
 
 
 
Next, we will open our browser and enter the URL as  http://localhost:4444/ :
 
 
You will be landing to this page
 
 
 
Click on console, you will be navigated to below page
 
Click on create Session and you will be prompted with a pop up to select the browser you want to run the automation script and click OK

 

 
 
And we see our session got created and chrome browser will be launched automatically and same can be confirmed from the Terminal:
 
 
 
Move the cursor to Capabilities and you will see our code WebDriver driver = new ChromeDriver(); has been converted into API in JSON-Payload internally
 
 
 
Now, let’s open the postman (It’s a tool to validate the request and Response)
 
Request: To get the current session running, we will evoke sessions API from JSONWireDocumentation with end-point: /sessions

 
And here we got our current “session id”:
 
 
 
 
This also can be done by running the command curl -X GET  http://localhost:4444/wd/hub/sessions
 
 
 
Let’s evoke “/sessionId/url” API to see how we can retrieve the URL when we pass driver.get(“url” ) in our code:
 
 
Here method Type will be post and we have to pass the body with URL we want to get, in this case will take https://www.hubspot.com/
 
 
 
 
And yes, we got our URL in launched Chrome and same operation through Terminal can be achieved like below
 
 
 
5. Conclusion
 
 
In this article, we have learnt the complete internal architecture of Selenium WebDriver.
 
That’s it 🙂 You have learnt about Selenium WebDriver Architecture and WebDriver Rest APIs.
 


 
Cheers!

Naveen AutomationLabs

 

 
Blog Contributors:
Author:  Mandeep Kaur
Mandeep, having 5+ years of Testing experience in automation using Selenium (Java). Expertise in API and Performance testing using JMeter.
 
Reviewer: Naveen 

Please follow and like us:

How to write your first Selenium WebDriver Code

How to write your first Selenium WebDriver code

 

1. Introduction 

 
In this article, we will have a quick look at the download and installation of java, eclipse and practical introduction to working with our first selenium script.
 
 

2. Set up java and Eclipse

 
Eclipse IDE requires java, so we will be installing Java SE JDK1.8
 
Here are the steps to install JDK :
 
Step 1: Download JDK from here and choose the JDK according to your OS (Windows/Mac based on 32 bit and 64-bit version). 
 
Sign up for oracle account and login with the same, you will be able to download the JDK and install in your system by clicking it and accepting the consent till you get the finish/close button.
 
Step 2: To check if java is installed, open a command window or terminal and type java -version, and output will be similar to
 
 
 
Otherwise, we’ll get an error as :
 
‘java’ is not recognised as an internal or external commands
 
The above error may vary depending on the OS and the java version installed
 
Step 3: For windows, we need to define the java Environment path to locate the executables like javacjava, etc
  • Open search and type advanced system setting

      

  • In the shown options, select the View advanced system settings link
  • Under the Advanced tab, click Environment Variables
 
 
·       In the System variables section, click New 

             

 
·        Set JAVA_HOME as the Variable name and the path to the JDK installation and click OK
 
 
  • Click OK and click Apply to apply the changes
 

In Mac OSX 10.5 or above, Apple recommends  to set the $JAVA_HOME variable to (/usr/libexec/java_home
 
1) open the terminal and run the command Open ~/.bash_profile, if file exists it will open the bash file 
otherwise, we will get the error message as:



 
The file /Users/userName  .bash_profile does not exist.
 
2) The next step is to create the bash file, simply run command $ vim  ~/.bash_profile  and add 
export JAVA_HOME=$(/usr/libexec/java_home) save and close the file.

 
 
3) Now, run the source ~/.bash_profile to apply the changes. 
 
4) To check the value of JAVA_HOME  run the command echo $JAVA_HOME and the output should be similar like 
 
/Library/Java/JavaVirtualMachines/jdk1.8.0_241.jdk/Contents/Home
 
Step 4Download the latest version of Eclipse IDE from here and choose the version according to OS
 
you should be able to download .exe file for Windows and .dmg for Mac after successful completion of the installation, you are all set to launch the IDE.
 
Step 5: Lastly, we need to download Selenium Java Client Driver  to run our first selenium script 
 
Selenium Java Client Driver from here and choose the latest version and Save it your preferred location in your machine (say C:\documents) 
 
Configure Eclipse IDE with WebDriver :
  • Create a new Java Project in Eclipse:
 
 
 
 
 
  • Give a Project Name : Test Automation
  • Right-click on the project and click on Properties>Java Build Path>Click on configure build path>Click on Library Tab>Add External JARs and Select the Selenium WebDriver JARs from the location, where you have saved the Selenium JARs in your System.   
 
 
 
 
 
 and click on apply and press OK
 
Now, let’s first download the latest chrome Driver from here according to your OS and save the driver in some directory and to check the compatibility with browser and driver click here
 
3. Selenium Integration :
 
In this section, we will start with a simple selenium script  such as open a browser, navigating to URL and verify the title of the page 
Now, create a java package under your project, and create a class  and provide a  class name as SeleniumConfig 
 
In order to launch the Chrome browser, we have to do two steps
1. Set a system property “webdriver.chrome.driver” to the path of your ChromeDriver file
2. Instantiate a ChromeDriver class.
 
 
Below is the code snippet for your reference :
 
package com.example.testAutomation;
 
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
 
/**
 * @author Mandeep Kaur
 * @Date 16 April,2020
 */
public class SeleniumConfig {
public static void main(String[] args) {
 
String path = System.getProperty("user.dir");
 
// For Windows define path as C:\Users\abc\Desktop\chromedriver.exe
 
System.setProperty("webdriver.chrome.driver", path + "/chromedriver");
WebDriver driver = new ChromeDriver();
 
/**
* Now, let's open the browser with the help of the driver and get the
* title of the site: Here we will use the dummy Site for testing
*/
 
driver.navigate().to("https://www.hubspot.com/");
String actualTitle = driver.getTitle();
 
// Finally, we can validate if the actual title is matched with our
// expected
// Title:
 
String expectedTitle = "HubSpot | Inbound Marketing, Sales, and Service Software";
if (actualTitle.equalsIgnoreCase(expectedTitle))
System.out.println("Test Passed!");
else
System.out.println("Test Failed");
 
// once all the operations are done, we can close the web driver
 
driver.close();
}
 
}
 
That’s it!! You have written your first Selenium Program 🙂
 
Cheers!
Naveen AutomationLabs

Blog Contributors:Author:  Mandeep Kaur

Mandeep, having 5+ years of Testing experience in automation using Selenium (Java). Expertise in API and Performance testing using JMeter. https://www.linkedin.com/in/mandeep-kaur-486ba9106

Reviewer: Naveen Khunteta https://www.linkedin.com/in/naveenkhunteta

Please follow and like us: