This webinar introduces an approach to visual regression monitoring, utilizing Playwright and Checkly. Playwright, an open-source end-to-end testing framework supported by Microsoft, enables you to simulate complex paths through your site. Checkly, which uses playwright to create synthetic service monitors, enables the execution of visual regression tests at regular intervals. This combination alerts developers to potential interface problems before they become visible to users.

Traditional end-to-end (e2e) pre-deploy testing systems incorporate visual regression testing to catch discrepancies. This system assumes that the interface of a site will not change between code deployments. But with third party dependencies and render-time changes from things like Google Tag Manager, we know that visible regressions can happen at any time. That’s where Checkly’s synthetic monitoring can help you monitor your site or service continually, letting you know any time something changes.

Chapters:

00:00 Intro

01:41 Monitoring continuously with Checkly

04:11 Playwright for user simulation

06:00 Visual Regression Monitoring

15:10 Demo with Visual Regression Testing for Monitoring

16:30 Masking to ignore some changes

17:02 Comparing single page elements

24:15 Running checks locally vs on Checkly

28:00 Golden Files

30:10 Monitoring as Code

31:03 Outros and Discussion

32:30 Simulating Mobile Devices

36:45 Review

40:07 Other Checkly Big Ideas for Extension