alexsiminiuc3
May 16, 2018
Edited: May 16, 2018

XPATH examples

For the login page of the VPL.ca site (https://vpl.bibliocommons.com/user/login?destination=%2Fuser_dashboard),

the username, pin and login elements can be found not only by name but also by xpath.


This is the HTML code of each element:


USERNAME

<input class="field_username text" 
       data-js="username_login" 
       id="user_name_2o8quogf7rlg8keurmdf7ra09p" 
       name="name" 
       testid="field_username" 
       type="text">


PIN

<input autocomplete="on" 
       class="text" 
       id="user_pin_2o8quogf7rlg8keurmdf7ra09p" 
       name="user_pin" 
       testid="field_userpin" 
       type="password" 
       value="">


LOGIN

<input alt="Log In" 
       class="btn btn-primary" 
       data-js="button_login" 
       name="commit" 
       testid="button_login" 
       title="Log In" 
       type="submit" 
       value="Log In">


All elements have a testid attribute with static values so possible xpath expressions are


USERNAME

//input[@testid = 'field_username']

PIN

//input[@testid = 'field_userpin']

LOGIN

//input[@testid = 'button_login']


Additional expressions can be created for each element:


USERNAME

//input[@class = 'field_username text']
//input[@data-js = 'username_login']
//input[contains(@id, 'user_name')]


PIN

//input[contains(@id, 'user_pin')]


LOGIN

//input[@data-js = 'button_login']
//input[@value = 'Log In']


Any expression can be used if it identifies the element uniquely.


But locating by name is better than using an xpath selector.


alexsiminiuc3
May 16, 2018

On the login page, to get the username field through xpath, type the following in the Console tab of the Chrome Inspector:


$x("//input[@testid = 'field_username']")

vikan29
May 16, 2018

Thanks Alex.

elena.musienko15
May 17, 2018

Alex, can you please explain how to find xpath? I wrote in 'console' $x("//input[@testid = 'field_username']")

but I actually don't understand what to do with the result. I also tried on another examples where we use it and I still don't get it.

alexsiminiuc3
May 18, 2018

if you write in the console $x("//input[@testid = 'field_username']") and you get a result after pressing enter, that means that the xpath matches 1 element.


so you can use the xpath expression in the java code as a locator for finding that element:

By usernameLocator = By.xpath("//input[@testid = 'field_username']");
WebElement username = driver.findElement(usernameLocator);

or 


WebDriverWait wait = new WebDriverWait(driver, 10);
By usernameLocator = By.xpath("//input[@testid = 'field_username']");
WebElement username = wait.until(ExpectedConditions
                          .elementToBeClickable(usernameLocator));

Testing an xpath expression in the console tab of Chrome Inspector has 1 purpose only.


To check that the xpath expression works by finding 1 element.



elena.musienko15
May 18, 2018

But how can I know that I need to write that expression (I mean $x("//input[@testid = 'field_username']") in console tab, if I don't know that xpath yet?

alexsiminiuc3
May 18, 2018

lets say that you need to find an element.


you dont know yet how to find it, by id or by name or by xpath.


you look first to the html code of the element in chrome inspector.


if the element has an id attribute with a static value, then you can locate the element by id.

if the element has an name attribute with a static value, then you can locate the element by name.


otherwise, you may have to create an xpath expression (or css) that finds the element.

© 2018 Vancouver Selenium WebDriver Automation Training