Headless Testing com GhostDriver

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

1

Sobre o palestrante

Stefan Teixeira • QA Engineer @ Orga Systems • Bacharel em Ciência da Computação pela UFRJ • Cursando MBA em Garantia de Qualidade de Software na Escola Politécnica da UFRJ • Certificado CTAL-TA / CTAL-TM pelo ISTQB e CPRE-FL pelo IREB • Mantém um blog técnico sobre Testes: stefanteixeira.com.br !

• 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

2

O que é Headless Testing?

3

Testar usando um Headless Browser! :)

4

Headless Browsers

5

PhantomJS

6

PhantomJS

• Headless Browser mais popular atualmente

• Utiliza engine gráfica WebKit, a mesma usada pelo Safari e pelo Chrome (até a versão 27 - Abril/2013)

Hoje, o Chrome usa sua própria engine (Blink), que é um fork do WebKit

• Criado por Ariya Hidayat

• phantomjs.org / https://github.com/ariya/phantomjs

7

Frameworks / Test Runners

Frameworks Test Runners

Selenium WebDriver GhostDriver

Capybara Poltergeist

Jasmine Chutzpah

Robot Framework phantomrobot

8

Por que usar?

9

#1: Feedback mais rápido

10

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

11

– James Shore, The Art of Agile Development

“That’s about the right amount of time to stretch my legs, get some coffee, and talk over our work with my pairing partner.”

12

Importância do tempo de build e feedback

• Dan Bodart

• Palestra “Crazy Fast Build Times - or when 10 seconds starts to make you nervous”

• Mostra formas de reduzir em até 10 vezes o tempo de build de uma aplicação

• Palestra na InfoQ: http://goo.gl/ScN6HH

13

#2: Ideal para Smoke Tests

14

!!– Definição de Smoke Tests pelo ISTQB (International Software Testing Qualifications Board)

“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.”

15

#3: Ideal para Integração Contínua

16

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

17

Atenção!

Testar com um Headless Browser não substitui a necessidade de testar em

browsers reais.

18

GhostDriver

19

GhostDriver

• Implementação do WebDriver Wire Protocol para o PhantomJS

• Criado por Ivan De Marino

• Versão atual: 1.1.1 (12/01/2014)

• GitHub: https://github.com/detro/ghostdriver

• Projeto também inclui Java bindings (PhantomJSDriver)

20

Setup

• Windows: baixar .zip do PhantomJS, extrair, e adicionar o diretório no PATH

• Ubuntu: http://goo.gl/6Qv9cB

• Mac OS X: brew update && brew install phantomjs

• Versão do Selenium >= 2.33.0

OBS: 2.40.0 já conta com a versão 1.1.0 do PhantomJSDriver (Java binding)

21

Dependências

•Maven: <dependency> <groupId>com.github.detro.ghostdriver</groupId> <artifactId>phantomjsdriver</artifactId> <version>1.1.0</version> </dependency> !•Gradle: dependencies { … testCompile “com.github.detro.ghostdriver:phantomjsdriver:1.1.0" … }

22

Como usar?

!

!

WebDriver driver = new PhantomJSDriver();

23

Passando CLI arguments

•É possível passar parâmetros de linha de comando do PhantomJS para o GhostDriver, por exemplo:

ArrayList argumentos = new ArrayList(); argumentos.add(“--ignore-ssl-errors=true”); argumentos.add(“--ssl-protocol=any”); argumentos.add(“--proxy-type=none”); !DesiredCapabilities caps = DesiredCapabilities.phantomjs(); caps.setCapability(“phantomjs.cli.args”, argumentos); !WebDriver driver = new PhantomJSDriver(caps); !!• Lista de parâmetros: phantomjs.org/api/command-line.html

24

Issues conhecidas

25

#1: Tratamento de alerts github.com/detro/ghostdriver/issues/20

26

Workaround 1

•Usar JavaScriptExecutor (colocar código antes da ação que gera o alerta JS): !!((JavaScriptExecutor) driver).executeScript(“window.alert = function(msg){};”); !!((JavaScriptExecutor) driver).executeScript(“window.confirm = function(msg){return true;};”);

27

Workaround 2

•Usar callbacks do PhantomJS (colocar código antes da ação que gera o alerta JS)

•A partir da versão 1.1.0 do GhostDriver, é possível executar código do PhantomJS através do método executePhantomJS !PhantomJSDriver phantom = (PhantomJSDriver) driver; !phantom.executePhantomJS(“var page = this;” + “page.onConfirm = function(msg) {“ + “console.log(‘CONFIRM: ‘ + msg);” + “return true;” + “};”);

28

#2: SendKeys dentro de nested frames github.com/detro/ghostdriver/issues/335

29

Problema

• Quando há um campo de texto dentro de nested frames (frame dentro de um iframe, por exemplo), o GhostDriver só digita o último caractere :(

• Essa issue ainda não foi investigada, apesar de três pessoas já terem notificado o problema.

30

Demo

• Teste simples com uma página de exemplo

• Jenkins + GhostDriver (+ Gradle)

• Travis CI + GhostDriver (+ Gradle)

• Projeto de exemplo no GitHub: https://github.com/stefanteixeira/exemplo-ghostdriver-gradle

• Slides disponíveis em: http://pt.slideshare.net/stefanteixeira

31

Obrigado!

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