How does test engine find elements on screen? / "cannot find element" error

Hi there, I’m loving UIlicious, and am making great progress in automating my UI testing.

One thing I’m stuck on is trying to click on button that navigates between screens - I get a “cannot find element” error.

I click “app-name-button”
Error: Cannot find element “app-name-button” to click on

I can’t get this to work either by specifying “app-name-button” or “Next” in my I.click command

Could it be that I need the element defined (named) better, e.g. using an ARIA-label that I can refer to in my commands?

Thanks.


Note : The “Anonymous-QA” account, is used by the Uilicious team, to anonymously post common questions on intercom, into public record. To makes it more searchable for other users.

As much as possible, the conversation is kept as it is, however, details are intentionally changed or removed to mask out any private and/or sensitive materials in the content such as website names, urls, user information, passwords, etc. And improve clarity of the questions and answers.

Conversation is left open, so that any other users facing similar issues can hop in for clarification if the existing solution provided is insufficient.

Hi there,

glad to hear you find it helpful so far :blush:

It sounds like you are trying to interact with class/id of an element, using the text match.
Uilicious test engine, currently has 4 main modes for interacting with elements.

1 - Matching by text
This matches by using either the text on screen, or aria labels. For example I.click("login") or I.fill("First Name","John")

Other common, but non standard labels are also auto detected at best effort (aka not guaranteed), this include those of the common Angular, React and Vue framework. All the way to hints in jQuery.

2 - Matching by HTML/CSS class name
Elements can be selected using HTML/CSS class name, with a dot prefix. For example I.click(".login-button")

3 - Matching by HTML/CSS ID
Elements can be selected using HTML/CSS ID, with a hash prefix. For example I.click("#close")

4 - Matching by XPath
Elements can be selected using XPath. For example I.click('//*[@id="tsf"]/div[2]/div[3]/center/input[1]')

Additional Note - What if there are multiple matches?

One thing useful is that when there are multiple instances of the same matching criteria - it is sometimes useful to do an I.see("Unique text") near the target text to interact with.

Think of it as instructing a user over the phone :wink: Where you can provide a hint for which action you would prefer.

Our test engine automatically favours elements near a previously hinted element.

Additional Note - Running actions inside an iframe

Finally when interacting with elements inside an iFrame, especially with salesforce, SAP, Shopify. You can improve the accuracy by running actions within a selected iframe context. For example:

UI.context("#unique-iframe-id", function() {
   I.click("Button inside iframe")
   //... other actions
})

If you like, I could help look into your account and modify your test code (with your permission) to make it work for your site. Alternatively, we provide free office hours to help guide our users through their testing process :grin: https://calendly.com/uilicious_support/office-hours

Let me know as well if you have any other questions / issues.

~ Eugene | CTO of Uilicious

Hi Eugene,

Thanks for getting back to me.

I have asked our developers to add aria labels to all navigation buttons - this will hopefully make life easier when using UIlicious.

Will get back in touch if we’re still having issues once the aria labels are in place.

Cheers,

Thats awesome to hear,

It is the most ideal flow - as it helps improve both user accessibility and testability at the same time

Hope to see more when its completed :wink:

This conversation above - has been converted into

For future references.
~ Cheers

We’ve added How UI-licious Targets Elements to our official documentation. :smile: