A testagem do front-end é, muitas vezes, negligenciada, mas você não pode mais cometer esse erro. Descubra o porquê e como testar seus fronts por aí!
Tempo de Leitura: 7 minutos
No TecnoUpdate 2022, tivemos uma trilha inteira dedicada ao Desenvolvimento, a TUP4DEV – como não poderia deixar de ser. Nela, rolou uma palestra fundamental sobre a testagem do front-end, mais especificamente o porquê e como devemos adotar esse processo.
O conteúdo foi apresentado pelo Diego Telles, Tech Manager na Sami Saúde, Líder de Comunidade, Educador e Criador de Conteúdo. E a palestra foi tão incrível que reunimos os principais pontos dessa fala neste artigo para que toda a nossa comunidade pudesse acessar e aprender com ela.
Vem com a gente, então, descobrir os diferentes tipos de testes de front-end e a relação dos testes realizados pelos Devs e o time de QA. Além de como começar a testar seu front já e implementar uma cultura de testes na sua equipe e empresa!
Conheça os tipos de testes de front-end
Ao ler e pensar em testes, talvez venha à sua mente um modelo específico com o qual você esteja mais familiarizado. No entanto, existem diferentes tipos de testagem do front-end que podem ser adotados e que valem ser feitos. Vamos conhecê-los, desenvolvedor?
Testes de Unidade
O primeiro que geralmente é lembrado, pois é o tipo mais básico, são os Testes de Unidade (ou Unitários). Nesse tipo de testagem, o foco é a validação de pequenas partes de um código, como uma função, por exemplo.
Assim, garante-se que a unidade testada esteja funcionando como deve e que nada esteja quebrado antes do deploy. Ou seja, testes unitários agilizam a testagem, pois eles são rodados no ritmo das implementações, e geram mais qualidade para a entrega.
Ferramentas para essa testagem do front-end: Jest, Jasmine, Mocha e Chai
Testes de Interface/Snapshots
Também temos os Testes de Interface/Snapshots, que têm como objetivo prevenir qualquer mudança inesperada. Eles garantem isso a partir dos snapshots (capturas visuais) feitos dos elementos de estilização do seu front-end.
Esses snapshots devem ser mantidos no repositório e disponibilizados para todos os Devs para servir como um “gabarito” dos padrões. E, caso seja feita uma modificação não intencional em qualquer detalhe registrado nos snapshots, o teste irá quebrar.
Por isso também que, a cada feature nova ou atualização de elementos já registrados em um snapshot, é preciso gerar um novo com as alterações feitas.
Ferramentas para essa testagem do front-end: Jest
Testes de Integração
Quando falamos em Testes de Integração a finalidade é garantir que uma parte se comunique com a outra como esperado. Portanto, trata da conexão entre o seu código e aplicação com outros componentes. Basicamente, ele é essencial para que os acessos e interação dentro da sua interface levem às páginas e ações esperadas.
Ferramentas para essa testagem do front-end: Jest e Cypress
Testes End-to-End (E2E)
Conectados com os Testes de Integração, os Testes End-to-End servem para testar os componentes integrados e automatizar ações. Esse modelo é bastante útil, pois garante que testes de ponta a ponta sejam rodados com menos tempo e esforço.
Assim, não é preciso revisitar todos os pontos a cada feature implementada para validar e garantir a qualidade da entrega.
Ferramentas para essa testagem do front-end: TestCafé, Cypress e Puppeteer
Testes de Acessibilidade
Outro tipo importante e famoso dentro da testagem do front-end são os Testes de Acessibilidade. Como o nome sugere, eles se concentram em certificar que a página seja acessível para o usuário final.
Ou seja, a atenção está na facilidade e, portanto, devem ser levadas em conta as demandas de pessoas com deficiência e dos mais variados tipos de usuários que forem e puderem vir utilizar a aplicação.
Ferramentas para essa testagem do front-end: Jest aXe e Pa11y
Testes SPA
Por fim, temos os populares Testes SPA – Single Page Application. Eles são muito utilizados na rotina dos desenvolvedores, afinal, permitem a virtualização do seu DOM (Modelo de Objeto de Documento) e a verificação de todas as camadas da árvore desenvolvida.
Desse modo, é possível testar as classes, as validações, a semântica… e garantir uma aplicação otimizada e eficiente.
Ferramentas para essa testagem do front-end: Jest: JS DOM e Testing-library
Viu só quantas opções de testes para front-end? Então, não há desculpas para ser um adepto do “Teste Manual”, no melhor estilo “deixa que o usuário testa”.
Todos os modelos citados rendem informações úteis que vão aumentar a qualidade e sucesso da sua aplicação. E se você estiver na dúvida de qual escolher, a nossa dica é, primeiro, considerar a relação de quantidade x precisão x investimento de cada um dos tipos.
Testes unitários, por exemplo, são bastante específicos e básicos. Por isso, precisam ser realizados em maior quantidade e frequência para que rendam resultados precisos. Apesar disso, são mais rápidos de serem aplicados e menos custosos.
Já os testes de integração, exigem menos aplicações, rendem resultados mais precisos, mas podem ser mais demorados, caros e desafiadores para serem implementados. E o mesmo vale para testes de UI, pois trabalham de forma macro e com validações mais complexas.
De toda forma, o fato é que a testagem do front-end dá trabalho. E é por isso que a nossa segunda dica é…
Confie nos testes que quebram!
Se os seus testes nunca quebrarem, é mais provável que tenha algo errado com o seu teste do que não existir nada de errado com o seu código.
Partindo do princípio que um teste é feito para identificar problemas, se ele não for capaz de cumprir este objetivo nenhuma das vezes em que ele for rodado, não há como saber se ele realmente funciona.
Portanto, é preciso forçar o teste à quebra para poder confiar que ele apontará as limitações do seu código, quando elas existirem. Caso contrário, ele pode estar viciado ou não ter sido implementado da forma correta, ou mais eficaz possível.
Testes realizados por Dev x Papel de QA
Legenda: O papel de QA é guiá-los, facilitar essa testagem e garantir a qualidade da entrega. | Imagem: Freepik
Agora, é provável que você esteja se perguntando: “Se eu faço todos esses testes, o que sobra para o time de QA?”
Na verdade, há um grande equívoco em se pensar que a equipe de QA é responsável por criar e rodar os testes.
QA quer dizer Quality Assurance, portanto, o trabalho desses profissionais está muito mais em validar o processo de testagem do que em executá-lo.
Devs devem, sim, testar suas aplicações; e o papel de QA é guiá-los, facilitar essa testagem e garantir a qualidade da entrega. Para isso, eles ficam responsáveis pelas/pelos:
Estratégias de teste
QA é uma atuação mega estratégica e, se a empresa que você trabalhar tiver essa área estabelecida, responder à pergunta de quais testes você deve adotar ficará muito mais fácil.
Esse time se dedica a analisar o escopo do projeto e determinar as melhores estratégias de testagem do front-end para garantir a qualidade da aplicação. Assim, é possível evitar um looping de testes ou testes irrelevantes para gerar valor para o cliente e usuário finais.
Análises de teste
Também é papel do QA analisar os testes que foram aplicados para garantir que eles foram confiáveis, relevantes e satisfatórios. É quase como se eles fossem críticos de testes, analisando o processo e os resultados para chegar a uma conclusão. E, claro, definir um plano de ações derivadas dela – repetir o teste, aplicar outro tipo, alterar o front, etc.
Testes exploratórios
O time de QA vai mapear cenários possíveis de teste e executá-los de forma mais livre e intuitiva, a fim de complementar ou direcionar os testes convencionais.
É comum que testes exploratórios sejam aplicados para identificar comportamentos inesperados, defeitos críticos, defeitos semelhantes, defeitos aleatórios, efeitos colaterais e riscos. E os profissionais de QA serão capacitados para conduzi-los.
Análises de negócio
Além disso, o QA, junto com o PO, PM e o cliente, irá mapear as regras de negócio para diminuir gargalos do desenvolvimento e determinar ações que irão estabelecer uma jornada de usuário de sucesso. Tudo isso orientado a testes, é claro.
Então, o resumo é que você, Dev, não poderá se livrar de testar o seu front. Contudo, poderá ter muito mais assertividade nessa missão com a ajuda do time de QA!
Criação de cenários de testes
Na hora de delinear os seus cenários de testes, para fazê-los de maneira mais organizada, a orientação é seguir uma lógica específica.
Primeiro, você vai criar o “caminho feliz”, ou seja, o caminho ideal que o usuário deveria percorrer. Um script daquilo que o usuário precisa fazer para seguir o fluxo da aplicação com sucesso, sem dificuldades ou desvios.
Depois, será hora de criar os “caminhos tristes” que são justamente as mais diversas possibilidades de caminho que o usuário pode adotar para realizar a mesma tarefa.
Caminhos estes que podem quebrar a aplicação e que vão gerar demandas de atualização e refinamento do seu front.
Como começar a testar?
Se a sua empresa tiver uma área estruturada, o ponto de partida será estabelecido por esse time. Se não tiver, você terá que fazer as vezes de QA e planejar sua estratégia de testes.
Neste caso, o primeiro passo é mapear cenários – entender qual a dor do usuário, o que está quebrando com frequência. Afinal, não há como começar a aplicar testes sem compreender a regra de negócio.
Então, é possível partir para ações mais práticas. A seguir, listamos dicas para implementar a testagem do front-end em sistemas em andamento, ou seja, projetos já iniciados e times já estruturados:
Passo a passo de sistemas em andamento
- Comece pelo final: testes E2E – Automatize os testes de novas features e se concentre em garantir que os componentes estão se comunicando e a informação está trafegando como devem.
- Com o tempo, garanta outros testes – Implemente novos modelos e maiores frequências de testes aos poucos, baseando-se nos resultados dos E2E, na evolução do desenvolvimento e nas oportunidades propícias que surgirem.
- Não teste features já entregues – O objetivo é caminhar sempre em frente e trabalhar no que possa gerar valor para o usuário e o projeto. Parar sua sprint para testar features antigas pode até ser útil para seu time, mas não é prioridade.
- Aumente a maturidade do time – Por fim, é fundamental aprofundar os conhecimentos do time e incentivar e dar autonomia para um desenvolvimento orientado a testes e focado em qualidade.
Com essas dicas, ficará mais fácil desenvolver testes e elevar o nível de qualidade das suas aplicações. Além de tornar a testagem parte da cultura e do fluxo de trabalho.
Quer ver um teste sendo realizado na prática? O Diego trouxe isso pra gente na palestra e você pode acompanhar a demonstração, comentários e insights extras dele neste vídeo.
E se quiser continuar esse papo sobre testes ou outros desafios do universo do desenvolvimento, faça parte do nosso fórum:
Por último, mas não menos importante, explore também os conteúdos que criamos pensando em você aqui no blog. Você vai gostar, Dev!
