Developing a new technology is always exciting and just as thrilling is writing up code for it! but when its time to verify the work, the golden question pops up "To Test OR Not To Test?"
Well, the good news is headless browsers can help us test out websites in many different ways. One of those ways is through capturing pixel perfect snapshot of a web page. That snapshot can be then used to compare with its baseline state, for visual testing purposes.
Visual testing is the automated process of detecting visual UI changes.
lets say, you work in a team of 10 engineers that develop a web app empowering 1000s of pages on your site. Your team is getting ready to deploy the app later today. You know there has been css, html and js updates by different engineers in the team. So how can you be sure there is no bug introduced on any of these 1000s of web pages after the deployment is done?
But do Not worry, headless browsers are here to rescue!
Sure, your QA wizard can test a lot of the important pages, but to do a complete visual test it would take a hell of a long time! This is where we should answer the golden question "To Test or Not To Test? ... or should we?!
What we can do instead to cut this time down to a couple of minutes is to let headless browsers do the heavy lifting for us by automating the whole test process!
Visual Testing using Headless Browsers in Action
Let's use 0Browser landing page as our test site. We are planning to deploy a new release to our website today and want to make sure 0Browser landing page stays the same visually to the users.
First, we need to capture the baseline snapshot of this page. As you can see in the code snippet below
We are using 0Browser, a headless browser as a service, to capture the baseline image and save it as a .PNG file. the screenshot below shows this starting web page state.
We can now deploy to our desired environment.
Then we can capture the visual state of the landing page after deployment using 0Browser headless service as shown in the following code snippet :
The following screenshot is showing the visual state of this page after deployment. As you can see, this one is missing the "Get Started for Free" button! Then we will use a screenshot comp library such as Yahoo's Blink-Diff lib to make a comparison of these snapshots.
The visual difference of these shots is getting saved into a .PNG file called comparison.png. If there has been a change detected then the area will be visually marked as dark red so you would know something went off rails there! Lets take a look at the comparison png in this case.
As seen in the screenshot below, the comp png verifies that the "Get Started for Free" button is indeed looking different before & after deployment so its marked as red.
Now Imagine visually testing all your website pages can become as easy as browsing through these auto generated red marked images! Time to put your feet up and have a drink ??
To take a look at the full github sample check the repo here!
Get Started for Free
So, Why Headless Browsers?
Using a headless browser as a service, such as 0Browser you can easily capture a snapshot of a web page in intervals or on demand which then can be used to
- Reveal styling issues
- Reveal data issues
- Easily run a site wide regression test after each deployment
and much more ... to come soon!