Semantic Locators

Back in 2016 I wrote a post titled User Observable Locator Controversy

Which asked the question, is it better to use stable selectors like ID or visual selectors like text labels?

Now new frameworks are popping up that embrace the latter approach.

Taiko

Last year, ThoughtWorks released a new open-source test automation framework (using node.js) called Taiko (which can integrate with Gauge, their BDD framework) which embraces this idea by using SmartSelectors. Taiko’s API treats the browser as a black box. With Taiko you can write scripts just by looking at a web page, without inspecting it’s source code. Taiko’s API mimics user interactions with the browser. If you want to write into an element that’s currently in focus, such as on google.com, this command will click on any element with the text 'Google Search' (a button on the page): 

click ("Google Search")

With Taiko’s API you can avoid using ids/css/xpath selectors to create reliable tests that don’t break with changes in the web page’s structure. You can also use Taiko’s proximity selectors to visually locate elements. For example, this command will click the checkbox that is nearest to any element with the text 'Username': 

click(checkbox(near("Username")))

Learn more at https://taiko.gauge.org/#smart-selectors

CodeceptJS

Another new open source test framework (also built on node.js) called CodeceptJS, that takes a similar position using Semantic Locators. CodeceptJS can guess an element's locator from context. For example, when clicking CodeceptJS will try to find a link or button by their text When typing into a field this field can be located by its name, placeholder. Here is an example:

I.click('Sign In'); I.fillField('Username', 'davert'); 

It also has a Locator Builder function. Its output is XPath but the author does not have to view the source or study XPath to use it.

To locate a element inside label with text: 'Hello' use:

locate('a')

 .withAttr({ href: '#' })

 .inside(locate('label').withText('Hello'));

Learn more at https://codecept.io/index.html

Selocity

Since we just opened the door to using XPath as long as you don't have to view the source, there is a browser extension that I have found very useful. There are versions for Chrome and Firefox.

It is called Selocity, it creates the XPath or CSS selector in your clipboard for any element that you select with right-click.

Just paste it into your test - no need to view source and try to figure it out yourself. 

Learn more at www.ranorex.com/selocity/browser-extension

Conclusion

Of these three options I think that Taiko is probably the easiest to implement but it is limited to just testing in the Chrome browser. This has the advantage of being extremely fast, compared to Selenium. 

I have chosen to use CodeceptJS because it allows me to write my tests in a DSL (I will write a separate post on DSL) and to choose between several browser controllers and to switch between them without having to edit my tests.

I use the browser controller Puppeteer for speed, which is limited to Chrome. But I can switch to Selenium when I need cross-browser test capability.

Both tools allow you to still use XPath and CSS when necessary, so the browser extension Selocity comes in really handy.

Please check them out and share your observations and experience here. Thank you, Eric.