Automated Visual Regression QA with Applitools

Sign up at Applitools' website with your email or a GitHub login. You'll land on a dashboard that's empty until you connect a project.

What you should see: A dashboard with an API key visible in your account settings. Copy this key. Every test run authenticates with it.

Troubleshooting: If you don't see an API key immediately, look in the account or organization settings menu. It's usually labeled something like "API Keys" near the top of that section.

Applitools connects to your project through an SDK that matches whatever test runner you already use, or a lightweight one if you have none. For a typical WordPress or static client site with no existing test suite, the Selenium or Playwright SDK for Node.js is the simplest starting point.

1. Open a terminal in a new folder for your QA scripts (this can live outside the client's actual codebase).
2. Run npm init -y to create a package file.
3. Install the SDK package for your chosen runner, following the exact install command shown on the Applitools quickstart page for that runner, since package names change as SDKs version up.

What you should see: A node_modules folder and a package.json listing the Applitools SDK as a dependency.

Create a small script that opens each key page of the client site (home, services, contact, and any e-commerce category or product page) and calls the Applitools "check window" function on each one. The exact function name depends on the SDK, so follow the code sample on the quickstart page for the runner you installed rather than guessing at syntax.

What you should see: When the script finishes, nothing to compare against yet. That's expected on a first run.

Run your script from the terminal. Since no baseline exists yet, Applitools automatically saves the current screenshots as the baseline for each page, browser, and viewport width you tested.

1. Log into the Applitools dashboard.
2. Open the test batch you just ran.
3. Review each captured screenshot to confirm it actually shows the finished, correct version of the page, not a half-loaded state or a cookie banner covering the layout.

What you should see: A batch of screenshots marked as "New" or "Baseline," one per page and viewport combination.

Troubleshooting: If a screenshot shows a loading spinner or an unrendered animation, add a short wait before the check step in your script so the page settles first.

Set the script to run the same checks at your standard breakpoints (commonly desktop, tablet, and mobile widths) and across the browsers your client's audience actually uses. Most freelancers cover Chrome and Safari at minimum, adding Firefox for higher-traffic sites.

What you should see: The dashboard batch view now groups results by browser and viewport, so you can tell at a glance if an issue is Safari-only or shows up everywhere.

After you push a change, whether it's a plugin update, a new page builder section, or a CSS fix, run the same script again. This time, Applitools compares the new screenshots against your saved baseline.

What you should see: The dashboard flags any page where something changed, with the old and new screenshots side by side and the difference highlighted. Pages with no visual change simply pass with no review needed.

For every flagged difference, decide if it's intentional (you meant to change that spacing) or a bug (a layout shift you didn't intend).

1. Click into the flagged page in the dashboard.
2. Approve the change if it's expected. Applitools then treats the new screenshot as the updated baseline going forward.
3. Reject it if it's a bug, then go fix the underlying issue before re-running the test.

Troubleshooting: If Applitools flags a difference that looks identical to your eye, it may be catching a sub-pixel rendering variance from a font loading differently. Applitools' comparison model is built to ignore this kind of noise most of the time, but if it keeps happening on the same element, check whether a web font is loading inconsistently between test runs.