Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PhantomJS for Web Page Automation

PhantomJS for Web Page Automation

Presented at Selenium San Jose meetup:
http://www.meetup.com/SeleniumSanJose/events/154836972/.

PhantomJS, the scriptable headless WebKit-based automation tool, has gained a lot of traction in its first 3 years. It is a popular choice for continuous integration, whether to run basic tests or to catch rendering regressions. Many JavaScript test frameworks work well with PhantomJS and even Selenium-based tests can be integrated thanks to the support for WebDriver via Ghost Driver. In addition, because PhantomJS permits the inspection of network traffic, it is suitable to run various analysis on the network behavior and performance. This talk will highlight the basic usages of PhantomJS and explore various PhantomJS-tools for the purpose of headless testing of web applications, screen capture, and network monitoring.

Ariya Hidayat

January 08, 2014
Tweet

More Decks by Ariya Hidayat

Other Decks in Programming

Transcript

  1. Get Page Title var page = require('webpage').create(); page.open('http://linkedin.com', function (status)

    { if (status !== 'success') { console.log('FAIL to load the address'); } else { var title = page.evaluate(function () { return document.title; }); console.log('Page title is', title); } phantom.exit(); });
  2. Use jQuery (or Other Libs) var page = require('webpage').create(); page.open('http://www.sample.com',

    function() { page.includeJs("http://code.jquery.com/jquery-1.10.2.js", function() { page.evaluate(function() { $("button").click(); }); phantom.exit() }); });
  3. Ghost Driver https://speakerdeck.com/detronizator/boston Ghost Driver is a pure JavaScript implementation

    of the WebDriver Wire Protocol for PhantomJS. It's a Remote WebDriver that uses PhantomJS as back-end. https://github.com/detro/ghostdriver
  4. Ruby Example require "selenium-webdriver" driver = Selenium::WebDriver.for(:remote, :url => "http://localhost:9134")

    driver.navigate.to "http://google.com" element = driver.find_element(:name, 'q') element.send_keys "PhantomJS" element.submit puts driver.title driver.quit gem install selenium-webdriver
  5. Node.js JavaScript Example var wd = require('wd'); var driver =

    wd.remote('localhost', 9134); driver.init(function() { driver.get("http://casperjs.org", function() { driver.title(function(err, title) { console.log(title); }); }); }); npm install wd
  6. Using CasperJS var casper = require('casper').create(); casper.start('http://duckduckgo.com', function() { this.echo(this.getTitle());

    }); casper.then(function() { this.fill('form', { q: 'Selenium San Jose' }, true); }); casper.then(function() { var snippet = this.evaluate(function() { return document.querySelector('div#links > div').textContent; }); this.echo(snippet); }); casper.run();
  7. Pre-commit Hook http://ariya.ofilabs.com/2012/03/git-pre-commit-hook-and-smoke-testing.html if [ `date +%w` -eq 6 ];

    then echo "Enjoy your life. Do not work on Sunday!" exit 1 fi exit 0 make test
  8. HTML-to-Anything var page = require('webpage').create(); page.open(title, function (status) { if

    (status !== 'success') { console.log('FAIL to load the address'); } else { page.render(filename); } phantom.exit(); }); Outputs: external file, base64 string Formats: PNG, JPEG, GIF, PDF
  9. Rendering Aspects Zoom Factor Scale the page up and down

    Viewport Size Simulates different window dimensions Clipping Rectangle Crop portions of the page
  10. Resources Blocking page.onResourceRequested = function(requestData, request) { if ((/http:\/\/.+?\.css$/gi).test(requestData['url'])) {

    console.log('Skipping', requestData['url']); request.abort(); } }; Skipping http://static.bbci.co.uk/frameworks/barlesque/2.45.9/mobile/3.5/style/main.css Skipping http://static.bbci.co.uk/bbcdotcom/0.3.184/style/mobile/bbccom.css Skipping http://static.bbci.co.uk/news/1.7.1-259/stylesheets/core.css Skipping http://static.bbci.co.uk/news/1.7.1-259/stylesheets/compact.css
  11. Requests + Responses Capture var page = require('webpage').create(); page.onResourceRequested =

    function(request) { console.log('Request ' + JSON.stringify(request, undefined, 4)); }; page.onResourceReceived = function(response) { console.log('Receive ' + JSON.stringify(response, undefined, 4)); }; page.open(url);