Question

我有一个带有输入的表单，通常是div的依赖。在该div下面也是一个跨度，如果该字段是必需的但是留空则会显示错误消息。

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

我正在尝试编写一个测试来验证错误消息是否出现在相应的输入上，如果它留空，在其他输入上相当容易，因为它们在同一个父项下，但是对于选择列表，我不能弄清楚如何确认选择列表显示的范围，因为它不在与选择列表输入相同的div下。这是一个关于im处理的HTML示例：

provided

示例中的范围只有在前一个div的选择列表提交时才显示为空白。 如何在不使用文字或索引等脆弱的东西的情况下验证此特定范围是否可见？有没有办法验证某种兄弟关系？

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

Answer 1

遍历兄弟姐妹

您可以使用带有following-sibling或preceding-sibling的XPath来获取元素的兄弟元素。

在这种情况下，您试图找到相对于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属性

鉴于yp-field-error上的span属性是唯一的，您可以避免上述复杂的遍历。由于这是非标准的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

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

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

您找到该元素的代码就变成了：

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

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

1 个答案: