Alvaro Camillo Neto
Desenvolvedor há 15 anos, atualmente trabalhando com tecnologias web e open source. Estudando e compartilhando o máximo possível.
Testes de interface ágeis com Cypress
Alvaro Camillo
- Desenvolvedor
- Santander
- Instrutor Alura
- Pai do Mario e Gabriel
- Games
- alvarocamillont.dev
- npx alvarocamillont
Introdução
A Pirâmide
Teste UI
- Verifica o sistema como um todo
- Ponto de vista do usuário
- Especificado por todos
- Uso em sistemas legados
Teste UI
- Lento
- Total Integração
- Frágeis
- Setup Complexo
Cypress
Selenium
Sleep()
Cypress
- Open Source
- Opera no mesmo loop de execução do navegador (Sem mais sleep)
- Extensível
Cypress
- Time Travel
- Debug
- Espera automática
- Spies,Stubs
- Screenshots e Vídeos
Cypress
- Mocha
- Chai
- Sinon
Trade-offs
- Não é uma ferramenta de automação.
- Os comandos são executados em um navegador
- Não é possível controlar a interação entre duas abas/navegadores.
Let's Code!
Instalação
npm install cypress --save-devExecutando
npx cypress opennpx cypress runExecutando
Primeiro teste
/// <reference types="Cypress" />
describe('A home da minha aplicação', ()=> {
it('apresenta o título da aplicação', ()=> {
cy.visit('http://localhost:4200/');
cy.get('.po-page-header-title')
.should('contain.text', 'Pessoas');
});
}
Conclusão
Isso é só o começo
- Testes de Unidade
- Testes de API
- Criação de Plugins
- Uso de CI
- Visual Testing
No Angular...
ng add @briebug/cypress-schematicO Cypress é uma ferramenta focada em testes que leva em consideração as novas implementações de Front End como as SPAs. É uma ferramenta Open Source que deve ser considerada para o seu projeto.
Fontes
Obrigado!
Testes de interface ágeis com Cypress
By Alvaro Camillo Neto
Testes de interface ágeis com Cypress
Quem nunca sofreu com os imprevisíveis timeouts que ferramentas como Selenium podem gerar por motivos que nem sempre compreendemos... Mas não precisa ser assim! Vamos conhecer o Cypress e como essa ferramenta pode trazer de volta a alegria de criar testes de interface ! Nessa talk pretendo demonstrar o Cypress e como ele pode colaborar com o fluxo de trabalho do desenvolvedor Front-End.
