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.
Choosing a Global Software Development Partner to Accelerate Your Digital Strategy
To be successful and outpace the competition, you need a software development partner that excels in exactly the type of digital projects you are now faced with accelerating, and in the most cost effective and optimized way possible.
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.