top of page
hand-businesswoman-touching-hand-artificial-intelligence-meaning-technology-connection-go-

Tracking static,dynamic web element location along with an overview of complex user interaction.

XPath in Selenium


XPath, also known as XML Path, is one of the most commonly used locators in Selenium WebDriver that can help you navigate through the HTML structure of a page.While other locators in Selenium that search for elements using tags or CSS class names are more straightforward, they may not be sufficient to select all DOM elements of an HTML document.XPath provides an option to dynamically search for an element within a web page, thus giving sufficient flexibility to tweak a locator to one’s advantage.


Xpath Syntax :

Syntax = //tagname[@attribute=’Value‘]

  • // : Select current node.

  • Tagname: Tagname of the particular node.

  • @: Select attribute.

  • Attribute: Attribute name of the node.

  • Value: Value of the attribute


Different type of Xpath locators

​Xpath Locators

Find different elements on WebPage

Id

​To find element by Id

class name

To find element by class name

name

To find element by name

linktext

To find element by linktext

xpath

To find a dynamic element by traversing between various elements on a webpage

csspath

It locates an element having no class name, name and Id.

Types of X-path

There are two types of XPath:

Absolute XPath , Relative XPath

Absolute XPath:

It is the direct way to find the element, but the disadvantage of the absolute XPath is that if there are any changes made in the path of the element then that XPath gets failed.It starts with a single slash “/” which means starting to search from the root node.

Example : Absolute Xpath for google search box with snapshot

/html[1]/body[1]/div[1]/div[3]/form[1]/div[1]/div[1]/div[1]/div[1]/div[2]/input[1]

Relative Xpath:

