Visual Testing | Bondar Academy

Lesson Summary

Visual Testing Overview In this lesson, we explore visual testing or visual validation using Playwright. This process ensures that the layout and colors of web elements are as expected by comparing screenshots. Setting Up Visual Testing Modify playwright-config.ts to include the default HTML reporter. Focus on UI components tests, specifically testing radio buttons. Set test retries to zero and use test.only to run a single test. Creating and Comparing Snapshots To validate the selection of radio buttons visually: Remove traditional assertions and use visual assertions. Create a snapshot using await expect(locator).toHaveScreenshot() . Run the test to generate a baseline screenshot. Subsequent runs will compare the current screenshot with the baseline. Handling Test Failures If the test fails (e.g., selecting a different option), Playwright will indicate the pixel difference. The report includes: Actual screenshot Expected screenshot Difference visualization Adjusting Screenshot Comparison To manage precision in comparisons: Set a maximum pixel difference (e.g., maxDiffPixel ). Use --update-snapshots to refresh all baseline images after major UI updates. In summary, visual testing with Playwright simplifies UI validation by using snapshots, allowing for flexible comparison settings to accommodate UI changes.