{{announcement.body}}
{{announcement.title}}

Hidden Functions In Selenium 4

DZone 's Guide to

Hidden Functions In Selenium 4

Take a look at some of the features in each of the Selenium components that have been released with the new version of Selenium 4.

· DevOps Zone ·
Free Resource

Selenium Makes Automating Browsers Easier and Better

There's no doubt that Selenium is one of the best automation undertakings in the QA testing industry. This article will highlight some of the functions in the pre-release early version of Selenium 4. You can download Selenium 4 Alpha from Maven’s Repository, and the code from this article is available at https://github.com/RexJonesII/blog.

All components in the Selenium Suite have something new, including Selenium IDE, Selenium WebDriver, and Selenium Grid.

  • Selenium IDE allows users to record, playback, edit, and debug a test.
  • Selenium WebDriver is an API that allows us to create and execute test scripts.
  • Selenium Grid helps us to run our test across multiple browsers, operating systems, and machines in parallel


You may also enjoy: Components of the Selenium Automation Tool


Selenium WebDriver

Most of the time, when people say Selenium, they are referring to Selenium WebDriver, so let’s start with Selenium WebDriver. 

W3C WebDriver Protocol

According to Simon Stewart, Selenium’s Project Lead, the W3C WebDriver Protocol is the reason for upgrading to Selenium 4. It’s fractionally different compared to the original JSON Wire Protocol. One of the advantages involves our test which runs consistently between browsers. A standardization of W3C encourages compatibility across different software WebDriver API implementations. 

The major difference with Selenium adopting the W3C Protocol is how sessions are created and element interactions are performed using Actions API. With the Actions API, we can perform multiple actions at the same time. Here’s a screenshot of the Selenium Client and WebDriver language bindings, browser drivers, and web browsers without the original JSON Wire Protocol.

 Selenium Client and WebDriver Language Bindings

Selenium Client and WebDriver Language Bindings


New Window/Tab

Selenium 4 presents an opportunity for us to work with multiple tabs and windows. We can leverage the  newWindow ( WindowType typeHint ) method. This method creates a new browser window and switches the focus to the new browser window. It’s handy if we choose to load a new window/tab then open a different page and complete an action. The following test scripts load a new tab and window via TestProject.

Java
 




x
18


 
1
public class NewTabTest {
2
    WebDriver driver;
3
    
4
    @BeforeClass
5
    public void setUp () {
6
        driver = new ChromeDriver ();
7
        driver.manage().window().maximize();        
8
        driver.get("https://blog.testproject.io/"); 
9
        System.out.println(driver.getTitle());
10
    }
11
 
          
12
    @Test
13
    public void openTestProjectPlatformNewTab () {
14
        WebDriver newTab = driver.switchTo().newWindow(WindowType.TAB);
15
        newTab.get("https://testproject.io/platform/");
16
        System.out.println(driver.getTitle());
17
    }
18
}


New tab

New tab


A new tab is loaded and the page title is printed after switching to the tab. The next test script performs the same steps but switches to a new window. 

Java
 




xxxxxxxxxx
1
18


 
1
public class NewWindowTest {
2
    WebDriver driver;
3
    
4
    @BeforeClass
5
    public void setUp () {
6
        driver = new ChromeDriver ();
7
        driver.manage().window().maximize();        
8
        driver.get("https://blog.testproject.io/"); 
9
        System.out.println(driver.getTitle());
10
    }
11
 
          
12
    @Test
13
    public void openTestProjectPlatformNewWindow () {
14
        WebDriver newWindow = driver.switchTo().newWindow(WindowType.WINDOW);
15
        newWindow.get("https://testproject.io/platform/");
16
        System.out.println(driver.getTitle());
17
    }
18
}


 

Switching to a new window

Switching to a new window


Relative Locators

The purpose of Relative Locators is to find an element regarding the position of another element. There are five overloaded methods with a By and WebElement parameter. In alphabetical order, the methods are

  1. above – element located above the defined element
  2. below – element located below the defined element
  3. near – element located near the defined element
  4. toLeftOf – element located to the left of the defined element
  5. toRightOf – element located to the right of the defined element 

Relative locators

Relative locators


For example, let’s say it’s challenging to find the red heart icon on CarMax’s website. However, the Location drop-down is easier to find than the red heart icon. 

CarFax website

CarFax website


The following test script finds the Location drop-down then uses the  withTagName  method. This method is a parameter of  findElement and returns  RelativeBy via RelativeLocator. The red heart icon is positioned to the right of Location drop-down. Therefore, the test script finds the element implementing the toRightOf Relative Locator and the Location drop-down WebElement. After finding the red heart icon, the test script clicks the icon to load the Favorites page.

Java
 




