casperjs

1. Ajay Dutta
CasperJS

2. What we’ll cover?
○ Installation
○ What’s CasperJS?
○ What’s PhantomJS?
○ Doing common task
○ Quick start
○ Module fill
○ Click
○ Evalute
○ Evalute Flow
○ Wait for Selection
○ Real life example

3. Installation
○ Prerequisites
○ PhantomJS
○ PhantomJS is a headless WebKit scriptable with a JavaScript API.
○ It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas,
and SVG.
○ http://phantomjs.org/download.html
○ CasperJS

4. CasperJS
○ CasperJS is an open source navigation scripting & testing
utility written in Javascript for the PhantomJS WebKit
headless browser or SlimerJS.
○ It eases the process of defining a full navigation scenario
and provides useful high-level functions, methods &
syntactic sugar

5. PhantomJS
○PhantomJS is a headless WebKit with a JavaScript API. It has fast
and native support for various web standards: DOM handling, CSS
selectors, JSON, Canvas and SVG.

6. Doing common tasks
○ such as:
○ defining & ordering browsing navigation steps
○ filling & submitting forms
○ clicking & following links
○ capturing screenshots of a page (or part of it)
○ testing remote DOM
○ logging events
○ downloading resources, including binary ones
○ writing functional test suites, saving results as JUnit XML
○ scraping Web contents

7. A minimal scraping script
○ What did we just do?
○ we created a new Casper instance
○ we started it and opened http://casperjs.org/
○ once the page has been loaded, we asked to print
the title of that webpage (the content of its <title>
tag)
○ then we opened another url, http://phantomjs.org/
○ once the new page has been loaded, we asked to
print its title too
○ we executed the whole process

8. start(), then(), run(), exit()
○ start()
○ Signature: start(String url [, Function then])
○ Configures and starts Casper, then open the provided url and optionally adds the step provided by the then argument
○ then()
○ Signature: then(Function then)
○ run()
○ Signature: run(fn onComplete[, int time])
○ Runs the whole suite of steps and optionally executes a callback when they’ve all been done. Obviously, calling this method is
mandatory in order to run the Casper navigation suite.
○ exit()
○ Signature: exit([int status])
○ Exits PhantomJS with an optional exit status code.
○ Note that the current Casper instance automatically binds the this keyword for you within step functions

9. casper module – fill
○ Signature: fill(String selector, Object values[, Boolean submit])
○ Fills the fields of a form with given values and optionally submits it.
○ Fields are referenced by their name attribute.

10. click
○ click(Number x, Number y)
○ click(String selector)
○ Performs a click on the first element found matching the provided selector expression
or at given coordinates if two numbers are passed
○ selector expression
○ CSS3 selector strings
○ Xpath expressions

11. evaluate
○ Signature: evaluate(Function fn[, arg1[, arg2[, …]]])
○ Evaluates an expression in the current page DOM context

12. Understanding evaluate()
○ Think of the evaluate() method as a gate between the CasperJS environment and the
one of the page you have opened;
○ Every time you pass a closure to evaluate(), you’re entering the page and execute
code as if you were using the browser console.

13. Asynchronous rendering of page

14. waitForSelector
○ Signature: waitForSelector(String selector[, Function then, Function onTimeout, Number
timeout])
○ Waits until an element matching the provided selector expression exists in remote DOM
to process any next step

15. Real Life Example
Let’s talk about real life example

16. references
○ http://docs.casperjs.org/en/latest/quickstart.html
○ http://docs.casperjs.org/en/latest/modules/index.html
○ http://docs.casperjs.org/en/latest/modules/casper.html#start
○ http://docs.casperjs.org/en/latest/modules/casper.html#then
○ http://docs.casperjs.org/en/latest/modules/casper.html#run
○ http://docs.casperjs.org/en/latest/modules/casper.html#exit
○ http://docs.casperjs.org/en/latest/modules/casper.html#fill
○ http://docs.casperjs.org/en/latest/selectors.html
○ http://docs.casperjs.org/en/latest/modules/mouse.html#click

17. Thank you