In this blog post we'll be discussing some useful Selenium tips for CSS Selector and a pseudo - class that will help to convert your XPATH locators to CSS.
You must be wondering what CSS Selector exactly is ? Well in this blog post we will not indulge into the deep details about CSS Selector but for the time being let’s discuss the basic definition of a CSS Selector. CSS Selector is a combination of element selector and a value that acts as a unique identifier of the web element within a web page.
They are basically the string representations of HTML tags, attributes, values and class or we can say they are one of the several technologies that can be used to select nodes in an XML Document. They are the patterns that are matched against elements in a tree.
We have divided the tips into 2 categories:
- Simple
- Advanced
Let’s begin discussing these in detail.
- Simple
a. Direct Child: A dirct child is defined in XPATH with the help of “/” and on the other hand CSS uses “>” to define a direct child, - Example:
- XPath: //div/a
- CSS: div > a
b. Child or sub child: If the element can be inside another or one of it’s child, then it is defined in XPath using a “//” and CSS uses a whitespace to define a child or a sub child.
- Example:
- XPath: //div//a
- CSS: div a
c. Id: Element’s id is defined in XPath using “[@id=’exampleid’] and in CSS it is defined using “#”.
- Example:
- XPath: //div[@id=’exampleid’]
- CSS: #exampleid
d. Class: Just like id, class are also defined using similar syntax in XPath- [@class=’exampeclass’] and in CSS class is defined using a “.”
- Example:
- XPath: //div[@class=’exampleclass’]
- CSS: .exampleclass
- Advanced
a. Next Sibling: This is one of the most useful features to navigate the elements like forms or ul items. The job of the next sibling is to tell Selenium to find the next adjacent element on the page that is inside the same parent.
Example:
<form class = "form-login" role = "form" action = "/main.php"
method = "post">
<h3 class = "form-heading"></h3>
<input type = "text" class = "form-control" id = "useremailid"
name= "useremailid" placeholder = "useremailid" required autofocus>
<input type = "password" class = "form-control" id = "userpassword" name ="userpassword" placeholder = "userpassword" required>
<p>
<button class = "btn btn-lg btn-primary" type = "submit" name = "login">Login</button>
</form>
Now let’s write an XPath and CSS Selector to choose element after emailid.
XPath: //input[@id='emailid']/following-sibling::input[1]
CSS: #emailid + input b. Attribute Values: If you don't bother about ordering of child elements then you can use attribute selector to choose elements based on any attribute value. We will use the form in the above example for this example also.
We will show how to choose the username element of the form above without adding the class.
Example:
XPath: //input[@name=’username’]
CSS: input[name=’username’]
We can also chain filters to be more specific in selecting
Example:
XPath://input[@name=’login’ and @type=’submit’]
CSS: input[name=’login’][type=’submit’]
Here selenium will find the element input field with the name=’login’ and type =’submit’.
c. Choosing a specific match: CSS in Selenium helps us to navigate lists with more precision.If you have an ordered list (ul) and you want to find the fourth element of the list i.e. the li element without regard of any other element, we should use nth-of-type or nth-child.
Example:
- C++
- Java
- Python
- C#
If you want to select the fourth li element in this list i.e. C# in this case then we will follow this syntax:
CSS: #languagerecordlist li:nth-of-type(4)
If we want to select the fourth element only if it is a li element i.e. Python in this case then we will use the following syntax:
CSS: #languagerecordlist li:nth-child(4)
If you don’t specify the child type for the nth-child then it will allow you to select the fourth child without regard of the type.
CSS: #languagerecordlist *:nth-child(4)
d. Substring matches: CSS in Selenium has an interesting feature to match partial strings. Partial string matching is done using 3 three syntaxes:^=,$=,*=. Let’s discuss these three in detail with an example.
i. ^=: This syntax is used to match a prefix
Example:
CSS: x[id^=’id_prefixtext’] - This example shows how to
match a link with an “id” that starts with the text
“id_prefixtext”
ii. $=:This is used to match a suffix
Example:
CSS: x[id$=’id_suffixtext’] - This example shows how to
match a link with an “id” that ends with the text “id_suffixtext”
iii. *=: This is used to match a substring
Example:
CSS: x[id*=’id_patterntomatch’] - This example shows how
to match a link with an “id” that contains the text
“id_patterntomatch”
e. Matching by inner text: one of the most useful pseudo classes :contains() matches elements with the desired text block
Example:
CSS: a:contains(‘LogOut’)
%201.png)
.jpg)