Apresentação para a Trilha de Testes TDC2018

1. Frameworks de Testes
End-to-end
NodeJS

2. Oi!
Bárbara Cabral
QA Engineer

3. ◎ NodeJS
◎ Frameworks em NodeJS
◉ CucumberJS
◉ Protractor
◉ CodeceptJS
◉ BackstopJS
Agenda

4. NodeJS
◎ Node.js é um interpretador de código
JavaScript com base no V8 JavaScript
Engine do Google
◎ Criado por Ryan Dahl em 2009
◎ Arquitetura baseada em eventos,
desenvolvida para trabalhar com tarefas
assíncronas de forma não obstrutiva
◎ Permite o uso de Javascript no back e no
front
◎

5. NPM
◎ NPM é um gerenciador de pacotes para
código JavaScript
◎ Considerado o maior registro de software
do mundo
◎ Instalação de pacotes:
◎ Cria um arquivo package.json

6. NPM install

7. Frameworks em NodeJS

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

9. 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

10. CucumberJS

11. CucumberJS

12. CucumberJS

13. 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.

14. Protractor

15. Protractor

16. Protractor + PageObj

17. PageObject

18. 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

19. CodeceptJS

20. CodeceptJS + CucumberJS

21. 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

22. CodeceptJS + PageObjects

23. 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

24. 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"

25. BackstopJS

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

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