Sales: contact@spurqlabs.com

HR: hr@spurqlabs.com

Book A Demo
Exploring New and Exciting Features of Selenium 4

Exploring New and Exciting Features of Selenium 4

by | Jul 4, 2024 | Blog

Selenium:

Selenium 4 features significant enhancements over Selenium 3, including a revamped Selenium Grid for distributed testing, native support for HTML5, and integration of the W3C WebDriver protocol for improved compatibility. Additionally, it offers enhanced debugging and error-handling capabilities, streamlining the testing process for better efficiency and reliability.

Benefits of Selenium Automation: Exploring Selenium 4 New Features

  • Streamline Testing Processes: Selenium automation allows organizations to streamline and enhance their testing processes by automating repetitive tasks associated with web application testing.
  • Interact with Web Elements: Automation scripts, facilitated by Selenium’s WebDriver, interact with web elements, imitating user actions to test functionality.
  • Accelerate Testing: Selenium automation accelerates testing by eliminating manual intervention and executing tests efficiently.
  • Ensure Consistency and Reliability: By automating tests, Selenium ensures consistent and reliable results across diverse browser environments, reducing the risk of human error.
  • Faster Releases: Selenium automation acts as a catalyst for achieving faster releases by expediting the testing phase.
  • Improve Test Coverage: With automation, organizations can improve test coverage by running tests more frequently and comprehensively.
  • Maintain Application Integrity: Selenium automation helps in maintaining the integrity of web applications by identifying and addressing issues promptly.

The Architecture of Selenium 3

Selenium 3

The Architecture of Selenium 4

Selenium 4

Selenium 4 New Features: W3C WebDriver Standardization

Selenium 4 fully supports the W3C WebDriver standard, improving compatibility across different browsers and reducing inconsistencies.

  • Standardized Communication: The adoption of the W3C WebDriver protocol ensures consistent behavior across different browsers, reducing compatibility issues.
  • Improved Grid Architecture: Enhanced scalability and easier management with support for distributed mode, Docker, and Kubernetes.
  • User-Friendly Selenium IDE: Modernized interface and parallel test execution simplify test creation and management.
  • Enhanced Browser Driver Management: Unified driver interface and automatic updates reduce manual configuration and ensure compatibility.
  • Advanced Browser Interactions: Integration with DevTools Protocols for Chrome and Firefox enables comprehensive network and performance monitoring.
  • Simplified Capabilities Configuration: Using Options classes instead of DesiredCapabilities improves the readability and maintainability of test scripts.
  • Improved Actions API: Enhancements provide more reliable and consistent complex user interactions across different browsers.
  • Enhanced Performance: Overall performance improvements result in faster and more efficient test execution.
  • Better Documentation: Comprehensive and improved documentation reduces the learning curve and enhances productivity.
  • Backward Compatibility: Designed to be backward compatible, allowing seamless upgrades without significant changes to existing test scripts.

Here, I’ll outline the precise changes introduced in Selenium 4 when compared to its earlier versions:

1. W3C WebDriver Protocol:

  • Selenium 4 further aligns with the W3C WebDriver standard, ensuring better compatibility across different browsers.
  • Full support for the W3C WebDriver protocol was a significant improvement to enhance consistency and stability across browser implementations.

2. New Grid :

  • Selenium Grid has been updated in Selenium 4 with a new version known as the “Grid 4”.
  • The new grid is more scalable and provides better support for Docker and Kubernetes.

Let’s briefly understand Selenium Grid, which consists of two major components:

  • Node: Used to execute tests on individual computer systems, there can be multiple nodes in a grid.
  • Hub: The central point from which it controls all the machines present in the network. It contains only one hub, which helps in allocating test execution to different nodes.

In Selenium 4, the Grid is highly flexible. It allows testing cases against multiple browsers, browsers of different versions, and also on different operating systems.

Even now, there is no need for a setup to start the hub and nodes individually. Once the user starts the server, the Grid automatically functions as both nodes and hub.

