Quick Web Test Automation Tip: Inspect Page With Right-Click Disabled
How to get around sites with right-click disabled to get element details.
This article is featured in the Coding Jag #247.
As part of automated scripting, being able to identify elements is critical to finding locators. A common way to do this is by right-clicking the element and inspecting it. However, some websites block right-click intentionally!
Find a web page where right-mouse click is disabled. I will use the web version of Instagram. While right-click is enabled for most of the webpage, it is disabled for someone’s profile picture.
This article shows several ways to enable the right-click, including with browser extensions.
In-Built Browser Inspector
Your browser comes with it’s own element inspector, you can use this to override and select the specific ‘unclickable’ element.
In Chrome, press the F12 key (or Command + Option + I) to open the browser inspector pane (in Firefox, the shortcut is Command + Option + C). Then, go to the Elements panel and select the “Select Element” mode (Command + Shift + C for Chrome and Firefox).
You can now hover over and click the previously unclickable element to get it’s attributes.
From here, you can get the link/image/attributes as you needed. This is a simple way to access elements that is built into the browser.
This is my preferred way, however there are some alternatives below that are slightly more intrusive, but could be helpful if you frequently use websites that block right-click.
Disabling JavaScript entirely
Another sneaky way to get around this is to disable JavaScript in-browser completely.
See this article on how to disable JavaScript for Chrome and Firefox:
https://beebom.com/ways-to-enable-right-click-on-websites/
JavaScript command
javascript:void(document.oncontextmenu=null);Check out this article for how they converted this command into a browser bookmark to have a one-click trigger for this command: https://www.technewstoday.com/right-click-disabled/
