Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Tests and automation with PhantomJS and CasperJS

Tests and automation with PhantomJS and CasperJS

Henrique Vicente

August 14, 2013
Tweet

More Decks by Henrique Vicente

Other Decks in Programming

Transcript

  1. Tests and automation with
    PhantomJS and CasperJS
    Henrique Vicente
    https://github.com/henvic/phantom-casper-simple-talk
    https://speakerdeck.com/henvic/testes-e-automacao-com-phantomjs-e-casperjs
    2nd-open-meeting-pernambucojs
    Saturday, August 24, 13

    View full-size slide

  2. phantomjs.org
    casperjs.org
    Easy install
    * CasperJS’ website recommends the 1.1-beta, instead of the 1.0 stable version
    Saturday, August 24, 13

    View full-size slide

  3. faster running integration tests
    web scraping
    automation (i.e., mass data insertions)
    remote rendering (e.g., make PDFs out of HTML + CSS
    templates to send by email)
    Saturday, August 24, 13

    View full-size slide

  4. A WebKit based web stack with a JavaScript API
    WebKit + Qt, not Node.JS
    headless
    Remote debugging
    GhostDriver: web driver for Selenium
    Saturday, August 24, 13

    View full-size slide

  5. page.evaluate() magic
    Saturday, August 24, 13

    View full-size slide

  6. page.evaluate() magic
    Executed code on the page (sandboxed)
    Like in: “a console.log(“foo”) inside evaluate() happens
    inside the page context, not like a console.log(“foo”)
    outside it”
    Saturday, August 24, 13

    View full-size slide

  7. Saturday, August 24, 13

    View full-size slide

  8. PhantomJS API
    phantom object
    Several modules
    1. webpage
    2. system
    3. fs
    4. webserver
    5. child_process
    Your own modules
    Saturday, August 24, 13

    View full-size slide

  9. phantom (global)
    .cookies
    .addCookie
    .deleteCookie
    .exit
    .injectJS
    ...
    Saturday, August 24, 13

    View full-size slide

  10. The WebPage module
    Funções
    Propriedades
    Callbacks
    Triggers para callbacks
    Saturday, August 24, 13

    View full-size slide

  11. The System module
    Propriedades:
    pid
    platform
    os
    env
    args
    parâmetros como em
    git --commit “foo”
    Saturday, August 24, 13

    View full-size slide

  12. The FileSystem module
    Properties
    separator {String}
    workingDirectory {String}
    Stream object
    returned by fs.open
    Functions
    Saturday, August 24, 13

    View full-size slide

  13. WebServer, child_process...
    WebServer
    Create a web
    server
    child_process
    Allows invoking of
    subprocesses and
    communicates
    with stdin /
    stdout / stderr
    Saturday, August 24, 13

    View full-size slide

  14. Remote debugging
    Go to http://localhost:9000/ on a WebKit-based
    browser
    --remote-debugger-autorun=yes or __run() on the
    browser
    Saturday, August 24, 13

    View full-size slide

  15. Saturday, August 24, 13

    View full-size slide

  16. Testing framework developed with JS
    Works on top of PhantomJS,
    and now also on top of SlimerJS
    (which is similar to PhantomJS, but
    Gecko based)
    Has its own modules, like PhantomJS
    (and some just like it)
    Saturday, August 24, 13

    View full-size slide

  17. Functional testing with
    CasperJS
    Verify if your WordPress install has the following things
    working out correctly:
    - login
    - loading the new post form from a button
    - form rich editor is opening
    - creating a post
    - etc
    Saturday, August 24, 13

    View full-size slide

  18. Functional testing with
    CasperJS
    Saturday, August 24, 13

    View full-size slide

  19. End
    Tests and automation with
    PhantomJS and CasperJS
    Henrique Vicente
    https://github.com/henvic/phantom-casper-simple-talk
    https://speakerdeck.com/henvic/testes-e-automacao-com-phantomjs-e-casperjs
    2nd-open-meeting-pernambucojs
    Saturday, August 24, 13

    View full-size slide

  20. Reference
    https://github.com/ariya/phantomjs/wiki/API-Reference
    https://github.com/n1k0/casperjs/wiki
    http://docs.casperjs.org/en/latest/
    Imagens:
    http://menina-voadora.blogspot.com.br/2012/08/
    historias-do-povo.html
    Saturday, August 24, 13

    View full-size slide