3. Relative Locators:

  • Selenium 4 introduced a new set of locators called “Relative Locators” or “Relative By”.
  • Relative Locators provide a more natural way of interacting with elements concerning their surrounding elements, making it easier to write maintainable tests.

There are five locators added in Selenium 4:

  • below(): Web element located below the specified element.
  • toLeftOf(): Target web element present to the left of the specified element.
  • toRightOf(): Target web element presented to the right of the specified element.
  • above(): Web element located above the specified element.
  • near(): Target web element away (approximately 50 pixels) from the specified element.

Note: All the above relative locator methods support the withTagName method.

The below example demonstrates the toLeftOf() and below() locators:

WebElement book = driver.findElement(RelativeLocators.withTagName("li").toLeftOf(By.id("pid1")).below(By.id("pid2")));
String id1 = book.getAttribute("id1");

The below example illustrates the toRightOf() and above() locators:

WebElement book1 =driver.findElement(RelativeLocators.withTagName("li").toRightOf(By.id("pid1")).above(By.id("pid2")));
String id2 = book1.getAttribute("id2");

4. Improved Selenium IDE:

  • Selenium IDE received significant updates with Selenium 4 new features, making it more powerful and versatile for recording and playing back test scenarios.
  • The Selenium IDE has become a browser extension available for Chrome and Firefox.

The features include:

  1. Improved Browser Support:
    • The new version enhances browser support, allowing any browser vendor to seamlessly integrate with the latest Selenium IDE.
  2. CLI Runner Based on NodeJS:
    • The Command Line Interface (CLI) Runner is now built on NodeJS instead of the HTML-based runner.
    • It supports parallel execution, providing a more efficient way to execute tests concurrently.
    • The CLI Runner generates a comprehensive report, detailing the total number of test cases passed and failed, along with the execution time taken.

These improvements in Selenium IDE aim to enhance compatibility with various browsers and provide a more versatile and efficient test execution environment through the CLI Runner based on NodeJS.

5. New Window Handling API:

  • Selenium 4 introduced a new Window interface, providing a more consistent and convenient way to handle browser windows and tabs.
  • if the user wants to access two applications in the same browser, follow the below code
    • driver.get(“https://www.google.com/”);
    • driver.switchTo().newWindow(WindowType.WINDOW);
    • driver.navigate().to(“https://www.bing.com/”);
Set<String> windowHandles = driver.getWindowHandles();
for (String handle : windowHandles) {
    driver.switchTo().window(handle);
    // Perform actions on each window
}

6. Improved DevTools API:

  • Selenium 4 provides enhanced support for interacting with the browser DevTools using the DevTools API.
  • This allows testers to perform advanced browser interactions and access additional information about the browser.

In the new version of Selenium 4, they have made some internal changes in the API. Earlier in Selenium 3, the Chrome driver directly extended the Remote Web Driver class. However, in Selenium 4, the Chrome driver class now extends to the Chromium Driver class.The Chromium Driver class has some predefined methods to access the dev tool, highlighting the new features of Selenium 4.

Note: Chromium Driver extends the Remote Web driver class.

By using the API, we can perform the following operations:

  • Enable Network Offline
  • Enable Network Online
  • Get Console Logs
  • Load Insure Web Site
ChromeDevTools chromeDevTools = ((ChromeDriver) driver).getDevTools();
chromeDevTools.send(Network.enable(Optional.empty(), Optional.empty(), Optional.empty()));

7. Capture screenshot of specific web element:

In Selenium 4, a notable enhancement is the provision to capture a screenshot of a specific web element, which was unavailable in earlier versions. This feature lets users focus on capturing images of individual elements on a webpage, providing more targeted and precise visual information during testing or debugging processes. The capability to take screenshots of specific web elements enhances the flexibility and granularity of testing scenarios, making Selenium 4 a valuable upgrade for web automation tasks. Among the various Selenium 4 features, this improvement stands out for its practical application in detailed web testing.

WebElement item = driver.findElement(By.xpath("//div[@id='divItem ']//img"));
File file = item.getScreenshotAs(OutputType.FILE);
File destFile = new File("item.png");
FileUtils.copyFile(file, destFile);

8. Waits and Timeout in Selenium 4:

In Selenium 4, the parameters received in Waits and Timeout have changed from expecting (long time, TimeUnit unit) to expect (Duration duration) which you see a deprecation message for all tests.

Implicit Wait:-

Before Selenium 4 –

driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);

Now we will see this as deprecated @Deprecated WebDriver.Timeouts implicitlyWait(long time, TimeUnit unit);

After Selenium 4 –

driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));

