#movingbr - By Fernanda Ferreira
Automação de Teste de
Software com Selenium e BDD
(foco no Front-end).
SOBRE A
APRESENTAÇÃO
▪ Não é sobre blá, blá, blá;
▪ Nem lavagem cerebral sobre Teste
automatizado;
2
▪ É sobre trabalhar com mais qualidade;
▪ É sobre usar ferramentas simples e ao
mesmo tempo poderosas;
▪ É sobre cliente satisfeito;
▪ É sobre gostar do que fazemos.
PODE
ACREDITAR!!!!
3
SOBRE O
WORKSHOP
PRÁTICO
4
Fornecer conhecimento sobre automação de testes (end
to end) para aplicações Angular e não-Angular com,
Selenium, Protractor, WebdriverIO, TypeScript,
PageObject e Cucumber. A ideia é conhecer alguns
conceitos básicos sobre HTML, CSS, XPath e evoluir
incrementalmente para resolver os mais diversos
problemas relacionados a automação de testes de UI,
com as ferramentas, padrões e frameworks citados.
Praticar FixarIntrodução
ROAD MAP
5
Salada de “D’s”
Ágil
Foco na Regra de
Negócio
Teste de Aceitação
Visão do Todo
6
FALAR DE ÁGIL, NÃO É FALAR DE UM
NOVO BIG BEN!
1.
ÁGIL
ÁGIL
7
Pode ser apenas uma forma simples e
prática de criar produtos orientado a
testes, valor e comportamento!
ÁGIL
8
Mas afinal, que perguntas queremos
responder com o Ágil?
Por que projetos “orientados a planos” falham?
É possível testar primeiro se o produto não foi
desenvolvido?
É possível aprender sobre o produto sem ter manuais?
Como saber se estou fazendo o certo?
Como saber se há valor no que estou fazendo?
Usar Scrum ou qualquer outro framework leva a empresa ao
sucesso?
ÁGIL
9
Por que projetos “orientados
a planos” falham?
Poderia ser por mal planejamento, demanda
maior que a capacidade de atendimento, etc?
ÁGIL
10
É possível testar primeiro se o
produto não foi desenvolvido?
É DIFÍCIL!
Mas..., e se a HISTÓRIA a ser desenvolvida,
descrevesse, através de cenários CLAROS e
OBJETIVOS, o comportamento desejado de
cada funcionalidade?
ÁGIL
11
É possível aprender sobre o
produto sem ter manuais?
SIM,
porém a documentação deve ser VIVA.
Como poderíamos? mantendo a
documentação sobre o código atualizada,
através de um agente estratégico na criação
do conhecimento.
BASTA RODAR E APRENDER!
ÁGIL
12
Como saber se estou fazendo
o certo?
Feedbacks constantes de todos os envolvidos
no ciclo de desenvolvimento.
ÁGIL
13
Como saber se há valor no
que estou fazendo?
Necessidade, gera valor!
Cliente puxa a produção!
Entregar o mínimo produto viável - MVP!
Não empurrar o produto que o cliente não
deseja!
ÁGIL
14
Mas como descobrir e validar
a necessidade?
ÁGIL
15
Receita de Bolo?
16
ÁGIL
Teste Continuo
Entregas Frequentes
Muito Feedback
Envolva o TIME
Valores ágeis
ÁGIL
17
Usar Scrum ou outros, leva a
empresa ao sucesso?
“...estamos surpreendidos quando, por
exemplo, a complexidade reafirma-se, e
fazendo toda a nossa organização a adotar o
Scrum, na verdade não nos permite fornecer
software como nós pensávamos que seria”
Liz Keogh, Lunivore
ÁGIL
18
Ciclo de vida de projetos orientado a Alice
Ciclo de vida de projetos orientado à incertezas
2.
SALADA DE
“D’S”
19
TDD / BDD
20
TDD / BDD
21
Qual a dificuldade dos
Programadores c/ TDD?
▫ Por onde começar?
▫ O que testar?
▫ O que não testar?
Tem dificuldade...
TDD / BDD
22
Solução BDD?
● Por onde começar?
Então...
➢ Outside-in
(fora/para dentro);
➢ User Story;
● O que não testar? ➢ O resto.
● O que testar?
TDD / BDD
23
outside-in
Interface do usuário Interface do usuário
Back-end (código) Back-end (código)
24
3.
FOCO NA REGRA
DE NEGÓCIO
Foco na REGRA de
Negócio
(User Story)
25
Mas como?
Uma melhor
Comunicação
entre
Cliente
(Negociês) X
Programador
(Técniquês)
O que muda
do Teste
Tradicional
para o Teste
Ágil?
26
Desafio do
Teste de
Software
Manual em
ambiente ágil
27
O que muda
do Teste
Tradicional
para o Teste
Ágil?
28
EQUIPAMENTO
S
E
SISTEMA
OPERACIONAL
29
30
EQUIPAMENTO
S
E
SISTEMA
OPERACIONAL
31
EQUIPAMENTO
S
E
SISTEMA
OPERACIONAL
32
EQUIPAMENTO
S
E
SISTEMA
OPERACIONAL
33
EQUIPAMENTO
S
E
SISTEMA
OPERACIONAL
34
Bom Almoço!
4.
TESTE DE
ACEITAÇÃO
5.
VISÃO DO
TODO
35
Bora Começar?
4.
TESTE DE
ACEITAÇÃO
5.
VISÃO DO
TODO
4.1.
HTML / CSS
36
4.1.
HTML / CSS
37
Estrutura Básica HTML
4.1.
HTML / CSS
38
Estrutura Básica CSS
Dentro do HTML
Arquivo separado .css
39
4.2.
XPATH
XPath, a XML Path Language, é uma
linguagem de consulta (Query Language)
para selecionar nós de um documento
XML. Ademais, XPath pode ser usada
para computar valores (por exemplo,
strings, números ou valores booleanos)
do conteúdo de um documento XML.
XPath foi definido pelo World Wide Web
Consortium (W3C).
40
4.2.
XPATH
41
Estrutura Básica XPath
Absoluto
Relativo
4.2.
XPATH
4.3
INSPEÇÃO
DE
ELEMENTOS
42
FERRAMENTAS P/ INSPECIONAR
▪ WebDriver Element Locator for Firefox;
▪ CSS Selector Helper for Chrome;
▪ Copy Css Selector for Chrome
▪ Firebug - Firefox;
▪ FirePath - Firefox;
▪ XPath Checker.
4.3
MÃO NA
MASSA?
43
4444
WebDriver BuilderIDE
4.4
SELENIUM
45
4.5
BDD
&
CUCUMBER
4646
O que devo saber?
▪ #: Utilizado para escrever comentário;
▪ @: Simbologia para marcar tags;
▪ Feature/Funcionalidade: Descrição de alto nível de
um recurso de software;
▪ Scenario/Cenário: utiliza um conjunto de dados para
executar os nossos exemplos descritos no escopo;
▪ Passos/Steps: Um passo geralmente começa com
“Given/Dado”, “When/Quando” ou “Then/Entao”;
▪ " ": Informando que o valor é uma string.
4.5
BDD
&
CUCUMBER
4747
O que devo saber?
1. Dado: É utilizado para descrever um contexto inicial do
cenário. Quando o Cucumber executa a palavra-chave
“Dado”, espera-se que o cenário esteja em um estado
definido;
2. Quando: Utilizado para descrever um evento ou ação.
Pode-se descrever, por exemplo, uma pessoa interagindo
com o sistema ou pode ser um evento desencadeado por
um sistema;
3. Entao: É utilizado para descrever um resultado
esperado.
4.5
BDD
&
CUCUMBER
4848
Exemplo
4.5
BDD
&
CUCUMBER
49
Top 5 - Frameworks para teste
End-to-End (e2e)
4.6
FRAMEWORKS
E2E
50
4.6.1
PROTRACTOR
5151
4.6.2
WEBDRIVERIO
52
4.7
PARA
COMEÇAR
Pré-requisitos:
● NodeJS;
● GIT;
● JAVA;
● Navegador: Chrome e Firefox;
● Editor de Texto (VSCode)
○ Plugins: Cucumber Gherkin (Steve
Purves) / vscode-icons (Roberto
Huertas).
5353
Node.js Gigantes da indústria de Internet tem adotado a
plataforma, seja como uma ferramenta auxiliar, seja como
sua principal tecnologia.
Node.js é uma tecnologia assíncrona que trabalha em
uma única thread de execução.
Node.js não é uma linguagem de programação, sua
máquina virtual V8 faz etapas de pré-compilação e
otimização antes do código entrar em operação.
Node.js não é um framework Javascript. Essa VM é a
mesma que o Google utiliza para executar Javascript no
browser Chrome.
4.7.1
NODEJS
5454
Quais as vantagens?
▪ Node.js usa Javascript;
▪ Node.js permite Javascript full-stack;
▪ Node.js é muito leve e é multiplataforma.
Para quê serve?
▪ Serve para fazer o que você quiser, desde sites à scripts
de automação;
▪ Node.js serve para fazer APIs;
▪ Node.js serve para fazer backend de jogos, IoT e apps de
mensagens;
▪ Node.js serve para fazer aplicações de tempo real.
4.7.1
NODEJS
4.7.1
VAMOS
INSTALAR?
55
5656
O TypeScript possibilita que você escreva código
JavaScript na forma que foi acostumado quando aprendeu
Orientação a Objetos. Você lembra dessas aulas, em criar
métodos que retornassem um valor com tipo definido, em
criar classes e mais classes para o seu programa, em criar
interfaces para desacoplar tudo que quisesse, entre diversas
outras técnicas.
4.7.2
TYPESCRIPT
5757
GIT é um sistema de controle de versão de arquivos. Através
deles podemos desenvolver projetos na qual diversas pessoas
podem contribuir simultaneamente no mesmo, editando e
criando novos arquivos e permitindo que os mesmos possam
existir sem o risco de suas alterações serem sobrescritas.
4.7.3
GIT
4.7.4
VAMOS
INSTALAR?
58
4.7.5
VAMOS
INSTALAR?
59
4.7.6
VAMOS
INSTALAR?
60
https://ftp.mozilla.org/pu
b/firefox/releases/
4.7.7
VAMOS
INSTALAR?
61
○ Plugins: Cucumber Gherkin (Steve
Purves) / vscode-icons (Roberto
Huertas).
6262
4.8
PROMPT
BASH
6363
4.8
PROMPT
BASH
6464
4.8
MÃO NA
MASSA!!!!
5
VISÃO DO
TODO
65
6666
5
QUANDO
AUTOMATIZAR?
6767
5
O QUE
AUTOMATIZAR?
6868
5
7 PASSOS P/
AUTOMAÇÃO
1° Passo: Busque apoio da liderança;
2° Passo: Planejamento de escopo e prazo;
3° Passo: Escolha da Ferramenta;
4° Passo: Definição da linguagem de script;
5° Passo: Definição da estrutura de script;
6° Passo: Treinamento;
7° Passo: Inclusão da automação no ciclo
de desenvolvimento;
Obrigada pela presença
de todos!
69
Onde me achar?
@fcffc1
https://github.com/fcffc/
fernanda-camila-ferreira
fcffc1
https://slack.devmt.com.br/

#Moving br workshop