SlideShare a Scribd company logo
CasperJS
Howard 2013/12/22
CasperJS

CasperJS is an open source navigation scripting & testing
utility written in Javascript for the PhantomJS WebKit
headless browser and SlimerJS (Gecko).
It eases the process of defining a full navigation scenario
and provides useful high-level functions, methods &
syntactic sugar
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
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
目標

 列舉出目前 IPTECH TW
的目前可檢索的站台
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
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
start(), then(), run(), exit()
start(), then(), run(), exit()

?
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.
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
evaluate
 Signature: evaluate(Function fn[, arg1[, arg2[, …]]])
 Evaluates an expression in the current page DOM context
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.
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
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

More Related Content

PDF
CasperJs Enjoy Functional Testing
PDF
Superfast Automated Web Testing with CasperJS & PhantomJS
PDF
Testing MeteorJS using CasperJS
PDF
Site Testing with CasperJS
PDF
CasperJS and PhantomJS for Automated Testing
PPTX
casperjs presentation
PDF
Beautiful code instead of callback hell using ES6 Generators, Koa, Bluebird (...
KEY
Server side scripting smack down - Node.js vs PHP
CasperJs Enjoy Functional Testing
Superfast Automated Web Testing with CasperJS & PhantomJS
Testing MeteorJS using CasperJS
Site Testing with CasperJS
CasperJS and PhantomJS for Automated Testing
casperjs presentation
Beautiful code instead of callback hell using ES6 Generators, Koa, Bluebird (...
Server side scripting smack down - Node.js vs PHP

What's hot (20)

PPTX
Игорь Фесенко "Web Apps Performance & JavaScript Compilers"
PDF
Continuous Integration for front-end JavaScript
PDF
System webpack-jspm
PDF
Javascript Test Automation Workshop (21.08.2014)
PDF
ServiceWorker: New game changer is coming!
PDF
Роман Лютиков "Web Apps Performance & JavaScript Compilers"
PDF
Running JavaScript Efficiently in a Java World
PDF
NodeJS: n00b no more
PDF
Vagrant plugin development intro
PDF
PDF
Module, AMD, RequireJS
PPT
Nodejs Intro Part One
ODP
Nodejs Intro - Part2 Introduction to Web Applications
PPTX
Javascript asynchronous
PPTX
ECMAScript 6 and the Node Driver
PDF
Node4J: Running Node.js in a JavaWorld
KEY
Like a Genie from a Lamp: Headless JavaScript Unit Testing with Jasmine and P...
PPTX
Nodejs intro
PDF
Ansible 202 - sysarmy
Игорь Фесенко "Web Apps Performance & JavaScript Compilers"
Continuous Integration for front-end JavaScript
System webpack-jspm
Javascript Test Automation Workshop (21.08.2014)
ServiceWorker: New game changer is coming!
Роман Лютиков "Web Apps Performance & JavaScript Compilers"
Running JavaScript Efficiently in a Java World
NodeJS: n00b no more
Vagrant plugin development intro
Module, AMD, RequireJS
Nodejs Intro Part One
Nodejs Intro - Part2 Introduction to Web Applications
Javascript asynchronous
ECMAScript 6 and the Node Driver
Node4J: Running Node.js in a JavaWorld
Like a Genie from a Lamp: Headless JavaScript Unit Testing with Jasmine and P...
Nodejs intro
Ansible 202 - sysarmy
Ad

Viewers also liked (7)

PDF
Acceptance Testing - Automatisierte Web App Tests mit CasperJS
PDF
JAVASCRIPT Test Driven Development & Jasmine
PDF
Intro to testing Javascript with jasmine
PDF
JavaScript Test-Driven Development with Jasmine 2.0 and Karma
PDF
Advanced Jasmine - Front-End JavaScript Unit Testing
ODP
Symfony Best Practices
PDF
CasperJS
Acceptance Testing - Automatisierte Web App Tests mit CasperJS
JAVASCRIPT Test Driven Development & Jasmine
Intro to testing Javascript with jasmine
JavaScript Test-Driven Development with Jasmine 2.0 and Karma
Advanced Jasmine - Front-End JavaScript Unit Testing
Symfony Best Practices
CasperJS
Ad

More from LearningTech (20)

PPTX
PPTX
PostCss
PPTX
ReactJs
PPTX
Docker
PPTX
Semantic ui
PPTX
node.js errors
PPTX
Process control nodejs
PPTX
Expression tree
PPTX
SQL 效能調校
PPTX
flexbox report
PPTX
Vic weekly learning_20160504
PPTX
Reflection &amp; activator
PPTX
Peggy markdown
PPTX
Node child process
PPTX
20160415ken.lee
PPTX
Peggy elasticsearch應用
PPTX
Expression tree
PPTX
Vic weekly learning_20160325
PPTX
D3js learning tips
PPTX
git command
PostCss
ReactJs
Docker
Semantic ui
node.js errors
Process control nodejs
Expression tree
SQL 效能調校
flexbox report
Vic weekly learning_20160504
Reflection &amp; activator
Peggy markdown
Node child process
20160415ken.lee
Peggy elasticsearch應用
Expression tree
Vic weekly learning_20160325
D3js learning tips
git command

CasperJS

  • 2. CasperJS CasperJS is an open source navigation scripting & testing utility written in Javascript for the PhantomJS WebKit headless browser and SlimerJS (Gecko). It eases the process of defining a full navigation scenario and provides useful high-level functions, methods & syntactic sugar
  • 3. 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
  • 4. 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
  • 5. 目標  列舉出目前 IPTECH TW 的目前可檢索的站台
  • 6. 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
  • 7. 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
  • 10. 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.
  • 11. 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
  • 12. evaluate  Signature: evaluate(Function fn[, arg1[, arg2[, …]]])  Evaluates an expression in the current page DOM context
  • 13. 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.
  • 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. 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