Ruby watir webdriver - 如何点击动态创建的 div 链接答案

【问题标题】：Ruby watir webdriver - how to click on a div link that is dynamically createdRuby watir webdriver - 如何点击动态创建的 div 链接
【发布时间】：2016-01-28 04:48:25
【问题描述】：

我的网络应用中有一个链接，在开发者工具中检查时看起来像这样 -

<div class="runnable-item alt" ng-click="list.click(item)" ng-class="{'alt': $odd, 'disabled': item.working}"><!-- ngIf: item.working -->Rep</div>

我需要能够使用 watir webdriver 从 Ruby 代码中单击它。到目前为止，我可以使用类似于以下的代码成功单击按钮和编辑字段：

browser.text_field(id: 'user').set 'test1'
browser.button(id: 'submitBtn').click
browser.a(id: 'start-process').click

现在如何自动点击如上所示的 div 元素？

这是更完整的 HTML 代码 -

<div class="row">
<!-- ngRepeat: list in lists --><div ng-repeat="list in lists" class="">
<div class="col-sm-6"><h4>Services</h4>
<!-- ngIf: list.items === undefined -->
<!-- ngIf: list.message --><!-- ngRepeat: item in list.items | orderBy:'name' track by item.id -->
<div ng-repeat="item in list.items | orderBy:'name' track by item.id" class=""><div class="runnable-item" ng-click="list.click(item)" ng-class="{'alt': $odd, 'disabled': item.working}">
<!-- ngIf: item.working -->Excel Examples Main (Start here)</div></div>
<!-- end ngRepeat: item in list.items | orderBy:'name' track by item.id -->
<div ng-repeat="item in list.items | orderBy:'name' track by item.id" class=""><div class="runnable-item alt" ng-click="list.click(item)" ng-class="{'alt': $odd, 'disabled': item.working}">
<!-- ngIf: item.working -->Excel Examples</div></div>
<!-- end ngRepeat: item in list.items | orderBy:'name' track by item.id -->
<div ng-repeat="item in list.items | orderBy:'name' track by item.id" class=""><div class="runnable-item" ng-click="list.click(item)" ng-class="{'alt': $odd, 'disabled': item.working}"><!-- ngIf: item.working -->Hello World</div></div>
<!-- end ngRepeat: item in list.items | orderBy:'name' track by item.id --></div></div>
<!-- end ngRepeat: list in lists --><div ng-repeat="list in lists" class="">
<div class="col-sm-6"><h4>Processes</h4><!-- ngIf: list.items === undefined --><!-- ngIf: list.message -->
<!-- ngRepeat: item in list.items | orderBy:'name' track by item.id -->
<div ng-repeat="item in list.items | orderBy:'name' track by item.id" class=""><div class="runnable-item" ng-click="list.click(item)" ng-class="{'alt': $odd, 'disabled': item.working}">
<!-- ngIf: item.working -->CompletedExample</div></div>
<!-- end ngRepeat: item in list.items | orderBy:'name' track by item.id -->
<div ng-repeat="item in list.items | orderBy:'name' track by item.id" class=""><div class="runnable-item alt" ng-click="list.click(item)" ng-class="{'alt': $odd, 'disabled': item.working}">
<!-- ngIf: item.working -->SimpleActiveExample</div></div>
<!-- end ngRepeat: item in list.items | orderBy:'name' track by item.id -->
<div ng-repeat="item in list.items | orderBy:'name' track by item.id" class=""><div class="runnable-item" ng-click="list.click(item)" ng-class="{'alt': $odd, 'disabled': item.working}">
<!-- ngIf: item.working -->Standard HR</div></div>
<!-- end ngRepeat: item in list.items | orderBy:'name' track by item.id --></div></div><!-- end ngRepeat: list in lists --></div>
...
...

【问题讨论】：

回答你的问题真的很困难，因为重要的部分是弄清楚元素相对于所有其他元素的独特之处。是否还有其他具有“runnable-item”或“list.click(item)”类的元素？这有点棘手，因为 Angular 使用了无效的 html5 标签，当应用程序开发人员在前面加上“data-”（例如 data-ng-click 与 ng-click）时，Watir 更容易处理它
对不起，我没有自己开发应用程序，所以，很抱歉缺乏细节。是的，有许多具有相同类名的项目，因此，我无法弄清楚如何在 Watir 中调用它们，因为我无法在每个项目中找到唯一的东西。那么，我可以提供什么样的额外数据来更好地说明这一点？

标签： ruby watir watir-webdriver

【解决方案1】：

如果多个项目具有相同的类别，则有几个选项。

您可以使用@browser.divs(class: "runnable-item alt ") 获取所有这些结果，然后使用.each do |element| 检查结果以检查某些x 属性。
让您的选择更具体@browser.div(css: "parent runnable-item:nth-child(2)", text: /text from div/)

总体而言，您的问题需要更多上下文。再给我们一些 html 树，以便我们了解如何解决问题。你想要一个特定的按钮，一个随机的按钮，等等。

更新：你仍然需要更具体。您想要“进程”或“服务”还是单击“runnable-item alt”类的任何随机 div。如果它真的是任何随机按钮，那么以下应该足够好： @browser.divs(class: "runnable-item alt").sample.click

如果您想从任一“流程”部分或“服务”部分中随机选择一个项目，我会执行以下操作：

case Random.new.rand(2) 
when 0
  div_section = @browser.h4(text: /Processes/).parent
  div_section.div(class: "runnable-item alt").click
when 1
  div_section = @browser.h4(text: /Services/).parent
  div_section.div(class: "runnable-item alt").click
end

在任何一种情况下，您都需要更加确定要对测试做什么。使用具有已定义工作流程的多个测试用例而不是随机单击不同按钮的一个测试用例来创建差异。

【讨论】：

谢谢！我在原始帖子中添加了更完整的 HTML 代码。随机链接或特定链接（让我们先在该列表中说）都适用于我的测试。因此，基本上在您可以在上面（在 DIV 中）看到的进程和服务列表中，我需要选择使用 Watir 的任何一个并启动它，例如点击它。
谢谢！请参阅我的回复，了解我是如何做到的。是的，我基本上想调用任何随机项目，并且我提前知道项目的名称。再次感谢！

【解决方案2】：

事实证明，解决方案比我预期的要简单。使用 Watir，您可以根据文本值选择 div 元素，因此它非常适合我的用例。

从上面的 HTML 中单击/调用“CompletedExample”的代码如下所示 -

b.div(:text, 'CompletedExample').click

【讨论】：