Harnessing Google Chrome's Headless Mode for Website Screenshots

Yet Another Tool for QA

March 12, 2024 by cryan.com

As a seasoned Quality Assurance (QA) professional, I've witnessed the evolution of numerous tools that have streamlined our testing processes. Today, I'm excited to share insights on a powerful feature of Google Chrome that is often underutilized in QA testing: the headless mode.

What is Headless Mode?

Headless mode is a feature available in Google Chrome that allows you to run the browser without the user interface. This means you can perform all the usual browser tasks from the command line, which is incredibly useful for automated testing.

Why Use Headless Chrome for Screenshots?

Taking screenshots is a fundamental part of QA testing. They help us:

• Verify Layouts: Ensure that web pages render correctly across different browser sizes.
• Perform Image Comparisons: Detect any deviations from a base image, which could indicate unexpected changes or errors.

How to Take Screenshots with Headless Chrome

Using Google Chrome's headless mode to capture screenshots is straightforward. Here's a quick guide:

1. Open the Command Line: Access your command prompt or terminal.
2. Run Chrome in Headless Mode: Use the command google-chrome --headless --disable-gpu --screenshot --url=[your-website-url].
3. Specify the Output File: By default, Chrome saves the screenshot as screenshot.png in the current directory. You can specify a different path if needed.
4. Customize the Browser Size: Use the --window-size option to set the dimensions of the browser window, like so: --window-size=width,height.

Practical Example

Let's say we want to take a screenshot of example.com at a resolution of 1280x720 pixels. The command would be:

google-chrome --headless --disable-gpu --screenshot --window-size=1280,720 --url=http://www.example.com/

After running this command, you'll find screenshot.png in your current directory, capturing the website as it would appear in a 1280x720 window.

Another Example:

This example adds some timestamp to the filename:

cd ~/Desktop;
alias chrome="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome";
chrome --headless --timeout=5000 --screenshot="Prod-desktop.png_$(date +%Y-%m-%d_%H-%M-%S).png" --window-size=1315,4030 https://www.cryan.com/;

Conclusion

Headless Chrome is a versatile tool that can significantly enhance your QA testing capabilities. Whether you're conducting routine checks or setting up complex automated tests, the ability to capture screenshots from the command line is an invaluable asset.

Stay tuned for more QA insights and tips in our upcoming posts! Next week we'll cover using Opera browser for QA testing.