How to click on elements with unstable selectors in Uipath
Tags: uipath, tutorial, devops, developer
Published: 2023-07-27 12:27:25

<h1>Due to the Edge update, the selector of "Save As button" can not be taken
(method of clicking an element whose selector is unstable)</h1>


![Image 01](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jd9s4g0l1y4bkak93dkg.png)

<h3>introduction</h3>
Hello, this is K, an engineer at ocomoji.
Recently, due to an automatic update of Edge, the "Save As" selector for download files has become unstable, and Robo has stopped

. Since it was difficult to deal with using UI Explorer, we are introducing correspondence with [Coordinates] Using
this method, you will be able to **click on elements with unstable selectors,** not just Edge * Created with UiPath will be

<h3>AsIs</h3>
Unable to click "Save As" for download files in Edge using UiPath
(clicking Save As: The UI element corresponding to this selector was not found error) Before the
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3uobwh82d0yj7kfqo5c9.png)
update, "Name Only the "Save As" button can be selected

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54xiafkydgab320vtiln.png)
After the update, only the "Save As" button cannot be selected, and the entire list is selected.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0hiy0no1rry6kjm93ro.png)

<h3>ToBe</h3>
Using UiPath to realize the click of "Save As" of the download file in Edge
Corresponding by utilizing "coordinates"

<h3>Advance preparation</h3>
UiPath, Edge, Notepad
　* My environment
　　UiPath Ver: 2022.10.3
　　Edge Ver: 114.0.1823.43 64bit

<h3>Development table of contents</h3>
1. [Edge initial settings](#settings)
1. [Coding UiPath](#coding)

<h3 id="settings">1. Edge initial settings</h3>

Initial settings of Edge

1. pin download menu
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yr8tb7buaixq24guhmau.png)

1.Start the setting screen

 - Appearance → Turn on the download button
 - Download → urn on Confirm operation when downloading every time Turn on Show download menu when download starts

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o145l02n7zfpqzmxve96.png)

<h3 id="#coding">2. UiPath Coding</h3>
Since the image of the workflow is vertically long, check from here
  [Workflow](https://ocomoji.co.jp/static/images_tips/002/02_00.jpg)
  [use variables](https://ocomoji.co.jp/static/images_tips/002/02_00_02.png)

1. Get the relative position of the target element based on the anchor element 

 ①Install a comment-out activity
　Any activity that can acquire the selector, so place two inside
　(Use GetPosition here)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ib1i204za1axqu6qbrsy.png)
 ②Ui Explorer from the first activity Launch → Select element
　Select an anchor element (Download button)
　Two sets of position values ​​are displayed on the Ui Explorer property screen, so make a note of the value on the left
　(3610, 36)
　Exit Ui Explorer (Save is Either is OK)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eice84d1odrer7wf9th2.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6mwio958q94ati81tii.png)

 ③Align the position of the minimize button of Notepad so that it overlaps the position of the Save As button Start
　Ui Explorer from the second activity →
　select the element Select the target element (Minimize Notepad button)
　Two sets of position values ​​are displayed on the Ui Explorer property screen, so make a note of the value on the left
　(3586, 192)
　Exit Ui Explorer (OK without saving)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t02dlef237ldp0y93f0q.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/avuz6dxl03kx8e1wl2om.png)

What are you doing here if you have a good intuition? I wondered what to do after this ^ ^;

2.Variable initialization

① soutai_pos_x: Differential X coordinate from the anchor element 
　to the relative position
　3610 - 3586 = 24, so set 24
　* Both X axes are at roughly the same position, so 0 is fine

② soutai_pos_y: Relative position from the anchor element
　36 - 192 = -156 → Invert 　　　and
　set 156 do

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ynvypkvsxxwxuopz8tc.png)

3.Start the Edge browser
① Maximize the window Place the activity
 If the size is not fixed, the relative position may collapse 
 depending on the environment

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qrhcc3l3xfuneiga1t8p.png)

4.Get the coordinates of the anchor element
If you repeat the process of file DL → save as, you don't need to incorporate it into the loop because the coordinates of the anchor element are already acquired in the order 1 each time. You may think that, but considering the possibility that the coordinates of order 1 may be deviated due to pop-ups or sudden phenomena, incorporate it like this

