Le Web au doigt et à l'œil avec CasperJS

CasperJS est un outil permettant de scripter en Javascript un scénario de navigation sur un véritable navigateur Web, basé sur Webkit et ne nécessitant pas d’interface graphique. CasperJS peut servir à produire des tests fonctionnels poussés bénéficiant d’un environnement DOM et Javascript complet, mais aussi à analyser des documents Web, faire des tests de performance ou même extraire des données.

L’intérêt majeur de CasperJS est qu’il permet relativement simplement de tester et valider fonctionnellement des sites et applications Web complexes, reposant sur l’exploitation intensives de Javascript, de comportements asynchrones et d’AJAX par exemple.

Transcript

1. Le Web au doigt et à l’œil avec CasperJS
2. Au doigt et à l’œil on te dit. (OLD!)
3. PhantomJS • Navigateur headless • Basé sur Webkit • Pilotable en ligne de commande (brr) • API full Javascript (brr^2)
4. JAVASCRIPT
5. PhantomJS var  page  =  require('webpage').create(); page.open('http://google.fr/',  function(status)  {        if  (status  !==  "success")  {                console.error('loading  failed');                phantom.exit();        }        console.log(page.evaluate(function()  {                return  document.title;        }));        phantom.exit(); });
6. PhantomJS $  phantomjs  phantom-­‐simple.js   Google
7. PhantomJS var  page  =  require('webpage').create(); page.open('http://sudweb.fr/2012/schedule/conferences/',  function(status)  {        if  (status  !==  "success")  {                console.error('loading  failed');                phantom.exit();        }        var  sessions  =  page.evaluate(function()  {                var  sessions  =  document.querySelectorAll('.schedule-­‐item');                return  Array.prototype.map.call(sessions,  function(node)  {                        return  {                                title:  node.querySelector('a').innerText.trim(),                                schedule:  node.querySelector('.schedule-­‐item-­‐timeframe')                                        .innerText.trim()                        };                });        });        console.log(JSON.stringify(sessions,  null,  4));        phantom.exit(); });
8. PhantomJS $  phantomjs  phantomjs-­‐sudweb.js [        {                "schedule":  "09h30",                "title":  "Mais  un  lead  dev,  c’est  quoi  ?"        },        {                "schedule":  "10h00",                "title":  "L’Open  Web  en  tant  que  pierre  angulaire  du  développement  multi-­‐objets"        },        //  ...  skipped        {                "schedule":  "16h40",                "title":  "CSS3  with  a  safety  net"        },        {                "schedule":  "17h10",                "title":  "Intégrateur,  lève-­‐toi  et  conçois  !"        },        {                "schedule":  "17h40",                "title":  "L’altruisme  pour  votre  bénéfice"        },        {                "schedule":  "18h15",                "title":  "Questions  à  l’ombre"        } ]
9. Oui, bon, mais • Comment on clique ? • Comment on interagit avec la page ? • Comment on enchaîne ces interactions ? • Comment on vérifie des trucs ? • D’où vient le vent ?
10. Pyramides de l’Enfer™
11. Pyramides de l’Enfer™ var  page  =  require('webpage').create(); page.open(url1,  function(status)  {        if  (status  ==  "fail")  phantom.exit();        page.open(url2,  function(status)  {                if  (status  ==  "fail")  phantom.exit();                page.open(url3,  function(status)  {                        if  (status  ==  "fail")  phantom.exit();                        page.open(url4,  function(status)  {                                if  (status  ==  "fail")  phantom.exit();                                //  Can  I  stop,  now?                        });                });        }); });
13. CasperJS • CasperJS est basé sur PhantomJS • Rajoute une API haut niveau par dessus : • simplifiant la gestion de l’asynchronicité (hou le vilain mot) • fournit des méthodes pour interagir avec la page • facilitant la création de scénarios de navigation • permet la création de tests fonctionnels
14. Asynchronicité var  casper  =  require('casper').create(); casper.on('load.finished',  function(status)  {        if  (status  ===  "fail")  {                this.echo("failed  to  load  page").exit();        } }); casper.start(url1); casper.thenOpen(url2); casper.thenOpen(url3); casper.thenOpen(url4); casper.run();
15. Click var  casper  =  require('casper').create() ,  startUrl  =  'http://sudweb.fr/2012/schedule/conferences/'; casper.start(startUrl,  function(status)  {        this.echo(this.getCurrentUrl());        this.click('h2  a[href*=casperjs]'); }); casper.then(function()  {        this.echo(this.getCurrentUrl()); }); casper.run(); $  casperjs  click.js   http://sudweb.fr/2012/schedule/conferences/ http://sudweb.fr/2012/talk/le-­‐web-­‐au-­‐doigt-­‐et-­‐a-­‐loeil-­‐avec-­‐ casperjs/
16. Tests casper.start('http://sudweb.fr/2012/',  function(status)  {        this.test.assertHttpStatus(200,  'Site  looks  to  be  up');        this.test.assertMatch(this.getTitle(),  /Toulouse/,                  'Event  is  located  in  Toulouse'); }); casper.thenClick('#menu-­‐item-­‐47  a',  function()  {        this.test.assertTitle('Programme  —  Sud  Web',                  'Link  to  schedule  is  ok');        this.test.assertEvalEquals(function()  {                return  __utils__.findAll('.schedule-­‐item').length;        },  3,  '3  main  events  are  listed'); }); casper.run(function()  {        this.test.done(); });
17. Tests On peut même exporter les résultats des tests au format XUnit —> intégration continue
18. Documentation
19. Limitations • Webkit only - CasperJS ne remplace donc pas Selenium • Pas d’interface graphique • Nécessité de s’abstraire du visuel pour concevoir ses scripts • Vos meilleurs alliés : Firebug, consoles et autres inspecteurs Gadget Web • CasperJS propose un Bookmarklet
20. Easter eggs • Rapide ! • CasperJS vous (ré)apprend Javascript • CasperJS vous (ré)apprend le DOM • CasperJS vous (ré)apprend le Web • … et souvent à mieux connaître votre propre site
21. casperjs.org