CSSandDOMLocators

Introduction about CSS

CSS Locator is another alternative of Xpath in selenium webdriver. Full form of CSS is "Cascading Style Sheets" and it define that how to display HTML elements on webpage. There are few advantages and  few disadvantages of using CSS element locators.

Advantage:  It is much faster and simpler than the Xpath Locators

Disadvantage:  It will support only few browsers.

CSS absolute paths refer to the very specific location of the element considering its complete hierarchy in the DOM

Absolute path

Ex: css=html body div div form input

Note: while providing absolute path, a space is given between the elements

You can also use in the following way from parent to child relationship

Ex: css=html> body >div> div> form >input

You can also use in the following way from parent to child relationship using id

Ex: html body div#topSection div#searchContainer form#searchForm input#searchText

Note: if any structure or hierarchy changes in page the locator will fail to find element.

Below are the relative path examples

1.       Selenium CSS locator using Tag and ID Attribute

Tagname#ID Attribute value

Note: Here # is for Id attribute value only

Ex: css=input#lst-ib

It will find "input" tag node which contains "id=lst-id" attribute.

Ex: css=#lst-ib

It will find any tag node which contains "id=lst-id" attribute.

Ex: css=div[id#lst-ib]

2.       Selenium CSS locator using Tag and Any Attribute

Css=Tagname[attributename=attributevalue]

Ex: css=input[name=q]

This syntax will find "input" tag node which contains "id=lst-id" attribute.

Ex: css=input[type=text]

This syntax will find "input" tag node which contains "type=text" attribute.

3.        Selenium CSS locator using Tag and class attribute

TabName.ClassAttribute

Note: Here . is for class attribute value only.It is mandatory to use dot sign if your using Class attribute to create CSS Selector.

Ex: css=input. gsfi lst-d-f

It will find "input" tag node which contains "class= gsfi lst-d-f" attribute.

Ex: css=. gsfi lst-d-f

4.       Selenium CSS locator using tag, class, and any attribute

TagName.ClassAttribute[AttributeName=AttributeValue]

Ex: css=input.gsfi lst-d-f[type=text]

It will find "input" tag node which contains "class= gsfi lst-d-f" class and "type=text" attribute.

Ex: css=input.gsfi lst-d-f[name=q]

It will find "input" tag node which contains "name= g" attribute

5.       Selenium CSS locator using Name Attributes

We want to locate elements based on only the specific attribute defined for them but  not the attribute values. For example we want to lookup all the inputelements which have type attribute specified.

TagName[AttributeName]

Ex: css =input[type]

6.       Tag and multiple Attribute CSS locator

TagName [AttribiteName=AttributeValue][AttribiteName=AttributeValue]

Ex: css=input[name=q][type=text]

It will find "input" tag node which contains "type=text" attribute and "name=q" attribute

7.       CSS Locator using Sub-string matches or partial match on attribute values

CSS in Selenium allows matching a partial attribute values. This is useful for testing application where attribute values are dynamically assigned and changed every time a page is requested. There are three ways to match the substring

1) Match a prefix

2) Mach a suffix

3) Match a sub string

Match a Prefix

TagName[AttrubuteName ^ = Prefix String]

^ – Symbolic notation to match a string using prefix.

Prefix – It is the string based on which match operation is performed. The likely string is expected to start with the specified string.

Ex: css=input[id^=gs_]

It will find input node which contains 'id' attribute starting with 'gs_' text. (Here, ^ describes the starting text).

Match a Suffix

TagName[AttrubuteName $= suffix String]

# – Symbolic notation to match a string using suffix.

Suffix – It is the string based on which match operation is performed. The likely string is expected to ends with the specified string.

Ex: css=input[Value$=Search]

It will find input node which contains 'value' attribute and ends with the textSearch. (Here, $ describes the ending text).

Match a Substring

TagName[AttributeName * =substring]

* – Symbolic notation to match a string using sub string.

Sub string – It is the string based on which match operation is performed. The likely string is expected to have the specified string pattern.

Ex: css=input[value*=Feeling]

It will find input node which contains 'value' attribute containing 'Feeling' text.

8.       CSS Element locator syntax using child

Ex: css=div.jsb>center>input[value=Google Search]

First it will find div tag with "class = jsb" and then it will follow remaining path to locate child node. This syntax will locate Search text box.

There are occasions when there are multiple child elements within the same parent element

If we want to locate the element with text ‘Marathi’ we have to use ‘nth-of-type’

Ex: css=div#_eEe>a: nth-of-type (4)

if we need to select the last child element, i.e. ‘ਪੰਜਾਬੀ, we can use

Ex: css=div#_eEe>a: last-child

Few more examples

1)      css=div#_eEe>a:first-childà represents any element that is the first child element of its parent.

2)      css=div#_eEe>a:first-of-typeàrepresents the first sibling of its type in the list of children of its parent element.

3)      css=div#_eEe>a:nth-child(2)à it will select 2^nd element from the starting

4)      css=div#_eEe>a:nth-last-child(3) – it will select 3^rd element from the last

5)      css=div#_eEe>a:last-of-typeàrepresents the Last sibling of its type in the list of children of its parent element.

9.       CSS Element locator syntax using adjacent selectors

This is referred to as an adjacent selector or next-sibling selector. It will select only the specified element that immediately follows the former specified element.

Ex: css=div#_eEe>a+a

it will locate "a" node where another "a" node is present before it on page.

Ex: css=div#_eEe>a+a+a

10.   CSS Element locator using contains keyword or Inner text

Inner text helps us identify string using a string pattern

TagName:contains(String)

: – The dot sign is used to symbolize contains method

Contains – It is the value of a Class attribute which is being accessed.

Text – The text that is displayed anywhere on the web page irrespective of its location.

Ex: css=div#_eEe:contains(Google)

contains() will match elements with the desired text block(‘Google’)

Ex: css=div.logo-subtext:contains(Ind)

DOM(Document Object Model)

DOM is convention for representing objects in HTML documents. Selenium interact with these objects using JavaScript.

PROS:

JavaScript allows you to build dynamic locators

CONS:

Relies on the structure of the page

Locating by DOM – getElementById

Document.getElementById(ID element)

ID element: This is the value of the ID attribute of the element to be accessed.

Ex:document.getElementById("lst-ib")

Locating by DOM – getElementByName

It collects an array of elements that have the name that you specified. You access the individual elements using an index which starts at 0.

Document.getElementByName(Name of element)[index]

name = name of the element as defined by its 'name' attribute

index = an integer that indicates which element within getElementsByName's array will be used.

Ex:document.getElementById("q")[0]

Locating by DOM - dom:name

This method will only apply if the element you are accessing is contained within a named form.

Document.forms[name of the form].elements[name of the elements]

Ex: document.forms["f"].elements["q"]

Locating by DOM - dom:index

This method applies even when the element is not within a named form because it uses the form's index and not its name.

Document.forms[index of the form].elements[index of the elements]

Ex: document.forms[0].elements[4]

Another form

Ex1: document.forms[0].elements["q"]

Ex2: document.forms["f"].elements[4]