How to Screenshot a Whole Page for Chrome/Firefox

Kavita Joshi

Posted On: October 10, 2025

18 Min

Capturing a full-page screenshot has become a fundamental skill for developers and testers. Whether you need to document a bug, create tutorials, archive web pages, or present complete web layouts, a standard screenshot often falls short because it only captures what’s visible on your screen.

Learning how to screenshot a whole page allows you to capture entire web pages, including areas that require scrolling, ensuring that no detail is missed.

Overview

If you’re wondering how to screenshot a whole page, different browsers and tools make the process simple:

Why taking a screenshot of a whole page work?

  • In Google Chrome: Use Developer Tools (Ctrl+Shift+P → “Capture full-size screenshot”) or extensions like GoFullPage.
  • In Firefox: Take advantage of the built-in screenshot option to capture the entire page without third-party tools.
  • Using Browser Extensions: Tools like Fireshot and Nimbus work across browsers for quick scrolling captures.
  • For Automation: Frameworks such as Selenium or Puppeteer can automate full-page screenshots during testing.

This ensures you can capture entire webpages, whether for QA, design reviews, or documentation, without missing critical details below the fold.

Why Full-Page Screenshots Matter?

A traditional screenshot captures only what’s visible on the screen, but most webpages today are scrollable and content-rich. Knowing how to screenshot a whole page ensures that no important detail below the fold is missed. Full-page screenshots are essential for several reasons:

  • Bug Reporting
  • Developers can see the complete context of an issue, including hidden or scrollable elements. Full-page screenshots help identify layout bugs, broken components, and UI inconsistencies efficiently during debugging or QA review.

  • Design Review
  • QA teams and designers can verify layout consistency, color schemes, and responsiveness across devices. Full-page screenshots allow for accurate visual comparisons and ensure that the design matches intended specifications without missing elements.

  • Documentation & Tutorials
  • Creating step-by-step guides or tutorials becomes easier with full-page screenshots. Capturing the entire content ensures that readers follow the instructions accurately without skipping any important sections of the webpage.

  • Archiving Web Content
  • Webpages can be saved for compliance, research, or future reference. Full-page screenshots preserve the complete layout and content, making it easier to review historical versions or maintain records for legal or archival purposes.

Without a full-page screenshot, you risk miscommunication, incomplete documentation, or misrepresentation of your web content.

How to Screenshot a Whole Page in Google Chrome?

Google Chrome provides multiple methods to capture full-page screenshots, whether on desktop or mobile.

Using Developer Tools

  1. Open the webpage in Chrome.
  2. Press Ctrl + Shift + I (Windows/Linux) or Cmd + Option + I (Mac) to open Developer Tools.
  3. Press Ctrl + Shift + P (Windows/Linux) or Cmd + Shift + P (Mac) to open the Command Menu.
  4. Type screenshot and select Capture full size screenshot.
  5. Capture full size screenshot

  6. The screenshot is saved as a PNG file in your downloads folder.

Using Chrome Built-in Options (Mobile/Desktop)

  • On Chrome for Android, press Power + Volume Down to take a screenshot, then select Capture more to extend to the full page.
  • On Chrome for Chromebook, you can use the Developer Tools method above.

How to Take a Full-Page Screenshot in Mozilla Firefox?

Firefox has a robust built-in screenshot tool, which makes full-page capture straightforward.

Built-in Screenshot Tool

  • Open Firefox and navigate to your page.
  • Click the three-line menu → More tools → Web Developer Tools.
  • Click on the camera icon to save the full page screenshot.
  • Full-Page Screenshot in Mozilla Firefox

Using Firefox Extensions

  • Awesome Screenshot: Capture, annotate, and share full-page screenshots.
  • Fireshot: Capture full page, selected region, or visible screen; export to PDF.

How to Take a Full-Page Screenshot in Microsoft Edge?

Microsoft Edge provides an integrated Web Capture tool:

  1. Open Edge and navigate to the webpage.
  2. Press Ctrl + Shift + S to open Web Capture.
  3. Select Capture full page.
  4. Full-Page Screenshot in Microsoft Edge

The screenshot opens in a new tab and can be saved or annotated.

