How to inspect elements on pages with 'loading' spinners?



  • Note:

    This is intended as a Q and A post for sharing successful strategies. Please, feel free to add more solutions!

    Problem background:

    • Automating a web application
    • Tester with limited access to the codebase
    • Using Selenium and DevTools

    Problem:

    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?



  • 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

    • Press F8

    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.



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2