需要帮助将兄弟元素错误消息定位到特定 select 列表

Question

我有一个表单，其输入通常是 div 的依赖项。在 div 下还有一个跨度，如果该字段是必需的但留空，它将显示一条错误消息。

但是，在 select 列表中，跨度与输入不在同一 div 下，它是 div 的兄弟元素。

我正在尝试编写一个测试来验证错误消息是否出现在适当的输入上（如果它留空），在其他输入上相当容易，因为它们在同一父项下，但是 select 列表，我不知道如何确认 select 列表显示的跨度，因为它与 select 列表输入不在同一 div 下。这是我正在处理的 html 示例：

<form name="editorForm" novalidate="" class="ng-invalid ng-invalid-required ng-dirty ng-valid-parse" style="">

   <div class="select icon-arrow-down ng-scope" ng-if="!isCurrentSectionReadOnly">
        <select name="additionalPropertyType" ng-model="additionalPropertyCtrl.selectedExposure.additionalPropertyTypeExternalId" ng-options="additionalPropertyType.value as additionalPropertyType.text for additionalPropertyType in additionalPropertyCtrl.additionalPropertyTypes" required="" class="ng-pristine ng-invalid ng-invalid-required ng-touched" style="">

   <span form-submitted="additionalPropertyCtrl.editorSaveAttempted" yp-field-error="editorForm.additionalPropertyType" class="ng-isolate-scope field-validation-error">
       <span name="errorMessage" class="">Please provide an Additional Property Type.</span></span>

 </form>

示例中的 span 只有在提交前一个 div 中的 select 列表时才可见。 如何在不使用诸如文本或索引之类的脆弱内容的情况下验证此特定范围是否可见？有没有办法验证某种兄弟姐妹关系？

我需要一种方法来确认上面 div 中特定于 select 列表的跨度是可见的，而不仅仅是像这样的跨度是可见的，因为表单可能有更多这个和每个跨度的一个实例具有相同的名称。我想避免使用特定的文本（因为它可能会改变）或索引（也可能会改变）

Answer 1

穿越到兄弟

您可以通过将 XPath 与 following-sibling 或 preceding-sibling 结合使用来获取元素的兄弟元素。

在这种情况下，您试图找到以下相对于 div 的跨度：

select_list = browser.select(name: 'additionalPropertyType')
parent_div = select_list.parent
sibling_span = parent_div.span(:xpath => './following-sibling::span')
sibling_span.text
#=> Please provide an Additional Property Type.

您可以将所有这些调用合并到一个 XPath 中。这将提高性能，但可能会以代码可读性为代价。

browser.span(xpath: '//select[@name="additionalPropertyType"]/../following-sibling::span').text
#=> Please provide an Additional Property Type.

使用唯一的 yp-field-error 属性

由于span上的yp-field-error属性是唯一的，可以避免上面复杂的遍历。由于这是非标准 HTML 属性，您需要使用 XPath 或 CSS:

# Using XPath:
browser.span(xpath: '//span[@yp-field-error="editorForm.additionalPropertyType"]').text

# Using CSS:
browser.span(css: 'span[yp-field-error="editorForm.additionalPropertyType"]').text

鉴于您有多个这样的 select 列表，您应该将 yp_field_error 添加到可搜索属性中。这将允许您编写没有 XPath/CSS 的常用定位器。更新您需要 Watir-Webdriver 的地方：

require 'watir-webdriver'
Watir::HTMLElement.attributes << :yp_field_error

然后您用于查找元素的代码将简单地变为：

browser.span(yp_field_error: 'editorForm.additionalPropertyType').text

需要帮助将兄弟元素错误消息定位到特定 select 列表

Need help locating a sibling element error message to a specific select list

html

ruby

watir

watir-webdriver

page-object-gem