A fast way to debug our CSS selectors for a web page is through the Console of the browser's Developer Tools.


To access Developer Tools in our browser, all we have to do is press F12. We can then navigate to the Console and use JQuery to debug our selector(s).


First we have to create the CSS selector of the element we are interested in, using the "Add Control" button in Process Designer. Then, we have to go to the Controls Repository, locate the newly added selector, double click on it, change the view mode to "Custom" and copy the selector.


We can now go to the browser's Console and run one of the following two commands.


WinAutomationJQuery('our selector')

OR

document.querySelectorAll('our selector')


As shown in the screenshots below, if the returned length of the element is 0, then the specified element could not be found on the web page and we have to modify our selector.