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.

Technically, position of the text and icon on screen are controlled by css, you cannot verify that icon is on the left of text. But if you just want to check order of elements and text node in DOM, you have use JavaScriptExecutor, pass the parent element as parameter when executeScript, then get childNodes and check order of them inside javascript. It is more ugly than your solution. So I recommend changing the product under test by adding the text into a span, then you can use selenium to findElements and check order in list. — Buaban, Feb 06 '16 at 05:41
@Buaban that's an interesting idea to wrap the text into an element to make things easier, it actually deserves to be an answer, please consider posting. Thank you! — alecxe, Feb 06 '16 at 05:43

score 2 · Accepted Answer · answered Feb 06 '16 at 07:47

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.

Testing relative positions of elements

1 Answers1