Application Modelling: Shapeshifting UI elements

[Michael_S]

Hello everyone - I have a browser automation problem / challenge for you all that I ran into recently and thought you might be able to help with. FYI I'm currently using BPE 7.3.1

I need to set a date range in a web tool. To do that, I first need to get Blue Prism to open the date picker by clicking a UI element. The problem is, this UI element changes depending on whether someone else in my team has been in the tool and set a date recently. 

If no one has used the tool lately, it looks like this:

If someone has been in the tool and set a date recently, it looks like this:

And, of course, because of excellent design choices - those two variations have very different attributes. This makes my process fail, and makes me sad.

I imagine there's a few different ways to tackle this, and some best practice I am missing (I am a beginner please be kind!). So my question / cry for help is: How can I reliably handle this variable situation?

[Nandhakumar]

Hi @Michael_S 

I assumed that the attribute values for both variations are completely different as per you information. Can you please provide the app modeller screen for both elements? for me to provide you a better suggestion? anyhow please try the below,

Here is the step by step approach you may need to follow to handle the situation if an element(date picker) changes its attribute values based on the selection.

Basically we need to spy both variations of the same element in the weg page as below,

1. Add a new element in app modeller and Spy the Date picker element based on your first image

2. Add an another element in app modeller and Spy the Date picker element based on your second image

Then use the wait stage add 2 steps drag and drop each of the created element as per above steps.

In this case, lets say the date picker is like below, then bot will go through the branch of step1 in the wait stage.

another scenario is, date range is already selected then bot will go through the step2 branch in wait stage.

Note: I believe the element inside the date picker may change as well, if so please create a respective elements for both variations

Thanks,

Nandha

[saha1sourav2]

Hi @Michael_S,

completely agree with the approach @Nandhakumar suggested as it aligns well with best practices. Another method you could consider is:

If the differences between the two elements are predictable (like changes in innertext or class), you might be able to spy just one version of the element and use wildcards in the Match Criteria to make it flexible enough to match both versions.

For example, in HTML spy mode, instead of setting class = datepicker-enabled, you could use class = *datepicker* to cover a broader range of possibilities.

[Michael_S]

Beautiful responses @Nandhakumar and @saha1sourav2  - thank you both so much! Let me try to implement these and I'll come back with any queries.

Appreciate the help 🙂