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

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?                        });                });        }); });
12. None

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