How to inspect elements on pages with 'loading' spinners?
This is intended as a Q and A post for sharing successful strategies. Please, feel free to add more solutions!
- Automating a web application
- Tester with limited access to the codebase
- Using Selenium and DevTools
There is a spinner element (for example:
"Loading... Please wait.") to notify the user of the temporarily unresponsive page (by design, while the content is being loaded). You are trying to write a locator (id, name, CSS, XPath ...) for the spinner element but you are unable to right-click and inspect it because it is present on the page for only a fraction of a second.
How do you do that?
Marcee last edited by
Chrome provides an inbuilt function for this:
Dev Console (F12)
Switch to the Sources tab
Do action in browser to get to the state you want to inspect
Chrome will pause the browser and the Elements tab will not update until you go back to Sources and Press F8 again. While it is paused you can switch back to the Elements tab and use the normal inspection tools.