How to Take a Full-Page Screenshot in Safari on Mac?

Using Developer Tools

  1. Open Safari and load the desired page.
  2. Press Cmd + Option + I to open Developer Tools.
  3. Click Elements → right-click → Capture Screenshot.
  4. Screenshot saves as PNG.

Using Safari on iPhone (iOS)

  1. Open Safari and navigate to your page.
  2. Press Side Button + Volume Up.
  3. Tap Full Page in the screenshot preview.
  4. Save as PDF via Done > Save PDF to Files.

How to Take a Full-Page Screenshot on Mobile Devices?

iPhone (iOS)

  • Use Safari as mentioned above.
  • Third-party apps like Paparazzi or Stitch can create combined screenshots from multiple captures.

Android

  • Press Power + Volume Down → tap Capture more → save screenshot.
  • For older devices, third-party apps like LongShot for Long Screenshot or Stitch & Share help capture full pages.

How to Take a Full-Page Screenshot Using LambdaTest?

LambdaTest provides a seamless way for developers and testers to capture full-page automated screenshots across 3000+ real browsers, operating systems, and device combinations. This ensures accurate validation of user interfaces under diverse test environments without local setup overhead.

Here are the steps to capture a full-page screenshot on LambdaTest:

  1. Sign in to your LambdaTest dashboard. If you do not have an account, register for free access to cross-browser testing features.
  2. From the LambdaTest dashboard, navigate to the More Tools > Screenshot.
  3. LambdaTest Dashboard

  4. Provide the webpage URL you want to test. Choose from a wide range of browsers, versions, devices and operating systems.
  5. Webpage URL

  6. Click on CAPTURE. LambdaTest will launch your webpage on selected environments and automatically capture full-page screenshots.
  7. LambdaTest launches webpage on selected environments and automatically

Screenshots are displayed within the dashboard. You can view them online, share links with your team, or download them in bulk for documentation or defect reporting.

In screenshot testing, simply capturing a screenshot is not enough. Comparing two screenshots, one from the baseline and one from the latest build, helps testers quickly detect visual regressions, cross-browser inconsistencies, and unintended UI changes, ensuring the application’s interface remains consistent and reliable. This is where LambdaTest SmartUI comes into the picture.

Compare Screenshots with SmartUI for Visual Regression Testing

Capturing full-page screenshots is only the first step in ensuring application quality. To identify subtle UI inconsistencies, testers often require screenshot comparison capabilities.

LambdaTest’s SmartUI feature enables automated visual testing by comparing new screenshots against established baselines, ensuring that unintended changes in the user interface are quickly detected.

    Features:

  • SmartUI SDK: Using the SmartUI SDK config options, you can seamlessly capture full-page screenshots for both web applications and mobile pages across different environments.
  • Baseline Image Creation: Testers can set an initial screenshot as the baseline. Future test runs automatically compare against this baseline to highlight even pixel-level deviations.
  • Automated Visual Comparisons: SmartUI compares current screenshots with stored baselines, eliminating the need for manual image reviews. Differences are flagged with visual highlights for faster debugging.
  • Cross-Browser Consistency Checks: Teams can validate whether the UI looks consistent across multiple browsers, versions, and devices, identifying rendering issues early in the cycle.
  • Seamless Integration with Workflows: SmartUI integrates with CI/CD pipelines, making visual regression checks part of automated builds. This reduces release risks and supports continuous testing practices.
  • Actionable Reporting: Differences are presented with clear, side-by-side comparison views. This allows testers and developers to make informed decisions on whether UI changes are expected or regressions.

To get started, check out this guide on visual regression tests with SmartUI

Using Browser Extensions Across Platforms

Extensions simplify full-page capture across browsers:

Extension Browser Features
GoFullPage Chrome Full-page capture
Awesome Screenshot Chrome, Firefox, Edge Capture, annotate
Nimbus Screenshot Chrome, Firefox, Edge Capture, edit, export PDF
Fireshot Chrome, Firefox, Edge Full-page, edit, PDF export

Tip: Extensions often add extra features like annotations, PDF export, or batch capture, which are helpful for QA and documentation.

Advanced Techniques and Tools for Developers and QA

