Testes e automação com PhantomJS e CasperJS

Exemplos disponíveis em https://github.com/henvic/phantom-casper-simple-talk

Transcript

1. Testes e automação com
   PhantomJS e 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
   Wednesday, August 14, 13
   

   View Slide

2. phantomjs.org
   casperjs.org
   Instalação fácil
   * O site de CasperJS “recomenda” o 1.1-beta, ao invés do 1.0 (estável)
   Wednesday, August 14, 13
   

   View Slide

3. testes de integração [mais rápidos]
   web scraping
   automação (i.e., inserção de dados em massa)
   renderização remota (e.g., gerar PDF a partir de
   template em HTML e CSS para envio automático de
   relatórios via email)
   Wednesday, August 14, 13
   

   View Slide

4. Um web stack baseado no WebKit com uma API em
   JavaScript
   Feito com Webkit, Qt (não node.js)
   headless
   Remote debugging
   GhostDriver: web driver para Selenium
   Wednesday, August 14, 13
   

   View Slide

5. page.evaluate() magic
   Wednesday, August 14, 13
   

   View Slide

6. page.evaluate() magic
   O código é executado no contexto da página, dentro
   de uma sandbox
   “um console.log(“foo”) dentro do evaluate() é diferente
   de um console.log(“foo”) fora”
   Wednesday, August 14, 13
   

   View Slide

7. Wednesday, August 14, 13
   

   View Slide

8. PhantomJS API
   Objeto phantom
   Vários módulos
   1. webpage
   2. system
   3. fs
   4. webserver
   5. child_process
   Você pode criar seu próprio módulo
   Wednesday, August 14, 13
   

   View Slide

9. phantom (global)
   .cookies
   .addCookie
   .deleteCookie
   .exit
   .injectJS
   ...
   Wednesday, August 14, 13
   

   View Slide

10. Módulo WebPage
    Funções
    Propriedades
    Callbacks
    Triggers para callbacks
    Wednesday, August 14, 13
    

    View Slide

11. Módulo System
    Propriedades:
    pid
    platform
    os
    env
    args
    parâmetros como em
    git --commit “foo”
    Wednesday, August 14, 13
    

    View Slide

12. Módulo FileSystem
    Properties
    separator {String}
    workingDirectory {String}
    Stream object
    retornado por fs.open
    Funções
    Wednesday, August 14, 13
    

    View Slide

13. WebServer, child_process...
    WebServer
    Permite a criação
    de um servidor
    web
    child_process
    Torna possível a
    invocação de
    subprocessos e
    comunicar com
    eles via stdin /
    stdout / stderr
    Wednesday, August 14, 13
    

    View Slide

14. Remote debugging
    http://localhost:9000/ em browser WebKit-based
    --remote-debugger-autorun=yes ou __run() no browser
    Wednesday, August 14, 13
    

    View Slide

15. Wednesday, August 14, 13
    

    View Slide

16. Framework para testes desenvolvida
    em JavaScript
    Funciona em cima do PhantomJS,
    e mais recentemente também do
    SlimerJS (baseado em Gecko)
    Também possui módulos, como o
    PhantomJS (alguns similares)
    Wednesday, August 14, 13
    

    View Slide

17. Teste funcional com o
    CasperJS
    Verificando se o WordPress está funcionando
    corretamente:
    - login
    - botão para carregar formulário de novo post
    - editor do formulário
    - criação do formulário
    - etc
    Wednesday, August 14, 13
    

    View Slide

18. Teste funcional com o
    CasperJS
    Wednesday, August 14, 13
    

    View Slide

19. Fim
    Testes e automação com
    PhantomJS e 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
    Wednesday, August 14, 13
    

    View Slide

20. Fontes
    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
    Wednesday, August 14, 13
    

    View Slide