Introduction to Advanced Selenium Techniques

In web automation testing, advanced Selenium techniques are essential to tackle the challenges posed by Dynamic web applications. These techniques empower testers to locate dynamic Elements, implement effective waiting strategies, interact with dynamic pop-ups, work within frames, extract dynamic data, and employ advanced methods like JavaScript execution and handling AJAX requests. This comprehensive guide delves into these advanced techniques, equipping testers to navigate the intricacies of modern web applications.

Table of Contents

• Introduction
• Locating Dynamic Elements
• Waiting Strategies
• Interacting with Dynamic Popups
• Working with Frames
• Dynamic Data Extraction
• Advanced Selenium Techniques

Key Takeaways

• Utilize XPath and CSS Selectors with Wildcards for dynamic element identification.
• Apply regular expressions in locators to match and interact with changing attributes.
• Implement Explicit Waits for precise element synchronization.
• Handle various pop-up alerts and dialogs and manage pop-up browser windows effectively.

Locating Dynamic Elements

The web application is dynamic, i.e., whenever the database returns a value, elements of applications change its value. In other words, a Web developer cannot fix a value; it changes according to some actions taken. Such a changing nature of applications can reduce the precision level of automated testing. Hence, to eliminate this issue and handle its dynamic nature, different techniques are implemented:

XPath

XPath is an XML path Language or syntax used for locating any element on a web page in HTML and XML documents using HTML DOM Structure. Using an asterisk (*) that matches any element in documents is called a wildcard. To create any Dynamic Locators, wildcards and functions are used:

Example:

Consider a Navigation bar on a webpage with navigation links, buttons, and an image logo:

Consider this HTML code for the navigation links

 Home 
 Products
 Services

Let’s locate a navigation link with dynamic className using XPath wildcard:

Initially, we use the start-with() function

Our XPath will be:

//link[starts-with(@className, 'nav-link')]

Explanation:

• //link: Detects any tag that is a ‘link’ tag on our webpage.
• [starts-with(@className, ‘nav-link’)]: Conditions are stated in a square bracket; here, the condition is to verify that the ‘className’ attribute of the ‘link’ element initiates with ‘nav-link’

XPath Using Wildcard:

Asterisk (*): It will detect any element in the web page regardless of its name or attribute

Example:

