Time to build visual tests. Start from exercise 1. Do them in order. Each one adds a skill. By the end, you will have a solid visual test suite for the Banking Portal.
Go to the Banking Portal login page. Write a visual test with toHaveScreenshot(). Run it twice -- first to generate the baseline, second to verify it passes. Commit the baseline to git.
Take separate screenshots of the login form card, the navigation bar, and the footer. Verify each component matches its baseline independently.
Go to the Banking Portal dashboard. Mask the balance, date, and session ID elements. Take a screenshot. Verify the test passes consistently across multiple runs without false failures.
Write a visual test with threshold: 0 (exact match). Run it 5 times. Count how many times it fails due to anti-aliasing. Then increase threshold to 0.2 and maxDiffPixelRatio to 0.01. Run 5 more times. Compare the results.
Write a test that screenshots the Banking Portal login page at three viewports: mobile (375x667), tablet (768x1024), and desktop (1440x900). Generate baselines for all three. Verify the navigation changes between mobile and desktop.
Screenshot the login button in four states: default, hover, focused, and after clicking with empty fields. Create a baseline for each state. Verify they are all different from each other.
Create a screenshot.css file that hides all dynamic content and freezes animations. Use stylePath to inject it into a full page screenshot of the dashboard. Verify the test is stable across 5 runs.
Use page.clock.setFixedTime() to freeze the page to "January 15, 2025 10:30 AM." Take a screenshot of the dashboard without masking the date. Verify the date shows consistently. Compare this approach with the mask approach from Exercise 3.
Always review your baselines before committing. Open the PNG files. Make sure they are not blank, not showing a loading spinner, and not capturing a half-rendered state.
Key Point: Practice the full workflow: full page, element, masking, thresholds, responsive, states, and stylePath. Review baselines before committing.