HTML 5 application not able to locate element

27 views
Skip to first unread message

Snehal Biche

unread,
Jul 18, 2016, 4:34:11 AM7/18/16
to webdriver
I am trying to find locator for below code in HTML 5 application. Need help to generate below element locator 

<button class="md-button md-ink-ripple" ng-transclude="" type="button" ng-click="goReady()" role="menuitem" aria-label="check_circleReady">
<md-icon class="ready-icon ng-scope material-icons">check_circle</md-icon>
<span class="ng-scope flex" flex="">Ready</span>
</button>


Thanks,
Snehal

Snehal Biche

unread,
Jul 18, 2016, 5:49:01 AM7/18/16
to webdriver
I have found the answer - //button[contains(@ng-click,'goReady()')] is the xpath 

-Snehal

darrell grainger

unread,
Jul 18, 2016, 9:20:03 AM7/18/16
to webdriver
A word of warning on your XPath, it is a little brittle and tied directly to the fact that the developers are using AngularJS. The ng-click attribute is specific to AngularJS. If they change the library they are using your tests will break. Even if they change the name of the AngularJS method from goReady() to something else it will break your tests. There is no business reason they cannot refactor the code and change the name of the method.

If you are going to use XPath then you might want to use something the end user will see. It is, hopefully, less likely the text "Ready" will change. So I would use:

"//span[text()='Ready']/.."

This will find the span with the text "Ready" then it will go up one level to the button element. Even better would be if you can have the developers add attributes to the things you want to access, e.g.

<button class="md-button md-ink-ripple" ng-transclude="" type="button" ng-click="goReady()" role="menuitem" aria-label="check_circleReady" qa-data="The Ready button that allows the user to submit they are ready">

You could even make the qa-data attribute even more descriptive. The idea is that when you are reading your test script you will see something like:

WebElement button = driver.findElement(By.cssSelector("[@qa-data='The Ready button that allows the user to submit they are ready']"));

Now if the developer makes massive changes to the HTML structure a year from now, you will still know what the purpose of this button was.
Reply all
Reply to author
Forward
0 new messages