Same with the other waits like scriptTimeout and pageLoadTimeout :-

driver.manage().timeouts().scriptTimeout(Duration.ofMinutes(2));
driver.manage().timeouts().pageLoadTimeout(Duration.ofSeconds(10));

Explicit Wait:

WebDriverWait is also now expecting a ‘Duration’ instead of a long for timeout in seconds and milliseconds.

The method is now deprecated in selenium public WebDriverWait(@NotNull org.openqa.selenium.WebDriver driver, long timeoutInSeconds)

Before Selenium 4 –

 //Old syntax
 WebDriverWait wait = new WebDriverWait(driver,10);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector(".classlocator")));

After Selenium 4 –

//Selenium 4 syntax
WebDriverWait wait = new WebDriverWait(driver,Duration.ofSeconds(10));
wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector(".classlocator")));

FluentWait –

Before Selenium 4 –

Wait<WebDriver> wait = new FluentWait<WebDriver>(driver)
  .withTimeout(30, TimeUnit.SECONDS)
  .pollingEvery(5, TimeUnit.SECONDS)
  .ignoring(NoSuchElementException.class);

After Selenium 4 –

Wait<WebDriver> fluentWait = new FluentWait<WebDriver>(driver)
        .withTimeout(Duration.ofSeconds(30))
        .pollingEvery(Duration.ofSeconds(5))
        .ignoring(NoSuchElementException.class);

9. Bi-Directional Communication:

  • Selenium 4 introduced better bi-directional communication between Selenium and browser drivers.
  • This allows for more efficient communication, resulting in improved performance and stability.

10. Enhanced Documentation:

  • Selenium 4 comes with improved and updated documentation, making it easier for users to find information and resources related to Selenium.

11. Support for Chrome DevTools Protocol (CDP):

  • Selenium 4 allows users to interact with Chrome DevTools using the Chrome DevTools Protocol directly.

Conclusion:

Selenium 4 marks a substantial leap forward, addressing limitations present in Selenium 3 and introducing new features to meet the evolving needs of web automation. The Relative Locators, enhanced window handling, improved DevTools API, and Grid 4 support make Selenium 4 a powerful and versatile tool for testers and developers in the realm of web testing and automation.

Click here for more blogs on software testing and test automation.

How to handle Web tables using Java and Selenium Webdriver

How to handle Web tables using Java and Selenium Webdriver

by | Jun 25, 2024 | Blog

What are Web Tables?

Web tables, also known as HTML tables, are a widely used format for displaying data on web pages. They allow for a structured representation of information in rows and columns, making it easy to read and manipulate data. Selenium WebDriver, a powerful tool for web browser automation, provides the functionality to interact with these tables programmatically. This capability is beneficial for tasks like web scraping, automated testing, and data validation. In this blog, we will see how to extract data from Web tables in Java-Selenium.

Identify web table from your webpage:

To effectively identify and interact with web tables using Selenium, it’s crucial to understand the HTML structure of tables and the specific tags used. Here’s an overview of the key table-related HTML tags

A typical HTML table consists of several tags that define its structure:

  • <table>: The main container for the table.
  • <thead>: Defines the table header, which contains header rows (<tr>).
  • <tbody>: Contains the table body, which includes the data rows.
  • <tr>: Defines a table row.
  • <th>: Defines a header cell in a table row.
  • <td>: Defines a standard data cell in a table row.

How to Identify Web Tables?

As we have got  an idea of what is Web Table and how to identify WebTables on the webpage, now we will see how to extract the table data.
We will be using “https://www.globalsqa.com/angularJs-protractor/WebTable/”