[//*(@className, 'nav-link')]

It will select all the elements with the attribute name ‘nav-link’

Here, //* selects all the nav-link

Contain function: It will select an element with a specific value while automation testing.

Example:

//*[contain(@className,'nav-link')]

Here, the contain function will check which element contains className as nav-link

CSS Selector

For handling the dynamic nature of a web page, CSS selector plays a crucial role in locating, interacting, and styling any HTML element in our web page. HTML attributes such as tag names, IDs, and Classes are used to select and classify HTML elements. Hence, CSS selectors help us to get a very effective and optimal way to locate elements without any attributes and XPath.

One of the most effective features of a selector is the wildcard, which enables us to target elements based on the partial value of the attribute, where we have only the specific pattern of the required elements, hence allowing us to the precise test script.

Example:

1. Prefix (^) wildcard selector: Select an element where the attribute value starts with a specific pattern

Syntax:

element[attribute_value^='specific_pattern']

Example:

From the above example, Let us consider we have three buttons: sign-in, login, and reset button, and we want to select a button with a specific type, ‘submit’:

Sign-in
Login
Reset
button[type^='submit']

It will select a button with the specific type ‘submit’

2. Suffix($) wildcard selector: Select an element where the attribute value ends with a specific pattern.

Syntax:

element[attribute_value$='specific_pattern']

Example:

From the same example, consider we want to select an image by targeting its suffix:

Consider this HTML code for the image source

img[src$ = ".png"]

It will select an element with a .png suffix.

Handling Elements with Changing Attributes

The most challenging task is dealing with web pages’ changing properties and dynamic nature, as they dynamically generate different attribute values and content during runtime. While working with selenium, the following strategies have been implemented for designing precise test scripts:

1. Absolute Path method: This method gives the exact path from its root element to all its parent elements to the target element. It is a precise method, but any change in HTML during runtime can break the XPath
2. Relative XPath: We can use relative XPATH using the contain() or start_with () function for finding relative or partial value when we don’t know the exact path of the element.
3. Finding by Index: we can locate elements by using the index number
4. Use multiple attributes to locate an element: We can give more than one attribute to find a specific element

Regular Expressions in Locators

As we know, web elements are dynamic and change during runtime, so here, regular expressions (regex) are used in locater to select and communicate with these changing elements. Using specific patterns, regex can be used for locating, searching, and validating web elements.

By creating an XPath expression, we can integrate regular expressions to classify dynamic HTML elements. Some ways of using regex in locators:

Using the ‘re’ module in Python:

Python ‘re’ module can be used for performing regular expression search on attribute values, initialize by importing ‘re’ module which allows regular expression operations in python. Now create a regex pattern that matches the attribute value we want to target and then create an XPath pattern that matches the attribute value using regular expression. Here, we can use functions like ‘matches()’ for precise value and ‘contains()’ for partial value.

Example:

Regular expression:

Reg_exp=r "nav-link"

XPath expression:

XPath_exp = f"//link[matches(@className, { Reg_exp })]"
XPath_exp = f"//link[contain(@className, { Reg_exp })]"

Locating element:

find_element =driver.find_element(Xpath_exp)
find_element.open()

We can also use logical operators like AND and OR for combining attribute values.

Waiting Strategies

Waiting strategies are part of the automation test script, which waits for the web application to complete its specific action. Then, the script will perform its automation test to derive proper test results.

1. Explicit waits

In an explicit wait, the test script waits for a specific event to appear first and then proceeds. This helps in making automation credible and minimizing errors. So basically, explicit waits are a green signal to proceed with test scripts.

Let us ease the concept using the following Python code structure:

1. Some prerequisite = import required module

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as expected_condition

2. Define the web driver and open a website

driver.get('https://WebPage.com')

3. Now we will define a 15 sec waiting period

Wait = WebDriverWait(driver, 15)

4. Waiting for an element by identifying the element using the id

item_id = 'click-button'
Item = wait.until( expected_condition.item_to_click((By.ID , item_id)))

5. Take the desired action and quit Webdriver

Item.click()
driver.quit()

2. Implicit waits

Implicit waits are more or less similar to explicit waits. Still, the difference is that explicit waits are applied to specific conditions, “expected_condition” and implicit wait works on a global level. Hence, our use case of implicit and explicit differs.

1. Import required module

2. Define a 15-second wait.

driver.implicit_wait(15)

3. Define the web driver and open a web page.

driver.get("https://WebPage.com")

4. Identifying the element and performing an action

Item = driver.item_to_click("item_id")
Item.click()

Here, we apply the waiting logic on a global application level such that all elements are affected. Hence, the amount of code is saved because there is no need to apply logic for all elements separately.

The only matter here is, Execution time increases since all elements are affected, and we can control a specific condition or element.

3. Fluent Waits

This is the most advanced technique in the Waiting strategy. It allows us to wait for a definite time and specific conditions to be met.

• Polling Frequency: Here, we can define how many intervals selenium should check desired conditions in the waiting period.
• Timeout: Set Max time for the waiting period.
• Define desired conditions: We can define custom conditions for which selenium should wait.
• Avoiding Exceptions: We can avoid exceptions during the waiting period.

The code example in Python:

1. Some prerequisite = import required module

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support.ui import FluentWait
from selenium.webdriver.support import expected_conditions as expected_condition
from selenium.common.exceptions import TimeoutException

2. Define the web driver and open a website

driver.get('https://WebPage.com')

3. Define a fluent wait with condition

my_fluent_wait = FluentWait(driver, timeout=30, poll_frequency=2, ignored_exceptions=[TimeoutException])

4. Define the waiting condition for an item

fluent_condition = expected_condition.presence_of_item ((By.ID, "item_id"))

5. Wait for the condition and perform actions on the element after the condition is met

try:
    Item = my_fluent_wait.until(fluent_condition)
    Item.click()
except TimeoutException:
    print("Item not found.")
driver.quit()

Interacting with Dynamic Popups

Popups are web application elements that appear when performing specific actions, like button click notifications. Popups contain many dynamic elements within themselves, like popup forms may have text fields, dropdown buttons, or popup notification messages, which may contain success or failure messages depending upon the situation. To interact with these popup elements,

• We need to identify the elements using XPath, CSS selectors,
• Waits – We need to wait to load complete data and popup elements.

Handling Alerts and dialogs

• Switch to alert: Code to switch to alert in JS alerts: driver.switchTo().alert()
• Accept or Dismiss: In a popup, generally, there are two buttons at the button, i.e,. “OK” and “Cancel”. Use the accept() function when clicking “OK” and the dismiss() function when clicking “Cancel”.
• Insert Data: If the popup contains items like the text field, use sendKeys() to Insert data.

Managing popup windows

• Window handle: Suppose more than one window is open; we can use the getWindowHandles() function to manage between multiple windows, and we can redirect to a particular window by using switchTo().window(handle)
• Close window: To close a window, apply close() function.
• Quit window: If the user wants to exit an entire session, apply the quit() function.
• Window title: Verify the correct window by its Title name.
• Window URL: Verify the desired window by its URL.

The above methods come in handy during switching between Windows.

Working with Frames

To understand the role of selenium with web frames, we need to understand what frames are. Frames are HTML pages or HTML documents; different frames can be part of a single web application. So now, if we want to redirect from one frame to another, selenium offers a few methods by which switching between frames is possible.

1. Redirect to a frame by verifying its id/name:

driver.switch_to.frame(frame_identity)

Here, frame identity can be the frame’s name or frame having a unique ID.

2. Redirect to a frame by locating its Index number:

Index, in simple words, is the frame’s position, and the index number starts with 0.

driver.switch_to.frame(frame_index)

3. Redirect back to the initial frame:

driver.switch_to.default_content()

Handling elements inside the frame

Interacting with elements of the particular frame – Once we enter a frame, there are different HTML tags for that specific frame. So, how do we communicate with those elements?

1. Simple clicking on the element: First, we must redirect to the required frame using any of the above methods. Once we are there, find the desired element by its id.

desired_element = driver.find_element(By.ID , "element_id")

Once you have identified the element, Click on it.

desired_element.click()

Remember to switch back to the default frame after completing the operations.

2. Interacting with form elements: Every web application has to have a form that has text fields, dropdowns, Radio buttons, switches, etc., and a cancel and submit button.

Fill out the above form elements. Let us consider a text field of Full name.

Locate the text field using the find by id method and enter your full name using the text.t

field.send_keys()

After completion of the operations, redirect to the original frame.

Dynamic Data Extraction

When web applications are developed, the Values of elements are of two types, i.e. static and dynamic. Static elements are non-changeable, irrespective of user actions. But dynamic values do change.

Let us ease the dynamic nature with a user action. A web page has a dropdown and specific values are displayed below. As soon as the value of the dropdown changes, the displayed value will also change. To capture such type of fluctuating data, we need a few steps.

1. Locate the Element using the selenium technique, which contains the dynamic data

Item= driver.find_item(By.id("dynamic_item"))

2. Wait and then capture the dynamic data

wait = WebDriverWait(driver, 15)
wait.until(expected_condition.available_item(item))

3. To capture the data from the HTML element, use the right method, like element.ext() to get the text content or element.attribute() to capture the attribute value

data = item.text

4. Validate the data(item) against the expected value

assert "Expected data" == data

Data validation for Dynamic elements

1. Compare with expected Data: In our case, the data of the element is stored in expected data

Assert "expected data" == data

In this way, we can know the accuracy of the captured Data.

2. Retry strategies: Retry strategies are those methods that come into action when an intermediate failure occurs. So, the operations start repeatedly until it’s completed without any failure. Web applications sometimes fail due to errors, network issues, browser issues, etc. In such cases, the automation operation starts again in case of failure and repeats itself repeatedly until it is completed.

3. Logging and Reporting: Logging is data collected while performing an automation task on the web app. This data consists of errors, main points, values, etc.

Reporting is a way of presenting the collected Log. You can present it as tables, graphs, and charts. In this way, the log can be easier to understand.

Advanced Selenium Techniques

At times, it becomes complicated to deal with dynamic elements or elements whose value changes dynamically. To deal with such complications, a few methods come into action. These techniques are used where web applications are developed using JavaScript.

1. JavaScript Executor

Let’s ease it with an example.

Suppose we want to change the value of a p tag (

). The text (string data type) in the tag is derived dynamically. We can change this by using a JavaScript executor.

WebElement element = driver.findElement(By.id("elementId"));
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].value = 'text updated'", element);

