# Manual Search for CSS Selectors in the Browser

If the selector automatically generated by the recording tool is not optimal, the User can manually edit the code. To do this, you should open the source code of the element on the web page. This can be done using the browser's "Developer Tools," after which you can select an appropriate selector for the situation.

For example, in Google Chrome, you can access "Developer Tools" in two ways:

* from the main menu, select More Tools -> Developer Tools,
* press Ctrl+Shift+I.

In the opened "Developer Tools" panel, the source code of the web page will be displayed on the "Elements" tab. You can also quickly open this tool and navigate to the control element's code by right-clicking on the desired element on the web page and selecting "Inspect" from the context menu. In this case, the User will immediately see the part of the code corresponding to the desired element, as it will be highlighted on the "Elements" tab in "Developer Tools."

Some web pages block the standard browser context menu and instead show their own menu on right-click. Sometimes clicking on an element changes its state so that the desired attribute disappears. For example, to record a selector for an unread message in a messenger, right-clicking on it may mark the message as read, and its code in "Inspect" will change. To see the source code of the element in both cases, use the "Select Element" icon (in Google Chrome, it is the first one on the panel):

<figure><img src="https://3212714295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FI0zUnKkOuy6lWt7DZ46u%2Fuploads%2Fgit-blob-71a229261dedb7b8a708909d5d4ff06aac05222e%2F2025-07-21_18-45-57%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

In other browsers (Edge, Firefox, etc.), the "Developer Tools" tool looks and works similarly, but the specific names of menu items (and keyboard shortcuts to invoke it) may differ from the example above.

Modern web pages are very dynamic. They can change their elements, names, order, and appearance even after loading from the server and caching in the browser. Pages are often loaded in parts, using frames or dynamically changing structure — this is called the DOM (Document Object Model). Technologies like Ajax allow parts of the page to be updated without needing to fully reload it.

To see the original HTML code of the page immediately after loading, you can select "View page source" from the browser menu. However, for automation, this is not necessary, because the page changes during operation.

When using the browser's "Developer Tools," the real-time updating structure of the DOM is essentially displayed. Therefore, it is better to use this dynamic display for finding elements rather than the original source code of the page.