Learn How To View Change Details

Changed UI states will include highlights of visual changes directly overlayed on the screenshots.

Screener automatically organizes these changes into 4 categories:

StructureStructural changes are when new visual items are added, or old items are removed.
LayoutLayout changes are when visual items change position or dimension.
StyleStyle changes are when css styling gets updated, such as font sizes, color, etc.
ContentContent changes are when text or graphics get updated.

The Change List

Each change in Screener has additional details that can be viewed to help with debugging. For example:

  • View the specific CSS property that changed.
  • View a text diff of content changes.

These details can be viewed in the Change List, which can be opened by clicking on a change highlight: