<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:media="http://search.yahoo.com/mrss/">
  <channel>
    <title>Visual Testing · Jared Lynskey</title>
    <link>https://jared.lynskey.co.nz/en/tags/visual-testing/</link>
    <description>Short stories of value on software engineering and engineering leadership — performance reviews, hiring and scaling teams, CI/CD, DevOps monitoring and agentic AI. Written from Seoul.</description>
    <generator>Hugo</generator>
    <language>en</language>
    <copyright>© 2026 Jared Lynskey</copyright>
    <lastBuildDate>Mon, 26 Oct 2026 00:00:00 +1300</lastBuildDate>
    <atom:link href="https://jared.lynskey.co.nz/en/tags/visual-testing/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>Visual Regression Testing with Playwright for Small Teams</title>
      <link>https://jared.lynskey.co.nz/en/posts/2024/2024-06-09-playwright-tests/</link>
      <guid isPermaLink="true">https://jared.lynskey.co.nz/en/posts/2024/2024-06-09-playwright-tests/</guid>
      <pubDate>Sun, 09 Jun 2024 00:30:03 +0000</pubDate>
      <dc:creator>Jared Lynskey</dc:creator>
      <category>Visual Testing</category>
      <category>Small Teams</category>
      <category>UI Testing</category>
      <category>Playwright</category>
      <description>Visual regression testing with Playwright: why screenshot comparisons are the highest-value tests my small team runs.</description>
      <content:encoded><![CDATA[<p>You push a one-line CSS change, and a button on a completely different page quietly falls apart. No test fails, review didn&rsquo;t catch it, and you hear about it from a user a week later. Every small team knows this bug.</p>
<p>The textbook answer is more unit tests. I manage a small dev team, and honestly, unit-testing every component and layout state is a luxury we don&rsquo;t have. What we lean on instead is visual testing: screenshot the pages, compare them against known-good baselines, and flag the build when pixels move that shouldn&rsquo;t. For the effort involved, nothing else I&rsquo;ve tried comes close.</p>

<h2 class="relative group">Why screenshots earn their keep
    <div id="why-screenshots-earn-their-keep" class="anchor"></div>
    
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
        <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#why-screenshots-earn-their-keep" aria-label="Anchor">#</a>
    </span>
    
</h2>
<p>The appeal is everything you don&rsquo;t have to write. A visual test doesn&rsquo;t assert on individual elements; it judges the page as a whole. Layout shifts, colour changes, broken responsive behaviour, overlapping elements — exactly the things that slip through code review and are miserable to cover with unit tests — all show up as a diff right in the PR.</p>
<p>Maintenance is close to nil, too. You set a baseline once, then it runs on every PR with the same result every time. Intentional UI change? Update the baseline and move on. Unintentional one? The diff is sitting in the PR, and nobody had to click through half the site to find it.</p>

<h2 class="relative group">It doesn&rsquo;t replace unit tests
    <div id="it-doesnt-replace-unit-tests" class="anchor"></div>
    
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
        <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#it-doesnt-replace-unit-tests" aria-label="Anchor">#</a>
    </span>
    
</h2>
<p>Unit tests verify logic; screenshots verify appearance. You want both eventually. But if you&rsquo;re small and have to choose where the first hours go, visual tests buy more coverage per hour of setup than anything else. My rule of thumb: unit tests for the business logic that would genuinely hurt, visual tests for the rest.</p>
<p>That&rsquo;s the whole system — baselines, diffs on every PR, and the occasional &ldquo;yes, that was intentional&rdquo; click. It catches more than it has any right to.</p>

<h2 class="relative group">More information and useful links
    <div id="more-information-and-useful-links" class="anchor"></div>
    
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
        <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#more-information-and-useful-links" aria-label="Anchor">#</a>
    </span>
    
</h2>

<h3 class="relative group">Visual Testing with Playwright
    <div id="visual-testing-with-playwright" class="anchor"></div>
    
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
        <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#visual-testing-with-playwright" aria-label="Anchor">#</a>
    </span>
    
</h3>
<p>Playwright&rsquo;s snapshot testing docs: capture full pages or individual elements, compare against a baseline, and manage baseline updates when the UI changes on purpose.
<a href="https://playwright.dev/docs/test-snapshots"  target="_blank" rel="noreferrer">Visual Testing with Playwright</a></p>

<h3 class="relative group">Best Practices for Testing with Playwright
    <div id="best-practices-for-testing-with-playwright" class="anchor"></div>
    
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
        <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#best-practices-for-testing-with-playwright" aria-label="Anchor">#</a>
    </span>
    
</h3>
<p>Playwright&rsquo;s advice for tests that touch a database: isolate test data, clean up afterwards, and keep tests independent so the suite stays reliable.
<a href="https://playwright.dev/docs/best-practices#testing-with-a-database"  target="_blank" rel="noreferrer">Best Practices for Testing with Playwright</a></p>
]]></content:encoded>
      <media:content url="https://jared.lynskey.co.nz/en/posts/2024/2024-06-09-playwright-tests/featured.jpg" medium="image" type="image/jpeg" />
    </item>
  </channel>
</rss>
