Certain web pages change their underlying HTML code dynamically when a specific event occurs, either in the past (e.g. a page containing an "invalid credentials" alert could be different from the same page without it), or in the present (e.g. when the user highlights a social media post, some options may appear in the form of buttons).

  • In the first case, the solution is to simply capture the appropriate selectors in both cases, and incorporate them into a single control. By doing so, if one of the selectors fails, the others will be tested, until the right one is found.
    Alternatively, one may use conditionals in their process to determine which selector should be used.

  • In the second case, the actions that the user should take in order to make the required elements appear might have to be reproduced as well. For example, in the case mentioned above, the process might have to include a "Hover Mouse over Element in Web Page" action - hovering over the post - in order for the required button to appear in the HTML code.

In every case, it is possible that, although the structure of the page changes, the underlying elements have certain attributes that could be used to identify them. 

Therefore, it is worth checking whether an element's id, class etc. attributes also change dynamically. If not, they can be used to create reliable selectors; even if they change dynamically, but contain some stable parts (e.g. div[id='textBox1'], div[id='textBox2'] etc.), it is possible to use CSS selectors like div[id*=textBox] to build our WA selectors.

In case we notice that part of the CSS selector changes and the rest stays the same, then we can omit this part from the selector, or modify that part accordingly to make it more robust.