How to Take Screenshots in a Browser

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.