Taking screenshots of webpages using Ruby

  • PhantomJS
  • Screencap gem
  • Webshot gem
  • Screencap and webshot are gems in Ruby that depends on a tool called PhantomJS. It is basically a web browser without a user interface, primarily used for testing websites. Such type of browsers are generally referred to as headless browsers,

    Screenshots with PhantomJS

    PhantomJS is quite easy to install and is multiplatform, available on major operating systems.
    gem install phantomjs
    To start, our script must require a reference to the webpage module then use it to create an instance:
    var instance = require('webpage').create();
    Use the instance.open() method and pass it the arguments, the url of the webpage that we want to capture screenshot.
    instance.open('http://redpanthers.co', function() {
    instance.render('screenshot-phantom.png');
    phantom.exit();
    });
    instance.render() method captures the screenshot and saves it to the file specified in the argument. Run the script as,
    phantomjs filename.js
    
    Screenshot is saved in the  directory where we run the script. Now what we have above is all JavaScript, but to use the phantom JS in our rails application we have gems that provide us with an easy interface to acheive the same.

    Screencap gem

    The gem ‘screencap’ is introduced in Ruby to make screenshot capture easy. However, the gem depends on  ‘PhantomJS’, so we need to have PhantomJS installed on machine to capture screenshots with screencap gem. But screencap does not work with PhantomJS 2.1.1, which is the latest version. So we need to install version 1.9.8
    gem install phantomjs -v 1.9.8
    check version
    phantomjs --version
    To install screencap gem in your application, add this line to gemfile
    gem 'screencap'
    Or install it as
    gem install screencap

    Usage

    To capture screenshot with screencap
    require 'screencap'
    screenshot = Screencap::Fetcher.new(<url>)
    image = screenshot.fetch
    • Fetcher class accepts url of the website to take screenshot.
    • Screenshot is taken when fetch method is called.
    • Also, fetch method supports various optional parameters to specify the area to capture the screenshot.
    • We can specify where to store the screenshot captured, as shown below.
    image = obj.fetch(
     output: '~/folder/file-name.png',
     # dimensions for taking screenshot of specific area
      width: 1024,
     height: 768
     )

    Example

    require 'screencap'
    screenshot = Screencap::Fetcher.new('http://redpanthers.co')
    image = screenshot.fetch(output: '~/screencap/screencap.png',
                                       width: 300,
                                      height: 500)
    Our screenshot is captured in screencap.png

    Webshot gem

    Webshot is another gem introduced in ruby to capture screenshots, also depends on PhantomJS. For better experience, use latest version of PhantomJS. Webshot works with latest version of PhantomJS while screencap gem does not. Install PhantomJS latest version. To install webshot in your application,
    gem 'webshot'
    Or install as
    gem install webshot

    Usage

    require 'webshot'
    screenshot = Webshot::Screenshot.instance
    screenshot.capture "https://github.com", "image.png", width: 1024, height: 800
    Provide url of the web page and file name where screenshot to be saved. Height and width can be given as optional parameters for taking screenshot with specified dimensions. Above code captures github’s home page in file image.png In all the above methods, we capture screenshots of a particular web page by passing its url. Also we can infer that screencap gem, even though efficiently takes screenshots, does not work for latest version of PhantomJS. This was an issue encountered while working with gem screencap as installing PhantomJS without specifying the version would install the latest version by default. So, choose gem webshot if you want to go ahead with the latest version of PhantomJS.

    References

    ]]>