Ruby watir webdriver - 如何点击动态创建的 div link

Question

我的 Web 应用程序中有一个 link 在开发人员工具中检查时看起来像这样 -

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

Answer 1

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

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

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

更新：您仍然需要更具体。您想要 "Processs" OR "Services" 还是任何随机的 div 单击 class "runnable-item alt"。如果它确实是任何随机按钮，则以下内容应该足够好： @browser.divs(class: "runnable-item alt").sample.click

如果您想从流程部分或服务部分随机 select 一个项目，我会执行如下操作：

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

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

Answer 2

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

上面 HTML click/call "CompletedExample" 的代码看起来像 -

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

Ruby watir webdriver - 如何点击动态创建的 div link

Ruby watir webdriver - how to click on a div link that is dynamically created

ruby

watir

watir-webdriver