等待，按值获取元素

Question

使用 watir/cucumber/ruby 进行网页测试。问题是某些字段在没有 javascript 的情况下无法定位。

这是我要匹配的页面部分：

<!-- ngIf: (!entry.valueIcon) --><div ng-if="(!entry.valueIcon)" class="ng-scope">
  <!-- valueAlt when value is not present or is on a separate object key such as valueFrom: { something: 'else' } -->
  <!-- ngIf: entry.valueAlt -->

  <!-- default value display -->
  <!-- ngIf: (!entry.valueAlt) --><input ng-if="(!entry.valueAlt)" type="text" class="form-control ng-valid ng-scope ng-valid-pattern ng-valid-minlength ng-valid-maxlength ng-dirty ng-valid-parse ng-touched" ng-class="{ 'key-value-editor-set-focus-value-1006' : $last  }" id="key-value-editor-value-1006-0" name="key-value-editor-value-1006-0" ng-attr-placeholder="{{ (!isReadonlyAny) &amp;&amp; valuePlaceholder || ''}}" maxlength="" ng-model="entry.value" ng-readonly="isReadonlyAny || isReadonlySome(entry.name) || entry.isReadonly" placeholder=""><!-- end ngIf: (!entry.valueAlt) -->
</div><!-- end ngIf: (!entry.valueIcon) -->

事实上，在网络浏览器中，我输入了一个值XYZ。但是像browser.element(xpath: %Q%*[@value="XYZ"]%) 这样使用xpath 找不到元素。另一方面，如果我执行browser.element(id: "key-value-editor-value-1006-0").value，则返回正确的XYZ 值。

现在你会问为什么不按 id 选择元素。这是因为这是一个键/值对输入字段表。我想通过使用key 值作为参数来编辑值。我不想为碰巧需要的每个组合保留单独的代码。

问题是：有没有办法只通过使用 watir 选择器提供键值XYZ 来选择元素。即用什么代替下面的???？

browser.element(???)

更新：这是使用 javascript 的方法，但我想知道是否可以使用普通的 watir 选择器完成同样的事情：

browser.browser.execute_script(%Q%var p = new RegExp("^BARBATRON$"); var el = document.getElementsByTagName("input"); for (var i=0; i<el.length; i++) { if (p.test(el[i].value)) return el[i]; }%).click

Answer 1

这似乎是 Selenium-Webdriver 中的一个限制（或错误？）。看起来您只能在页面加载时根据值定位元素。您无法使用更改后的值定位元素。

# Element can be located using its original value
browser.text_field(value: 'initial value').exists?
#=> true
browser.text_field(xpath: '//*[@value="initial value"]').exists?
#=> true

# The value is changed
browser.text_field.set('new value')

# Element cannot be found using the new value
browser.text_field(value: 'new value').exists?
#=> false
browser.text_field(xpath: '//*[@value="new value"]').exists?
#=> false

# Element can still be found using the original value
browser.text_field(value: 'initial value').exists?
#=> true
browser.text_field(xpath: '//*[@value="initial value"]').exists?
#=> true

唯一的解决方案似乎是像您所做的那样遍历元素。虽然我个人更喜欢用 Ruby 来做：

field = browser.text_fields.find { |t| t.value == 'XYZ' }

Answer 2

我不确定我是否理解，我在您的 html 中没有看到 value 属性。 也许是这样的：

browser.element(id: /key-value-editor-value-\d{4}-0/).value

或者这个：

key = "1006"
browser.element(id: "key-value-editor-value-#{key}-0").value