Watir-Webdriver - 如果有多个具有相同属性的按钮，如何区分按钮

Question

这个查询基于我之前的问题Watir-Webdriver - Unable to locate a button with id, name, text, value，我得到了一些关于如何通过元素获取字段的详细信息。但是现在在我的一个屏幕中，我有两个具有相同类和 div 的按钮。所以我不能拿我需要的那个。我需要获得具有“检查和储蓄”产品的按钮。有人可以帮助如何获得准确的按钮点击吗？我的 Web 应用程序是在 AnjularJS 上开发的。

这是标识按钮的页面中 HTML 的完整 div 部分。

<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>

Answer 1

当您要与之交互的元素上没有独特的属性时，您将不得不查看它周围的元素。在这种情况下，区分按钮的是 h3 元素文本。

解决方案 - 从唯一元素导航 DOM

从概念上讲，最简单的解决方案是：

1. 获取相关的 h3 元素。
2. 导航到父 div 元素，它也是按钮的父元素。
3. 获取该父 div 中的按钮元素。

这将使用：

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

解决方案 - 遍历相关元素组

另一种方法是遍历代表项目的每个 div。对于每个 div（项目），您将检查它是否是正确的产品，然后单击按钮。

这将是：

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

请注意，给定您特定的 HTML sn-p，这将始终返回第一个按钮。 <div tabindex="0" role="button" ng-click="ctrl.submitProductSelection(entry)" class="mobile-click"/> 缺少结束 div 标记使得所有内容都出现在同一个项目 div 中。

解决方案 - 使用 XPath

这与第一个解决方案的方法相同。但是，它是使用单个 XPath 定位器完成的。好处是由于更少的方法调用，它更快。但是，它可能更难阅读。

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