Visual validation for a one-to-one website migration project

Chang Xiao
Jan 15 · 4 min read

Overview

The most successful one-to-one migration projects are the ones where the end-users do not experience any difference on the external-facing part of the website while the entire system has been migrated to a new platform.

Automated visual validation tools such as Trakr can provide an easy way to quickly perform visual validation and save time on the project.

What is One-to-one migration

In the context of a website, a one-to-one migration means moving the underlying website system (e.g. content management system such as Wordpress, Drupal) from one platform to another while maintaining the same external website design, content and other experiences for the end-user. Sometimes it can also mean moving the system from one major version to another (e.g. Drupal 7 to Drupal 8) if the upgrade path is inherently difficult.

Image for post
Image for post
(Drupal 7 login screen on Bartik theme)
Image for post
Image for post
(Drupal 8login screen on Bartik theme)

As an example above, the user login page for external users is extremely similar between Drupal 7 and Drupal 8. A normal end-user would not notice the difference.

Image for post
Image for post
(Drupal 7 backend administration page on Seven theme)
Image for post
Image for post
(Drupal 8backend administration page on Seven theme)

The same example with an administration user page shows a more significant change to the website system between the two in the backend.

Some of the purposes for performing a one-to-one migration include updating a legacy system that’s no longer officially supported, providing a foundation for future capabilities and adding features for backend users.

The anatomy of the one-to-one migration project

A typical one-to-one migration project may have the following steps/components:

Image for post
Image for post
Example project components

Since the defining characteristic of a one-to-one migration project is that the new website will maintain the same design, content, and functionality for the end-user, the project will include some type of repeatable process such as:

  • 4. Run the content migration process to see what the content from the existing website will look like on the new website.
  • 5. Making theming adjustments on the new website to replicate the look and feel of the existing website.

We assume the website theming will stay relatively static (unchanged). The existing website will most likely continue to update its content while the project is ongoing. In most of the migration projects, migrating content will be built as a repeatable process so that it can be re-run at any stage. The content migration is also quite iterative so that early content migration runs might contain missing data fields, formattings, etc.

For example:

(Page from the existing website to be migrated)
(Same page after one content migration iteration)

The example above shows a page on the existing website and how it looks on the new website after a content migration iteration. Although the difference is subtle, you can notice the bold/italic formatting is not carried over from the existing website as well as the order of the pictures on the page.

Where does visual validation come in?

Visual validation is essentially the process of visually comparing the existing (legacy) website and the new website after the theming migration and an iteration of the content migration run. A visual difference is generated to show the accuracy of the theming/content iteration.

Image for post
Image for post
Visual difference generated by Trakr

For example, running the visual validation between the existing website and the new website will highlight the visual differences (if any). This example is generated from Trakr. Ideally, prior to the completion of the website migration project, there should be little to no visual difference in the visual validation process.

This means your new process can look like this with the visual validation process.

Image for post
Image for post
New project component

The visual validation step can greatly aid your content migration/theming adjustment iterations and reduce the amount of QA workload prior to launching the new website.

How can Trakr help with visual validation

As the example above has shown, Trakr can generate a visual difference between two website environments. It can highlight these minute details that are difficult to spot by human eyes.

Some benefits Trakr brings for visual validation include:

  • The ability to run visual validation on a large scale between the website environments.
  • Visual testing report that highlights the test results.
  • Tools such as visual difference highlight, inspector and annotation to help move the iteration forward.
Image for post
Image for post
(Visual testing report)
Image for post
Image for post
(Visual inspector)

Save time on your one-to-one migration project today and sign up for Trakr for free.

Trakr

Product updates, insights, and everything else on QA…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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