Puppeteer Screenshot में वेबसाइट का Footer बीच में कट रहा है: Fix

Most cut-off footers come from one of four things: the screenshot captures only the viewport, an explicit clip ends too early, the footer has not finished rendering, or the output is a PDF using print layout. For a full-page image, start with fullPage: true. For a PDF, inspect print CSS, page size, margins, and scale separately.

1. Check whether the screenshot is full-page

Puppeteer’s fullPage screenshot option defaults to false, which captures the current viewport. Set it to true to request the full document:

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

This is the right starting point when the footer is below the visible browser window. It does not fix a footer that has not rendered yet, and it does not override an explicit clipping region.

2. Inspect any screenshot clip

If the call passes a clip rectangle, Puppeteer captures only that region. Its x and y set the top-left position, while width and height define its dimensions. A clip whose bottom edge stops above the footer will cut it off, even if the page itself is taller.

// A viewport-sized clip can exclude content below the fold.
await page.screenshot({
  path: 'page.png',
  clip: { x: 0, y: 0, width: 1280, height: 800 }
});

// Remove the clip for a full-document capture.
await page.screenshot({ path: 'page.png', fullPage: true });

Choose one capture goal: a defined region, the whole document, or a specific element. If you need a clip, calculate its dimensions from the actual target region and check that its bottom edge includes the footer.

3. Wait until the footer content is ready

A footer can exist in the initial HTML but receive its links, legal text, or other content later through client-side rendering. Wait for a meaningful selector before capturing. If the footer is populated asynchronously, wait for an application-specific condition that proves the content is complete; the mere presence of a footer element may be too early.

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

// Use a selector that appears when the footer is ready.
await page.waitForSelector('footer .legal-links');
await page.screenshot({ path: 'page.png', fullPage: true });

For content that renders in stages, wait for the actual last step your application controls:

await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });
await page.waitForFunction(() => {
  const footer = document.querySelector('footer');
  return footer?.querySelectorAll('a').length >= 4;
});
await page.screenshot({ path: 'page.png', fullPage: true });

Adjust the condition to match the page. A generic navigation wait does not guarantee that every application has finished loading all footer content.

4. Capture just the footer when that is the goal

If you only need the footer image, wait for the footer and take an element screenshot. Puppeteer’s element screenshot API attempts to scroll a hidden element into view before capturing it.

const footer = await page.waitForSelector('footer');
await footer.screenshot({ path: 'footer.png' });

Use a more specific selector if the page contains multiple footer-like elements, or wait for a child that indicates the desired content has finished rendering.

5. Diagnose PDF output as print layout

A PDF is not the same capture path as a PNG or JPEG. Puppeteer’s page.pdf() uses print CSS media by default. Print styles, page dimensions, margins, scaling, and CSS @page rules can change where content falls or how it breaks across pages. If you want the PDF to use screen media styling, emulate it before generating the PDF:

await page.emulateMediaType('screen');
await page.pdf({ path: 'page.pdf' });

If the footer is missing or split in a print-style PDF, inspect the print stylesheet and these settings:

• Paper size: confirm the intended page dimensions.
• Margins: check whether the footer falls into a margin or outside the printable area.
• Scale: verify that scaling is not changing the expected pagination.
• Backgrounds: enable background printing if the footer depends on background colors or images.
• @page rules: inspect CSS page size and margin rules, which can affect PDF layout.
• Print-specific CSS: check for rules that hide, reposition, or break the footer.

Choose the PDF layout deliberately: print media for print-oriented output, or screen media when the PDF should retain the page’s screen styling.

6. A complete Puppeteer example

This runnable Node.js example navigates to a page, waits for a footer selector, then saves a full-page PNG. Replace the URL and readiness selector with the target page’s values.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: true });
  try {
    const page = await browser.newPage();
    await page.setViewport({ width: 1280, height: 800 });
    await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });
    await page.waitForSelector('footer');
    await page.screenshot({ path: 'page.png', fullPage: true });
  } finally {
    await browser.close();
  }
})();

If the footer fills in after the element appears, replace waitForSelector('footer') with a selector or page condition tied to the completed footer content.

7. Choose the capture method

Need	Use	Check
Whole page as an image	page.screenshot({ fullPage: true })	Remove or expand any clip; wait for dynamic content.
One footer element	footer.screenshot()	Use the right selector and wait for complete content.
Specific rectangular region	page.screenshot({ clip })	Ensure the rectangle reaches through the footer.
PDF	page.pdf()	Check print media, paper, margins, scale, and @page.

8. Troubleshooting common causes

Symptom	Likely cause	Fix
Screenshot ends at the browser window height	fullPage is omitted or false.	Set fullPage: true for the whole document.
The bottom is cut at the same pixel each time	A fixed-height clip ends there.	Remove the clip or increase its height and verify its coordinates.
Footer background appears, but links or text are missing	Capture happens before asynchronous rendering finishes.	Wait for the specific footer content or an app-ready condition.
Footer is missing or paginated unexpectedly in a PDF	Print CSS or PDF page settings differ from screen layout.	Inspect print rules, paper size, margins, scale, and @page; emulate screen media if that is the intended style.
Element capture is blank or targets the wrong region	The selector matched the wrong element or the footer is not ready.	Use a more specific selector and wait for its completed content before calling screenshot().

9. Performance, reliability, and cost

Full-page captures can produce much larger images than viewport captures, so use them only when the entire document is needed. Capturing a footer element can reduce the captured region when that alone meets the requirement. Wait on the smallest reliable readiness condition for the page; do not assume one navigation event means application rendering is finished.

For repeatable output, set the viewport explicitly, use a stable target selector, and keep screenshot mode and PDF mode distinct in your code. Puppeteer itself has no per-screenshot charge described here; hosting the browser, compute, storage, and retries may contribute to your own operating costs.

10. Or skip the browser setup

If you would rather request a screenshot from an API, ScreenshotNeo accepts a URL and returns an image or PDF. Its API supports full-page capture and waiting for a selector. See the ScreenshotNeo API docs for request options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

• Cookie banners, newsletter popups, and chat widgets are removed before the shot; each cleanup step can be turned off.
• Bot checks, blank pages, timeouts, failed loads, and cache hits are never billed; response headers report the page verdict and billing status.
• An MCP server lets AI agents use screenshot, page-info, and PDF capture tools.
• 1,000 screenshots a month are free with no card. Paid plans start at $5 for 3,000 screenshots.

Sign up for 1,000 free screenshots a month, with no card required.

FAQ

Does fullPage: true fix every cut-off footer?

No. It requests a full-document image, but a clip, unfinished rendering, or PDF print layout can still explain the problem.

Should I use a footer element screenshot or a full-page screenshot?

Use an element screenshot when you only need the footer. Use full-page mode when the output must include the page above it too.

Why does the PNG look right while the PDF does not?

PDF generation uses print media by default, so print CSS and page settings can change the layout. Emulate screen media if screen styling is what you need.