In the above, we have changed the value of the p tag to “text updated “using JavaScript Executor.

2. Handling AJAX Requests

Ajax (Asynchronous JavaScript and XML) is a method used to make database calls to fetch data. In Ajax API calls, data is fetched, preventing the entire application from loading. So, for automation, we need to wait for the API calls to complete and data to be loaded. Let’s grasp the concept using the below scenario.

Consider the functionality of the web app, where we must click on a button after the Ajax API calls and load their data.

We initiate an Ajax call and wait for it to complete and load the data.

wait = WebDriverWait(driver , 10)

After loading the data, we identify the desired element by its id. We can check for a successful text like (“API call completed successfully “if identified). In this way, we await the completion of the Ajax calls and the successful loading of dynamic data, enabling our automation script to interact with the data.

3. Dynamic element identifying strategies

Dynamic elements are those that change mostly based on user action, like database calls to load data. So, it is crucial to identify such elements so that our automation interacts with them properly to give accurate results. We can detect such elements by following the ways

1. CSS selectors: By giving those elements id or className
2. Building XPath
3. regex: These patterns, which incorporate letters, numbers, and special characters like “#a34G*”, can match partial attributes of elements.

Conclusion – Advanced Selenium Techniques

Advanced Selenium Techniques empower testers to effectively automate web application testing, even in the face of dynamic elements, pop-up dialogs, and complex frames. These techniques, including precise element location, waiting strategies, and dynamic data extraction, enhance the reliability and accuracy of web automation, making Selenium an invaluable tool for modern software testing. With the ability to handle dynamic elements and complex scenarios, Selenium continues to be a cornerstone of web testing in software development.

Recommended Articles

We hope that this EDUCBA information on “Advanced Selenium Techniques” was beneficial to you. You can view EDUCBA’s recommended articles for more information.

1. Selenium Maven Dependency
2. Selenium User-Agent
3. JMeter with Selenium
4. Selenium with TestNG

The post Advanced Selenium Techniques appeared first on EDUCBA.