Uso de Headless Browsers em Testes Automatizados!

Stefan Teixeira!stefanfk@gmail.com / stefanteixeira.com.br

Sobre o palestranteStefan 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

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 Agile Development)!

‣ 10 or 15-minute build!!

“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

#2: Ideal para Smoke Tests

“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)

#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 GitHub, o Travis CI oferece suporte ao PhantomJS por default :)

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)!

‣ Celerity (HtmlUnit)!

• CasperJS!‣ PhantomJS!

‣ SlimerJS!

• Zombie.js (+ Mocha / Jasmine)

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, PhantomJS (experimental)

Hardy.io Qualquer browser suportado pelo WebDriver (FF, Chrome, PhantomJS…)

Huxley Qualquer browser suportado pelo WebDriver (FF, Chrome, PhantomJS…)

Obrigado!Stefan Teixeira!stefanfk@gmail.com!stefanteixeira.com.br!@stefan_teixeira