Testing stale designs

Usually visual testing is very effective when website has stable design that should not be broken.

There are projects the whole idea of those is to keep design the same but to migrate the content to new platform. This is where visual regression testing can help a lot to identify very fast what pages are not yet complete and which ones are 100% accurate and can be shown to client.

Real life example Migrations

Consider the following example. We had a project where we needed to migrate from custom written CMS to Drupal 8 and we had to keep designs as they are. Because of the nature of the older CMS migration process was most complex part of the project. Legacy system was page based with possibility to place multible blocks around each page. In Drupal we had to migrate each block separately and place them in similar way on pages.

So our strategy during migration was to tackle low hanging fruits first. In this way we were able to migrate some of pages pretty quick and then evaluate more complex scenarios.

Visual testing of migrated page

The moment we were able to migrate all blocks on one page including its URL we were able to start using visual testing to find differences and fix them.

So we have quickly identified that our styles are little bit off, breadcrumbs are missing and header and footer menu items were not migrated fully.

Now we can run this test as often as we like and develop migration and styles of this page till they match exactly. This is something like Test Driven Development when first you write failing test and then implement code to make test pass. This is pretty much the same. We compare two pages and work on migrated on till it matches 100%.

Please share your thoughts about this way of using visual regression testing. Do you know any other interesting ways to use it? Please let us know in comments below.

Register at backtrac.io to try the tool yourself.

This is a cross post from http://backtrac.io/blog/visual-testing-migrations