How to run and automate visual tests on your website
Before releasing an update to a website or application to public, one should always ensure that everything on the UI side is in order. This is usually a manual process: we deploy the site to the staging server where a designated tester (or the developer themselves) runs a thorough review.
Automating this type of tests will let you save time and avoid human errors.
Actions used in this guide:
In this guide, we will show you how to quickly configure a pipeline that will build your application, deploy it to the staging server, and perform automated visual tests in the staging environment. If everything is fine, the pipeline will deploy the application to the production server. In case any visual changes are detected, the pipeline will stop and wait for approval before the final deployment.
Image loading...
Build and deploy on every push
Begin with creating a pipeline that will build and deploy your application. If you haven’t done it before, here's a list of workflow guides for the most popular languages and frameworks:
Visual tests in delivery pipelines
Once you have a pipeline that deploys your application to the staging server, you need to add the action for visual testing. The action compares the currently deployed version of your site with the previous one and, in case of any changes, it stops the pipeline and waits for the changes to be approved.
Select the Visual tests action from the monitoring section:
Image loading...
The actions lets you define the URLs that should be tested. In our case, it will be the address of the page on the staging server:
Image loading...
Now it’s time to add the deployment to the production server. If no changes are detected, the deployment will be performed automatically. In other cases, it will require a manual confirmation from the user:
Image loading...
Image loading...
Approving changes
Once the tests detect changes, the pipeline will stop and wait for the approval. You can define who is permitted to accept visual changes in the action settings. By default, all project members who can run pipelines can also accept the changes. You may, however, limit the scope to individual developers, administrators, or a specific group of users:
Image loading...
During the acceptance process, Buddy will display all changes defined on the pages. The changes will be presented in the form of a comparison of the previous and current version of the page (difference, swipe, 2):
Image loading...
Once accepted, the pipeline will pick up where it's left and deploy the app to the production server.
Ignoring changes
A website may often contain dynamic elements, such as advertising banners. This part of the site shouldn’t be taken into account during visual tests. The excluded parts can be easily defined by entering their coordinates in the Options tab:
Image loading...
Selecting browser and resolution & advanced options
The action settings allow you to select the browser and define the resolution in which the tests will be performed. Currently Buddy supports Chrome and Firefox browsers.
Image loading...
You can also set
On top of that the action lets you configure:
- The acceptable pixel tolerance level. By default, moving an element by 1 pixel will cause the pipeline to stop.
- How many executions are kept in the history of changes on the website. The default is 30 executions.
Image loading...
Summary
The aim of Buddy is to lower the threshold to automation regardless of whether you're a seasoned developer or just began your front-end adventure. The tool is very simple to user per se and basically requires no explanation. We do recommend, however, to check out our documentation for real-life use cases that will help you quickly automate the most essential processes of everyday work. Also, don't hesitate to browse through our guides for inspiration and tips on CI/CD. There's also the live-chat should you have some concrete questions.
Thanks for reading!
Jarek Dylewski
Customer Support
A journalist and an SEO specialist trying to find himself in the unforgiving world of coders. Gamer, a non-fiction literature fan and obsessive carnivore. Jarek uses his talents to convert the programming lingo into a cohesive and approachable narration.