测试元素的相对位置

Question

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

用以下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的icon元素，另外检查后面是否有“Support”文本并检查元素是否存在：

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

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

Answer 1

我建议通过添加<span>来更改被测产品，并将文本“Support”移动到<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(...)

如您所见，它比您的解决方案更丑陋。您最好更改您的产品进行测试。