Recommended Free Tools
To add custom CSS to one Percy screenshot, pass a percyCSS string in the snapshot options. To apply the same CSS to snapshots across a project, configure snapshot.percy-css in .percy.yml. If the page itself must be changed before capture, make the CSS or DOM change in your test before calling Percy.
Add CSS to one Percy screenshot
Use the percyCSS snapshot option for a narrowly scoped override. For example, this hides iframes in one snapshot:
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
Software Testing using Visual Studio 2010 | $41.00 | Buy on Amazon |
| 2 |
|
Software Testing With Visual Test 4.0 | $4.14 | Buy on Amazon |
| 3 |
|
Testing Computer Software | $14.00 | Buy on Amazon |
| 4 |
|
Web Automation with Playwright and Python using AI and MCP: Playwright and Python with AI for... | $29.95 | Buy on Amazon |
As an Amazon Associate I earn from qualifying purchases.
await percySnapshot('Home page', {
percyCSS: 'iframe { display: none; }'
});Replace the CSS selector and declaration with the rule you need. Because this is attached to that snapshot call, it is appropriate for a one-off adjustment rather than a project-wide style change. See Percy’s Percy Specific CSS changelog entry for the documented example.
Apply CSS to snapshots project-wide
To use the same Percy-specific CSS across snapshots, add percy-css beneath snapshot in the project’s .percy.yml file:
#1 Best Overall
version: 1
snapshot:
percy-css: |
iframe {
display: none;
}The YAML block scalar (|) preserves the CSS as a multiline value. This global configuration is useful when the same override belongs in every snapshot; use the per-snapshot option when it should affect only one capture.
Change the page before calling Percy
Percy-specific CSS is for styling the snapshot. When the test needs to prepare the application page itself—for example, by changing application state or manipulating the DOM—make that change in the test before invoking the snapshot function. The sequence is:
Rank #2
- Used Book in Good Condition
- Load the page and establish the state your visual test is intended to inspect.
- Apply the required page-specific CSS or DOM change in the test.
- Call the Percy snapshot function after the change.
Keep this distinct from a Percy-only override: test-side preparation changes the page under test, while percyCSS supplies CSS for the Percy capture.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Choose what to hide carefully
Dynamic elements can create noisy visual differences when they are not part of the layout or behavior being tested. Percy’s guidance discusses elements such as live chat, notification badges, counters, rotating banners, and ads as potential sources of instability. Hiding them can make comparisons more repeatable, but exclude them only when they are outside the purpose of the visual assertion.
If animation or transitions make captures vary, CSS can disable them for the visual test. For data-driven content, controlling the test data may be preferable to hiding the content, because stable data can preserve the layout the test is meant to verify. Percy covers these approaches in How to Reduce False Positives in Visual Testing, published February 23, 2026.
Rank #3
Check SDK compatibility before relying on a version number
Percy’s September 17, 2019 announcement said Percy-specific CSS required @percy/agent v0.13.0 or newer at that time. That is a historical requirement, not confirmation of current compatibility. Check the documentation for the Percy SDK installed in your project before depending on a particular version or option.
Or skip the browser setup
If you need a screenshot through an API rather than a Percy visual-test snapshot, ScreenshotNeo accepts a URL in one GET request. For example, using cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo documentation for API options. Cookie banners are accepted and removed before capture, along with known newsletter popups and chat widgets; those steps can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers report the page verdict and billing status. An MCP server provides screenshot tools for AI agents, and the free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000.
Sign up free for ScreenshotNeo: 1,000 screenshots a month, no card required.
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.
