Watir-Webdriver - how to differentiate the buttons if there are more than one with same properties

Question

This query is based on the my previous question here Watir-Webdriver - Unable to locate a button with id, name, text, value and i got some details on how to fetch the fields through elements. But now in one of my screen i have two buttons with same class and div. So i am not able to take the one which i need. I need to get the button which has "Checking and Savings" product. Could someone help on how to get the exact button click? And my web application is developed on AnjularJS.

Here's a full div portion of the HTML from the page where the button is identified.

<div class="jl-layout">
    <div class="jl-layout-50-50">
        <!-- ngRepeat: entry in ctrl.vm.productSuites.entries -->
        <div style="" ng-repeat="entry in ctrl.vm.productSuites.entries" class="item product-container centered ng-scope">
            <h3 class="ng-binding">Checking and Savings</h3>
            <button type="button" tabindex="0" ng-click="ctrl.submitProductSelection(entry)" class="extra-button-padding secondary jl-button">
                <ng-transclude>
                    <span class="ng-scope">Select</span>
                </ng-transclude>
            </button>
            <div tabindex="0" role="button" ng-click="ctrl.submitProductSelection(entry)" class="mobile-click"/>
        </div>
        <!-- end ngRepeat: entry in ctrl.vm.productSuites.entries -->
        <div style="" ng-repeat="entry in ctrl.vm.productSuites.entries" class="item product-container centered ng-scope">
            <h3 class="ng-binding">Savings</h3>
            <button type="button" tabindex="0" ng-click="ctrl.submitProductSelection(entry)" class="extra-button-padding secondary jl-button">
                <ng-transclude>
                    <span class="ng-scope">Select</span>
                </ng-transclude>
            </button>
            <div tabindex="0" role="button" ng-click="ctrl.submitProductSelection(entry)" class="mobile-click"/>
        </div>
        <!-- end ngRepeat: entry in ctrl.vm.productSuites.entries -->
    </div>
</div>

Justin Ko Justin Ko · Accepted Answer · 2015-08-31T16:33:30

When there are no unique properties on the element you want to interact with, you will have to look at the elements around it. In this case, it is the h3 element text that differentiates the buttons.

Solution - Navigating DOM From Unique Element

The simplest solution conceptually is to:

Get the related h3 element.
Navigate to the parent div element, which is also the parent of the button.
Get the button element in that parent div.

This would be done using:

product = 'Checking and Savings'
browser.h3(text: product).parent.button.click

Solution - Iterating Through Groups of Related Elements

Another approach is to iterate through each div that represents an item. For each div (item), you would check if it is the right product and then click the button.

This would be:

browser.divs(class: 'item').find { |div| div.h3(text: product).exists? }.button.click

Note that given your specific HTML snippet, this will always return the first button. The lack of closing div tag for <div tabindex="0" role="button" ng-click="ctrl.submitProductSelection(entry)" class="mobile-click"/> is making everything appear in the same item div.

Solution - Using XPath

This is the same approach as the first solution. However, it is done using a single XPath locator. The benefit is that it is faster due to fewer method calls. However, it can be harder to read.

browser.button(xpath: "//h3[text()='#{product}']/../button").click

Watir-Webdriver - how to differentiate the buttons if there are more than one with same properties

1 Answers