How to Capture a Full-Page Screenshot of a Page with Expandable Sections

To capture a full-page screenshot that includes expandable sections, open the sections you want first, wait until their content has rendered, and then capture the full page. A full-page setting captures the page’s scrollable extent; it does not automatically open accordions, tabs, or other controls. The right controls and selectors depend on the site.

For a one-off capture, use Firefox’s screenshot tool and choose Save full page, or enter :screenshot --fullpage in the Firefox Web Console. For repeatable automation, use Playwright: interact with the page’s actual controls, wait for the resulting content, and call page.screenshot({ fullPage: true }).

1. What full-page capture does—and what it does not do

Full-page capture extends the screenshot beyond the current viewport to include the scrollable page. Playwright describes it as capturing the page “as if you had a very tall screen and the page could fit it entirely.” That describes the capture area, not the page state: hidden content may remain hidden until you activate the corresponding control.

Expandable content can include accordions, disclosure panels, menus, tabs, “show more” buttons, or sections loaded after scrolling. Identify the sections that matter, use each page’s own controls, and check that the expected content is visible before capture. There is no universal selector or interaction sequence that opens every site’s controls.

2. Manual capture in Firefox

Open the page and identify the expandable sections to include.
Activate each section using its visible button, disclosure control, or tab. If content is loaded as you scroll, scroll through the page and let it load.
Check that the expanded text, images, and other content are present. Wait for visible loading indicators to finish; there is no reliable fixed delay for every site.
Open Firefox’s screenshot tool and choose Save full page.
Download the image or copy it, then inspect it to confirm that all desired sections appear.

Firefox also provides a developer-tools route: open the Web Console and enter:

:screenshot --fullpage

The full-page flag includes portions outside the current window bounds. This command captures the current page state; expand the desired content first.

3. Automate the capture with Playwright

Playwright is useful when the same capture needs to run repeatedly. The following Node.js example opens a page, expands buttons whose accessible name matches a known label, waits for the page to settle, and writes a full-page PNG. Replace the URL and button name with values that match the target page.

import { chromium } from 'playwright';

const browser = await chromium.launch({ headless: true });
const page = await browser.newPage({ viewport: { width: 1440, height: 1000 } });

try {
  await page.goto('https://example.com/faq', { waitUntil: 'domcontentloaded' });

  // This assumes the site exposes its accordion controls as buttons
  // with the accessible name "Show answer". Adapt to the target page.
  const expandButtons = page.getByRole('button', { name: 'Show answer' });
  const count = await expandButtons.count();

  for (let i = 0; i < count; i++) {
    const button = expandButtons.nth(i);
    if (await button.isVisible()) {
      await button.click();
    }
  }

  // Wait for web fonts and currently visible images where supported.
  await page.evaluate(async () => {
    if (document.fonts?.ready) await document.fonts.ready;
    const images = [...document.images].filter((image) => image.complete);
    await Promise.all(images.map((image) => image.decode?.().catch(() => {})));
  });

  await page.screenshot({ path: 'screenshot.png', fullPage: true });
} finally {
  await browser.close();
}

Install Playwright in a new Node project with npm install playwright; install a browser with npx playwright install chromium. Save the example as an ES module, for example capture.mjs, and run node capture.mjs.

Choose interactions that match the page

The example uses an accessible button name as an illustration, not a guaranteed selector. If the site uses a different label or control, inspect its markup and adapt the locator. Some sites use a details element, a tab interface, or a button with an expanded state. A useful check for common accordion buttons is the aria-expanded attribute; click only controls that are currently collapsed. Avoid clicking every button on a page, which may submit forms or navigate away.

If expansion triggers network requests or animation, wait for a meaningful page condition: the panel’s expected text becoming visible, its loading indicator disappearing, or its height settling. A fixed sleep can be used as a last resort, but it can be too short on a slow page and waste time on a fast one.

Lazy-loaded content and long pages

Some pages load images or sections only when they enter the viewport. If the result omits them, scroll through the page before capture and wait for the content to appear. For pages with many panels, expand them in batches and verify that opening one does not replace or collapse another. Very tall pages can require substantial memory and can take longer to render and encode; if the output is unwieldy, capture logical page segments instead.

4. Common problems and fixes

Symptom	Likely cause	Fix
An expanded section is absent	The section was still collapsed when capture began, or its content had not loaded.	Activate its actual control, wait for the content to appear, and confirm the expanded state before capturing.
The script finds no matching button	The accessible name, role, or control type differs from the assumed locator.	Inspect the page and use a locator specific to its markup and labels. Do not assume one selector works across sites.
Only some sections open	The site allows only one panel at a time, changes controls after each click, or loads panels dynamically.	Re-query controls after interactions or expand one panel at a time with a locator for the intended section.
Images or text are missing	Lazy loading, delayed requests, fonts, or animation had not finished.	Scroll through the relevant areas, wait for a visible completion condition, and confirm the content before the screenshot.
The page is cut off or the image is enormous	The full page is very tall, or content keeps growing during capture.	Wait until layout changes stop. Consider capturing sections separately if one image exceeds practical memory or sharing limits.
The page looks different in automation	Viewport size, responsive layout, authentication, or browser state differs from the manual session.	Set the viewport explicitly and reproduce the needed session state. Check the page at that viewport before capture.

5. Choose a capture route

Route	Good fit	What to account for
Firefox screenshot tool	One-off manual screenshots	Expand the sections first; choose Save full page, then download or copy.
Firefox Web Console	Manual capture by someone comfortable with developer tools	Run `:screenshot --fullpage` after setting the page state.
Playwright	Repeatable capture in a script or workflow	Write page-specific interaction logic and wait for content to render.
ScreenshotNeo API	Capture a URL with a single HTTP request	Full-page capture handles page extent; site-specific interactions may still be needed if the content is initially collapsed.

6. Reliability, performance, and cost

For reliable automation, make the sequence explicit: navigate, activate the intended controls, wait for a real page condition, then capture. Keep selectors narrow and tied to the target page. Record failures with the URL and the step that failed so that a site markup change is distinguishable from a capture error.

Full-page screenshots of long documents use more memory and take longer to produce than viewport screenshots. Expanding more content increases page height, and waiting on every network request can stall indefinitely on pages with analytics or long-lived connections. Prefer a specific readiness condition or a bounded timeout where the automation framework supports it. The research sources do not provide performance benchmarks for these routes, so actual speed depends on the page, machine, and browser.

Firefox’s built-in tools and a locally run Playwright script do not require a per-shot API service fee. Playwright does require setup and maintenance of browser code and any page-specific interactions. If you need to capture many URLs or integrate capture into an application, account for the API plan and the cost of operating your own browser automation.

7. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its full-page option captures the scrollable page, and a single GET request returns an image or PDF. If a page’s sections start collapsed, configure a suitable interaction for that page; full-page capture alone does not activate site-specific controls. See the ScreenshotNeo API documentation for options and setup.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com/faq \
  -d full_page=true \
  -o shot.webp

Cookie banners, popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.

8. FAQ

Will full-page capture open every accordion automatically?

No. It captures the page’s full scrollable extent in its current state. Use the page’s controls to reveal content first.

Can I capture only one expanded section?

Yes. In Playwright, locate the section and capture its element with an element screenshot instead of setting fullPage: true for the whole page.

Should I use a fixed delay before taking the screenshot?

Only when no better readiness signal is available. Waiting for the expected content or loading state is more dependable across pages with different response times.

Can these steps guarantee that every site will produce the same image?

No. Sites differ in their controls, responsive layouts, loading behavior, and access requirements. Validate the result for the target page and viewport.