TL;DR
In this post I will explain how to examine dynamic html elements in order to be able to automate web page that contains such an element.
Many of modern web applications uses heavily some of the popular Javascript frameworks (Ember, Angular are some of them). In that way, your web application is more interactive and dynamic.
For example, user does some action and it gets message that disappears after few seconds. Very effective from the UX point, but how to automate that scenario?
The problem here is how to examine html structure of disappearing message in order to find out element id (unlikely to be present) or class attribute?
In order to do that, you can use chrome developer tools, the sources panel. You need to debug javascript code that shows and removes application message. You can do that very simply with javascript debugger pause button.
Here is what you should do:
- open your web application in Chrome
- open Chrome developer tools
- open Sources tab
- make action on your web application that will trigger dynamic application message
- when message appears, hit the pause button
- go to elements tab and examine the message html attributes
- when you are finished, go back to sources tab and press continue button
