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-dev

Executando

npx cypress open
npx cypress run

Executando

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-schematic

O 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!