Skip to main content
blog title image

2 minute read - Testing Web Testing Dev Tools

How to Take Screenshots in a Browser

Oct 24, 2018

TLDR; All major browsers allow taking screenshots within them. Firefox currently wins with its range of options.

Do you still need a screenshot tool when testing web? Can’t browsers help us do that already? Well yes they can. Chrome. Firefox. Safari. Edge. All offer some sort of screenshot functionality.

Let’s have a look at the features in four main browsers for screenshots.

Screenshots are clearly important for testing to gather evidence of problems and coverage.

I’ve used, and still use screenshot tools - Snagit, Voila, Windows Snipping Tool, and my current favourite CloudApp. But for simple screenshots, testing in a browser, how far can I go with just the browser as my tool?

  • edge
    • select the pencil, then clip section of screen, will also scroll, saves to clipboard
  • chrome - Toggle Device Toolbar - responsive - capture screenshots
  • safari - right click in dom view and select element to take screenshot of that element, honours resize of the browser width
  • firefox
    • right click screenshot - save to cloud or disk or clipboard
    • inspect element - screenshot node - downloads

Another big win for Firefox here but all browsers support us in taking screenshots from within a browser.

I’ll still use other tools, but having the capability in the browser will save time for routine tasks and in browser captures will probably be my preferred choice for specific element captures. And this is great for documentation.