Selenium 4 and chrome driver, take full page screenshots

#python #selenium #devtools

I spent some time playing with Selenium 4 trying to get a full page screenshot, this is what I found.

We will use the devtools protocol of Chrome Driver
this is done by driver.execute_cdp_cmd(command, parameters)
The command is Page.captureScreenshot
Parameters are documented here
the tricky param is clip

# I am assuming we already have a driver object.

# We need the dimensions of the content
page_rect = driver.execute_cdp_cmd('Page.getLayoutMetrics', {})

# parameters needed for ful page screenshot
# note we are setting the width and height of the viewport to screenshot, same as the site's content size
screenshot_config = {'captureBeyondViewport': True,
                             'fromSurface': True,
                             'clip': {'width': page_rect['contentSize']['width'],
                                      'height': page_rect['contentSize']['height'],
                                      'x': 0,
                                      'y': 0,
                                      'scale': 1},
                             }
# Dictionary with 1 key: data
base_64_png = driver.execute_cdp_cmd('Page.captureScreenshot', screenshot_config)

# Write img to file
with open("imageToSave.png", "wb") as fh:
    fh.write(base64.urlsafe_b64decode(base_64_png['data'))

Why am I writing this?

There is no good documentation related to the DevTools protocol and its integration to selenium is still in the works in Selenium 4 at the time I wrote this.

I Hope this helps any lost soul.

Top comments (3)

Mohamad • Jan 18

On latest release of the Selenium version 4.16 you need to configure the headless mode differently. as:

options.add_argument("--headless=new")

I have left the full code for taking full-size screenshots on my GitHub page here:

GitHub

johnhaire89 • May 11 '22 • Edited

This did help a lost soul! Please post it to stackoverflow!
There's a missing bracket on the last line - it should read base_64_png['data']

Also, the screenshot I captured had extra whitespace at the bottom, but I should be able to troubleshoot that.
UPDATE: The reference docs you linked show that contentSize has been deprecated since you wrote this. I got a better result by using page_rect['cssContentSize'] as advised in the docs.