Avançando com Cypress

Postado por DBC Company Em: Desenvolvimento, Tecnologia Sem comentarios

No último artigo, conhecemos um pouco sobre Cypress e vimos por que ele é uma boa opção para os testes automatizados. Quais as vantagens e como fazemos a instalação e configuração da ferramenta. Neste artigo vamos continuar e aprofundar como criamos o primeiro teste e como foi a minha experiência na DBC Company.

Para quem trabalha com desenvolvimento, principalmente com a parte de front, o Javascript não é nenhum mistério. E acredito que seja por isso que tenha sido tão natural a adesão do Cypress. Ele é baseado no Javascript, mais especificamente no framework Mocha, que é um framework de teste executado em cima do Node.

A maior dificuldade para mim, que não era do mundo de testes, e sim entender como começar a criar os cenários e qual a cobertura ideal. O que me ajudou bastante foi a documentação do Cypress, que segue o princípio da simplicidade. Mas possui conteúdo excelente voltado para público iniciante e dicas para o público mais avançado.

Para demonstrar como é simples criar um teste, vamos ver um exemplo. Digamos que eu preciso testar uma tela de login. Para isso, eu entendo que o Cypress possui uma sequência de passos bem definidas para criar os testes. Veja abaixo a lista de comandos que expressam essa sequência e em seguida a explicação sobre cada um deles.

  1. Visitar URL;
  2. Selecionar elemento;
  3. Interagir com elemento;
  4. Conferir resultado.

Esta sequência de passos, serve para orientar quem está começando a como criar seu primeiro teste. Em outras palavras começar visitando uma URL (1), no caso a tela de login do seu sistema. Nesta tela, você vai selecionar elementos (2). Após a seleção deles, vai interagir (3), ou seja, executar uma ação sobre os elementos selecionados. Esta ação pode ser escrever um texto no campo de login e senha, além de clicar no botão de login. São dois tipos básicos de interação. Após a interação você fará uma verificação (4), ou seja, uma asserção sobre um valor recebido com o valor desejado.

Abaixo segue o código do teste e o endereço do repositório com este exemplo simples.

/// <reference types="Cypress" />

describe('PoC Cypress', () => {

    it('Login', () => {

        cy.visit('https://maiconpinto.github.io/poc-cypress/')

        cy.get('#inputEmail').type('maiconsilva.pinto@gmail.com')

        cy.get('#inputPassword').type('123456')

        cy.get('button[type="submit"]').click()

        cy.url().should('contain', 'dashboard')

    })

})

Esta é uma sequência básica e bem simples. Mas com isso já temos nosso primeiro teste. E melhor, o primeiro teste automatizado. Agora sempre que você for alterar alguma coisa no login, você pode rodar o mesmo teste e conferir se está tudo ok. Em um tempo mínimo possível você terá a cobertura do seu teste novamente. Além disso, em um caso hipotético de alterar o campo login para e-mail, você pode acabar alterando em uma tela e esquecendo em outra. Novamente, se você tiver os testes automatizados você vai garantir muito mais rápido se tudo continua funcionando.

Esta é, sem dúvida, uma das maiores lições para um desenvolvedor que não tem experiência com testes: Garantia de qualidade. Existem muitos desenvolvedores bons, e alguns ótimos, com uma lógica afiada e capacidade de criar algoritmos excelentes, mas que ainda não possuem experiência com testes.

Acredito que temos sempre procurar evoluir, e na área de tecnologia e desenvolvimento, isso é praticamente um mantra, pois a cada dia nasce um framework novo que promete resolver os mesmos problemas e por fim acabam criando outros, ou no mínimo fazendo a mesma coisa só que de forma diferente.

Para garantir essa evolução continua, devemos procurar atualizações e mesmo que seja impossível saber e conhecer todas as ferramentas novas, é importante ter noção de todas que existem no mercado e principalmente, aquelas que estão mais próximas do que já sabemos, pois assim a adesão e as barreiras para aprender serão minimizadas. O Cypress é a união de tecnologias modernas, que segue uma filosofia que vai de encontro com aquilo que o mercado está precisando e exigindo, que é ser simples, mas extremamente útil.

Caso tenha interesse, o código está disponível em https://github.com/maiconpinto/poc-cypress.

Ainda há espaço para explorar sobre o Cypress, por enquanto vamos ficar por aqui. Talvez na próxima podemos falar mais sobre outras partes do Cypress e continuar com a criação de um teste mais elaborado. Fiquem ligados aqui no nosso Blog!

Por Maicon Silva Pinto, Desenvolvedor de Sistemas da DBC.

maicon.silva@dbccompany.com.br

5 Likes

Comments: 0

There are not comments on this post yet. Be the first one!

Deixe um comentário