Let's assume that we have the following CSS selector that changes dynamically.
iframe[id=”ext-gen262″] iframe[id=”detail-ext-gen12-731264″] form[name=”topaz”] input[type=”text”][id=”X256″]
Saying that a selector changes dynamically, it means that the selector might change if we reload the web page or if we navigate to that page in a different way. For example, iframe[id="ext-gen262"], might change to iframe[id]"ext-gen269"] or a new iframe tag might appear in the middle of our selector.
The way we can handle this case, so that the Robot will be able to find the desired element every time, is by manipulating the selector and making it more "generic".
First we have to inspect the selector extracted from multiple instances of the web page and determine what remains the same in every instance.
Let's assume that in our example, regarding iframe[id="ext-gen262"] we determine that the only thing that changes in different instances of the web page is the number 262. We can modify this part from being literal to "starts with" equality as follows:
This will make the Robot disregard the number in the id and simply try to find the id that starts with the phrase "ext-gen", which will always be there.
The way to handle the case where we have new HTML elements appearing in our selector, depending on how we navigate to the web page, would again be by determining what kind of elements get added. Let's assume that in our example, a new iframe element gets added. What we could do in this case is to add a "fallback" selector by separating the two by a comma as follows:
iframe[id^="ext-gen"] iframe[id^="detail-ext-gen"] form[name="topaz"] input[type="text"][ref="instance/header/company"], iframe[id^="ext-gen"] iframe[id^="detail-ext-gen"] iframe[id="<may or may not be present>"] form[name="topaz"] input[type="text"][ref="instance/header/company"]
Notice that in the second selector (the one after the comma), we have an additional iframe element.