For technical users, advanced tools can improve productivity. These methods go beyond basic screenshots, offering automation, cross-browser validation, and integration with CI/CD pipelines to streamline testing and reporting.

  • ShareX (Windows): Open-source tool, supports scrolling capture, GIFs, and annotations.
  • Snagit: Paid tool for editing, annotations, and batch capture.
  • Automation Tools: Use Selenium or Puppeteer scripts to automate full-page screenshot capture for testing workflows.

Tip: For QA, using automation tools saves time when capturing multiple pages across environments or browser versions.

Comparison of Methods and Tools

Platform/Method Ease of Use Advanced Features Output Format Best For
Chrome DevTools Medium Developer-focused PNG Pixel-perfect screenshots
Firefox Built-in Easy Basic editing PNG Quick capture with full page
Edge Web Capture Easy Basic editing PNG Enterprise documentation
Safari Mac Medium Limited PNG Designers, developers
Safari iOS Easy Save as PDF PDF Archiving and sharing
GoFullPage Easy Annotation, PDF PNG, PDF Non-technical users
Awesome Screenshot Easy Annotation, sharing PNG, PDF QA, content creators
ShareX Medium Advanced, automation PNG, GIF Developers & testers
Snagit Easy Editing, batch capture PNG, PDF Professional documentation

Best Practices for Screenshot Testing High-Quality

Taking a full-page screenshot isn’t just about pressing the right keys or using the correct tool. To make your captures useful, professional, and impactful, you need to follow certain best practices. These ensure your screenshots maintain clarity, relevance, and consistency across projects.

  • Use High Resolution
    Always capture screenshots in the original resolution of your screen or browser window. High-resolution images ensure that text remains sharp and design details are preserved, making your screenshot usable for bug reporting, design reviews, or documentation purposes without losing critical clarity.
  • Remove Clutter
    Before capturing a full-page screenshot, remove any distractions such as unnecessary browser tabs, app notifications, or background apps. Cleaner screenshots provide focus and avoid confusion, ensuring that reviewers or stakeholders only see relevant information. This also minimizes data leakage risks when sharing images externally.
  • Annotate Carefully

    Annotations are powerful for highlighting specific areas in your screenshot, but moderation is key. Use boxes, arrows, or callouts sparingly to emphasize important details while avoiding visual overload. A clutter-free annotated screenshot communicates your intent clearly, making it easier for teams to understand the issue at a glance.

  • Choose the Correct Format

    Different use cases demand different file formats. Opt for PNG when you need pixel-perfect quality for UI elements or design reviews. Use PDF when you’re archiving, creating tutorials, or handling multi-page documentation. The right format ensures compatibility, readability, and ease of sharing across devices and platforms.

  • Automate Where Possible
    When you need to take repetitive full-page screenshots, leverage automation tools like ShareX, Puppeteer, or Selenium. Automation not only saves time but also ensures consistency in output. This is especially useful in QA workflows, regression testing, or capturing bulk screenshots across multiple pages or environments.
  • Cross-Browser Testing
    Full-page screenshots can look different depending on the browser used. Always test and capture screenshots in multiple browsers—Chrome, Firefox, Safari, and Edge—to ensure visual consistency. This practice helps developers and testers identify rendering issues early and guarantees that the user experience remains seamless across platforms and devices.

Conclusion

Full-page screenshots are essential for developers, testers, QA engineers, and content creators. With built-in browser tools, mobile features, browser extensions, and advanced tools, you can capture complete web pages efficiently. Following best practices ensures high-quality, professional results that are ready for documentation, tutorials, or testing.

For technical users, combining automation scripts with extensions streamlines full-page capture across multiple pages and browsers. By mastering these techniques, you ensure your web documentation is complete, professional, and consistent, improving both workflow efficiency and presentation quality.

Frequently Asked Questions (FAQs)

Can I capture infinite scrolling pages?

Yes. Tools like Fireshot, ShareX, and automated scripts in Puppeteer or Selenium can capture infinite scrolling pages by dynamically loading and stitching content. This ensures that even continuously loading feeds or timelines are fully recorded.

Can I include the mouse pointer in screenshots?

