How to screenshot a single element on a web page

To capture one table, chart or card instead of the whole page, you need the browser to know which element you mean and to cut the image to its box. Chrome does it from DevTools: right-click the element, choose Inspect, then right-click its node in the Elements panel and choose Capture node screenshot. Firefox does it without DevTools, by hovering and clicking. In a script, Playwright's locator.screenshot() does it in one line. And if you want the element as a PDF whose text can still be selected, Page Scanner has a picker for that. Each is below, with where it falls short.

Four ways at a glance

✓ yes. An empty cell is one the product's own pages do not answer.

1. Chrome DevTools: Capture node screenshot

Chrome's documentation gives the steps:

1. Right-click the element on the page and choose Inspect. DevTools opens with its node selected in the Elements panel.
2. If you want the whole table rather than the cell you clicked, select its parent line in the Elements panel instead.
3. Right-click the node and choose Capture node screenshot.

The image is saved to your Downloads folder. The same command is in the Command Menu: with a node selected, press Cmd+Shift+P on a Mac or Ctrl+Shift+P elsewhere, type node, and choose Capture node screenshot.

Since Chrome 89 it captures the full node, "including content below the fold", so an element taller than the window comes out whole. What you get is a picture: exact, free, and no word of it can be selected. On a page built from many nested divs, the node you land on may sit a few levels inside the one you want, which is what step 2 is for.

The other DevTools screenshot commands (full page, visible area, a dragged area) are in How to take a full-page screenshot in Chrome.

Verdict: the quickest way in Chrome, with nothing to install.

2. Firefox: Take Screenshot, or Screenshot Node

Firefox's screenshot tool picks elements for you. Right-click an empty part of the page and choose Take Screenshot, or press Ctrl+Shift+S (Cmd+Shift+S on a Mac). In Mozilla's words, "when you move the mouse cursor over the page, different parts of the page will be automatically highlighted". Click the one you want; you can then drag the marker points to change the area. Download saves a PNG named after the date, the time and the page title; Copy puts it on the clipboard. Enter selects the highlighted region, and the arrow keys move the crosshair, so it works from the keyboard too.

For a node you chose in DevTools, open the Inspector, right-click the node in the HTML pane, and choose Screenshot Node; the file goes to Downloads. The Web Console has a third way, :screenshot --selector with a CSS selector, and its --delay option exists, Mozilla says, for when "you want to pop open a menu or invoke a hover state" before the capture.

Verdict: the friendliest built-in picker, and its console command can wait for a hover state.

3. Playwright: locator.screenshot()

When the element is part of a test or a job, capture it from code. Playwright's documentation:

await page.locator('.header').screenshot({ path: 'screenshot.png' });

Any locator works, page.getByRole('table') included. Playwright's API reference says what happens: it waits for the element to pass its actionability checks, scrolls it into view, and takes "a screenshot of the page, clipped to the size and position" of the element. It throws if the element has been removed from the page. The output is PNG unless you ask for JPEG; mask covers elements you do not want in the picture with a box, pink #FF00FF unless maskColor says otherwise, and animations: 'disabled' stops them for the capture.

Two cases it names itself: an element covered by another one, such as a sticky header, is not visible in the screenshot, and for a scrollable container "only the currently scrolled content" is. For the whole page from the command line, see How to capture a web page from the command line.

Verdict: the one for automation and visual tests.

4. Page Scanner: Pick an element

Page Scanner is a Chrome extension that captures a page and extracts it as a vector PDF or an image. Its picker works the way Firefox's does, and what comes out can be a PDF:

1. Click the Page Scanner icon and press Pick an element, under the Scan button, or press Alt+Shift+E on the page itself.
2. A green outline follows the pointer, with the element's tag and size beside it. Press ↑ to take in its parent instead, which is how you get a whole table from inside one of its cells, and ↓ to go back.
3. Click, or press Enter. Esc gives up and nothing is scanned.

While the picker is up, the page's own clicks are held back, so choosing a link does not follow it. The whole page is then captured as usual, and the editor opens with the crop exactly on the element you picked. Everything else works on it: marks, blur, redaction, and every export. A PDF holds the element as vector artwork with its text selectable, and only the text inside the crop, so the menu around it cannot turn up in a search. PNG and JPEG are pictures of it. Markdown and Word give you its text instead, tables and lists kept, which is useful when the element is a table you want to edit. Cmd+C or Ctrl+C copies the crop as a PNG to paste elsewhere.

If you drag the crop and change your mind, the toolbar's Crop to the picked element puts it back; Reset crop or Esc goes to the whole page.

What it costs, from its own list of limits:

• An element inside a box that scrolls on its own is captured as far as that box shows it, and the editor says so when it opens. The page's main scroller is not such a box.
• The crop is the element's border box. A shadow or an outline drawn outside it is left out; drag the crop wider to take it in.
• A cross-origin iframe cannot be picked into. Choosing the iframe itself works.
• An element that is gone by the time the page is laid out, such as a menu that closed, leaves the crop on the whole page.
• It is for a person with a pointer. The command line and an agent cannot pick, and picking is not offered with several tabs selected.
• Close DevTools on that tab first. The capture uses Chrome's debugger, which shows Chrome's debugging bar during the scan, and only one debugger can attach at a time. With DevTools open, the capture falls back to stitched screenshots and the PDF holds an image.

The picker adds no permission; it runs under the same access that clicking the icon or pressing the shortcut gives. The capture and the files stay on your computer. The extension does send anonymous counts of which features are used, which the settings can turn off.

Verdict: the one to use when the element should stay a document: a table you want to search, quote or send as a PDF.

Frequently asked questions

Why is part of my element missing? Often one of two things. The element scrolls inside its own box, and Playwright and Page Scanner both say they capture only what that box shows at the time. Or something is drawn over it, a sticky header or a cookie banner, which Playwright's documentation says will cover it in the screenshot. Scroll the box, or close the banner, and capture again.

How do I include the drop shadow? Choose a larger element around it: its parent in Chrome's Elements panel, ↑ in Page Scanner's picker, or drag Page Scanner's crop past the edge.

Can I get the element's text rather than a picture? Page Scanner's PDF keeps it selectable, and its Markdown and Word exports give you the text on its own. The other three produce images.

Where this comes from

• Chrome for Developers: Capture a node screenshot, What's new in DevTools (Chrome 62) and (Chrome 89).
• Mozilla: Take screenshots in Firefox and the Firefox DevTools guide, Taking screenshots.
• Playwright: Screenshots and locator.screenshot().
• Page Scanner: Capture one element, Shortcuts, Markdown and Word and Vector or raster.