Install Applitools’ Puppeteer SDK, open an Eyes test around a Puppeteer page, capture one or more visual checkpoints, then close the test and collect its results. The documented package is @applitools/eyes-puppeteer; Applitools’ example tutorial was published February 6, 2024, so check the current package documentation and the version in your project before relying on its exact APIs.
Install the Puppeteer integration
Applitools’ Puppeteer tutorial installs the integration as a development dependency:
As an Amazon Associate I earn from qualifying purchases.
npm i -D @applitools/eyes-puppeteerThe package provides the Eyes integration for Puppeteer. The tutorial uses ES module imports. Its API example is documented by Applitools, not independently validated here against every current package release; confirm compatibility with the version you install.
Recommended Free Tools
Configure Eyes and the visual test
An Eyes test has three essential phases: open a test for a Puppeteer page, make visual checks, and close it so the results can be collected. Applitools describes this lifecycle as opening Eyes, performing validations, and closing Eyes. See its Puppeteer tutorial for the dated example and its system overview for the comparison flow.
#1 Best Overall
The tutorial’s example imports Eyes, Target, and VisualGridRunner from the package. It also imports BrowserType and DeviceName when configuring Ultrafast Grid targets. Use an API key supplied through the environment rather than committing it in source code.
import { Eyes, Target, VisualGridRunner } from '@applitools/eyes-puppeteer';
const apiKey = process.env.APPLITOOLS_API_KEY;
if (!apiKey) throw new Error('Set APPLITOOLS_API_KEY before running visual tests');
const visualGridRunner = new VisualGridRunner();
const eyes = new Eyes(visualGridRunner);
eyes.setApiKey(apiKey);
const configuration = eyes.getConfiguration();
configuration.setBatch('Puppeteer visual tests');
eyes.setConfiguration(configuration);This shows the setup pattern from the tutorial. Its full configuration example also adds browser and device targets to the configuration; the target list should reflect the browsers and devices your suite needs to cover. For the precise exports and supported target names in your installed SDK version, consult the current package documentation.
Open Eyes on a Puppeteer page and capture checkpoints
Create the Puppeteer browser and page as your suite normally does, then open Eyes against that page. Supply an application name and a stable test name so later runs can be associated with the intended visual test.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Rank #2
await eyes.open(page, {
appName: 'Storefront',
testName: 'Product page'
});
await page.goto('https://example.com/products/widget');
await eyes.check('Product page loaded', Target.window());
await eyes.closeAsync();The example illustrates the lifecycle and a window checkpoint; it is not a full test runner or a substitute for your project’s setup and cleanup. In the tutorial, the page is prepared and its checkpoint is invoked as part of the test flow. Place checks after the application has reached a meaningful, stable state—for example, after navigation and any required data or interaction are complete.
Choose the checkpoint scope
A window target captures the visible viewport by default. The Applitools example also demonstrates requesting full-page capture with Target.window().fully():
await eyes.check('Entire product page', Target.window().fully());Use a viewport check when the visible screen is the behavior you need to protect. Choose full-page capture when below-the-fold content matters, bearing in mind that page length and dynamic content affect what is included.
Choose checkpoint placement
The tutorial extends PuppeteerRunnerExtension and calls eyes.check(...) from an afterEachStep hook, which captures after each replay step. That is one documented pattern, particularly for Recorder-driven flows. In a custom suite, checkpoints can instead be placed at intentional stable states; the important point is that each check captures the state you mean to compare.
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 minuteRun locally or add browser and device coverage
You can use Eyes with your Puppeteer page and configure the visual grid for additional browser or device targets. The tutorial creates a VisualGridRunner and adds browser/device configurations through the Eyes configuration. This separates the browser that drives the Puppeteer test from the set of environments used for visual comparison. Consult current Applitools documentation for available target identifiers and SDK compatibility.
Broader target coverage can expose rendering differences that a single local browser will not show, but it also means more comparison results to review. Start with targets that correspond to supported user environments rather than adding configurations without a testing reason.
Rank #4
- Used Book in Good Condition
Close Eyes safely and collect results
Close the Puppeteer browser and close the Eyes test even when an assertion or page action fails. The tutorial uses closeAsync() to finish a test, abortAsync() as a safeguard, and getAllTestResults() to collect summaries from the visual grid runner. An Eyes test left open can keep running.
let eyesClosed = false;
try {
await eyes.open(page, { appName: 'Storefront', testName: 'Product page' });
await page.goto('https://example.com/products/widget');
await eyes.check('Product page loaded', Target.window());
await eyes.closeAsync();
eyesClosed = true;
} finally {
await browser.close();
if (!eyesClosed) await eyes.abortAsync();
}
const results = await visualGridRunner.getAllTestResults();
console.log(results);Use cleanup appropriate to your runner and SDK version; the snippet shows the documented close/abort distinction, not a complete policy for handling every possible error during shutdown. Review the returned results in Applitools’ tooling, where visual differences can be inspected against the saved baseline.
Understand baselines and visual differences
The first run for a test establishes the expected image baseline; subsequent runs compare their captured checkpoints with it. Baselines can differ by environment. The tutorial identifies operating system, viewport, browser, application name, and test name among the parameters relevant to environments and baselines.
Best Value
A detected visual difference is a signal to review, not proof by itself that the application is broken. Inspect the changed regions in the Test Manager. If the change is an intended UI update, accept the new appearance only after verifying it; if it is unintended, fix the application or test setup rather than updating the baseline to hide it. Applitools’ system overview explains that the SDK sends screenshots to the Eyes Server for comparison and that testers review differences in Test Manager.
Common problems and fixes
- Missing API key: The tutorial’s setup expects
APPLITOOLS_API_KEY. Define it in the test environment or secret store, and fail early if it is absent; do not commit the key. - Imports or methods do not match: The tutorial dates to February 6, 2024. Check the installed
@applitools/eyes-puppeteerversion and its current documentation before copying version-specific imports, configuration methods, or target enums. - No useful checkpoint appears: Confirm that
eyes.openreceives the Puppeteer page and thateyes.checkruns after navigation and required interactions. Choose viewport or full-page scope intentionally. - Test appears to keep running: Ensure every opened Eyes test reaches
closeAsync()on success and the applicable abort cleanup on failure. Also await collection of results from the runner. - Unexpected differences recur: Check whether the page state is stable and whether the run is being compared under the intended browser, viewport, operating system, and named test configuration before accepting a changed baseline.
Or skip the browser setup
If your goal is simply to capture a website screenshot by API, ScreenshotNeo offers a one-request alternative. It is a screenshot API and MCP server; it is not an Applitools visual-baseline replacement.
Example using cURL: see the ScreenshotNeo documentation for API details.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Quick Recap
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo removes known cookie/consent banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, failed loads, and cache hits are not billed. Its MCP server lets AI agents take screenshots, and the Free plan includes 1,000 screenshots a month without a card; paid plans start at $5 for 3,000. Sign up free for 1,000 screenshots a month with no card.
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.