It starts from the middle of HTML DOM structure. It starts with double forward slash (//). It can search elements anywhere on the webpage, means no need to write a long xpath and you can start from the middle of HTML DOM structure. Relative Xpath is always preferred as it is not a complete path from the root element.



How to locate a web element which changes dynamically on refresh or any other operations?


XPath axes search different nodes in XML document from current context node. XPath Axes are the methods used to find dynamic elements, which otherwise not possible by normal XPath method having no ID , Classname, and name.Axes methods are used to find those elements, which dynamically change on refresh or any other operations. There are few axes methods commonly used in Selenium Web driver like child, parent, ancestor, sibling, preceding and self.


Let's have a walkthrough about different methods available for writing XPath.


Basic XPath:

XPath expression select nodes or list of nodes on the basis of attributes like Id , name, class name, type and value.

Below Xpath directs to opening gmail in the google homepage,


//a[@aria-label='Gmail (opens a new tab)']




Some XPath methods working model with syntax

Xpath

Explanation

Xpath method

Xpath=//*[contains(@name,'btn')]

complete value might be btnlogin bit only partial values are used

Contains()-The contain feature has an ability to find the element with partial text

Xpath=//*[contains(text(),'submit')]

​It will search for the text submit

​Contains()-The contain feature has an ability to find the element with the specified text

​Xpath=//*[contains(@href,'gmail.com')]

​It will search for the hyper link "gmail.com"

Contains()-The contain feature has an ability to find the element with the specified hyperlink

Xpath=//*[@type='submit' or @name='btnReset']


​It will find the element either with attribute type or name

Logical operator selection using "OR" : OR expression, two conditions are used, whether 1st condition OR 2nd condition should be true.

​Xpath=//input[@type='submit' and @name='btnLogin']


It will find the element only if both attributes type and name are getting matched.

Logical operator selection using "AND" : AND expression, two conditions are used, whether 1st condition and 2nd condition should be true.

Xpath=//label[starts-with(@id,'message')]

finds those element whose ‘ID’ starting with ‘message’.

Starts-with-function used for finding the web element whose attribute value gets changed on refresh or by other dynamic operations or static on the webpage.

Xpath=//td[text()='UserID']


​finds the element with text “UserID”

Text() Function is a built-in function of selenium webdriver which is used to locate elements based on exact text or set of text (must be in string form)of a web element.

​Xpath=//*[@id='rt-feature']//parent::div​

finds all the related parent elements of the current node.

Parent axes method will Selects the parent of the current node

​Xpath=//*[@id='rt-feature']//parent::div[1]

finds the immediate parent of the current node

Parent axes method will Select the immediate parent of the current node

​Xpath=//*[@id='java_technologies']//child::li


finds all the related children of the current node

Child axes method will select all the children elements of the current node

​Xpath=//*[@id='java_technologies']//child::li[1]


finds the immediate child element of the current node

Child axes method will select the child element of the current node

​Xpath=//*[@type='submit']//preceding::input

finds all the element preceding input node

Preceding axes method selects all nodes that come before the current node

Xpath=//*[@type='submit']//preceding::input[1]


finds the element preceding input node with the specified index

Preceding axes method focus on any particular element in the specified index

Xpath=//*[@type='text']//following::input


finds all the following element of the input node

Following axes method selects all the following nodes of the current node

Xpath=//*[@type='text']//following::input[1]


finds the element following input node with the specified index

Following axes method selects the following node of the current node in the specified index

Xpath=//*[text()='Enterprise Testing']//ancestor::div


finds the immediate ancestor of the current node

Ancestor axes method selects all ancestors element (grandparent, parent) of the current node.


Xpath=//*[text()='Enterprise Testing']//ancestor::div[1]


finds the ancestor of the current node with the specified index

Ancestor axes method selects ancestors element (grandparent, parent) of the current node in the specified index


​xpath=//*[@type='submit']//following-sibling::input


finds the following sibling of the current node input

Following-sibling axes method selects the following sibling which are at the same level of the current node

Xpath=//*[@id='rt-feature']//descendant::a


finds all the descendants of the current node a

Descendant method identifies all the descendants to current element which means down under the node

​Xpath=//*[@id='rt-feature']//descendant::a[1]


finds the descendant of the current node with the specified index

Descendant method identifies the specified index descendants to current element which means down under the node

Xpath =//*[@type='password']//self::input


finds only one node input which satisfies the constraint.

Self method finds only one node as it represents self-element.


Conclusion :

XPath is required to find an element on the web page as to do an operation on that particular element which has been categorized as absolute and relative Xpath.Mostly relative xpath are used to a dynamically changing and static element in the webpage.Again in the relative Xpath expression and axes methods are used based on the complexity of web element location.


CSS Selectors

Introduction


Selenium offers various ways to find web elements using attributes such as id, name, className, etc. But sometimes, while working with a dynamic environment, it is impossible to locate a web element using a simple attribute locator. In such unyielding situations, Selenium comes to rescue with CSS or Cascading style sheets Selectors.


What are CSS Selectors?


CSS Selectors are one of the locator strategies offered by Selenium to identify the web elements. The CSS Selectors mainly use the character sequence pattern, which identifies the web elements based on their HTML structure. Locating an element using CSS selector may seem a little difficult than using attributes like id, name, link, etc. but it’s one of the most efficient strategies to locate dynamic elements that don’t have consistent HTML attributes.


Why CSS Selectors?


Locating an element on the web page can be challenging, especially in the current scenarios, where every other web page is dynamically programmed and creates/renders the web elements on a need basis dynamically. It makes finding a unique static attribute for a dynamic element quite tricky. As most of the time, these elements don’t have consistent attribute values. Hence directly using locators like id, name, link, partial link, etc. will not be possible.It can also identify elements that don’t have constant attribute values, so it becomes the first choice for all the automation developers. Also, as its more close to the code, it's considered as one of the fastest ways to locate elements on web page.


How to create a CSS Selector?


CSS Selector syntax is quite similar to the XPath syntax. It can be represented syntactically as follows,


Syntax : node[attribute_name = ‘attribute_value’] where,

  1. node is the tag name of the HTML element, which needs to locate.

  2. attribute_name is the name of the attribute which can locate the element.

  3. attribute_value is the value of the attribute, which can locate the element

Different ways to create CSS Selectors?

  1. Tag and ID

  2. Tag and class

  3. Tag and attribute

  4. substring

  5. Combining attribute


​CSS Selector

Syntax

Description

​#id

input[id='firstName'] ​input#firstName

Locates the element with id='firstName'

​.class

​textarea[class='form-control'] textarea.form-control

Locates the element with class ='form-control'

​Other Attributes

textarea[placeholder='Current Address']

​Locates the element with placeholder as current Address

​Multiple CSS selector combination

textarea.form-control[placeholder='Current Address']

​Locates the element combining class and placeholder attribute.

​Parent_locator > child_locator Direct Parent child

​div>textarea[placeholder='Current Address']

Locates the element with parent locator div and child locator textarea

​Parent CSS locator > Child HTML tag : nth-of-type(index) Parent child Hierarchy

​select#oldSelectMenu>option:nth-of-type(2)

It can be extended to the sub child also by adding another “> ” followed by another locator.find the 2nd child element of the unordered list(ul)

​By starting text of a string is: ‘^’

​input[id^='userN']

​ value of the id attribute in the HTML is “userName”.

​By ending text of a string is: ‘$’

​input[id$='ame']

​id attribute whose value is “username ”

​By contains the text: ‘’*

​input[id*='erNa']

middle characters of the id attribute value "username"

By inner text

​​input:contains(" bloggers")

​It will identify all bloggers with a similar input tag.

Conclusion :


CSS selectors are one of the most powerful tools offered by Selenium for recognizing elements in a web page. CSS selectors are faster, reliable, and require less maintenance andecognize the element present in a dynamic web environment that doesn’t have uniquely recognizable attribute value.Also combine several different CSS expression, attributes and text to accurately points to the required element.


Handling Action class in Selenium


Introduction :

Actions class is an ability provided by Selenium for handling keyboard and mouse events. In Selenium Webdriver handling these events includes operations such as drag and drop selenium ,clicking on multiple elements with the control key, among others. These operations are performed using the advanced user interactions API. It mainly consists of Actions that are needed while performing these operations with the syntax mentioned below,

Actions action = new Actions(driver);


action.moveToElement(element).click().perform();

What is the difference between Actions Class and Action Class in Selenium?


With the above explanations of Actions Class & Action Class, we can now conclude that Actions is a class that is based on a builder design pattern. This is a user-facing API for emulating complex user gestures.

Whereas Action is an Interface which represents a single user-interaction action. It contains one of the most widely used methods perform().keyDown(): Performs keypress without release


1.Import package:


Actions class & Action class reside in org.openqa.selenium.Interactions package of WebDriver API. To consume these, import their packages:

import org.openqa.selenium.interactions.Actions;


2Instantiate Actions class:


Actions class object is needed to invoke to use its methods. So, let’s instantiate Actions class, and as the Class signature says, it needs the WebDriver object to initiate its class.

Actions actions = new Actions(web driver object);


3. Generate actions sequence: Complex action is a sequence of multiple actions like in this case sequence of steps are:

  • Pressing Shift Key

  • Sending desired text

  • Releasing Shift key

For these actions, Actions class provides methods like:

  • Pressing Shift Key : Actions Class Method => keyDown

  • Sending desired text : Actions Class Method => sendKeys

  • Releasing Shift key : Actions Class Method => keyUp

The keyDown method performs a modifier key press after focusing on an element, whereas keyUp method releases a modifier key pressed.

A modifier key is a key that modifies the action of another key when the two are pressed together like Shift, Control & Alt.

Generate a sequence of these actions but these actions are performed on a webElement. So, let’s find the web-element and generate the sequence:


WebElement element = driver.findElement(By strategy to identify element);

actions.keyDown(element, Keys.SHIFT);

actions.sendKeys("TextToBeConvertAndSendInUpperCase");

actions.keyUp(Keys.SHIFT);

actions.keyDown(element, Keys.SHIFT).sendKeys("TextToBeConvertAndSendInUpperCase").keyUp(Keys.SHIFT);


4. Build the actions sequence:

Now, build this sequence using the build() method of Actions class and get the composite action. Build method generates a composite action containing all actions so far which are ready to be performed.

Action action = actions.build();

5. Perform actions sequence: And finally, perform the actions sequence using perform() method of Action Interface.

action.perform();


Different Methods for performing Keyboard Events:


  1. keyDown(modifier key): Performs a modifier key press.

  2. sendKeys(keys to send ): Sends keys to the active web element.

  3. keyUp(modifier key): Performs a modifier key release.


Different Methods for performing Mouse Events:

  1. click(): Clicks at the current mouse location.

  2. doubleClick(): Performs a double-click at the current mouse location.

  3. contextClick() : Performs a context-click at middle of the given element.

  4. clickAndHold(): Clicks (without releasing) in the middle of the given element.

  5. dragAndDrop(source, target): Click-and-hold at the location of the source element, moves to the location of the target element

  6. dragAndDropBy(source, xOffset, yOffset): Click-and-hold at the location of the source element, moves by a given offset

  7. moveByOffset(x-offset, y-offset): Moves the mouse from its current position (or 0,0) by the given offset

  8. moveToElement(toElement): Moves the mouse to the middle of the element

  9. release(): Releases the depressed left mouse button at the current mouse location

Conclusion :


Provides an overview about the various Action class methods.







553 views0 comments

Recent Posts

See All

Comments

Rated 0 out of 5 stars.
No ratings yet

Add a rating
bottom of page