Selenium 4 Features

Hi All, In today's article we will look into some of the Selenium 4 features. Although, still in its Alpha release, Selenium 4's stable release is expected to hit the market soon.


Hi All, In today's article we will look into some of the Selenium 4 features. Although, still in its Alpha release, Selenium 4's stable release is expected to hit the market soon.

As of the date of this article, the latest Selenium Alpha release is v4.0.0-alpha-6 - Check Official ChangeLog File for the latest updates.

There are changes in many areas in Selenium 4 like Selenium Grid, Selenium IDE and Selenium Webdriver, but we will be mainly focusing on changes in Selenium Webdriver.



selenium 4 versus selenium 3



The list of Selenium 4 features we will be looking in today are :
  • Take Screenshot of Web Elements
  • Capturing Screenshot of a section in a web page.
  • Opening a new tab on the browser.
  • Opening a new window on the browser.
  • Relative/Friendly locators
  • getRect() for finding dimensions and position.
  • Chrome Devtools API.


If you want to download Selenium 4, you can directly go to the Selenium Website. 

Or, download it from the Maven Repository.


Take Screenshot of Web Elements

I assume you all know how we used to take screenshots in Selenium 3? If not, let us refresh ourselves.

In Selenium 3 we used to take a screenshot of the entire page and not a specific element. The below code will refresh your memories.

 File src = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);  
 FileUtils.copyFile(src,new File("file where you want to save the screenshot"));

But with Selenium 4, we can take a screenshot of web elements on a web page. Just grab the element by findElement() method and use getScreenshotAs() method.

Suppose you want to take a screenshot of an email field on a webpage. Then the below code does it for you : 

 WebElement email = driver.findElement(By.id("email"));  
 File src = email.getScreenshotAs(OutputType.FILE);  
 FileUtils.copyFile(src,new File("file where you want to save the screenshot"));

The screenshot will look like this :
Take Screenshot of Web Elements

You can also take screenshots the Selenium 3 style if you are in love with the previous version.
Then the below code will help you :

 WebElement email = driver.findElement(By.id("email"));  
 File src = ((TakesScreenshot)element).getScreenshotAs(OutputType.FILE);  
 FileUtils.copyFile(src,new File("file where you want to save the screenshot"));


Capturing Screenshot of a section in a web page

When it comes to capturing a screenshot of a section of a web page and by section, I mean a table or a form on a web page, we can locate the web element(again a table or a form or a div) and use getScreenshotAs() method on it.

For example, the below code : 
 WebElement followByEmail = driver.findElement(By.id("FollowByEmaill")); //a div on my page programmingdomain.com  
 File src = ((TakesScreenshot)followByEmail).getScreenshotAs(OutputType.FILE);  
 FileUtils.copyFile(src,new File("file where you want to save the screenshot"));

will give you this screenshot :

Capturing Screenshot of a section in a web page


Opening a new tab on the browser.

Selenium 4 has come up with many features and one being, opening a new tab on the browser(bank tab).

For opening a new blank window newWindow() method is used in Selenium.

Consider the following code that opens a google page, then opens a new tab and navigates to a specific URL(programmingdomain.com).

 driver.get("https://www.google.com");  
 driver.switchTo().newWindow(WindowType.TAB);  
 driver.navidate().to("https://www.programmingdomain.com");



Opening a new window on the browser.

Very similar to the previous section, this section used WindowType.WINDOW instead of WindowType.TAB for opening a new window.

Consider the following code that opens a google page, then opens a new window and navigates to a specific URL(programmingdomain.com).

 driver.get("https://www.google.com");  
 driver.switchTo().newWindow(WindowType.WINDOW);  
 driver.navidate().to("https://www.programmingdomain.com");



Relative/Friendly Locators

Locators play an important role in finding/locating elements on a web page. Selenium 3 had 8 locators namely, ID, Name, TagName, ClassName, CssSelecor, XPath,LinkText, PartialLinkText and with Selenium 4 this number is increasing even more.

Below are the methods that are used for relatively locating elements in Selenium 4 :
  • below(): finds element which is below the already located/searched element.
  • toLeftOf() : finds element which is in the left of the already located/searched element.
  • toRightOf() : finds element which is in the right of the already located/searched element.
  • above(): finds element which is above the already located/searched element.
  • near(): finds element which is at most 50px away from located/searched element.
The below example will make it clear for you :

 //import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;  
 WebElement nextButton = driver.findElement(By.id("nextButton"));  
 WebElement previousButton = driver.findElement(withTagName("button").toLeftOf(nextButton));

This code locates previousButton when you have already located nextButton and want to locate previousButton which is present at the left of nextButton.

The withTageName() method return RelativeLocator which is similar to By class.

Also, Selenium uses a Javascript function getBoundingClientRect() internally to find the relative element.



getRect() for finding dimensions and position.

In Selenium 4, getRect() method is used to get the dimensions of a web element like height, width, X-Coordinate, Y-Coordinate.

As told in the previous section, getRect() also uses getBoundingClientRect() function of Javascript to get the dimensions of web elements.

Let's see how we use to get the dimensions in Selenium 3.x vs now with Selenium 4.x.

Selenium 3.x

 WebElement loginbtn = driver.findElement(By.id("login"));  
 Dimension btnDim = loginbtn.getSize();  
 System.out.println(btnDim.getHeight());  
 System.out.println(btnDim.getWidth());  
 Point p = loginbtn.getLocation();   
 System.out.println(p.getX());  
 System.out.println(p.getY());

Selenium 4.x

 WebElement loginbtn = driver.findElement(By.id("login"));  
 Rectangle rect = loginBtn.getRect();  
 System.out.println(rect.getHeight());  
 System.out.println(rect.getWidth());  
 System.out.println(rect.getX());  
 System.out.println(rect.getY())



Chrome Devtools API

Let's conclude this article with this topic. Selenium 4 features also include Chrome Devtools API which gives us the following facilities which could be only done manually previously :

  • Enable Network Offline
  • Enable Network Online
  • Get Console log
  • Load Insecure website

There are some internal changes done in order to make the Chrome Devtools API available to us. 

The ChromeDriver which previously extended from RemoteWebDriver now has a bridge, ChromiumDriver between them which includes getDevTools() method.

Selenium 3.x

ChromeDriver  <-- RemoteWebDriver

Selenium 4.x

ChromeDriver <-- ChromiumDriver <-- RemoteWebDriver

And ChromiumDriver includes the following method :

 public DevTools getDevTools(){  
      return devTools.orElseThrow(() -> new WebDriverException("Unable to create Devtools Connection"));  
 }

If you want the coding implementation of the above Devtools features, you can contact us. We'll be happy to provide you with that.

**End of Selenium 4 Features**

If you like this article please comment down below and show your support. If you want information on any other topic, comment down and let us know. Thank You!


More on Selenium