Practice Real-World Testing Scenarios for QA: Challenge 3 - Visual Testing with API Mocking

#visualtesting #testing

One of my tasks as QA was related to visual testing. I tested:

A dashboard because on some of the deploys, one chart was missing. I added visual testing to detect failures early in daily test execution without manual testing.
A transportation app where you can see all vehicle location updates on the map. You can manually change the vehicle status, and you need to see that the map displays the status and the line between pickup and drop-off changes color accordingly to the status.
A service app, where users mark tree locations on a Google Maps with markers so the trees can be pruned after the budget is approved.

There are different tools to perform visual testing, such as Applitools and Percy, but Playwright includes visual testing for free.

It's important to add visual testing when the UI is well defined; if the dashboard or map is changing a lot, you need to upload a new snapshot constantly.

Now the challenge is to test the visual consistency of an Accounts Receivable dashboard—but there's a problem. The "Average Days Late" metric changes every single day based on the current invoices and payment history. One day it's 12 days, the next it's 13 days. Another challenge is that you need to test with different languages: English, Spanish, German, and Japanese, so the same title can look larger in one language.

Also, you need to include some API testing without any mock to ensure that the API returns the correct info.

Tips

It's important to add visual testing when the UI is well defined. If the dashboard or map is changing a lot, you need to upload a new snapshot constantly.

You have 2 options for visual testing when some value is dynamic.