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!

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.

  • 1,882