Examples with xpath and Css (ID, Name, Text and Links)

In order to perform any operation on the element like click or type into an element, we need to locate that element. It is very simple to locate elements if the HTML DOM has 'id' or 'name' and they are the safest locators to use. As we know it is always better to use ID and Name to locate the elements which will work for sure. You don't need to search for any other locator if there is ID or unique name present in your application.

But with the applications designed using modern JavaScript Frameworks like Angular, React and Vue.js have no proper web elements in DOM.

It is always very important to make test scripts robust with reliable locators that do not break until changes made. In many cases like these, we depend locating elements by CSS or by XPath.

Though we have some browser plug-ins to generate xpath or css selector, but they are not much useful in real time applications.

Let us look for xpath examples to use ID and Name effectively with combinations

If the html looks like below :

<input type="text" aria-label="Email or Phone" value="Email or Phone" tabindex="1" placeholder="" name="email" id="email" 
class="inputtext _5aju" style="background-color: transparent;">

We can use as below :

In xpath we can use in different ways

1. With ID : - //input[@id='email'] or we can also use as //*[@id='email']

2. With Name - //input[@name='email'] or we can also use as //*[@name='email']

In css we can use as below :

1. With ID - css=input#email or css=#email
2. With Name - css=input[name=email] or css=[name=email]

All the above syntax are simple. We can directly use them by using id or name locators.

Identify element using multiple attributes

Here using xpath / Css, we can combine two locators when ever required, lets see how we can achieve.

Using xpath : - //*[@id='email' or @name='email'], here first it will check for the id and then it will check for the second.

Based on index also, we can define the path as //*[@name='email'][1]

We can also define by the using the value attribute //input[@name='email'][@value='Email or Phone']

The same with Css css=input[name=email][value=Email or Phone]

We can also define xpath with 'Style' attribute xpath //input[@name='email'][@style='background-color: transparent;']

How to access direct child elements using xpath

A child in XPATH is represented with a "/". Example XPATH for child elements : //div/a

How to access Child elements using css selectors

In CSS the child is indicated with a ">". Css examples of a link inside of a div tag can be identified as div > a

And sometimes, if the element is not direct child, may be the element is inside another element. In such cases, we can use two slashes to match any subnode for xpath. Example for xpath as //div//a. In css this is very simple by using whitespace. Example css for child / sub child as div a

How to match on text using CSS locators and Xpath

Now lets us look at the examples for 'Text'. When working with text, we will have two scenarios, one is 'Exactly' and other one is 'Contains'. As name describes, 'Exactly' will try to find the exact match and Contains looks for multiple matches.

We can use like this //button[.='Log In'] as Xpath to find out element containing exactly 'Log In'.

If the HTML is as below:

<div class="header-right">Check Our <a href="http://demo-test.com" class="btn btn-success">Demo Website!</a></div>

We find element by using xpath as //div[contains(text(),'Demo Website!')] or //div[contains(text(),'Demo Website!')]

The above can be done using css as css=div:contains('Demo Website!'). But If you want to match exactly to the text then we should have something like css=a[text='Demo Website!'] or a[innertext='Demo Website!']

Working with Links / anchor tags

Links have anchor tags, we can apply the same as we applied for 'Text', the only difference here is we should add anchor tag.

We can just use as 'link=Forgot your password?', using xpath we should use as //a[.='Forgot your password?']

We can also specify the partial text of the link as //a[contains(text(),'Forgot')]. This also can be written as //a[contains(.,'Forgot')]. We replaced 'text()' with 'dot'.

In Css we rewrite them as css=a:contains('Forgot'), which will find the first anchor that contains 'Forgot'.

Some times we may need to work with URLs with href attributes. Xpath can also be used instead of finding the link text //a[@href='url'] and using Css css=a[href='url']

You can find more about XPath in detail xpath tutorials and Css selectors

Selenium Tutorials: 

Comments

Does CSS selector support 'Contains' feature in Selenium?

No directly it won't. You can use JQuery instead

//a[contains(text(),'Delete')][2] how to convert this to CSS ?

<ul class="select2-selection__rendered">
<li class="select2-selection__choice" title="Alexandria, 2015">Alexandria, 2015</li>
<li class="select2-selection__choice" title="Glebe, 2037">Glebe, 2037</li>
</ul>
how to gettext all tag li?
var allLocation = driver.findElement(By.xpath("//li[contains(@class, 'select2-selection__choice')]"));

@Moumita , It is
css=a:contains('Delete')

Nice work,Could you please how can we locate all links using xpath..

(By.cssSelector("a[href^='/']")

How could I select value from content placeholder drop down??

select the dropdown and use sendkeys to send whick element to click and at the end send enter key, it will be selected.

If id ,class,name is not mentioned for xpath then how we write our xpath without those ?

Add new comment

Image CAPTCHA