Pre-Action

To see the page before the action occurred, you use the Browser Playback tool’s Pre-Action Browser Contents tab. For example, here is the Browser Playback tool showing what the web page looked like before the Click "Athletic" action, an action that mimics a user narrowing search results to include only athletic shoes. 

You can see the HTML for a given element by right-clicking that element and choosing Inspect <Element>.

Post-Action

To see the page after the action occurred, you use the Browser Contents Viewer tool. For example, here is the Browser Contents Viewer tool showing what the same web page looked like after the Click "Athletic" action. 

Colored Borders

Note that various colored borders are used to highlight elements that are the source of operations such as extractions, validations, user actions, and so on.

The following table explains what each colored border indicates.