Skip to main content

Development

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.

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.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Categories
Follow Us
TwitterLinkedinFacebookYoutubeInstagram