测试元素的相对位置答案

【问题标题】：Testing relative positions of elements测试元素的相对位置
【发布时间】：2016-05-16 05:24:09
【问题描述】：

在测试页面上，我有以下支持链接：

用以下 HTML 表示：

<div class="ap-version-panel ap-version-support">
    <a href="http://site/support.html" target="_blank" ng-keydown="ApVersionCtrl.keydownHandler($event)"><i class="fa fa-external-link"></i>Support</a>
</div>

我正在尝试测试 图标是否位于“支持”文本之前。我该怎么做？

我尝试了以下方法 - 使用 XPath 定位图标元素，该 XPath 还检查后面是否有“支持”文本并检查该元素是否存在：

expect(element(by.xpath("//text()[. = 'Support']/preceding-sibling::i[contains(@class, 'fa-external-link')]")).isPresent().toBe(true);

这可行，但它很丑陋，我不喜欢实际的位置检查隐藏在 XPath 表达式中，这不是真正可读和可靠的。

【问题讨论】：

从技术上讲，屏幕上的文本和图标的位置由 css 控制，您无法验证图标是否在文本的左侧。但是如果你只想检查DOM中元素和文本节点的顺序，你可以使用JavaScriptExecutor，在executeScript时将父元素作为参数传递，然后在javascript中获取childNodes并检查它们的顺序。它比您的解决方案更难看。所以我建议通过将文本添加到跨度来更改被测产品，然后您可以使用 selenium 查找元素并检查列表中的顺序。
@Buaban 将文本包装成一个元素以使事情变得更容易，这是一个有趣的想法，它实际上值得一个答案，请考虑发布。谢谢！

标签： selenium testing selenium-webdriver protractor end-to-end

【解决方案1】：

我建议通过添加<span> 来更改被测产品并将文本“支持”移动到<span>。

<div class="ap-version-panel ap-version-support">
    <a href="http://site/support.html" target="_blank" ng-keydown="ApVersionCtrl.keydownHandler($event)"><i class="fa fa-external-link"></i><span>Support<span></a>
</div>

但是如果你不能改变产品，你可以使用javascriptExecutor来获取childNodes然后检查节点的顺序：

var aFunctionToCheckOrder = function (arguments) {
    var nodes = arguments[0].childNodes;
    var result;
    // Check nodes[0] = <i>
    // Check node [1] is textNode and its value = "Support"
    return result;
}
var supportLink = element(by.linkText("Support"));
browser.executeScript(aFunctionToCheckOrder, supportLink).then(...)

如您所见，它比您的解决方案更难看。你最好改变你的被测产品。

【讨论】：