Handling dynamic element IDs with AI

As web application UIs grow more complex, developers are increasingly turning to frameworks to help create them. One of the key upshots to this is that element IDs become dynamic and are assigned automatically. In turn, this causes problems for test scripts since these dynamic IDs are much less predictable and make element selection harder. One solution to this is to use artificial intelligence to improve the element selection process. Here, we explore how this can be done naively and then contrast this with Functionize’s Intelligent Test Agent.

The importance of element IDs for test automation

Test automation involves getting a computer to interact with your website as if it were a user. In order to do this, the computer needs to be told which elements to interact with (e.g. which button to click, which text field to fill out, etc.). There are various ways of identifying or selecting an element in a test script. One of the most reliable of these is to use the HTML ID of the element. Importantly, according to the HTML standards, this ID has to be unique.

Dynamic element IDs

Nowadays, many web-based UIs are built on top of web frameworks. These make it easy for developers to create rich, dynamic, and interactive websites and applications. However, these frameworks also tend to assign random IDs to elements. For instance, a call-to-action button might be called CTA-3014. The same is true for sites that make use of large amounts of dynamic content, such as Gmail. Again, many elements will receive randomly assigned IDs.

Unfortunately, these dynamic IDs are something of a nightmare for test scripts. If you can’t know what an element is really called, you are forced to use less accurate CSS selectors or more complex selectors such as XPaths. In turn, this increases the likelihood that you will spend your life maintaining these tests. Furthermore, if you don’t know the ID is dynamic, you may accidentally include it, meaning your tests will break right from the start.

Using AI to identify dynamic elements

Solving the dynamic element ID problem comes in two halves. First, you need to be able to tell whether an element ID is dynamic or not. Second, if it is dynamic, you need to check whether to exclude it from your selector. Both of these problems can be solved by building a machine learning model.

The first step is to find a large set of training data to train the model. Ideally, this should consist of a significant number of websites where you know which dynamic element IDs have been assigned randomly. Clearly, this is going to take quite a bit of manual effort to tag elements appropriately. Having done that, you can create a trained model that will be able to spot when an element is dynamic. Then you need to determine whether to use this element for your test scripts. This is a bit harder, but again, ML can be used to understand whether the element ID is ambiguous or not (and if it is, to use an alternative selector).

A more intelligent use of AI

Here at Functionize, we have spent the past 4+ years developing our intelligent test agent. Rather than simply using dumb machine learning as described above, our system combines multiple forms of AI. It takes a completely different approach to solve the problem. Rather than trying to find a single selector to describe each element, it creates a full model of your UI.

Oue ML engine fingerprints every element in your UI. These fingerprints are based on hundreds of data points relating to each element. It looks at visual attributes (is it visible or not, how is it styled, what does a button say, etc.). It also looks at classic selectors (CSS, XPath, etc.). Finally, it uses its model of your UI to add additional checks such as how does this element relate to others on the page. This includes understanding what a button actually does (e.g. API calls and server responses). 

The upshot of this is that it is completely irrelevant whether an element has a dynamic ID or not. Quite simply, the system identifies the element in the same way a human test engineer would. This means that if you have a “Buy Now” button at the bottom of your page, it doesn’t matter what ID it has. ML engine simply knows that is the button that adds a product to the cart. Even better, if you change the button to say, “Add to cart”, it will still know that is the button it needs to select.

Conclusions

In conclusion, AI can be used to solve issues such as dynamic element IDs. But with AI there’s always a choice. You can take the dumb approach of just solving the immediate problem. Or you can take a step back and look at how AI might be used to remove that problem altogether. This intelligent application of AI lies at the heart of everything we do as a company.