The information in this presentation is intended for internal use and discussion only and contains competitively sensitive information, which, if disclosed to our competitors, could pose a risk of competitive harm to Hotwire and Expedia.

Image comparisonPowered by ImageMagick

2

Why compare images?• Inability to verify color and shape of UI elements• Inability to verify content of images, font style and

size, etc.• Inability to access some UI elements• Enormous amount of code to verify position and

size

3

Why ImageMagick?• Free and open source• Does not involve cloud services• Integration with existing framework/infrastructure• Reports are being generated and stored locally

4

Dynamic elements• System notifications (clock, updates,

etc.)• Dates and time• Blinking text cursor• Moving UI elements• Dynamic UI elements

5

Text rendering• Antialiasing is non-deterministic• Can affect up to 5% of pixels• It’s just annoying

6

Ignore dynamic content

• Ignored regions• Threshold• Fuzz (color distance)

7

Abstract algorithm• Take screenshot• Extract baseline from resources• Apply opacity mask to both images• Compare images• Throw exception if delta is higher than threshold

8

HTML Report example

9

Thank you!Any questions?

Shoot me an email at deadmoto@gmail.com