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

这个查询基于我前面的问题，我得到了一些关于如何通过元素获取字段的详细信息。但是现在在我的一个屏幕上，我有两个按钮，它们具有相同的class和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>

支票储蓄
挑选
储蓄
挑选

如果要与之交互的元素上没有唯一属性，则必须查看其周围的元素。在这种情况下，是h3元素文本区分按钮

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

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

获取相关的h3元素

导航到父div元素，该元素也是按钮的父元素

获取父div中的button元素

这将通过以下方式实现：

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代码段，这将始终返回第一个按钮。

缺少结束div标记使得所有内容都显示在同一个项目div中

解决方案-使用XPath

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

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

---

感谢您为我提供解决方案。如果元素不是唯一的，我理解如何处理元素的逻辑。我喜欢使用xpath生成的第三个解决方案，因为它将是唯一表示的。但正如我所说，我对web原子化还不熟悉，所以请您帮助我，或者帮助我在任何地方学习如何为HTML元素生成xpath。我尝试了你的第三个解决方案，只是在我的代码中复制粘贴，但它抛出了一个错误。我尝试了firefox插件中的firebug。但它仍然给我这样的“/html/body/div[1]/div/div/div[2]/div[1]/div/div[1]/button”，这与您给出的不同。所以请帮帮我，你犯了什么错误？当我试过的时候，它对我很有效。注意，您必须定义

product

变量。元素没有单一的XPath，这就是为什么您在Firebug中看到一些不同的东西。但是，您必须小心那些自动生成XPath的工具。虽然它们在当时是正确的，但它们过度指定了路径，这使它们变得脆弱（即对页面的任何更改都可能破坏XPath）。是的..现在我得到了正确的导航。我不知道以前发生了什么。现在，单击相应的按钮并移动到下一页。谢谢你抽出时间。还有一件事，请帮助我学习或找到如何在将来为html生成xpath。因为您已经给出了xpath行“b.button（xpath://h3[text（）='Checking and Savings']/../button”）。单击“我使用了它”。但我不确定这个“/../button”部分到底是什么。