How to take full-page screenshots with Selenium and Google Chrome in Ruby

full-page-screenshots-selenium-chrome.rb

#!/usr/bin/env ruby

require 'selenium-webdriver'

wd = Selenium::WebDriver.for :remote, url: 'http://10.3.1.7:4444/wd/hub', desired_capabilities: :chrome
wd.navigate.to 'https://snipt.net/restrada/python-selenium-workaround-for-full-page-screenshot-using-chromedriver-2x/'

# Get the actual page dimensions using javascript
#
width  = wd.execute_script("return Math.max(document.body.scrollWidth, document.body.offsetWidth, document.documentElement.clientWidth, document.documentElement.scrollWidth, document.documentElement.offsetWidth);")
height = wd.execute_script("return Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);")

# Add some pixels on top of the calculated dimensions for good
# measure to make the scroll bars disappear
#
wd.manage.window.resize_to(width+100, height+100)

img = wd.screenshot_as(:png)

File.open('full-page.png', 'w+') do |fh|
  fh.write img
end

wd.quit

Works like a charm! 👍

Neat hack, thanks! Unfortunately, I couldn't get Chrome to resize beyond the screen's dimensions on Mac OS X. An approach like https://github.com/yandex-qatools/ashot/ might work for others with my issue.

For this you can use the gem gastly.

Nice snippet :) unfortunately this will fail for pages with frames or elements that behave like frames.

Thank you very much!!!

Good job! Thanks!

Good job! Thank you very much!

Unfortunately, I can't create screenshot of really big pages this way.
For example, I have a page with width ~1000px height ~8000px, but I got an exception if I set such browser height.

WebDriverError: unknown error: session deleted because of page crash
from unknown error: cannot determine loading status
from tab crashed
  (Session info: chrome=58.0.3029.81)
  (Driver info: chromedriver=2.29.461571 (8a88bbe0775e2a23afda0ceaf2ef7ee74e822cc5),platform=Linux 4.4.73-18.17-default x86_64) (WARNING: The server did not provide any stacktrace information)
Command duration or timeout: 1.13 seconds
Build info: version: '3.4.0', revision: 'unknown', time: 'unknown'
System info: host: '*****', ip: '*****', os.name: 'Linux', os.arch: 'amd64', os.version: '4.4.73-18.17-default', java.version: '1.8.0_121'
Driver info: org.openqa.selenium.chrome.ChromeDriver
Capabilities [{applicationCacheEnabled=false, rotatable=false, mobileEmulationEnabled=false, networkConnectionEnabled=false, 
        chrome={chromedriverVersion=2.29.461571 (8a88bbe0775e2a23afda0ceaf2ef7ee74e822cc5), 
        userDataDir=/tmp/.org.chromium.Chromium.g3Abe6}, takesHeapSnapshot=true, pageLoadStrategy=normal, 
        databaseEnabled=false, handlesAlerts=true, hasTouchScreen=false, version=58.0.3029.81, platform=LINUX, 
        browserConnectionEnabled=false, nativeEvents=true, acceptSslCerts=true, locationContextEnabled=true, 
        webStorageEnabled=true, browserName=chrome, takesScreenshot=true, javascriptEnabled=true, 
        cssSelectorsEnabled=true, unexpectedAlertBehaviour=}]
Session ID: *******

Thanks for sharing, very helpful! There are many user feedback widget available on the market, if you are interested in the widget which does not slow down your website speed then I suggest you BugRem.com, you should definitely check it out.

Thank you! I have just run into the same problem as Aeliot-Tm: it seems like ChromeDriver fails whenever the page is too large (this is especially noticeable for news site homepages such as washingtonpost.com). Has anyone figured out a way to fix this?

For anyone using watir, you can tack on my gem watir-screenshot-stitch to take full page screenshots using html2canvas https://github.com/samnissen/watir-screenshot-stitch

These lines

img = wd.screenshot_as(:png)

File.open('full-page.png', 'w+') do |fh|
  fh.write img
end

can be replaced with one single line

  wd.save_screenshot('full-page.png')

It doesn't for me. I still get only visible screen's screenshot.

Great Job.it worked for me but after resize() method,you should use maximize() method,because browser's size and location changed

It doesn't for me. I still get only visible screen's screenshot.

unfortunately same for me too

It doesn't for me. I still get only visible screen's screenshot.

unfortunately same for me too

same =(

Hi it will change the browser window size every time which is not good for screenshot many times

The calculation seems to work only in headless mode for me, otherwise it seems like it takes the maximal resolution of the screen displaying the tests.

It worked for me on headless mode, but I had to call:

wd.save_screenshot(Rails.root.join("path","filename.png"))

instead of:

img = wd.screenshot_as(:png)

File.open('full-page.png', 'w+') do |fh|
  fh.write img
end

Otherwise, I got encoding issues.

This code worked for chrome:

options = Selenium::WebDriver::Options.chrome(args: ['--headless=new'])
driver = Selenium::WebDriver.for(:chrome, options: options)

driver.navigate.to url..

driver.manage.window.maximize
width  = driver.execute_script("return Math.max(document.body.scrollWidth, document.body.offsetWidth, document.documentElement.clientWidth, document.documentElement.scrollWidth, document.documentElement.offsetWidth);")
height = driver.execute_script("return Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);")
driver.manage.window.resize_to([width, 1500].min, [height, 3000].min) #Restrict to maximum of 1500 x 3000

driver.save_screenshot('full-page.png', full_page: false)

Otherwise, I got encoding issues.

Ah, the sucky "D"X in lower (?) level libs strikes again: you're getting encoding issues for trying to write bytes without opening the file in binary mode

Try File.open('full-page.png', 'wb') do ...