Wednesday, January 16, 2013

Screen Capture using PhantomJS, GhostDriver, Selenium Hub

This document takes notes about setting up PhantomJS headless browser with Ghost Driver and Selenium grid Server. Many thanks to phantomjs and gostdriver team, I am using their tutorial to build this example.

PhantomJS is a headless webkit engine that is capable of executing the test scripts in headless mode. Ghost driver implements remote wire protocol and enhances PhantomJS to be used with selenium and remote web driver. This is an excellent open source product, has good community activity and found it to be robust in my initial tests. I researched extensively on google to find a tools that can take a screen capture of a web page in headless mode and finally narrowed upon this tool.

The setup steps are explained as below:

  • Setup Selenium remote server
    1. Download selenium standalone jar from http://code.google.com/p/selenium/downloads/list
    2. Run selenium grid using the below command
      java -jar selenium-server-standalone-2.28.0.jar -role hub -timeout=20 -browserTimeout=25
  • Setup Phantomjs ghost driver
  1. Download phantomjs for the appropriate platform from the url http://phantomjs.org/download.html
  2. Extract phantomjs zip file in to a specific folder
  3. Cd to the extracted folder/bin directory
  4. Run phantom js using the below command, note multiple instances of phantomjs can be run tied to different ports
sudo ./phantomjs --webdriver=9192 --max-disk-cache-size=10240 --disk-cache=true --webdriver-selenium-grid-hub=http://127.0.0.1:4444
sudo ./phantomjs --webdriver=9191 --max-disk-cache-size=10240 --disk-cache=true --webdriver-selenium-grid-hub=http://127.0.0.1:4444

Sample Client to access the hub and take screen capture

public class SeleniumScreenCapture {
    public static String[] links = {
            "www.google.com"    };



    public static void main(String args[]) throws Exception {
        /**
         * run the server using the below command
         * java -jar selenium-server-standalone-2.28.0.jar -port 9080 -Dwebdriver.chrome.driver=E:/config/chromedriver.exe
         */
        SeleniumScreenCapture scc = new SeleniumScreenCapture();
        scc.testGhostDriver();
    }

    public void testGhostDriver() throws Exception {

        DesiredCapabilities desiredCapabilities = new DesiredCapabilities();
        desiredCapabilities.setJavascriptEnabled(true);
        desiredCapabilities.setCapability("takesScreenshot", true);

//        desiredCapabilities.setCapability(PhantomJSDriverService.P, new String[] {
//                "--web-security=false",
//                "--ssl-protocol=any",
//                "--ignore-ssl-errors=true"
//        });

        String link = "www.google.com";


        int count = 1;
        //for (String link : links) {
WebDriver driver = new RemoteWebDriver(new URL("http://192.168.73.132:4444/wd/hub"), desiredCapabilities);
        long iStart = System.currentTimeMillis();
        driver.get(link);
        //File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
        driver = new Augmenter().augment(driver);
        File srcFile = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
        System.out.println("File:" + srcFile);
        FileUtils.copyFile(srcFile, new File("c:\\tmp\\screenshot_" + count++ + ".png"));
        System.out.println("Single Page Time:" + (System.currentTimeMillis() - iStart));
        driver.quit();
        //}


    }

}

References: 

Ghost Driver Home Page
https://github.com/detro/ghostdriver

Additional links:





 Phantom JS options
https://github.com/ariya/phantomjs/wiki/API-Reference

Tips about using selenium Grid
http://code.google.com/p/robotframework-seleniumlibrary/wiki/UseSeleniumGRIDwithRobotFramework

Tip about setting a zoom factor
http://ariya.ofilabs.com/2012/10/web-page-screenshot-with-phantomjs.html