Element Locating for Selenium Automation Test with WEB App

It is well-known that XPATH is the most popular way to locate an element within a web page for selenium automation test, as shown below:

Besides XPATH, there are other ways to locate elements and the locating process could be more efficient by combination of these methods, like ID, CLASS, CSS, NAME, etc. When the whole component/area’s position is changed within a page, or this component is placed into another page, you do not need to change xpath of every element inside this component, just change the parent node’s path. Components are frequently used in AEM project. Each web page is consisted of various components.

This article aims at introduction of how to locate an element by using CSS mode.

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

Every element or node is related to other elements within a web page, including parent node, sibling nodes, child nodes, etc. it could be an efficient way to locate an element by locating its relating nodes, like parent node first.

Here we take an example. We split pages into various areas or components. Parent node identifies the start of a component.

As shown above, we want to locate “submitBtn” element within “componenttest section”, <div class=”componenttest section” shows start of this component or area.

First we find the parent node by CSS componentCss. Then we will find the submit button with Id info under these div elements. If this component is put into another web page, all that we need to update is the parent node of this component.