xxxxxxxxxx
1
17


 
1
public class RelativeLocators {
2
    WebDriver driver;
3
    
4
    @BeforeClass
5
    public void setUp () {
6
        driver = new ChromeDriver ();
7
        driver.manage().window().maximize();        
8
        driver.get("https://www.carmax.com/");      
9
    }
10
    
11
    @Test
12
    public void clickHeartFavoriteIcon () {
13
        WebElement locationDropDown = driver.findElement(By.id("header-my-store-button"));
14
        WebElement heartFavoriteIcon = driver.findElement(RelativeLocator.withTagName("svg").toRightOf(locationDropDown));
15
        heartFavoriteIcon.click();
16
    }
17
}


CarMax search bar

CarMax search bar


Chrome DevTools and ChromiumDriver

Chrome DevTools is a set of developer tools built directly into the Chrome browser. Fortunately, Selenium 4 provides a direct communication line to the browser by way of DevTools. As a result, we can write more stable locators and track what’s going on in the browser.

With Selenium 3, ChromeDriver and EdgeDriver inherited implementations from the RemoteWebDriver class. Those implementations changed in Selenium 4. Now, ChromeDriver and EdgeDriver are inherited from ChromiumDriver. The ChromiumDriver class contains several methods to establish a connection with DevTools. 

ChromeDriver and EdgeDriver classes

ChromeDriver and EdgeDriver classes


ChromiumDriver

ChromiumDriver


In addition, Selenium 4 has a class named DevTools. The purpose of DevTools is to increase productivity. Some of the capabilities include:

  • Viewing the DOM
  • Handling Developer Options
  • Adding Listeners
  • Creating a Session
  • Inspecting Network Activity
  • Emulating Network Connections
  • Measuring Performance 

DevTools class

DevTools class


Selenium Grid

Selenium Grid 4 has a new architecture supporting four separate processes: Router, Distributor, Session Map, and Node. With Selenium 2, the Hub included three of those processes (Router, Distributor, Session Map).

  • Router – listens to a new session request
  • Distributor – selects a node to run our test
  • Session Map – responsible for mapping session ID to the node
  • Node – test machine where Test Script execute

Moreover, Selenium Grid 4 allows observability and updated to be more modern. Observability permits us to trace and log what’s going on. As a request comes in, there will be a trace ID to help our debugging efforts. 

Modern means Selenium Grid will be more convenient for modern technology like Docker and Kubernetes. We can use Docker which allows us to scale the grid and Kubernetes to set up a grid machine. The grid can take advantage of infrastructures like AWS and Azure. It will be easier to use virtual machines.

Selenium IDE

In the past, Selenium IDE was only available as a Firefox extension using the XPI file. XPI is a cross-platform compressed installation used by Mozilla application including Firefox. Mozilla changed from using the XPI file and Selenium IDE stopped working for Firefox. As a resurgent, Selenium IDE is now called Selenium IDE TNG (The Next Generation). It’s available as a Firefox and Chrome Extension.

Selenium IDE

Selenium IDE


Backup Element Selectors are beneficial when a change is made to a web application. Selenium IDE records our test using multiple locators. As a result, our test will continue to pass using a backup element selector if a developer modifies an element. For example, Selenium IDE records the test with an XPath locator, CSS locator, id locator, etc. so our test doesn’t fail. This provides power to a stable Test Script.   

Code Export is a useful feature but not a new feature. It allows an engineer to export the Selenium IDE commands to a programming language and test framework. The plan is to support all of the official language bindings for Selenium: C#, Java, JavaScript, Python, and Ruby.

Language selection

Language selection


The ability to include Control Flows (conditional logic and loops) are available from Selenium IDE. This offers a powerful set of options to execute our test scripts. Conditional statements determine what happens next if a condition is met or not met. The loop executes a statement(s) for a specific number of times in a program. Here’s a list of the conditions and loops provided by Selenium IDE:

  • Conditionals
    1. if – executes a statement when a condition is true
    2. else if – only executes when the first if condition is false
    3. else – extends the if condition when the condition is false
  • Loops
    1. repeat if - execute a block of statements then determine whether a condition is true then repeat if it is true. Execute a block of statements at least one time
    2. while - only execute a block of statements if a condition is true
    3. times - determine the number of times a condition/block of statements should execute

 The conditions in our application are verified using JavaScript expressions. We can run the execute script or execute async script to run JavaScript and store the result in a variable. The following screenshot shows JavaScript expressions directly in the Control Flow if command. 

Javascript Expressions

Javascript Expressions


For more information, view the Change Log to see updates regarding each programming language:

Further Reading

Features and Improvements in Selenium 4

Selenium 4 Is Releasing Soon: What Every QA Must Know

Topics:
selenium 4 ,selenium grid ,selenium ide ,w3c ,chrome devtools ,selenium ,selenium webdriver ,features ,devops

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}