Watir-Webdriver

Question

此查询基于我之前的问题，我得到了一些关于如何通过元素获取字段的详细信息。但是现在在我的一个屏幕上，我有两个具有相同 class 和 div 的按钮。所以我拿不到我需要的那个。我需要获得具有 "Checking and Savings" 产品的按钮。有人可以帮助了解如何获得准确的按钮点击吗？我的网络应用程序是在 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导航

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

获取相关的 h3 元素。
导航到父 div 元素，它也是按钮的父元素。
获取该父元素中的按钮元素 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 代码段，这将始终 return 第一个按钮。 <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

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

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

ruby