Full page screenshot with selenium


634
634 points
full page screenshot
full page screenshot

Full page screenshot with selenium

I wrote an article how to take a screenshot in capybara when you tests fail but if you are running the tests using chrome driver will not take a full page screenshot.

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

window = Capybara.current_session.driver.browser.manage.window
window.resize_to(width+100, height+100)

img = page.driver.browser.screenshot_as(:png)

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

It is not mandatory to have a full page screenshot but when you have a really long list of data and your test fail because of a record from the bottom of the page then if you don’t have the full page screenshot it doesn’t help you at all with the debugging process.

For those if you with native selenium bindings you can check this out :

#!/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

For Java users there is a really awesome library from yandex that brings some cool features :

WebDriver Screenshot utility

  • Takes a screenshot of the WebElement on different platforms (i.e. desktop browsers, iOS Simulator Mobile Safari, Android Emulator Browser)
  • Decorates screenshots
  • Provides flexible screenshot comparison

The library is called ashot and you can find it here .

Happy testing!

 


Like it? Share with your friends!

634
634 points
Test engineer

0 Comments

Your email address will not be published. Required fields are marked *

four × 1 =