Search code examples
c#seleniumxpathchrome-web-driver

c# selenium chrome-webdrive clicking button using class and title

i just want to click button in my page. The html code lookls like :

<tr ng-repeat="row in rowCollection" ng-class="{ &quot;error-row&quot;: row.errorMessage }" ng-style="vm.getColor(row)" class="ng-scope" style="background: rgb(255, 242, 255) none repeat scroll 0% 0%;">
    <td class="ng-binding">Wylaczenie nadan RDF</td><td class="ng-binding">WAITING_FOR_NOTIFICATION</td>
    <td>
        <a href="" ng-click="vm.showProcessDiagram(row.executor)" class="ng-binding">rfsSendingExecutor</a>
    </td>
    <td class="ng-binding">2017-09-06 11:14:12</td><td class="ng-binding">2017-09-06 11:14:13</td>
    <td has-role="REQUEST" class="text-center">
    <!-- ngIf: row.inXml || row.outXml -->
    <button ng-if="row.inXml || row.outXml" ng-click="vm.showXml(row)" title="Show" class="btn btn-xs ng-scope"><span class="fa fa-code"></span></button>
    <!-- end ngIf: row.inXml || row.outXml -->
    </td>
    <td has-role="ERROR" class="text-center"><button ng-show="row.errorMessage" ng-click="vm.showError(row.errorMessage)" title="Show" class="btn btn-xs ng-hide"><span class="fa fa-search"></span></button></td>
    <td class="text-center">
    <button ng-show="vm.enableCancel(row)" ng-click="vm.cancelTask(row.workItemId)" title="Cancel" class="btn btn-xs ng-hide">
        <span class="fa fa-ban text-warning"></span>
    </button> 
    <button ng-show="vm.enableRepeat(row)" ng-click="vm.repeatTask(row.id)" title="Repeat" class="btn btn-xs ng-hide">
        <span class="fa fa-refresh text-success"></span>
    </button> 
    <button ng-show="vm.enableRepeat(row)" ng-click="vm.repeatTaskWithParams(row.id)" title="Repeat with parameters" class="btn btn-xs ng-hide">
        <span class="fa fa-refresh text-warning"></span>
    </button>
    <button ng-show="vm.enableSkip(row)" ng-click="vm.skipTask(row.workItemId)" title="Skip" class="btn btn-xs">
        <span class="fa fa-angle-double-right text-success"></span>
    </button>
    </td>
</tr>

All i want to do is click this button :

<button ng-show="vm.enableSkip(row)" ng-click="vm.skipTask(row.workItemId)" title="Skip" class="btn btn-xs">
        <span class="fa fa-angle-double-right text-success"></span>

I've been through the xpath tutorials and checked many other posts nad forums. I'm not sure what I'm missing. I'm simply trying to find the following element by xpath like this :

button_to_click= findElement(By.xpath("//button[@title='Skip']"));

but it doesn't work. QUESTION : Why it don't work only by title? I try another way and do like that :

 button_to_click= findElement(By.xpath("//button[@class='btn btn-xs']"));

And it works well , but when i have 3 or 4 elements in this class it just press wrong button. How can i press exacly this button can someone help me?
Maybe shouold i try something like this?

button_to_click= findElement(By.xpath("//button[@class='btn btn-xs']//button[@title='Skip']"));

Why it don't work only by title? And how can i do that better? Please be patient for newbies.

EDIT 1 I add more code as you want to know what I'm doing. : This code works well :

driver = new ChromeDriver();
driver.url ="http://mypage.com"
button_to_click= findElement(By.xpath("//button[@class='btn btn-xs']")).Click();

And this code doesn't work :

driver = new ChromeDriver();
driver.url ="http://mypage.com"
button_to_click= findElement(By.xpath("//button[@title='Skip']")).Click();

EDIT 2 I will give you an example page for testing. You just have to download the html file and open it in your browser.Html page file What we now want to do? If you run this html file you will see all page. And now we want to make a Click on exacly this button on screen : enter image description here After when you click on this button you will see click counter below : like this : enter image description here Have anyone idea how to click it? I try few ways and can't find solution still. Please help.

EDIT 3

I try also : - but it too doesn't work

drive.FindElement(By.XPath("//tr[class='ng-scope']/td[text()='Wylaczenie nadan RDF'] and button[@title='Skip'']]")).Click();
Solution

  • As per your Question, this line of code works :

    button_to_click= findElement(By.xpath("//button[@class='btn btn-xs']")).Click();

    This line of code does't works :

    button_to_click= findElement(By.xpath("//button[@title='Skip']")).Click();

    Explanation:

    Looking at the HTML DOM it's clear the WebApplication uses a lot of JavaScript & Ajax Calls. Hence are the attributes e.g. ng-repeat, ng-class etc with dynamic values e.g. { &quot;error-row&quot;: row.errorMessage }, vm.showError(row.errorMessage) etc. So it will be tough to use these values/attributes to construct an xpath or CSSselector

    Using xpath as //button[@title='Skip'] should have worked provided the xpath uniquely identified the specific element of our interest. But as it is not happening I suspect there may be multiple elements matching this xpath where some of them may be disabled/hidden. So, the xpath using the title attribute as Skip FAILED.

    Using xpath as //button[@class='btn btn-xs'] works without failure because here we have considered the class attribute which is extensively used within CSSselector as well as within xpath which maps down to querySelector/querySelectorAll. Hence, this option is more reliable and works perfect.

    Update :

    Though using xpath as //button[@class='btn btn-xs'] works for you without any failure I am not sure why you want to avoid it. About the xpath you mentioned in your comment, as you have got much granular in your search using the <button> tag it seems unnecessary to reference any parent node e.g. tr[text()='Wylaczenie nadan RDF']. Incase xpath as //button[@class='btn btn-xs'] doesn't identifies the element uniquely you can consider to club up the class and title attribute as follows:

    button_to_click= findElement(By.xpath("//button[@class='btn btn-xs' and @title='Skip']")).Click();