Use Playwright Test’s toHaveScreenshot() assertion, commit reviewed reference images, and run tests in CI with the same browser and operating-system environment used to create those references. The setup is the same for an India-based team as for any other team; the country alone does not establish a need for India-hosted runners. This guide uses GitHub Actions and a Vite-style preview server as concrete examples, with the parts you must adapt called out.
What screenshot tests do
A screenshot test captures a page or component and compares the image with a saved reference. The first run creates a reference image; later runs fail when the rendered output differs beyond the configured comparison tolerance. This helps catch unintended visual changes, but it does not decide whether a difference is a bug: a developer still needs to inspect the image diff.
Playwright Test provides this with await expect(page).toHaveScreenshot(). Its [Visual comparisons guide](https://playwright.dev/docs/test-snapshots) covers reference images and comparison options.
Install Playwright Test in the React project
Install the Playwright Test package using the package manager already used by the repository, then commit the updated package manifest and lockfile. The exact install command varies by package manager, so follow the current Playwright installation guide for your project. Keep the Playwright version controlled through the lockfile so local and CI runs resolve the same package version.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →#1 Best Overall
- Includes Raspberry Pi 5 with 2.4Ghz 64-bit quad-core CPU (8GB RAM)
- Includes 128GB Micro SD Card pre-loaded with 64-bit Raspberry Pi OS, USB MicroSD Card Reader
- CanaKit Turbine Black Case for the Raspberry Pi 5
- CanaKit Low Noise Bearing System Fan
- Mega Heat Sink - Black Anodized
The CI commands below use npm and assume the repository has a valid package-lock.json. If you use pnpm, Yarn, or another package manager, use its locked-install command instead of npm ci.
Write a visual test
Create a test file such as tests/visual.spec.ts:
import { test, expect } from '@playwright/test';
test('home page visual baseline', async ({ page }) => {
await page.goto('/');
await expect(page).toHaveScreenshot('home.png');
});The relative URL works when the configuration supplies use.baseURL. On the first run, Playwright creates the reference image. Inspect it for the intended layout, content, fonts, and loaded assets, then commit the resulting snapshot alongside the test. Subsequent runs compare against that committed reference.
Start the React site for the test
Configure Playwright to start the app and wait for it to be ready before opening a page. This example assumes a Vite app with a preview script and port 4173; replace both with the start command and port your app actually uses.
Rank #2
- Includes Raspberry Pi 4 4GB Model B with 1.5GHz 64-bit quad-core CPU (4GB RAM)
- Includes Pre-Loaded 32GB EVO+ Micro SD Card (Class 10), USB MicroSD Card Reader
- CanaKit Premium High-Gloss Raspberry Pi 4 Case with Integrated Fan Mount, CanaKit Low Noise Bearing System Fan
- CanaKit 3.5A USB-C Raspberry Pi 4 Power Supply (US Plug) with Noise Filter, Set of Heat Sinks, Display Cable - 6 foot (Supports up to 4K60p)
- CanaKit USB-C PiSwitch (On/Off Power Switch for Raspberry Pi 4)
import { defineConfig } from '@playwright/test';
export default defineConfig({
workers: process.env.CI ? 1 : undefined,
webServer: {
command: 'npm run preview -- --host 0.0.0.0',
url: 'http://127.0.0.1:4173',
reuseExistingServer: !process.env.CI,
},
use: {
baseURL: 'http://127.0.0.1:4173',
},
});Save this as playwright.config.ts. The webServer setting starts the server and waits for its URL; baseURL lets tests navigate to routes such as / without repeating the origin. These settings are documented in Playwright’s TestConfig reference. If your app requires an API or other service, configure the necessary additional server process or ensure that dependency is available to the test job.
Run screenshot tests in GitHub Actions
This illustrative workflow follows Playwright’s documented Linux CI sequence: install the locked Node dependencies, install Playwright browsers and Linux dependencies, then run the tests. It assumes npm and a suitable Node version. Check the current Playwright Continuous Integration guide and your repository policy when selecting action versions.
name: Visual tests
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v6
- uses: actions/setup-node@v6
with:
node-version: lts/*
- run: npm ci
- run: npx playwright install --with-deps
- run: npx playwright test
- uses: actions/upload-artifact@v5
if: ${{ !cancelled() }}
with:
name: playwright-report
path: playwright-report/
retention-days: 30The action versions shown are those in the current Playwright CI documentation, not a promise that they will remain current. Review updates periodically and follow your organization’s pinning and supply-chain policies. Playwright also documents running tests in a Playwright container, which can help keep the CI rendering environment consistent.
Make screenshot comparisons reproducible
Screenshot references are sensitive to the environment that renders them. Playwright notes that operating system, browser version and settings, hardware, power source, and headless mode can affect output. Generate, review, and check snapshots in the same environment as CI whenever practical; changing environments may require distinct baselines.
- Control browser and platform: If your project intentionally tests multiple browser projects or platforms, treat their images as separate rendering baselines rather than assuming one image is interchangeable.
- Stabilize test data: Use predictable content, account state, locale, and application data. For an India-facing product, select the language, currency, content, and viewport states you intend to validate. This is a test-design choice, not evidence that the CI runner must be in India.
- Handle volatile content carefully: Prefer making test data deterministic. Playwright supports
stylePathto apply a stylesheet during screenshot capture, which can hide known volatile regions; mask only content that is genuinely irrelevant to the visual check. - Set thresholds deliberately: Options such as
maxDiffPixelscan allow a limited number of changed pixels. Inspect the observed differences before setting a tolerance, or meaningful regressions may be ignored. - Keep CI conservative initially: The example sets one worker in CI to favor stability. Consider more workers or sharding only when volume and runner capacity justify it; sharded runs require collecting results appropriately.
Playwright’s CI guide advises against assuming browser-binary caching will help: restoring a cache can take as long as downloading, and Linux system dependencies are not cacheable. Measure any repository-specific cache strategy rather than adding it automatically.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesReview and update reference images safely
When a visual test fails, inspect the actual image difference before deciding whether to change the page or baseline. If the design change is intentional, update snapshots with:
Rank #4
- Broadcom BCM2711, quad-core Cortex-A72 (ARM v8) 64-bit SoC @ 1. 5GHz
- 2. 4 GHz and 5. 0 GHz IEEE 802. 11b/g/n/ac wireless LAN, Bluetooth 5. 0, BLE
- 2 × USB 3. 0 ports, 2 x USB 2. 0 Ports
- 2 × micro HDMI ports supproting up to 4Kp60 video resolution
- Micro SD card slot for loading operating system and data storage
npx playwright test --update-snapshotsReview the changed image files and commit them through normal code review. Do not make automatic baseline updates part of an ordinary pull-request run: that can turn an unintended change into the new expected output without anyone examining it.
Debug failures and protect test artifacts
Start with the test output and Playwright HTML report. For action-level context, inspect a trace with the Trace Viewer; traces can help reveal whether navigation, selectors, or application readiness failed before the screenshot assertion ran. The Setting up CI guide describes reports, traces, and artifact handling.
- Browser executable or system-library error: Ensure the job runs
npx playwright install --with-depsafter installing the project dependencies, and that the Playwright package and browser installation are from the same locked version. - Server readiness timeout: Check that the configured command starts successfully, the readiness URL and port match the app, and required environment variables or backend services are available.
- Page is blank or assets are missing: Verify the app’s build/preview command, route, asset base path, and network access in CI; inspect server and browser logs before changing the snapshot.
- Only CI screenshots differ: Compare OS, browser version, fonts, headless mode, and test data with the baseline-generation environment. Recreate the reference in the intended CI environment if that is the environment you want to validate.
- Intermittent diffs: Identify animations, timestamps, randomized content, remote data, or other changing regions. Stabilize the underlying state or narrowly suppress irrelevant variation before considering a comparison threshold.
- Tests pass locally but fail in CI: Confirm the CI job installs the lockfile, browser binaries, and Linux dependencies, and that the site is ready before tests start. Use the report or trace to identify the failing step rather than updating snapshots blindly.
Reports, traces, and logs can contain credentials, tokens, source code, or application data. Store them only in trusted artifact storage and restrict access and retention to what the team needs.
Free tools Windows power users keep installed
One-click scans. No signup required.
Best Value
- Includes Raspberry Pi 5 16GB with 2.4Ghz 64-bit quad-core CPU (16GB RAM)
- Includes 128GB Micro SD Card pre-loaded with 64-bit Raspberry Pi OS, USB MicroSD Card Reader
- CanaKit Turbine Black Case for the Raspberry Pi 5
- CanaKit Low Noise Bearing System Fan
- Mega Heat Sink - Black Anodized
What an Indian team should verify separately
The country in the title describes the team’s context, not a special Playwright configuration. The documented setup supports portable Linux and container workflows, but it does not establish India-specific runner pricing, regional availability, performance, or data-residency terms. If any of those are organizational requirements, verify them with the CI provider directly. An India-region runner is not inherently required for screenshot comparison; consistency of the rendering environment is the central concern.
Or skip the browser setup:
For a one-off screenshot or a workflow that needs an API rather than a checked-in visual baseline, ScreenshotNeo can return an image or PDF from one request. It is not a replacement for Playwright’s baseline comparison and code-review workflow; it is an alternative way to capture pages without managing browser setup.
Example using cURL, with the API details in the ScreenshotNeo documentation:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo removes supported cookie banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, and failed loads are not billed. Its MCP server lets AI agents take screenshots, and the Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Sign up for ScreenshotNeo’s free plan.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteFrequently asked questions
Does the CI runner have to be located in India?
No requirement for an India-region runner is established for screenshot comparison. Choose a runner based on your organization’s provider, security, region, and cost requirements; keep the screenshot rendering environment consistent with the baselines.
Can I use screenshots to test every browser?
Yes, if the project configures the browser projects it intends to validate. Treat browser-specific rendering as a separate comparison context because different browsers and platforms can render differently.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
