Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Open the menu in the browser, wait until it is visible, then capture the page or the menu element. A screenshot call records the page’s current state; it does not open a menu for you. With Playwright, use page.screenshot() for the page view or a locator’s screenshot() method for a close crop. Shadow DOM affects how you find the menu, but it does not require a special screenshot API.
Choose a page screenshot or a menu-only crop
| Capture | Use it when | Trade-off |
|---|---|---|
| Viewport screenshot | You need the menu shown in context with nearby page content. | No menu selector is needed, but the result includes the current viewport. |
| Full-page screenshot | You need the full scrollable page. | A transient menu may appear only in the current viewport, so a full-page image is not always the right choice. |
| Locator screenshot | You want a close crop of the menu. | You must correctly match the menu; a covering element can affect the image. |
Playwright’s Screenshots guide shows page, full-page, buffer and element capture patterns. For the detailed options, see the Page API and Locator API.
Capture an open menu with Playwright
In a Playwright test or script, use a user-facing locator when the site exposes an accessible button and menu. Adapt the role and accessible name to the page you are capturing.
Capture only the menu
await page.getByRole('button', { name: 'Open menu' }).click();
await page.getByRole('menu').screenshot({ path: 'open-menu.png' });A locator screenshot performs actionability checks and scrolls the target into view. It can fail if the matched element is detached before capture. If another element covers the menu, that covering content may appear in the screenshot.
#1 Best Overall
Capture the page view after opening the menu
await page.getByRole('button', { name: 'Open menu' }).click();
await page.screenshot({ path: 'page-with-open-menu.png' });To include the full scrollable page, pass fullPage: true:
await page.screenshot({ path: 'full-page.png', fullPage: true });For an open, transient menu, the viewport screenshot is often a better fit than a full-page capture because the menu may be visible only at its current position.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Find the menu inside Shadow DOM
Playwright’s screenshot style option can apply styles that pierce Shadow DOM and inner frames. This is useful for normalizing a capture or hiding dynamic content, but it does not open the menu and is not a universal selector for every custom component.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Prefer accessible roles and names if the page provides them. If a menu is rendered through a portal or uses nonstandard accessibility markup, inspect the rendered page and adjust the locator to match the actual element. The component structure and appropriate selector vary by site.
Rank #3
Make the screenshot more deterministic
For documentation or visual tests, wait until the menu is visible and stable before capture. If it animates, account for the transition or disable animations in a controlled test. Playwright documents screenshot settings for disabling animations and applying a stylesheet; use styling only when changing the page for capture is acceptable.
When you use a locator screenshot, the matched element must remain attached through capture. If you need an exact crop but cannot reliably locate the menu, use a page screenshot for context or use browser debugging tools with explicit clipping.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Use Chrome DevTools Protocol for clipping or inspection
Chrome DevTools Protocol’s Page domain provides Page.captureScreenshot, including a clip region and the captureBeyondViewport parameter. This is a lower-level alternative for workflows that already use browser debugging commands or need explicit clipping.
Recommended Free Tools
The separate DOMSnapshot domain returns a flattened DOM tree that includes Shadow DOM. Use it to inspect structure, not to capture an image: image capture is a separate operation.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshoot a missing or incomplete menu
- The menu is absent: trigger it with the same interaction a visitor would use, then confirm it is visibly rendered before taking the screenshot.
- The element screenshot errors: check that the locator matches the rendered menu and that it remains attached at capture time. If the menu closes or is replaced, capture sooner or use a page screenshot.
- The crop omits the menu or context: check whether the locator targets the intended element. Switch to a viewport screenshot when a close crop is unreliable or surrounding page content matters.
- The menu is clipped or covered: inspect the visible page state, scroll position and overlapping content. Locator screenshots scroll the target into view, but a covering element can still change what appears.
- The capture catches an animation: wait for the transition to finish or use the documented animation-disabling setting in a controlled visual test.
- The menu disappears on blur or focus change: verify the saved image after capture. A transient menu may close when the page loses the state that keeps it open.
Or skip the browser setup
If you just need a screenshot returned by an API, ScreenshotNeo can capture a URL in one GET request. Its clean-shot options accept cookie or consent banners and remove more than 60 known consent platforms, newsletter popups and chat widgets before capture; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and the response identifies the page verdict and billing status in headers. ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info and capture_pdf tools for AI agents.
This does not replace the Playwright interaction above when a menu must be opened by clicking a control; the API takes a screenshot of a URL rather than running that site-specific interaction.
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. It accepts PNG, JPEG or WebP output, and can also return a PDF. Plans include 1,000 screenshots per month free with no card; paid plans start at $5 for 3,000. Learn more at ScreenshotNeo, or sign up for 1,000 free screenshots a month, with no card required.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated 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 matchFrequently Asked Questions
Does a screenshot API open a Shadow DOM menu automatically?
No. The menu must already be open and rendered when the screenshot is taken; opening it requires a site-specific interaction.
Can Playwright screenshot a menu inside Shadow DOM?
Yes, if you can match the rendered menu with a locator. The screenshot style option pierces Shadow DOM for styling, but it does not provide a universal locator.
Does Chrome DevTools Protocol’s DOMSnapshot capture an image?
No. DOMSnapshot returns a flattened structure for inspection; use Page.captureScreenshot for the image.
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.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
