What Is Functional Testing With Visual Assertions?

Instagram Gone Wrong

Introduction to Angie Jones’s Automated Visual Testing

Chapter 1 — Introduction to Visual Testing

  1. It’s a lot of code to write
  2. It’s brittle, because all that can change release to release

Chapter 2 — Installing Applitools

  1. Download the Applitools SDK code from the Maven repository
  2. Obtain your Applitools API Key
  3. Add your API key to your project
  4. Link your project with Applitools Eyes

Chapter 3 — Running Your First Test

chapter3 image1
Screen Shot 2019 08 23 at 9.29.58 AM
chapter3 image11

Chapter 4 — Match Levels

  • Exact — requires a pixel-by-pixel match (this is what pixel comparators do)
  • Strict — Flags human-identifiable visual differences
  • Content — Looks at text content and ignores color changes
  • Layout — Looks only at page structure
chapter4 image1

Chapters 5–9 Using Applitools

  • Checkpoints
  • Organizing Tests
  • Visual Validation of PDF Files
  • Analyzing Test Results
  • Integrations
  1. Applitools can scroll horizontally and vertically through the page for a given viewport size and stitch together a snapshot of the complete rendered page
  2. You are not limited to using a single match level for a given page. Once you have a baseline, you can identify regions with different match levels from the standard. You might use your default “Strict” match level on the bulk of a page, while having regions that retain the same layout but with changing content on which you use “Layout” match levels.
  3. Applitools records the browser, OS, and viewport size for each test. You can organize your results so that you compare tests of the same page on the same viewport size with different browsers.
  4. Applitools integrates with your workflow. You can integrate with code repositories, like GitHub. A pull request from your code-building tools, like Jenkins, can launch a batch visual comparison of your build with the existing baseline automatically. You can also integrate with Slack, Jira, and other communication tools to notify team members when you encounter errors in their code.
  5. Applitools has an optional root-cause analysis tool that can display underlying DOM changes responsible for visual differences. You can use this capability to share the code changes you uncover with your development team.
  6. Applitools can validate PDF files as easily as it validates web pages. You can test the output of a PDF generator — with the same kind of match level control that you have in the rest of Applitools.
chapter9 image7
Applitools works with leading continuous integration solutions.


For More Information



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store