TestCafe can capture screenshots during end-to-end tests, but its documented screenshot features do not provide baseline comparison or visual-diff assertions. Use t.takeScreenshot() or t.takeElementScreenshot() to save images; add a separate comparison workflow—such as Percy’s documented TestCafe client—if you need to detect and review visual changes.
What TestCafe can—and cannot—do for visual regression testing
A screenshot is an image artifact. Visual regression testing also needs a comparison between a new rendering and an approved baseline, a way to inspect differences, and a review decision about whether a change is expected. TestCafe’s documented screenshot actions and runner settings cover capture and artifact organization; they do not document baseline management or visual-diff assertions. TestCafe’s screenshot and video guide describes the capture capabilities.
As an Amazon Associate I earn from qualifying purchases.
- Capture with TestCafe: save the current window or a selected element as a screenshot.
- Compare separately: use a comparison tool or maintain a baseline-and-diff workflow outside those capture actions.
- Review changes: decide whether visible differences are intended before accepting a new baseline.
Capture screenshots in a TestCafe test
Capture the current window
Call t.takeScreenshot() from a test to save a screenshot of the current browser window:
Free tools Windows power users keep installed
One-click scans. No signup required.
import { Selector } from 'testcafe';
fixture('Visual checks')
.page('https://example.com');
test('capture the page', async t => {
await t.takeScreenshot();
});Replace the example URL with the page under test. The screenshot action captures an image; it does not compare that image with a baseline.
#1 Best Overall
Capture one element
Use t.takeElementScreenshot() when the relevant visual area is a particular element rather than the whole window. Pass a TestCafe selector for the target:
import { Selector } from 'testcafe';
fixture('Visual checks')
.page('https://example.com');
test('capture the main content', async t => {
await t.takeElementScreenshot(Selector('main'));
});Choose a selector that identifies the intended component reliably; a selector that matches the wrong element will produce an artifact that is not useful for that check.
Configure screenshot artifacts and failure capture
TestCafe’s runner screenshot settings and configuration file can control where screenshots are stored, how their paths are formed, and whether screenshots are captured when a test fails. The documented runner options include:
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC 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 & 11| Option | Purpose |
|---|---|
path |
Sets the screenshot output location. |
takeOnFails |
Enables screenshot capture when a test fails. |
pathPattern |
Defines a path pattern for screenshots. |
pathPatternOnFails |
Defines a path pattern for failure screenshots. |
fullPage |
Controls full-page capture; the documented default is false. |
thumbnails |
Configures screenshot thumbnails. |
Path patterns can distinguish artifacts by run date or time, test, browser, operating system, and screenshot index. See the TestCafe runner and screenshot settings documentation for the configuration syntax applicable to your runner setup.
takeOnFails is useful for diagnosing failed tests, but it is not visual regression checking: a failure screenshot is evidence from a failed run, not a comparison against an approved image.
Make comparisons repeatable
Screenshot comparison is meaningful only when the capture conditions are sufficiently consistent. Treat these as inputs to control in your own workflow; TestCafe’s capture options do not automatically stabilize every rendered page.
- Use the same browser and operating system for the baseline and later captures where possible.
- Set a consistent viewport and capture the same page state each time.
- Wait for relevant content to appear and for page activity that affects the screenshot to settle.
- Keep test data and state repeatable, including content that changes over time.
- Review differences before replacing or approving a baseline; not every pixel change is a defect.
Know the remote-browser limitation
TestCafe’s guide states: “TestCafe cannot take screenshots and videos of remote browsers.” Plan its screenshot checks around a supported local browser context. If your tests must run only in a remote browser environment, verify an alternative capture route before building the visual-check workflow around TestCafe screenshots. The official guide documents this limitation.
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 glitchesAdd a visual-comparison workflow
Percy’s documented TestCafe client
Percy’s TestCafe client repository describes a TestCafe integration for visual regression testing and demonstrates a percySnapshot call. Its example requires running the test under percy exec with the project’s PERCY_TOKEN; when Percy is not running, the example reports that snapshots are disabled. Check the repository for current package requirements and service terms before adopting it, since those can change.
Rank #2
How to evaluate another service
Do not infer a TestCafe connector from a vendor’s general visual-testing description. For example, Applitools’ overview describes comparison against approved baselines and coverage across browsers and devices, but that page does not establish a TestCafe-specific integration. Confirm the integration for your stack directly before selecting a service.
- Comparison and review: establish how baselines are stored, differences are surfaced, and approvals are handled.
- Execution environment: confirm capture works where your tests run, especially if the environment is remote.
- Coverage: identify the browsers, devices, viewports, and page states you actually need to compare.
- Operations: weigh the upkeep of a local screenshot-and-baseline process against the configuration and external-service requirements of a managed workflow.
- Terms and pricing: verify current costs and service terms directly before committing; the cited integration materials do not establish pricing.
Troubleshooting screenshot checks
No image comparison is reported
Cause: TestCafe’s screenshot action saves an image but does not perform baseline comparison. Fix: add a separate image comparison and review step, or use a documented integration such as Percy’s TestCafe client.
A screenshot is missing from a remote run
Cause: TestCafe documents that it cannot take screenshots or videos of remote browsers. Fix: run the screenshot check in a supported local browser context, or verify an alternative capture route for the required environment.
Failure artifacts do not behave like visual checks
Cause: takeOnFails captures screenshots when tests fail; it does not compare images or determine whether a visual change is acceptable. Fix: keep failure diagnostics separate from baseline comparison.
Images differ between runs
Cause: the page, browser, operating system, viewport, or rendered state may not be consistent. Fix: control those inputs and make the page state repeatable before interpreting image differences as regressions.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server; it can capture a URL as an image or PDF, but it does not replace the baseline-comparison and review layer your visual regression workflow needs. Its one-call API is useful when you need a separate URL screenshot without setting up browser automation:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpSee the ScreenshotNeo API documentation for parameters. Before capture, ScreenshotNeo accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for AI agents. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots.
Recommended Free Tools
Sign up for ScreenshotNeo’s free plan to try 1,000 screenshots a month without a card.
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.
