What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
You can screenshot Shadow DOM content with Playwright’s regular locator and screenshot APIs; no special capture mechanism is needed. Use locator.screenshot() to capture one component, or page.screenshot() to capture the viewport or full page. Playwright locators work with elements in Shadow DOM by default, except that XPath does not pierce shadow roots and closed-mode roots are unsupported. Playwright’s locator documentation explains the behavior.
Capture an element inside Shadow DOM
Use a locator that identifies the element as a user would, when possible, then call its screenshot() method. Replace the example URL and role/name with values that match the page you are testing.
import { test } from '@playwright/test';
test('capture a component rendered in Shadow DOM', async ({ page }) => {
await page.goto('https://example.com');
// Replace this role and name with a locator that matches the site.
const component = page.getByRole('button', { name: 'Details' });
await component.screenshot({ path: 'details.png' });
});Playwright recommends user-facing locators such as role and text when they fit. CSS is also an option if the site exposes a stable selector. Its locator methods can find elements in supported Shadow DOM without first querying the shadow root manually. See Locators and Other locators.
Capture the viewport or the full page
A page screenshot shows the current viewport by default. Set fullPage: true to capture the full scrollable page:
#1 Best Overall
import { test } from '@playwright/test';
test('capture a page containing Shadow DOM', async ({ page }) => {
await page.goto('https://example.com');
await page.screenshot({ path: 'page.png', fullPage: true });
});For only the visible viewport, omit fullPage:
await page.screenshot({ path: 'viewport.png' });The choice is about scope: a locator screenshot isolates a matched component, while a page screenshot shows the viewport or, with fullPage: true, the full scrollable document. Playwright’s screenshot guide covers both methods.
Choose a locator that can reach the element
Prefer role, name, or text where suitable
Accessible roles and names tend to describe what the element does rather than how the page is implemented. For example, use getByRole('button', { name: 'Details' }) if that accurately identifies the target.
Use CSS for a stable implementation selector
Playwright’s CSS selectors pierce open Shadow DOM. Use CSS when it is the practical stable contract for the component, but be aware that selectors tied to internal markup can break when the implementation changes.
Avoid XPath for Shadow DOM targets
XPath does not pierce shadow roots. If an XPath locator cannot find the target, switch to a supported locator or CSS selector rather than changing the screenshot call.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Closed-mode roots are a limit
Playwright’s documented locator behavior does not support closed-mode shadow roots. If the target is inside one, a regular locator cannot reach it through the documented mechanism. The page owner may need to expose a testable interface or provide another way to identify the content.
Make captures useful and repeatable
Wait for the component you need
Navigate to the page, then use a locator for the relevant component before taking its screenshot. Locator screenshot actions wait for the target to be actionable, but a page with additional asynchronous content may still need an explicit readiness condition appropriate to that site.
Understand what an element screenshot includes
A locator screenshot clips the page to the matched element’s size and position. An overlay may cover the target, and a scrollable element shows only the content at its current scroll position. If the image omits content, check for an overlay or scroll the component before capture.
Use screenshot styles to suppress dynamic UI
The screenshot API’s style option applies CSS that pierces Shadow DOM and inner frames. It can hide or adjust dynamic elements for more repeatable captures. Check the Page API reference for exact option support in the Playwright version installed in your project.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Keep the comparison environment consistent
For visual regression checks, keep the operating system, browser version, browser settings, hardware, power source, and headless mode consistent where possible. Playwright notes that rendering can vary with these conditions; see Visual comparisons.
Troubleshoot missing or misleading screenshots
| Symptom | Likely cause | What to try |
|---|---|---|
| The locator cannot find the element | The target is in a closed-mode root, the locator does not match the page, or the page has not rendered the component yet. | Verify the role/name or CSS selector, wait for the component to appear, and confirm that the root is not closed-mode. |
| An XPath locator fails to reach the target | XPath does not pierce shadow roots. | Use a role, text, or CSS locator instead. |
| The screenshot contains only part of a scrollable component | A locator screenshot captures the element’s currently visible area. | Scroll the element to the intended position before capture; capture separate positions if the content must be documented in pieces. |
| The target looks covered or missing in the image | An overlay may obscure it, or the component may not yet be ready. | Wait for the intended state or use the screenshot style option to suppress unwanted UI. |
| Visual snapshots differ between runs or machines | Rendering conditions can vary across operating systems, browser versions, settings, hardware, power sources, and headless mode. | Run comparisons in a consistent environment and control dynamic elements with screenshot styles where appropriate. |
Or skip the browser setup
If you need a hosted capture rather than a Playwright browser in your own project, ScreenshotNeo is a website screenshot API and MCP server. One GET request returns an image or PDF; its screenshot API does not expose a Shadow-DOM-specific locator, so use Playwright when you need to target a particular component inside the page.
Example request (replace the URL with the page you want to capture):
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 request options. Cookie banners are accepted and removed before capture along with known consent platforms, newsletter popups, and chat widgets; those steps 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 for AI agents. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.
Sign up for ScreenshotNeo’s free plan to try 1,000 screenshots a month without a card.
Frequently Asked Questions
Does Playwright support screenshots of open Shadow DOM elements?
Yes. Its standard locators work with elements in supported Shadow DOM, and locator screenshots use the same screenshot API as other elements.
Can I use XPath to select an element inside a shadow root?
No. Playwright’s XPath selectors do not pierce shadow roots; use an appropriate role, text, or CSS locator instead.
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.
Recommended Free Tools
