Visual testing for website updates

Chang Xiao
Jan 21, 2019 · 4 min read

One of the most common use cases for visual testing is for website updates. This is applicable whether you are updating your website management system (e.g. Wordpress), or just deploying code updates to your custom web applications. Trakr can be configured easily to perform visual testing for website updates.

The Premise

Website updates generally consist of security updates, bug fixes or the introduction of new features or functionalities. This presents an ideal opportunity to perform visual testing since we assume there would be minimal visual changes as the result of the update.

The setup

You should have at least 2 environments set up for your project:

  1. The live environment for your website (The older version)

We assume that you have tested the website update on your staging or development environment, you have also staged contents from your live website environments so the only change between these environments is the code update for the website.

Perform the test

From the Trakr platform, you can easily perform a “quick compare” between the 2 environments.

Check your testing results

Finally, check the visual testing report to see if there have been changes detected on any of the URLs in your project.

Visual comparison report

Taking a detailed check, we can observe the minor visual difference after the website update:

Bonus: post-deployment check

Optionally, you can perform one more comparison test between the screenshots on the live environment before the code deployment with one after to double check there are no additional changes.

Sign up for a free user account on Trakr and start visual testing today!

Visual testing for website updates

One of the most common use cases for visual testing is for website updates. This is applicable whether you are updating your website management system (e.g. Wordpress), or just deploying code updates to your custom web applications. Trakr can be configured easily to perform visual testing for website updates.

The Premise

Website updates generally consist of security updates, bug fixes or the introduction of new features or functionalities. This presents an ideal opportunity to perform visual testing since we assume there would be minimal visual changes as the result of the update.

The setup

You should have at least 2 environments set up for your project:

  1. The live environment for your website (The older version)

We assume that you have tested the website update on your staging or development environment, you have also staged contents from your live website environments so the only change between these environments is the code update for the website.

Perform the test

From the Trakr platform, you can easily perform a “quick compare” between the 2 environments.

Check your testing results

Finally, check the visual testing report to see if there have been changes detected on any of the URLs in your project.

Visual comparison report

Taking a detailed check, we can observe the minor visual difference after the website update:

Bonus: post-deployment check

Optionally, you can perform one more comparison test between the screenshots on the live environment before the code deployment with one after to double check there are no additional changes.

Sign up for a free user account on Trakr and start visual testing today!

Trakr

Product updates, insights, and everything else on QA…