测试元素的相对位置

Question

在测试页面上我有以下支持link：

表示如下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>

我正在尝试的是测试 图标是否位于 "Support" 文本 之前。我该怎么做？

我尝试了以下方法 - 使用 XPath 找到图标元素，该元素还检查后面是否有 "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(...)

如您所见，它比您的解决方案更丑陋。你最好换个被测产品。

测试元素的相对位置

Testing relative positions of elements

testing

selenium

end-to-end

selenium-webdriver

protractor