_edited_edited.png)
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,
node is the tag name of the HTML element, which needs to locate.
attribute_name is the name of the attribute which can locate the element.
attribute_value is the value of the attribute, which can locate the element
Different ways to create CSS Selectors?
Tag and ID
Tag and class
Tag and attribute
substring
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:
keyDown(modifier key): Performs a modifier key press.
sendKeys(keys to send ): Sends keys to the active web element.
keyUp(modifier key): Performs a modifier key release.
Different Methods for performing Mouse Events:
click(): Clicks at the current mouse location.
doubleClick(): Performs a double-click at the current mouse location.
contextClick() : Performs a context-click at middle of the given element.
clickAndHold(): Clicks (without releasing) in the middle of the given element.
dragAndDrop(source, target): Click-and-hold at the location of the source element, moves to the location of the target element
dragAndDropBy(source, xOffset, yOffset): Click-and-hold at the location of the source element, moves by a given offset
moveByOffset(x-offset, y-offset): Moves the mouse from its current position (or 0,0) by the given offset
moveToElement(toElement): Moves the mouse to the middle of the element
release(): Releases the depressed left mouse button at the current mouse location
Conclusion :
Provides an overview about the various Action class methods.
Comments