测试元素的相对位置

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>

我尝试的是测试图标位于＆＃34;支持＆＃34;之前？文本。我怎么能这样做？

我尝试过以下操作 - 找到带有XPath的图标元素，另外还会检查是否有＆＃34;支持＆＃34;文本之后并检查元素是否存在：

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

这很有效，但它非常难看，我不喜欢实际的位置检查隐藏在XPath表达式中，而这种表达式并不是真正可读和可靠的。

Answer 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(...)

正如您所看到的，它比您的解决方案更丑陋。你最好更换你的产品。