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

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)