Sahi Pro's Relation APIs and Selenium's Relative (Friendly) Locators

Selenium 4 has recently added Relative Locators like above, below, toleftOf, toRightOf etc. This is a response to a post by Angie Jones and a suggestion from Rahul Verma that I comment on the uses/challenges of such an approach, given that I implemented these features in Sahi around 2008-2009. Thank you both for writing and sharing. I will respond based on why we built it in Sahi Pro and what our use cases are:

In Sahi, there are 2 types of Relation APIs.

1. DOM Relation APIs like _near, _in, _parentXXX etc., and
2. Positional APIs like _leftOf, _under etc.

Both these are ideally used in case of composite controls, where the relations are kind of fixed. In such controls, at least one part is a dynamically generated but useful/identifiable label, and the other parts are functional elements relative to that label.

For example, consider a tree structure where every node is a text with a +/- icon for expand/collapse. In such a case, the +/- may be identified as _image("/toggle/", _near(_div("Folder One"))). Other cases:

• A tabular grid of books and their prices, where you want the price of a book (Book name is identifiable and significant, and we need price)
• Checkboxes near todo items (Todo text is identifiable and significant, checkbox is related)
• Edit link of an article in a list of articles in a CMS/blog application (Article header is identifiable and significant, edit link is related)
• Pay links near invoices etc.

Going back to Angie's article, we would recommend using Sahi Pro relational APIs for the second use case of checkboxes and NOT for the first use case of checking alignment.

In Sahi Pro, if alignment was to be checked, we would use _assertHorizontallyAligned or other alignment APIs. And the assertion would be selectively done only for specific viewport sizes.

Let us consider the todos example. Btw, the todomvc project is awesome!

In Sahi, the element is directly identified as _checkbox("hello world") because Sahi also identifies with associated label. More interestingly, the element can also be identified as

_checkbox("toggle", _near(_label("hello world")))

Why did Sahi's _near work? It worked because in Sahi, _near is based on "nearness" in the DOM not the UI. _leftOf fails here in case of Sahi too. And it SHOULD fail, because, the elements are at the same point. This is by current definition. However the definition can be changed to address the special case of overlapping boundary, if needed. Since _near takes care of identification of such elements, we need not make any change.

This is the sample script:

// Add hello world
_setValue(_textbox("new-todo"), "hello world");
_keyPress(_textbox("new-todo"), 13); // press Enter

// Add goodbye world
_setValue(_textbox("new-todo"), "goodbye world");
_keyPress(_textbox("new-todo"), 13);

// Check
_click(_checkbox("hello world")); // using Sahi's API directly
_click(_checkbox("toggle", _near(_label("goodbye world")))); // using _near

// Delete

_click(_submit("destroy", _near(_label("goodbye world")))); // using _near

and its execution:

Does this mean Selenium's toLeftOf etc. are not useful? No. This was not a use case for Selenium's toLeftOf. May be, near should work in such case for Selenium. If not, a simple fix would be to consider 0 difference in pixel positions to be valid. Note that Selenium's near is still position based while Sahi's is DOM based but I don't think it should matter).

The concept of Relation APIs is quite useful not just for Web. Sahi Pro implements this across Web, Desktop thick clients and Mobile automation.

The test automation world has for long suffered from flaky tests due to Selenium being free and it providing only rigid, brittle mechanisms of identification. Relative locators are a step in the right direction. Better (very?) late than never.