① Set up the GetPosition activity
② Select the element and get the selector (Download button of Edge)
③ Set variable ank_pos to output value
*ank_pos: Coordinates of anchor element


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/re13pj5wgnn7urwh4xbb.png)

5.Click the Save As button
① Install the Click activity
② Set the following formula for X and Y at the cursor position
　X: ank_pos.X + soutai_pos_x (3610 + 24)
　Y: ank_pos.Y + soutai_pos_y (36 + 156)

In this process, click the relative position (soutai_pos_x, y) from the anchor element (ank_pos), but
this position will be the Minimize button of Notepad = Save As button

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8usopb4yyzdnq5hk2z48.png)

<h3>Regarding correspondence other than coordinates</h3>
Other countermeasures (plans) include the following:
　1. Click the element using the anchor base
　2. Click the element using the UI Explorer
　3. Edge downgrade & stop automatic update
As a result of trying these, only 3 was a valid hit


1. Element click using anchor base
Selecting an anchor element with anchor base ...
Cannot be used because the essential element (save as) cannot be selected (crying)

1. Using the UI Explorer and
tinkering with element clicks, you can now select the Save As button
and clicks work fine! ! However, when Edge is restarted, it does not respond and an error (crying)
*The technique to temporarily acquire the selector will be described later in the next chapter.

1. Edge downgrade & automatic update stop
I think it's the shortest way because there is no need to repair the robot
, but I want you to be aware that it is only an emergency measure
Stopping the automatic update leaves Edge's vulnerability and uses it. there is Considering the security aspect , [how to downgrade Microsoft Edge, which](http://robop.help.biztex.co.jp/article/sjx12h8ip2-microsoft-edge)
**eventually requires robot repair (external site)**


<h3>A trick to temporarily get a selector using UI Explorer</h3>
Have you ever used the UI Explorer to expand the hierarchy and find an element?
Elements with unstable selectors may not be found even if the hierarchy is expanded.
Here we introduce a method for quickly finding even elements with unstable selectors.

1.Set up an activity that can use UiExplorer (Anything is OK)
Start UiExplorer → Select an element → Click on the download list to select There

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lwccuf6b77o4wne0nlfx.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3xpyztkrbiu36ofn6az.png)

are many layers in the visual tree on the left like this. By the way
, I couldn't find it even if I searched for it...

2.Since there are "document" and "pane" below the current hierarchical position, double-clicking "document" will change the selector at the bottom right.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5h0aspj3e45qht1a1gui.png)

3.Add the following selector at the bottom of the bottom right selector
```html
<ctrl name = 'Save As' role = 'push button' />  
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tkjnhslwgaba6vjhxhxr.png)

4.Press the validation button

5.The Validate button turns green, and the visual tree, current hierarchy, lower left property, etc. are updated. When you press the highlight, only the "Save As" button is selected, that is,
"Save As" If you get the position value from the property in this state


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odywsbrwewg0pg5aizg8.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p3vu8qzrlwhhxqreuek2.png)

, you can avoid using Notepad. Once you grasp the regularity of the name and value, it will automatically find the corresponding selector, so I think it is more efficient than searching by hierarchy
. So I put it in by intuition and it worked lol)

＊You can get the selector temporarily, but if you restart Edge, it will not be recognized again

<h3>digression</h3>

1. As soon as the UiPath modified version that supports Edge after the update is released, it should be possible to select the element as before.

1. There are almost no opportunities to use this time's "coordinate acquisition by substituting Notepad" ... **but I learned about anchors, relative elements, coordinates, and UiExplorer.**
there is a place I felt that I still needed to study

1. Even inexperienced people, juniors, or systems unrelated to UiPath, there are many hints from casual words and information
. ( I used to use coordinates when embedding text links in images.) I'm glad that

the knowledge I've cultivated in a different industry than RPA was not wasted, and I'm glad I was able to make use of it in this situation.

<h4>We are ocomoji Corporation, an RPA and business efficiency company in Saga, Japan.
Please feel free to contact us.
</h4>
[ocomoji.co "Bring DX closer to you."](https://ocomoji.co.jp/)