O documento discute frameworks de teste em NodeJS para testes de aceitação (end-to-end), incluindo CucumberJS, Protractor, CodeceptJS e BackstopJS. CucumberJS é um framework de especificação baseado em BDD, enquanto Protractor executa testes no Node.js usando Selenium. CodeceptJS é personalizável e suporta diferentes helpers. BackstopJS é para testes de regressão visual. Exemplos demonstram o uso de CucumberJS e Protractor para testar uma aplicação de busca de voos.

1. Frameworks de Testes
End-to-end
NodeJS

2. Oi!
Bárbara Cabral
QA Engineer

3. ◎ Conceitos
◉ BDD & ATDD
◎ Exemplos ATDD + BDD
◎ Frameworks em NodeJS
◉ CucumberJS
◉ Protractor
◉ CodeceptJS
◉ BackstopJS
Agenda

4. BDD e ATDD
Abordagens de Desenvolvimento de
Software orientado à Testes

5. Unitários
Componente
Integração
Aceitação
Pirâmide de Testes

6. BDD
Behavior Driven Development
1

7. O que é?
É uma abordagem
que funciona muito
bem com uma
metodologia ágil,
encoraja devs, qas, e
pessoas não técnicas
(de negócios) a
utilizarem uma
linguagem única
facilitando a
conversação.
Criador
Dan North, em 2003,
concebeu em reposta
ao TDD, ele retira a
palavra “teste” do
nome da técnica e a
traz de volta ao
comportamento da
aplicação.
BDD

8. ATDD
Acceptance Testing Driven
Development
2

9. O que é?
É uma abordagem
para a criação de
requisitos de forma
colaborativa entre o
cliente e a equipe. É
descrita de forma
natural para que
todos entendam o
que será entregue
sem criação de
doctos adicionais.
Criador
Elisabeth
Hendrickson, em
2008, criou a técnica
se baseando em
conceitos de BDD,
TDD e Especificação
por exemplos.
ATDD

11. Exemplos
ATDD + BDD
Base para os frameworks de testes
end-to-end

12. Estória (User Story)
Como um usuário do site
JetBlue
Eu gostaria de encontrar
vôos de ida e volta para a
cidade de destino
Para que eu agende a
minha viagem de férias
“As a/an …
I would like ..
So that”
Cenário (Scenario)
Dado que eu acesso o site da JetBlue
Quando escolho cidade de origem
E escolho data de saída
E escolho cidade de destino
E escolho data de retorno
Então eu visualizo uma lista de vôos
relacionados à pesquisa
“ Given …
When …
Then … ”
Exemplo

13. Cenário Outline: Busca por vôos inválidos
Quando eu escolho a <cidade_origem>
E escolho a <data_saida>
E escolho a <cidade_destino>
E escolho a <data_retorno>
E eu busco por vôos
Então eu vejo a mensagem de erro “Vôo não encontrado”
Exemplos:
| cidade_origem | data_saida | cidade_destino | data_retorno |
| "Florianópolis" | "02/01/2018" | "São Paulo" | "28/01/2018" |
| "Miami" | "02/01/2018" | "Cairo" | "28/01/2052" |
Exemplos

14. Frameworks em NodeJS

15. ◎ Especificação
◉ CucumberJS
◎ Protractor
◎ CodeceptJS
◎ BackstopJS
Frameworks

16. CucumberJS
◎ Versão em Javascript do Cucumber
◉ Framework de Especificação para BDD
◎ Sintaxe da linguagem é gherkin
◎ Executa com o NodeJS
◎ Baseado em:
◉ Feature files
◉ Step Files
◎ Especificar os cenários ANTES de
desenvolver
◎ Automatizá-los DEPOIS de desenvolvidos

17. CucumberJS

18. CucumberJS

19. CucumberJS

20. Protractor
◎ Executa com o Node.js usando o WebDriver
(selenium) para controlar o browser e simular
as ações dos usuários
◎ Identifica elementos do AngularJS
◎ Usa a biblioteca do Jasmine para sua sintaxe
de testes.
◎ Sintaxe é similar à sintaxe dos testes unitários,
contendo um arquivo de teste com um ou
mais blocos de “it” que descrevem os
requisitos da aplicação.

21. Protractor

22. Protractor

23. Protractor + PageObj

24. PageObject

25. CodeceptJS
◎ É baseado em cenários
◎ Pode-ser ir inserindo os comandos direto no shell
dentro da execução do teste
◎ É personalizável, Helpers:
◉ Protractor
◉ Pupeeter (opera em cima do Chrome
diretamente, sem o ChromeDriver)
◉ Nightmare (headless, like PhantomJS)
◉ Appium (mobile)
◉ REST (API)
◎ Sintaxe unificada, não importa o Helper

26. CodeceptJS

27. CodeceptJS + CucumberJS

28. CodeceptJS + CucumberJS
◎ Simples de começar
◎ Comandos interessantes
◉ Gerar steps não implementados
◉ Executar tags do cucumber
◉ Cenários que executam apenas em 1 browser
◉ Gerar pageobjects

29. CodeceptJS + PageObjects

30. BackstopJS
◎ Testes de Regressão Visual
◎ Compara alterações visuais entre versões do
sistema
◉ Ex: dev environment vs. production
◉ Screenshots para versão de referência

31. BackstopJS
◎ Comandos
◉ $ backstopjs init
◉ $ backstopjs referente
◉ $ backstopjs test
◎ Engines
◉ Chrome-Headless
￮ "engine": "puppeteer" (default)
￮ "engine": "chromy"
◉ Slimer (similar ao phantom roda no gecko: engine do firefox)
￮ "engine": "slimerjs"
￮ "engine": "casper"

32. BackstopJS

33. “Referências
◎ Top 5 Most Rated Node.js Frameworks for
End-to-End Web Testing
◎ Meus Exemplos
◉ Exemplo JetBlue com Protractor
◉ Exemplo JetBlue com o CucumberJS +
Protractor

34. Obrigada!
Perguntas & Sugestões
Você pode me encontrar
twitter @barbarapcabral & email barbaracabral@gmail.com