As a demo website, here you will get a sample WebTable with fields like first name, last name, email, etc. Here we have applied a filter for email to minimize the size of the table.

We will be starting by launching the browser and navigating to the webpage. We have applied a filter for the email “PolGermain@whatever.com”, you can change it as per your requirement.

WebDriverManager.chromedriver().setup();
        WebDriver driver =new ChromeDriver();
        driver.get("https://www.globalsqa.com/angularJs-protractor/WebTable/");
        driver.manage().window().maximize();
        WebElement global_search = driver.findElement(By.xpath("//input[@type='search' and @placeholder='global search']"));
        global_search.sendKeys("PolGermain@whatever.com");
        global_search.sendKeys(Keys.ENTER);

Once we get the filtered data from the table, now we need to locate the table and get the number of rows. The table will have multiple rows so, we need to use a list to store all the rows.

List<WebElement> row =driver.findElements(By.xpath("//table[@class='table table-striped']/tbody/tr"));

As we have stored all the rows in the list, now we need to iterate through each rows to fetch the columns and store the column data in another list.

Example :

Abc1
Xyz2
table has 2 rows and 2 columns

When we are iterating through the 1st row we will get data as Abc and 1 and store it in the list ’as rowdata[Abc, 1] similarly data from the 2nd row will be stored as rowdata[Xyz, 2].When we are iterating through the 2nd row the data from the 1st row will be overwritten.
That’s why we will need one more list ‘webRows ’ to store all the rows.
In the below code snippet, here we are iterating through all the columns from each row one by one and finally storing all the rows in the list WebRows.

List<WebElement> row =driver.findElements(By.xpath("//table[@class='table table-striped']/tbody/tr"));
List<String> rowdata =new ArrayList<>();
        for(int i=0;i<row.size();i++){
            List<List<String>> webRows = new ArrayList<>();
            List<WebElement> values = driver.findElements(By.xpath("//table[@class='table table-striped']/tbody/tr["+(i+1)+"]/td"));
            for(int j=0;j<values.size();j++){
                rowdata.add(values.get(j).getText());
            }
            System.out.println("rowdata--"+rowdata);
            webRows.add(rowdata);
        }

How to access table data with the column index?

We have successfully extracted the table data now you can use this data as per your requirement

To do this we need to iterate through the list ‘webRows’ where we have our table data stored. We will be accessing all the columns by their index. In this case, you should know the column index you want to access.  The column index always starts from 0.

for (int s = 0; s < webRows.size(); s++) {
	List<String> row = webRows.get(s);
	System.out.println(row.get(1)); 
        System.out.println(row);
        }

Below is the complete code snippet for the above-mentioned steps. You need to update related Xpaths in case you are not able to access the rows and columns with the given Xpaths.

package Selenium;

import io.github.bonigarcia.wdm.WebDriverManager;
import org.openqa.selenium.*;
import org.openqa.selenium.chrome.ChromeDriver;

import java.util.ArrayList;
import java.util.List;

public class Webtable {
    public static void main(String[] args) throws InterruptedException {
        WebDriverManager.chromedriver().setup();
        WebDriver driver =new ChromeDriver();
        driver.get("https://www.globalsqa.com/angularJs-protractor/WebTable/");
        driver.manage().window().maximize();
        WebElement global_search = driver.findElement(By.xpath("//input[@type='search' and @placeholder='global search']"));
        global_search.sendKeys("PolGermain@whatever.com");
        //global_search.sendKeys("Pol");
        global_search.sendKeys(Keys.ENTER);
        Thread.sleep(3000);
        List<WebElement> row =driver.findElements(By.xpath("//table[@class='table table-striped']/tbody/tr"));
        List<List<String>> webRows = new ArrayList<>();
        for(int i=0;i<row.size();i++){

            List<String> rowdata =new ArrayList<>();
            List<WebElement> values = driver.findElements(By.xpath("//table[@class='table table-striped']/tbody/tr["+(i+1)+"]/td"));
            for(int j=0;j<values.size();j++){
                rowdata.add(values.get(j).getText());
            }
            webRows.add(rowdata);
        }

        for (int s = 0; s < webRows.size(); s++) {
            List<String> row1 = webRows.get(s);
            System.out.println(row1);
            System.out.println(row1.get(1));
        }
    }
}
web tables in selenium

