Testing relative positions of elements

Question

On the page under test I have the following Support link:

Which is represented with the following 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>

What I'm trying to is to test that the icon is located before the "Support" text. How can I do that?

---

I've tried the following - locate the icon element with an XPath that additionally checks that there is "Support" text after and check if the element is present:

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

This works but it is quite ugly and I don't like that the actual position check is hidden inside the XPath expression which is not really readable and reliable.

Answer 1

I recommend changing the product under test by adding a <span> and move the text "Support" into the <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>

But if you cannot change the product, you can use javascriptExecutor to get childNodes then check order of the nodes:

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

As you can see, it is more uglier than your solution. You'd better change your product under test.