I am writing automated user tests, like „Go to list page, change sorting to 'by price', check if fir

URT3G5BC5

I am writing automated user tests, like „Go to list page, change sorting to 'by price', check if first article is cheaper than second article,…“. This is mostly done by Javascript, like document.querySelector('#button_sorting').click(); (I use GhostInspector, but just consider that being an abstraction layer).

My problem with Spryker is now, that many form elements like dropdowns seem to get “randomized changing“ attributes on each reload, for example:

<li class="select2-results__option select2-results__option--highlighted" id="select2-ipp-r1-result-8c4s-12" role="option" aria-selected="true" data-select2-id="select2-ipp-r1-result-8c4s-12">
12
</li>
…when I reload the page “id“ will change from “something-8c4s-something" to another 4-letter-combination, also data-select2-id, and also this happens on the parent select of an option. This happens to the “real“ elements like select/option and also the themed ones like ul/li or custom-select.

This makes writing a selector very, very difficult, also making my code break easy, because I have to work with soft patterns like contains *-select-*

1. What is the intention behind this behaviour?
2. Can we just “configure that away“.
3. Is there some documentation how to deal with it, and what's best practice to querySelect elements?

UKJND3A3H

while not knowing for sure, my assumption is that this is brought in rather from used select2 js library than from spryker itself

URT3G5BC5

Thanks for helping — it looks like you're right. At least we know some reason now — will post a solution, if we find one.