Easy VRT testing
I normally work on different and very active projects in several testing environments. I needed a simple and fast way to generate visual regression tests between them, or even to just to compare my local environment to an integration server. However, it was cumbersome to edit backstop configuration files frequently just to change servers, thus I created a tool that simplifies the task a lot:
https://github.com/arturolinares/easy-vrt
It is a Symfony console application that wraps Docker backstop containers to run the tests. The application reads a list of URLs from a CSV file to generate the JSON configuration files for BackstopJS.
Usage
Once the project is installed you will want to compare two sites. Follow these steps:
- Generate the backstop scenarios using a CSV file containing the routes to visit.
- Run the tests.
- Browse the results to visualize the differences.
To generate the scenarios use the command vrt:gen. It will use a CSV file with the routes to generate them:
bin/console vrt:gen path/to/routes.csv --ref-domain=http://prod.com --url=http://my-qa.com
You can find a sample of the CSV file in the sample directory. The file has two fields: the route and an optional label. For example:
/,"The Homepage"
/category/tag,
"/about-us", "About US"
You can set the reference domain using the flag --ref-domain. This is normally production. Use the flag --url to specify the domain you want to compare.
Sometimes you need to create several scenarios for the same route but different prefix. For example, when using multilingual sites. To specify the prefixes you can use the --prefix (-p) option:
bin/console vrt:gen path/to/routes.csv -u [http://my-qa.com](http://my-qa.com) -r prod.com -p es -p en -p fr
The above will generate scenarios for these urls:
/es/
/en/
/fr/
/es/category/tag
/en/category/tag
/fr/category/tag
/es/about-us
/en/about-us
/fr/about-us
Until now, you only have configured backstop. To actually run the tests use vrt:run. This command will run backstop using a Docker container. Also, if you want to see what the script is doing, you can change the verbosity with -v, -vv and -vvv.
Finally, to see the report, use vrt:server to browse the diffs.