How To Interact With Elements Those Cannot Be Inspected Through Css/xpath Within Google-chrome-devtools

I often encounter elements which I cannot right click to inspect their xpath or css. I want to ask what other ways exist to click on those elements ?

Solution 1:

There are a lot of elements/controls which can't be located within the HTML DOM i.e. you can't right click on the element to inspect their xpath through google-chrome-devtools. The three mostly encountered such elements/controls are as follows:

• Alert: Alerts are created through JavaScript and you can't find them within the DOM Tree. You can find a detailed discussion in Why switching to alert through selenium is not stable?
• Notifications (PasswordRemember/GeoLocation/Microphone/Camera):

These notifications can't be tracked within the DOM Tree. Here you will find a relevant discussion on How to allow or deny notification geo-location microphone camera pop up

• Are you sure you want to leave this page? popup:

This message as well can't be located within the DOM Tree. Here you will find a detailed discussion on How to handle below Internet Explorer popup “Are you sure you want to leave this page?” through Selenium

Solution 2:

If you want to get elements locator but the right click doesn't work then try the following.

First, Open the dev tools window by pressing Ctrl+Shift+I. If that doesn't work then first open the dev tool then load the page.

After opening the dev tools click on "select element" tool, the printer icon at the left of the dev tool. You can directly get this tool by pressing Ctrl+Shift+C.

Then hover on the element that you want to get the locator. The element will be selected in the DOM in the elements tab. Right click on the elements in the DOM. Then from the context menu go to copy -> copy selector for CSS selector or copy XPath for XPath. Now you have got the locator of that element in the clipboard.

Solution 3:

You can use Ctrl + Shift + C, it will open the devtools with selecting an element to inspect enabled. Just move the mouse cursor to the element and click, it will scroll the html view in devtools to the correct place.

Alternatively, you can press F12 and toggle the selecting an element to inspect button (top left corner of the devtools).

Solution 4:

Control + Shift + C or F12 will open the dev tools for you, you can then click on the cursor mode on your browser.