1. CasperJS
Découverte et
possibilités
Kevin Lion - http://www.inmediaveritas.com

2. Tests d’intégration, scraping
● Comment tester un site web facilement ?
○ Vérifier ces fonctionnalités ?
○ Vérifier un scénario de navigation ?
● Comment scraper du contenu sur des
sites full-javascript ?

3. Présentation
●
●
●
●
Basé sur PhantomJS
Navigateur HeadLess
API Javascript
Open Source

4. Un navigateur Headless ?
Que fait un navigateur ?
● Il télécharge une page HTML
● Il transforme ce contenu en DOM (exécute
le JS, CSS, etc.)
● Il affiche ce résultat au client

5. Un navigateur Headless ?
Que fait un navigateur ?
● Il télécharge une page HTML -> Lynx !
● Il transforme ce contenu en DOM (exécute
le JS, CSS, etc.)
● Il affiche ce résultat au client

6. Un navigateur Headless ?
Que fait un navigateur ?
● Il télécharge une page HTML
● Il transforme ce contenu en DOM (exécute
le JS, CSS, etc.)
● Il affiche ce résultat au client -> Chrome

7. Un navigateur Headless ?
Que fait un navigateur ?
● Il télécharge une page HTML
● Il transforme ce contenu en DOM (exécute
le JS, CSS, etc.) -> Navigateur Headless !
● Il affiche ce résultat au client

8. CasperJS : exemple simple
var casper = require("casper").create();
casper.start('http://lacantine-toulouse.org/');
casper.then(function() {
this.echo('Title : ' + this.getTitle());
});
casper.run();

9. CasperJS : exemple de tests
var casper = require("casper").create();
casper.start('http://lacantine-toulouse.org/', function() {
this.test.assertTitle('La Cantine Toulouse', 'page title is correct');
});
casper.then(function() {
this.fill('form[method="post"]', {
input_login: 'admin',
input_password: 'dragon',
}, true);
});
casper.then(function() {
test.assertTextExists('Vous êtes bien connecté sur le site de La Cantine. Have fun !', 'you are connected');
});
casper.run();

10. CasperJS : exemple de scraper
var casper = require('casper').create();
casper.start('http://www.lemonde.fr/');
casper.then(function() {
this.click('article.titre_une a');
});
casper.then(function() {
this.echo(this.getHTML('div.articleBody'));
};
casper.run();

11. Autres fonctionnalités
● Gestion de son identité :
○ Fake UA, Proxy, résolution de l’écran, etc.
● Sélécteurs CSS ou XPath
● Insertion de librairies Javascript (jQuery...)
● Capture d’écran

12. Questions ?

13. kevin.lion@inmediaveritas.com
http://www.inmediaveritas.com
@inmediaveritas