Solution to Challenge 3 - Visual Testing with API Mocking

Challenge #3 is complete, and here is the author's solution: Visual Testing with API Mocking. The author does not favor mock APIs for end-to-end tests but recognizes the importance of ensuring dashboard charts display correctly when dealing with daily API changes. A notable instance occurred when a chart failed to appear after certain modifications, and another Google Maps integration resulted in one button overlapping another.

The author believes visual testing is beneficial in detecting such issues automatically. One approach involves mocking the API to return the same data and saving image snapshots for comparison against the current website. If the UI changes, the base snapshot must be updated. The author mentions paid visual testing tools like Percy by BrowserStack, Applitools Eyes, and Sauce Labs (Sauce Visual).

Playwright includes a built-in free option for visual testing, allowing screenshot comparison. The author created a visual helper with two methods: one for full page snapshots and another for specific elements. Both methods allow setting a timeout to check the screenshot and the difference in pixels or percentage. By default, a very minor difference is set to detect any design changes.

The author provides an example of creating a visual helper with two methods: checkPageSnapshot and checkElementSnapshot. To mock the API, the author created an API with fixed data and added a function to mock the API with the desired JSON data and HTTP status code. The function routes the page to the specified URL and fulfills the request with the provided data. Finally, the author demonstrates a basic example of using the visual helper to check the dashboard page snapshot.