When you execute the above code, you will get output in the below format

[Pol, Germain, 49, PolGermain@whatever.com, 1020.1597184937436]
Germain
[Pol, Germain, 62, PolGermain@whatever.com, 911.4520444579008]
Germain
[Pol, Germain, 10, PolGermain@whatever.com, 2809.911328973954]
Germain

Instead of accessing data by the index, you can access it using the column index also, and to do that you need to use the HashMaps instead of lists. HashMap will help to store column headers as keys and column data as values

Example:

NameId
Abc1
Xyz2
Table has 3 rows and 2 columns

Here Name and ID will be your keys and Abc, 1 and Xyz, 2 will be the values.

How to store and access table data using HashMap?

The code snippet below shows how to use HashMap to store data in key-value format.

package Selenium;

import io.github.bonigarcia.wdm.WebDriverManager;
import org.openqa.selenium.*;
import org.openqa.selenium.chrome.ChromeDriver;

import java.util.ArrayList;
import java.util.List;

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

        WebDriverManager.chromedriver().setup();
        WebDriver driver = new ChromeDriver();
        driver.get("https://www.globalsqa.com/angularJs-protractor/WebTable/");
        driver.manage().window().maximize();
        WebElement global_search = driver.findElement(By.xpath("//input[@type='search' and @placeholder='global search']"));
        global_search.sendKeys("PolGermain@whatever.com");
//        global_search.sendKeys("Pol");
        global_search.sendKeys(Keys.ENTER);
        Thread.sleep(5000);
        List<WebElement> rows = driver.findElements(By.xpath("//table[@class='table table-striped']/tbody/tr"));
        System.out.println("size-"+rows.size());
        List<Map<String, String>> webRows = new ArrayList<>();
        for (int i = 0; i < rows.size(); i++) {
            List<WebElement> keys = driver.findElements(By.xpath("//table[@class='table table-striped']/thead/tr[1]/th"));
            List<WebElement> values = driver.findElements(By.xpath("//table[@class='table table-striped']/tbody/tr["+(i+1)+"]/td"));
            Map<String, String> webColumn = new HashMap<>();
            try {
                for (int j = 0; i < keys.size(); j++) {
                    webColumn.put(keys.get(j).getText(), values.get(j).getText());
                }
            } catch (Exception e) {
            }
            webRows.add(webColumn);
        }

        for (int s = 0; s < webRows.size(); s++) {
            System.out.println(webRows.get(s).get("lastName"));
            System.out.println(webRows.get(s));
        }
}
}
web tables in selenium

Output-

size-4
Germain
{firstName=Pol, lastName=Germain, balance=1527.3558523201625, age=28, email=PolGermain@whatever.com}
Germain
{firstName=Pol, lastName=Germain, balance=250.18122282042322, age=20, email=PolGermain@whatever.com}
Germain
{firstName=Pol, lastName=Germain, balance=274.9486946306141, age=3, email=PolGermain@whatever.com}
Germain
{firstName=Pol, lastName=Germain, balance=1176.6629976866143, age=10, email=PolGermain@whatever.com}

Refer to the following GitHub repository for How to automate web tables in Java-Selenium.
https://github.com/priyanka1970/WebTables_with_Java_Selenium

Conclusion-

In this blog, we’ve delved into the powerful capabilities of Selenium WebDriver for handling web tables in Java. WebTables are a crucial part of web applications, often used to display large amounts of data in an organized manner. In Java Selenium, handling these WebTables efficiently is a key skill for any test automation engineer. Throughout this blog, we’ve explored various techniques to interact with WebTables, including locating tables, accessing rows and cells, iterating through table data, and performing actions like sorting and filtering.

Click here for more blogs on software testing and test automation.