Conceitos e ferramentas para realizar testes de validação de interfaces web usando WordPress e sistemas de testes E2E.

1. Testes automatizados
end-to-end (E2E)
com WordPress
Por: Fábio Nas linkedin.com/in/fabio-nas-ba649574
fabionasario@gmail.com

2. O objetivo desta apresentação é ajudar na decisão de usar
ou não testes automatizados E2E em nossos projetos
WordPress e onde ele são mais adequados.

3. O que vamos ver:
● Introdução aos testes de software
● Apresentar o que são testes end-to-end (E2E)
● Listar as ferramentas mais utilizadas no momento
● Mostrar um exemplo prático de teste utilizando Cypress
● Levantar a principal indagação: “Usar ou não em meus projetos
WordPress”

4. O que são testes de softwares?
“O teste do software é a investigação do software a fim de fornecer
informações sobre sua qualidade em relação ao contexto em que ele deve
operar, se relaciona com o conceito de verificação e validação.”
Fonte: https://pt.wikipedia.org/wiki/Teste_de_software.
Acesso em 21.11.2019
Obs.: Testes podem ser
automatizados ou não

5. Como você testa suas aplicações?
Faço um teste
antes de
colocar em
produção
O cliente testa pramim quando já estáem produção.
(Obs.: Não sei porque, mas aorelha sempre esquenta)
Faço todos
os tipos de
testes.
(tiroso!)
(Dá uma
trabalheira!)
Não faço nada!
O WordPress já vem testado
Testo tudo
na mão!
Faço testes de
junto com o cliente
Faço testesautomatizados das
partes mais importantes

6. Afinal! O que testar?
Velocidade?
Desempenho?
Estruturas?
Processos?
UX?
Funcionalidades?
Interfaces?
Sem
bugs!
Leiaute?
UI?

7. Divisão dos tipos de testes
Pirâmide de automação de testes tradicional com
base nos conceitos de Mike Cohn:
https://en.wikipedia.org/wiki/Mike_Cohn
E2E
Aceitação
UI (Funcional)
Integração
(entre módulos, classes,
componentes, serviços)
Unitários
(de classes, componentes, funções)
Menos testes; maior
integração; mais caros
Mais testes; menor
integração; mais baratos

8. Outra visão da divisão de testes
E2E
Aceitação
UI (Funcional)
Integração
(entre módulos, classes,
componentes, serviços)
Unitários
(de classes, componentes, funções)
Os testes de Integração e E2E
aumentaram nos últimos tempos
em relação aos testes unitários.
As ferramentas de automação E2E
evoluíram bastante, barateando e
facilitando a sua adoção
Obs.: A divisão dos tipos de testes já não tem mais a forma de pirâmide. Por isso, por enquanto
aqui temos a forma de um quadrado, significando que as quantidades de tipos de testes podem ser
bem diferentes conforme a aplicação que se quer testar.

9. Lista das ferramentas de testes web mais conhecidas
● Selenium
● Jest
● Cypress
● Karma
● Mocka
● Chai
● Jasmine
● Nightwatch
● Nightmare
● Puppeteer
● Behat (BDD php)
● Cucumber
● …

10. Nosso foco nesta
apresentação:
Testes automatizados E2E
Testes E2E também
são utilizados como
testes de interface e
de aceitação
São testes executados de forma controlada por
software e que testam uma aplicação ou um
sistema, simulando, como se fosse um usuário final

11. Automatizando E2E
com Cypress

12. The web has evolved.
Finally, testing has too.
(A web evoluiu.
Finalmente,
o teste também.)
Cypress para testes automatizados E2E
Uma ferramenta integrada
All-in-one testing:
runner +
assertion +
mocking +
visual debug
○ Set up tests
○ Write tests
○ Run tests
○ Record tests
Instalação
Cypress para
Mac, Linux, ou
Windows
Frase deles no site:
cypress.io
Licença permissiva
MIT:
https://github.com/cypress-io/cypress

13. Instalações
1. Instalar nodejs:
Ver em https://nodejs.org/en/download/
2. Criar pasta do projeto. Ex.: cypress-wpfloripa
3. Dentro da pasta do projeto iniciar projeto:
npm init -y
4. Instalar cypress para o projeto:
npm install -D cypress
5. Execute o cypress para criar as pastas de teste:
./node_modules/.bin/cypress open
6. Espere o aplicativo gráfico do cypress abrir e feche cypress
no terminal pressionando CTRL+C:

14. Criar arquivo de especificação de testes
1. Criar pasta wpfloripa
dentro da pasta
cypress/integration
2. Criar arquivo de
especificação de testes
wpfloripa.spec.js,
conforme imagem.

15. Fazendo um primeiro teste
describe('Meu primeiro teste', () => {
it('Deve ser true', () => {
expect(true).to.equal(true);
})
});
1. Digite este código dentro de wpfloripa.spec.js:
2. Execute o cypress dentro do projeto:
./node_modules/.bin/cypress
open
Obs.: Espere o aplicativo gráfico do cypress abrir

16. Fazendo um primeiro teste

17. Fazendo um primeiro teste

18. # Testa página do wpfloripa
1. Visitar o site https://wpfloripa.com.br
2. O título da página deve conter 'comunidade WordPress Floripa'
3. Testar se na página que contém a string ‘QUERO PARTICIPAR’
4. Testar se existe o item de menu de navegação ‘BLOG’
5. Testar se o item de navegação ‘BLOG’ está chamando a página correta
Vamos definir sequência lógica de teste E2E
Normalmente a lógica de teste deve cobrir determinados
objetivos de regras de negócios definidos para o projeto

19. Itens 1 e 2 - Visita o site e testa o título

20. Item 3 - Se contem ‘QUERO PARTICIPAR’

21. Item 4 - Testa se existe menu ‘BLOG’

22. Item 5 - Testa se ‘BLOG’ chama página correta

23. Outro exemplo: testando página de captura

24. Em que situação você usaria testes E2E?
● E2E é adequado para WordPress?
● Quais páginas são mais interessantes testar?
● Devo usar E2E se eu fizer um plugin?
● Livre para outras perguntas ????

25. Dúvidas?
Informações de contato
Fábio Nas
Perfil linkedin:
linkedin.com/in/fabio-nas-ba649574
E-mail:
fabionasario@gmail.com

26. Link e referências
● Succeeding with Agile: Software Development Using Scrum 1st Edition
○ https://www.amazon.com/Succeeding-Agile-Software-Development-Using/d
p/0321579364
● The Practical Test Pyramid
○ https://martinfowler.com/articles/practical-test-pyramid.html
● Cypress Guides
○ https://docs.cypress.io/pt-br/guides/overview/why-cypress.html
●