Showing posts with label Best Explanation of Selenium Locators with Examples. Show all posts
Showing posts with label Best Explanation of Selenium Locators with Examples. Show all posts

Thursday, April 16, 2020

Selenium Locators - CSS Selector

What is CSS Selector?

CSS selector is the method to locate element based on pattern of CSS (Cascading Style Sheets) used in HTML structure of web page.

It's simple string pattern to identify the web element based on CSS attributes.

What is CSS?

CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media.

Different Types of CSS Selector Locators

1> Tag and ID: # Sign used to Represent ID in CSS Selector locator.

CSS Syntax: <HTML tag><#><Value of ID attribute>

The First name text box has an ID attribute whose value is defined as “Fname”. Thus ID attribute and its value can be used to create CSS Selector to access the first name textbox.


Example: input#fname


2> Tag and Class: . Sign used to Represent ID in CSS Selector locator.

CSS Syntax: <HTML tag><.><Value of ID attribute>

The Div has an Class name attribute whose value is defined as “dRYYxd”. Thus Class name attribute and its value can be used to create CSS Selector to access the that Div.



Example: div.dRYYxd

3> Tag and Attribute: Normal syntax we need to follow to match attribute name and value as below.

CSS Syntax: <HTML tag><[attribute=Value of attribute]>

The password text box have different attributes value and we are using the combination as we did in xpath to match with attribute name = attribute value to locate the password field.


Example: input[id=pass]


4> Tag, Class & Attribute: Here we are using multiple objects to locate the element.

CSS Syntax: <HTML tag><.>ClassName<[attribute=Value of attribute]>

The search box have class name and attribute details as show in screenshot and we use combination as below to locate the same.



Example: input.gLFyf gsfi[title=Search]

Sub-String Matches Method

In CSS Selector also we can use string information to locate the element like we do on advance XPath methods. Using below methods we can handle dynamic elements on web page.


1> Starts-with (^): Represents the starting text in a string.

CSS Syntax: <HTML Tag>[<AttributeName> ^ = <AttributeValue>]

As per below screenshot we have to select Password field which have name start with word 'Pass', so we can locate it as below CSS Selector.



Example: input[name^=pass]


2> End-with ($): Represents the ending text in a string.


CSS Syntax: <HTML Tag>[<AttributeName> $ = <AttributeValue>]

As per below screenshot we have to select Password field which have end with word 'word', so we can locate it as below CSS Selector.



Example: input[name$=word]


3> Contains (*): Represents the sub string in a string.


 CSS Syntax: <HTML Tag>[<AttributeName> * = <AttributeValue>]

As per below screenshot we have to select Password field which contains sub string word 'ss', so we can locate it as below CSS Selector.


Example: input[name*=ss]


By at No comments:
Labels: , , , ,

Wednesday, April 15, 2020

Selenium Locators - XPath Tutorial

What is XPath?

 It is a XML Path Language to select the particular node from the XML document.

 XPath use HTML tag and attribute value combination to locate particular web element on the web page.

 What is XML?

 XML stands for eXtensible Markup Language. XML is a markup language much like HTML. XML was designed to store and transport data. XML was designed to be self-descriptive.

 Types of XPath:

1> Absolute XPath:


  • It is a direct way to locate an element.
  • It is very brittle.
  • Starts with single slash “/” that means starting to search from the root.


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



2> Relative XPath:


  • Starts from the middle of the HTML DOM.
  • Starts with a double slash “//” that means it can start to search anywhere in the DOM structure.
  • Shorter than Absolute XPath.

Example: //input[@value='Travelling']


Note: We only use the Relative XPath as it is more reliable then Absolute XPath.

XPath Syntax
Let's Create Some XPath using Above Syntax for Below HTML Code


Below are different type of XPath for Above Image of HTML Web Page:

1> //label[@for='fname']


HTML Tag Name: label
Attribute Name: for
Attribute Value: fname

2> //input[@name='firstname']


 HTML Tag Name: input
Attribute Name: name
Attribute Value: firstname

3> //input[@placeholder='Your Username...']



 HTML Tag Name: input
Attribute Name: placeholder
Attribute Value: Your Username...

4> //*[@type='text']



 HTML Tag Name: * Means All Tags
Attribute Name: type
Attribute Value: text

5> AND & OR Conditional for Multiple Attributes


 AND Example: //input[@type='text' and @id='fname']

 Condition: AND
HTML Tag Name: input
Attribute Name: type  and id
Attribute Value: text and fname

 OR Example: //textarea[@id='subject' or @name='subject']

 Condition: OR
HTML Tag Name: textarea
Attribute Name: id or name
Attribute Value: subject
XPath Useful Method


 1> Contains (): is a Method used in XPath expression. 
It is used when the value of any attribute changes dynamically, for an example, login information.

 XPath Syntax = //TagName[ contains (@type, ‘sub’)]

 Example = //img[ contains (@src,’sprites’)]
2> Starts-with (): is a Function finds the element whose attributes value changes on refresh or any operation on the web page.

 XPath Syntax  = //TagName[ starts-with (@type, ‘sub’)]

 Example = //img[ starts-with(@alt,”Shop”)]
3> Text (): is a Function, we find the element with exact text match as shown below. 

 XPath Syntax  = //TagName[text() = “Surname”]

 Example = //img[text() = “Surname”)]
4> Last (): is select the last element (of mentioned type) out of all input element present.

 XPath Syntax = //TagName[@attributeName='attributeValue'][last()-1]

 Example =  //input[@type='text'][last()]
                       //input[@type='text'][last()-1]
5> Position (): is select the element out of all input element present depending on the position number provided. 

 XPath Syntax = //TagName[@attributeName='attributeValue'][position()=2]

 Example:  //input[@type='text'][position()=2]
                     //input[@type='text'][3]

By at No comments:
Labels: , , , , , , ,

Selenium Locators - Common Locators


1> By ID: This is most common method to locate the element as it always give one to one mapping.


 Syntax: By.id("Value of ID");
Example: driver.findElement(By.id("fname"));

 Practical Example: Right Click on Element and Select Inspect Element
Code Example in eClipse: 


2> By Name: This is another most favourite method after ID as it works similar way and give more chance for one to one mapping.



 Syntax: By.name("Value of Name");
Example: driver.findElement(By.name("lastname"));

 Practical Example: Right Click on Element and Select Inspect Element



Code Example in eClipse: 

3> By ClassName: This will locate the web element based on value of class name.


 Syntax: By.className("Value of ClassName");
Example: driver.findElement(By.className("gh089b"));

 Practical Example: Right Click on Element and Select Inspect Element



Code Example in eClipse: 


4> By LinkText : This will locate the web element based on link text value available in anchor tag.



 Syntax: By.linkText("LinkText Value");
Example: driver.findElement(By.linkText("Facebook_Link"));

 Practical Example: Right Click on Element and Select Inspect Element



Code Example in eClipse: 


5> By LinkText : This will locate the web element based on link text value available in anchor tag.


 Syntax: By.partialLinkText("Partial Text Value");

Example: driver.findElement(By.partialLinkText("an Email"));

 Practical Example: Right Click on Element and Select Inspect Element


Code Example in eClipse: 




By at No comments:
Labels: , , , , ,
Subscribe to: Posts (Atom)