TestProject Forum
Powered by leading experts in the test automation community

Has anybody managed to use the recorder with Select2.js select boxes?

Hello, evaluating this tool for a few sites my company runs. One problem we’ve come up against right away is that several of our websites uses a JS library named select2.js (which is awful, but that’s beside the point for the time-being)…

For Select2 boxes that have a text search I’ve managed to figure out how to record actions by clicking on them, typing a few characters, then sending the Tab key. But for Select2 boxes that don’t have a text search, I’m completely clueless on how to record actions on them… if you do the obvious thing and simply click the item you want the tool records a classname that changes every time the page reloads, and the instructions can’t be replayed.

Has anybody managed to make this work?

Hello and thanks for reaching out.

Since their locator is generated dynamically every time, you will need to find a way to locate them regardless of their constantly changing ID/CLASS/XPATH.

Consider the following as to how to handle randomly created locators:

In short, you need to create some locator that can catch these elements without being dependent on the value that changes.

Looking at the C# code I wrote to handle this site, it looks like it loops through all the elements of the page using the CSS Selector “li.select2-result”, then matches the specific option based on a string comparison of the inner text.

Sorry I’m not as familiar with XPath but is it possible to make an XPath that matches based on innertext and if so is it possible to make the specific value it matches on (in this particular case, a US state name) configurable?

1 Like

Sure, you can write an XPATH that works based on text value like this for example:

//*[contains(text(),‘Alaska’)]​

There are other ways to do it as well.

You can parameterize it by making the state name a test parameter:

Edit your locator and choose to add a parameter

Create a new parameter that will hold the state name and add it to the xpath (Notice the underline underneath the parameter, that means you are using a parameter instead of just a constant value)

Now you can easily edit this parameter throughout your test by creating actions and setting it to receive the output value:

4

If you have a specific list of states, you can use data driven testing by generating a csv file from your test:

5

And selecting it when running the test:
6

Each row in the csv file will be another execution of your test.

You can find more details about data driven testing here:

https://docs.testproject.io/schedule-and-run-tests/using-data-driven-jobs-in-testproject

Thanks, that’s very helpful and gives me a clear path forward.

1 Like