Yes, many advanced screenshot tools allow you to capture the mouse pointer. Snagit and ShareX provide this option, which is particularly useful for creating training materials, tutorials, or product walkthroughs. Including the cursor visually guides viewers, making it easier for them to follow navigation steps, click actions, and interactions within the application or browser.

Are there free tools for full-page screenshots?

Absolutely. Free tools like GoFullPage (Chrome extension), Firefox’s built-in screenshot utility, and ShareX (for Windows) provide excellent full-page capture capabilities. They don’t require premium subscriptions and often include features like scrolling capture, annotation, or direct export. While free tools may lack some advanced editing options compared to paid ones, they are reliable for most testing, documentation, and design purposes.

Can I automate full-page screenshots for testing?

Yes, automation is one of the best ways to capture full-page screenshots at scale. Frameworks like Selenium and Puppeteer can be scripted to take screenshots across multiple devices, browsers, and environments, ensuring consistency in regression testing. Tools like ShareX also allow automation with hotkeys and scripting support. Automation reduces manual effort, speeds up QA cycles, and helps maintain documentation quality during continuous integration (CI/CD) processes.

Which format is best for sharing screenshots?

The choice of format depends on your use case. PNG is ideal when you need high-quality, pixel-perfect clarity for design reviews, bug reporting, or UI comparisons. JPEG may be used for web sharing when file size matters, though it sacrifices some quality. PDF is best suited for archiving entire web pages or sharing multi-page documents in a professional format. By choosing the right format, you balance clarity, compatibility, and file size.

Do full-page screenshots affect website performance?

Taking a screenshot itself does not affect the performance of a live website, as it only interacts with your local browser. However, system resources like CPU and RAM may be slightly impacted during capture, especially for pages that are very long or include heavy animations, infinite scrolling, or dynamic elements. In extreme cases, this could cause lag or increase memory usage temporarily, but it does not harm the website or alter its performance for other users.

How do I screenshot a full page on mobile devices?

On iOS devices, Safari provides a built-in option to capture full-page screenshots and save them as a PDF. On Android devices, many manufacturers include scrolling screenshot features directly in the OS, allowing you to capture extended pages without third-party tools. For more advanced use cases, apps like LongShot or Stitch & Share can help you capture and stitch longer web pages or conversations. This makes it easy to capture mobile layouts for QA testing or design validation.

Can I edit full-page screenshots after capturing?

Yes, most screenshot tools provide editing and annotation features. Applications like Snagit, Fireshot, and Photoshop allow you to crop sections, resize, highlight elements, blur sensitive data, and add text or arrows. This makes it easy to prepare professional, share-ready screenshots for reporting, client presentations, or tutorials. Editing also ensures clarity, helping teams focus only on the areas that matter in testing or debugging.

Are browser extensions safe for taking screenshots?

Many popular screenshot extensions like GoFullPage, Nimbus, and Fireshot are safe and widely used. However, you should always review extension permissions before installing. Some less reputable extensions may request unnecessary access to browsing history or data, which could be a privacy concern. Stick to trusted extensions from official stores, check user reviews, and update them regularly to ensure security and compatibility with your browser.

What’s the difference between full-page screenshots and viewport screenshots?

A viewport screenshot captures only the content currently visible in your browser window, essentially what you see without scrolling. A full-page screenshot, however, scrolls automatically and stitches together the entire webpage into a single image or file. This allows you to document complete web layouts, test responsive designs, or archive entire web pages, which is especially useful in web development, QA, and design workflows.

Author

Kavita Joshi is a Community Evangelist at LambdaTest, with over 6 years of experience in B2B SaaS marketing and content strategy. She specializes in creating in-depth, accessible content around test automation, covering tools and frameworks like Selenium, Cypress, Playwright, Nightwatch, WebdriverIO, and programming languages with Java and JavaScript. She has completed her masters in Journalism and Mass Communication. Kavita’s work also explores key topics like CSS, web automation, and cross-browser testing. Her deep domain knowledge and storytelling skills have earned her a place on LambdaTest’s Wall of Fame, recognizing her contributions to both marketing and the QA community.

Blogs: 7

linkedintwitter