# How to Understand That the Selector is Not Optimal?

For the same web interface element, many different selectors can be found, all of which will work to some extent. For example, in the WhatsApp web client, the selector

`#main > footer > div._2lSWV._3cjY2.copyable-area > div > span:nth-child(2) > div > div._1VZX7 > div._2xy_p._3XKXx > button`

and the selector

`button[aria-label="Send"]`

will refer to the same control element – the "Send" button. And both will work at the moment. The first selector relies on a long path from the very beginning (the root element) of the web page down to the specific control element in the hierarchy tree. The second selector relies on the tag type of the control element and one characteristic attribute of that tag. Although both selectors work correctly at the time of writing, the first selector is much more likely to "break," meaning it will stop working, with the next update of the web application or website. For example, intermediate control elements may appear or disappear along the path of the selector, and consequently, the path from the root element to the desired one will change.

Also, if the selector contains pseudo-random combinations of letters and numbers (such as 1VZX7 or 3XKXx in the example above), this is a sign of a potentially unstable selector. For instance, this combination of letters and numbers may change with each visit of a user to the site, and for another user, it will already be different. You can check this by logging out of the site, closing the browser, reopening it, and navigating back to the desired page, or simply visiting that page from another computer or browser, and checking whether you see the same letters and numbers in that part of the selector or different ones. Additionally, the combination Ctrl+F5, which triggers a full page reload, may help (but not always). However, even if after all these actions the combination of letters and numbers has not changed, it may change after the next build (update) of the website or web service, as modern website frameworks (such as Angular, React, etc.) can generate these class names randomly with each page rebuild.

Thus, to ensure that the robot works reliably in production and the developer does not have to frequently fix selectors in browser automation blocks, it is very important to choose the most stable selector possible during the development stage. Not always, but very often, the most stable selector is the shortest one available for that element.

If the recorder tool does not provide you with a sufficiently stable selector, it needs to be selected or edited manually. For this, you need to know the CSS selector notation.