Question

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

<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

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

您可以使用@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

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

Answer 2

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

从上面的HTML中点击/调用“CompletedExample”的代码看起来像 -

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

Ruby watir webdriver - 如何单击动态创建的div链接

2 个答案: