Uso de Headless Browsers 
em Testes Automatizados! 
Stefan Teixeira! 
stefanfk@gmail.com / stefanteixeira.com.br
Sobre o palestrante 
Stefan Teixeira! 
• QA Engineer @ Orga Systems! 
• Bacharel em Ciência da Computação pela UFRJ! 
• Fi...
Testes Automatizados
Pirâmide de Automação de Testes! 
! 
Mike Cohn (Succeeding with Agile)
Foco de Testes pela UI! 
! 
• Smoke Tests! 
• xBrowser Testing! 
• Visual Regression Testing
Headless Browsers
Por que usar um 
Headless Browser?
#1: Feedback mais 
rápido
Importância do tempo de build e 
feedback! 
• XP (Extreme Programming)! 
‣ 10-minute build! 
! 
• James Shore (The Art of ...
“That's about the right amount of time to 
stretch my legs, get some coffee, and 
talk over our work with my pairing 
part...
#2: Ideal para Smoke 
Tests
“Subconjunto de todos os casos de testes definidos/ 
planejados que cobre as principais funcionalidades de 
um componente ...
#3: Ótimo para 
Integração Contínua
Headless Browsers + CI! 
! 
• Possível rodar os testes no próprio servidor 
de CI! 
• Setup simples! 
• Para projetos no G...
Importante!! 
! 
Testar com um Headless Browser 
não substitui a necessidade de 
testar em browsers reais.
Headless Testing
• Selenium WebDriver! 
‣ GhostDriver (PhantomJS)! 
‣ HtmlUnitDriver (HtmlUnit)! 
• Capybara! 
‣ Poltergeist (PhantomJS)! 
...
Visual Regression 
Testing
Usos! 
! 
• Comparar screenshots! 
• Validar design responsivo! 
• Validar valores de CSS
Visual Regression Testing 
+ Headless Browsers
Ferramenta Browsers 
PhantomCSS PhantomJS 
Wraith PhantomJS, SlimerJS 
Depicted (dpxdt) PhantomJS 
CSS Critic Firefox, Pha...
Obrigado! 
Stefan Teixeira! 
stefanfk@gmail.com! 
stefanteixeira.com.br! 
@stefan_teixeira
QConRio 2014 - Uso de Headless Browsers em Testes Automatizados
QConRio 2014 - Uso de Headless Browsers em Testes Automatizados
Próximos SlideShares
Carregando em…5
×

QConRio 2014 - Uso de Headless Browsers em Testes Automatizados

1.286 visualizações

Publicada em

Short Talk apresentada no QCon Rio 2014, no dia 23 de Setembro.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

QConRio 2014 - Uso de Headless Browsers em Testes Automatizados

  1. 1. Uso de Headless Browsers em Testes Automatizados! Stefan Teixeira! stefanfk@gmail.com / stefanteixeira.com.br
  2. 2. Sobre o palestrante Stefan Teixeira! • QA Engineer @ Orga Systems! • Bacharel em Ciência da Computação pela UFRJ! • Finalizando MBA em Garantia de Qualidade de Software pela Escola Politécnica da UFRJ! • Mantém um blog técnico sobre testes: stefanteixeira.com.br! • Certificado CTAL-TM / TA pelo ISQTB e CPRE-FL pelo IREB! Contatos:! • E-mail: stefanfk@gmail.com! • Twitter: twitter.com/stefan_teixeira! • Facebook: facebook.com/stefan.teixeira! • LinkedIn: linkedin.com/in/stefanteixeira! • GitHub: github.com/stefanteixeira! • SlideShare: slideshare.net/stefanteixeira
  3. 3. Testes Automatizados
  4. 4. Pirâmide de Automação de Testes! ! Mike Cohn (Succeeding with Agile)
  5. 5. Foco de Testes pela UI! ! • Smoke Tests! • xBrowser Testing! • Visual Regression Testing
  6. 6. Headless Browsers
  7. 7. Por que usar um Headless Browser?
  8. 8. #1: Feedback mais rápido
  9. 9. Importância do tempo de build e feedback! • XP (Extreme Programming)! ‣ 10-minute build! ! • James Shore (The Art of Agile Development)! ‣ 10 or 15-minute build! !
  10. 10. “That's about the right amount of time to stretch my legs, get some coffee, and talk over our work with my pairing partner.”! ! - James Shore, The Art of Agile Development
  11. 11. #2: Ideal para Smoke Tests
  12. 12. “Subconjunto de todos os casos de testes definidos/ planejados que cobre as principais funcionalidades de um componente ou sistema, para averiguar as principais funções de um programa em funcionamento sem se preocupar com maiores detalhes.“! ! - Definição de Smoke Tests pelo ISTQB (International Software Testing Qualifications Board)
  13. 13. #3: Ótimo para Integração Contínua
  14. 14. Headless Browsers + CI! ! • Possível rodar os testes no próprio servidor de CI! • Setup simples! • Para projetos no GitHub, o Travis CI oferece suporte ao PhantomJS por default :)
  15. 15. Importante!! ! Testar com um Headless Browser não substitui a necessidade de testar em browsers reais.
  16. 16. Headless Testing
  17. 17. • Selenium WebDriver! ‣ GhostDriver (PhantomJS)! ‣ HtmlUnitDriver (HtmlUnit)! • Capybara! ‣ Poltergeist (PhantomJS)! ‣ Celerity (HtmlUnit)! • CasperJS! ‣ PhantomJS! ‣ SlimerJS! • Zombie.js (+ Mocha / Jasmine)
  18. 18. Visual Regression Testing
  19. 19. Usos! ! • Comparar screenshots! • Validar design responsivo! • Validar valores de CSS
  20. 20. Visual Regression Testing + Headless Browsers
  21. 21. Ferramenta Browsers PhantomCSS PhantomJS Wraith PhantomJS, SlimerJS Depicted (dpxdt) PhantomJS CSS Critic Firefox, PhantomJS (experimental) Hardy.io Qualquer browser suportado pelo WebDriver (FF, Chrome, PhantomJS…) Huxley Qualquer browser suportado pelo WebDriver (FF, Chrome, PhantomJS…)
  22. 22. Obrigado! Stefan Teixeira! stefanfk@gmail.com! stefanteixeira.com.br! @stefan_teixeira

×