DEV Community

Edmundo Sanchez
Edmundo Sanchez

Posted on • Edited on

5 3

Selenium 4 and chrome driver, take full page screenshots

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

  1. We will use the devtools protocol of Chrome Driver
  2. this is done by driver.execute_cdp_cmd(command, parameters)
  3. The command is Page.captureScreenshot
  4. Parameters are documented here
  5. 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')])

Enter fullscreen mode Exit fullscreen mode

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.

Image of AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

Top comments (3)

Collapse
 
erfan_fcz profile image
Mohamad

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

Collapse
 
jh89 profile image
johnhaire89 • 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.

Collapse
 
shakedbogin profile image
Shaked Bogin

This code didn't work for me...
But eventually this helped:
driver.execute_script("document.body.style.zoom='80%'")

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay