Use Cypress’s built-in .screenshot() command on a query that yields the element. For example, cy.get('.post').first().screenshot() captures the first element matching .post.
Capture one element with Cypress
Chain .screenshot() from a Cypress command that yields a single DOM element. This is Cypress’s documented way to capture an element, and the command saves an image artifact rather than performing a visual comparison.
cy.get('.post').first().screenshot()The selector can target the element you want; use a query such as cy.get() and narrow it to one match when necessary. Cypress documents .screenshot() as chainable from cy or from a command yielding a single DOM element. Cypress screenshot API
Set the filename or add padding
Choose a useful screenshot name
Pass a name as the first argument to make the artifact easier to identify:
Recommended Free Tools
cy.get('.post').first().screenshot('post-card')By default, Cypress uses test-based names. If names collide, it adds a numeric suffix unless overwrite is enabled. Screenshots are saved relative to the configured screenshots folder and spec path.
Add space around the element
Use the padding option to include space around the captured element:
cy.get('.post').first().screenshot({ padding: 10 })For element screenshots, padding can be a number or an array of up to four values using CSS shorthand order: top, right, bottom, left. For example:
cy.get('.post').first().screenshot({ padding: [8, 12, 8, 12] })Understand capture options and command behavior
capturedoes not select a different mode for an element. Cypress says this option is ignored for element captures. Its viewport, full-page, and runner modes apply to other capture modes.clipdescribes a crop using an x/y position and width/height in pixels; it is distinct from selecting an element as the screenshot subject.- The command is asynchronous. Cypress describes capture as taking around 100 ms and warns that application state may change before the screenshot completes.
- The yielded subject is not a safe basis for subsequent subject-dependent commands. Although
.screenshot()yields the same subject, Cypress marks further chaining that relies on it as unsafe. Chained assertions run once and are not retried.
For non-failure screenshots, Cypress supports callbacks that can synchronously adjust the DOM before and after capture. Use them when you need to coordinate a deliberate temporary DOM change with the screenshot; restore any modified state afterward. See the screenshot API options and callback behavior
Find the saved image
Cypress stores screenshot artifacts in cypress/screenshots by default. You can change the screenshotsFolder configuration setting if you need a different location. Screenshots captured when tests fail during cypress run are also saved there by default. Cypress configuration reference
Troubleshoot element screenshots
- The image shows more than the target: confirm the query is narrowed to one element, such as with
.first(), and call.screenshot()on that subject. Do not expectcaptureto change an element screenshot into viewport or full-page capture. - The element has no breathing room: add
padding, using a number or an array of up to four values. - You cannot find the image: check the spec-relative screenshots output path and whether
screenshotsFolderhas been changed in Cypress configuration. For predictable artifact names, pass a screenshot name. - The captured state differs from the state at the command call: account for asynchronous capture; Cypress says the application may change before capture completes. For a non-failure screenshot, use the documented callbacks if a synchronous DOM adjustment is needed.
- A following command behaves unexpectedly: do not rely on the subject yielded by
.screenshot()for later chained operations. Start a fresh query for subsequent subject-dependent work.
When a screenshot is not enough for visual testing
Cypress’s element screenshot command creates an image; reviewing visual changes against baselines is a separate workflow. Cypress’s visual testing guide describes Percy by BrowserStack as capturing DOM snapshots and rendering them across browsers and responsive widths. The guide also describes Sauce Labs Visual as supporting baseline creation, region ignoring, and review workflows, and points to Applitools documentation as another Cypress option. Choose based on the capture mechanism, baseline and diff process, review workflow, and integration fit. Cypress visual testing guide
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you need a screenshot through an API instead of running a Cypress test, ScreenshotNeo returns an image or PDF from 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 API documentation for request options. ScreenshotNeo accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents and other MCP clients. The Free plan includes 1,000 screenshots per month with no card, and paid plans start at $5 for 3,000 shots.
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.
