Recommended Free Tools
To add Applitools Eyes visual checks to a JavaScript Playwright project, install @applitools/eyes-playwright, run its setup tool, import Applitools’ Playwright test fixture, and call eyes.check() at the point where you want a visual checkpoint. You review differences in Applitools’ report and accept a new baseline only after confirming the change is intentional.
This guide follows the JavaScript Playwright test-runner path. The documented fixture example also applies to a TypeScript-oriented project, but the exact setup may depend on your existing project configuration. Applitools lists other SDK paths, including Java, C# and Python; choose the language-specific integration that matches your tests rather than assuming the JavaScript package fits them. See Applitools’ SDK selection guide.
As an Amazon Associate I earn from qualifying purchases.
What you need before adding Eyes
- A Playwright project. The steps below use Playwright’s test runner and JavaScript. They assume you can edit a test file and run your project’s tests.
- Node.js and an editor. If JavaScript is new to you, the Test Automation University course Playwright with JavaScript identifies JavaScript familiarity as recommended and Node.js and an IDE among the tools for following along.
- An Applitools account and API key. The visual test needs the
APPLITOOLS_API_KEYenvironment variable to connect to Applitools Cloud, as described by the Applitools Playwright workshop. Keep the key out of source control, committed configuration, and shared logs.
These are the integration steps, not an India-specific edition of the SDK. India-specific pricing, payment options, plan limits, data residency and regional availability are not established here; confirm those details with Applitools before making decisions based on them.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →How do I install the Applitools Playwright SDK?
-
From your project directory, install the package as a development dependency:
#1 Best Overall
npm install -D @applitools/eyes-playwright -
Run the package’s setup tool:
npx eyes-setup -
Review the changes it makes to your project before running tests. The package instructions say the CLI can update Playwright configuration, attempt import changes, and add a demo test. If it cannot adjust an import in your project automatically, make the required change manually.
-
Set
APPLITOOLS_API_KEYin your local environment or CI secret store. Do not hard-code an actual key in a checked-in file.
Package commands and setup behavior can change; check the current Applitools Eyes Playwright package instructions when installing.
How do I add a visual checkpoint?
Use Applitools’ fixture import in a Playwright test, then call eyes.check() after the page has reached the state you want to compare. This example uses the documented fixture pattern; it is illustrative code, not a claim of an independently run test.
import { test } from '@applitools/eyes-playwright/fixture';
test('homepage visual check', async ({ page, eyes }) => {
await page.goto('https://example.com');
await eyes.check('Homepage', {
fully: true,
matchLevel: 'Strict',
});
});Replace https://example.com with a page your test can access. The checkpoint name, here Homepage, helps identify the comparison in results. fully: true requests a full-page capture rather than limiting the check to the currently visible viewport. matchLevel: 'Strict' selects a stricter comparison mode; choose the documented matching behavior that fits the risk and visual variability of the page. The integration guide describes checkpoint scope, matching options and the fixture at Applitools’ Playwright integration documentation.
Check a specific region or element
A full-page checkpoint is useful when the whole page matters. For a focused assertion, the integration also documents checking an element or region. Use a locator that identifies the target reliably; for example, a product panel could be isolated rather than comparing unrelated page content. Consult the integration guide for the current element-check API and options, since the exact call depends on the SDK surface you use.
Ignore genuinely unpredictable content
If a region contains content that changes unpredictably and is not part of the design you need to validate, the documented ignoreRegions option can exclude it, including by using a Playwright locator. Keep the ignored area as small as possible: masking a large region can hide a real layout or rendering regression. If a changing region is itself important, stabilize the test data or environment instead of ignoring it.
How do I review visual diffs?
Use the Applitools enhanced report to inspect the visual comparison and differences, including a side-by-side view. For each change, decide whether it matches an intended design update or signals an unintended regression.
- Accept a difference only when it is an intentional and verified change. Accepting saves the result as a new baseline; it does not prove the change is correct.
- Reject an unexpected difference so it remains visible as a problem to investigate.
The integration documentation describes the enhanced HTML reporter and review workflow. Treat a baseline as an approved reference, not as an automatic record of whatever happened most recently.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.How should I organize visual checks in a larger suite?
For a small suite, keeping eyes.check() in the test makes the navigation and checkpoint easy to read together. As a project grows, the Applitools documentation also shows organizing checks in page-object methods and using an enhanced reporter. A page-object model is optional: adopt it when it makes shared page behavior clearer, not merely because a visual SDK is installed.
Troubleshooting setup and test failures
| Symptom | Likely cause | What to check |
|---|---|---|
| Package installation fails or the command is unavailable | The dependency was not installed in the project, or the package/setup instructions have changed. | Run the install command from the project directory and check the current package README for the supported setup command. |
| The fixture import cannot be resolved | The test still uses a different import, or automatic import editing did not cover the project’s configuration. | Use import { test } from '@applitools/eyes-playwright/fixture'; in the relevant test and review the setup tool’s changes. |
| The visual test cannot connect to Applitools Cloud | APPLITOOLS_API_KEY is missing or unavailable to the test process. |
Set the variable in the shell or CI secret configuration that launches Playwright; verify it is present without printing its value. |
| A checkpoint differs on every run | The page may contain dynamic content, or the test may capture before it reaches a stable state. | Wait for the intended page state, stabilize test data where possible, or narrowly ignore only content that is truly unpredictable. |
| Accepting a change causes a questionable baseline | The diff was accepted without verifying it against the intended design. | Review the side-by-side comparison and confirm the design change before updating the baseline. |
Or skip the browser setup
ScreenshotNeo is a separate website screenshot API and MCP server; it is not an Applitools Eyes integration and does not replace Eyes baselines or visual-diff review. It can be useful when your immediate task is simply capturing a page as an image or PDF. A single GET request returns a screenshot or PDF; the API accepts familiar screenshot parameters and supports full-page capture, selectors, custom CSS and JavaScript, waits, device presets and more. See ScreenshotNeo and its API documentation.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpScreenshotNeo accepts cookie or consent banners before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets; each step can be turned off. Bot checks, blank pages, timeouts, failed loads and cache hits are not billed, with response headers identifying the page verdict and billing status. Its MCP server offers take_screenshot, get_page_info and capture_pdf for AI agents. The Free plan includes 1,000 shots a month with no card; paid plans start at $5 for 3,000 shots. Sign up for ScreenshotNeo’s free plan.
FAQ
Can I use this JavaScript tutorial with TypeScript?
The integration is JavaScript/TypeScript-oriented, but adapt the example to your project’s TypeScript configuration and verify imports against the current SDK instructions.
Does this tutorial establish Applitools pricing or data residency for India?
No. Confirm current region-specific commercial and data-handling terms directly with Applitools.
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.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
