Recentemente, tive a oportunidade de utilizar Cypress em um projeto. Depois de muito aprendizado em um cenário real, consolidei e listei aqui, alguns links úteis que me ajudaram nessa caminhada.

O resultado você confere a seguir.

Itens

• Razões para utilizar;
• Curso básico;
• Instalação Básica;
• Configurações triviais;
• Múltiplos ambientes;
• Testes de API;
• Page Objects;
• App Actions;
• Lidando com senhas e o processo de login.

Razões para utilizar

Why Cypress?

Mostra ganhos que você terá ao utilizar Cypress. A página completa trás outras informações sobre a ferramenta e links úteis.

Descomplicando testes E2E com Cypress

Mostra vantagens/desvantagens, boas práticas, e um bom contexto sobre a estrutura da Ferramenta. Por Mateus José.

Curso básico

Testes de aplicações modernas com Cypress

Curso em português com a melhor avaliação na plataforma.

• Introduction to Cypress
• Advanced Cypress

Cursos da TAU com tutoriais básicos e avançados. Ótimo conteúdo, gratuito, em inglês.

Instalação Básica

Installing Cypress

Ajuda a instalar o cypress e deixá-lo up and running.

Configurações triviais

Configuration

Lista configurações e detalhes sobre as mesmas. Você provavelmente vai querer customizar algo dessa lista.

Múltiplos ambientes

Como configurar o Cypress para executar em diferentes ambientes

Habilita parametrização de configurações/informações por ambiente (baseUrl, por exemplo). É o tipo de necessidade bem perceptível no mundo real [e difícil, quando estamos estudando]. Por Márcio Ramos Corrêa.

Testes de API

Automatizando testes, em APIs REST, com Cypress e NodeJS

Ensina a criar testes de API com Cypress. Aborda conceitos básicos de API, montagem de um ambiente de testes e por fim, a criação de testes. Por Alex Alves.

Cucumber

Testes automatizados com Cypress e Cucumber

Habilita o uso do Cypress com Cucumber. Usar ou não Cucumber no seu projeto é opcional (e polêmico hehe). Se você optou por utilizar, vale conferir. Por Gabriel Cartelli.

Estendendo um pouco sobre Cucumber, “Como escrever cenários melhores conhecendo anti-padrões de Cucumber” da Danielle Moreira vai te ajudar escrever melhores cenários. Salva esse artigo!

Page Objects

Deep diving PageObject pattern and using it with Cypress

Configura [com sucesso] o design pattern Page Objects no Cypress. Por Felippe Rodrigo Puhle.

App Actions

• Stop using Page Objects and Start using App Actions
• How to write end-to-end test using app and api actions
• Split a very long Cypress test into shorter ones using App Actions

App Actions é um prática recomendada para quem utiliza Cypress. Esses 3 artigos vão te ajudar a entender o conceito e aplicar em seu projeto.

Não utilizei App Actions na prática, mas durante meu tempo de aprendizado, entendi que é preferível utilizar App Actions ao invés de Page objects. Os artigos mostram de maneira completa o conceito, comparativo e vantagens do App Actions frente ao Page objects. Por Gleb Bahmutov.

Lidando com senhas e o processo de login

Keep passwords secret in E2E tests

<Artigo phoda! Adicionar comentário que mostre todo o seu valor>

Conclusão

Quando o assunto é Cypress, conteúdo na internet é o que não falta.

Esse consolidado simples foi o que me ajudou na minha caminhada e talvez ajude na sua também.

Vou adicionando novos conteúdos aqui conforme aparecer. Valeu!

Utilizando Cypress na vida real was originally published in Test Bean on Medium, where people are continuing the conversation by highlighting and responding to this story.

Sempre que formato minha máquina, a primeira coisa quem vem em mente é a lista de programas pra instalar. Git, NodeJs, VSCode, Postman… e no fim sempre fica algum programa para trás.

Se fizer tudo usando um terminal, pode ser mais rápido (uma vantagem do Linux sobre o Windows). Mesmo assim, temos uma série de comandos e passos ha executar: Download, instalação, configuração…

Pra resolver esse problema, criei o Super Bash Helper!

O que é Super Bash Helper?

É que um arquivo “.bash_aliases”, customizado com diversas funções para instalação de programas e alguns aliases. Dessa forma, é possível instalar os programas que você precisa, executando apenas um comando.

Como utilizar

• Faça o download do arquivo (apresentado no fim do artigo);
• Salve o arquivo na home do seu Linux**;
• Se você tiver algum terminal de comando aberto, feche e abra novamente;
• Execute “sbstatus” comando.

No terminal, você deve ver algo parecido com a imagem abaixo.

Para instalar os programas, execute o comando:

~$ sbsetup_all

Pronto! Agora é só tomar um café rápido.

Você pode acessar o código do arquivo (no fim do artigo), e verificar todos os aliases e funções disponíveis. Dúvidas e sugestões são sempre bem vindas.

Obrigado

** Tenho utilizado esse script no Ubuntu 18.04.4 LTS (bionic) e funciona sem problemas.

Super Bash Helper was originally published in Test Bean on Medium, where people are continuing the conversation by highlighting and responding to this story.

Esse post é uma interpretação pessoal e objetiva de parte do livro “Agile Testing: A Practical Guide for Testers and Agile Teams” e tem o objetivo de buscar, reforçar e compartilhar conhecimento.

Escrito por Lisa Crispin e Janet Gregory em 2009, o livro é referência na área de QA. Leitura obrigatória para testers e outros membros de times ágeis.

O que veremos nesse post

Apresentaremos a definição básica sobre Desenvolvimento Agile e introdução sobre Agile Testing. Vamos lá!

Desenvolvimento Agile

A palavra “Agile” contém diferentes significados, mas uma forma de definir “Desenvolvimento Ágil” é analisando o Manifesto Ágil:

Com valores acima descritos, podemos nos esforçar para entregar valor para o cliente, em pequenas partes com ciclos de desenvolvimento mais curtos.

Agile Testing

Agile Testing é uma forma diferente de pensar sobre teste de software, de modo que a qualidade deve ter um guardião, capaz de criar meios para melhorar a qualidade do time e engajar seus membros a sempre pensar sobre a cada atividade entregue.

Dessa maneira, nós testers podemos entregar um produto de qualidade que traga valor para o cliente.

Termos utilizados para definir papeis

Por conveniência, utilizamos termos simples para definir os papeis desempenhados em times ágeis:

• Programador: pessoas com atividades voltadas para a escrita de código;
• Tester: pessoas com atividades voltadas para teste e qualidade no time;
• Desenvolvedor: TODOS envolvidos na entrega do software, seja “tester” ou “programador” ou outro papel que tenha ligação.

A ideia não é diminuir ou menosprezar papeis. Todo membro de um time ágil deve focar sempre na entrega de um produto de qualidade que traga valor para o cliente. Mesmo que você pode se reconheça em um dos termos (por exemplo programador), mas não quer dizer que você fará apenas atividade desse termo.

Mais que uma prática de teste

Muitas práticas utilizadas em times ágeis que estão ligadas a teste, mas isso não faz com que o Agile testing seja uma técnica de teste.

Praticas como TDD e Teste Integração podem ser utilizadas tanto por times Ágeis quanto não-Ágeis, pois são ótimas opções para a prevenção de bugs, mas a simples aplicação de tais técnicas, não transforma um time comum em um time ágil.

O Agile Testing engloba um contexto maior, envolve uma mudança de mindset de todo o time, deve estar presente em todas as fases de desenvolvimento, e não só entre o desenvolvimento do código e a entrega para validação do cliente. Por isso, não consideramos Agile Testing uma prática.

Testes dentro de um time Agile não é Agile Testing

Quando falamos em “teste”, devemos pensar em testes que critiquem o produto e foquem em descobrir qualquer gap no produto final antecipadamente.

Para ajudar a atingir esse objetivo, temos diversos tipos de teste: unidade, componente, funcional, sistema, carga, performance, segurança, stress, usabilidade, exploratório, end-to-end. Todos podem ser uma boa opção para um projeto (seja Agile ou não).

Alguns desses tipos de teste são Agile por natureza (testes exploratórios, por exemplo), mesmo que utilizados em um projeto Agile. Mesmo assim, apenas aplicar um tipo de teste Agile no projeto, não nos permite considerar que estamos praticando Agile Testing. Por isso não consideramos Agile Testing um tipo de teste.

Resumo

Apresentamos valores do Desenvolvimento Agile e qual foco buscamos atingir com esses valores. Mostramos definição sobre o que é (e o que não é) Agile Testing. Também mostramos valores e termos utilizados para identificar os membros de um time Agile.

Obrigado.

Links Bacanas

• Are we quality assurance or testers?
• A vida de um Analista de Qualidade (QA) em um time de Alta Performance
• Sketch note: Agile Bodensee 2014 - Agile Testing - Michael Palotas

Introdução simples e rápida sobre Agile Testing was originally published in Test Bean on Medium, where people are continuing the conversation by highlighting and responding to this story.

Já falamos sobre a parte teórica em um post anterior. Agora vamos praticar e escrever os primeiros XPaths.

Montando o Ambiente

Antes de começar, vamos preparar o ambiente que será utilizado para a parte prática. Baixe aqui, o arquivo HTML e abra-o em seu navegador. Você verá algo parecido com a imagem abaixo:

Steps para montar um XPath

Vamos seguir quatro steps para guiar nos guiar na criação de XPaths:

1. Escolher o elemento no browser;
2. Encontrar o elemento pelo Dev Tools do Chrome [o famoso f12];
3. Analisar atributos e elementos ligados ou próximos ao elemento;
4. Montar seu Xpath :)

Utilize esses steps como guia para criar um novo XPath.

Exemplo 1 — Utilizando o atributo “id”

O atributo “id” é sempre a melhor opção para montar XPaths, pois por boa prática, id’s devem ser únicos, o que facilita nossa busca.

1- Escolher o elemento no browser

Vamos selecionar o botão “Comprar Açaí”, que é o primeiro botão localizado na coluna “Ação”.

2- Encontrar o elemento pelo Dev Tools do chrome [f12]

Clique com o botão direito no botão “Comprar Açaí” e depois na opção “Inspecionar elemento”. O Chrome Dev Tools é aberto e o nosso elemento está selecionado:

3- Analisar atributos e elementos relacionados

Nosso botão é um elemento com a tag input, do tipo “button” e possui o ID “ComprarAcai”. Guarde essas informações:

Como falamos a pouco, o atributo ID é a melhor opção para montar XPaths. Vamos utiliza-lo na criação do nosso primeiro Xpath.

4- Montar seu Xpath :)

Vá para o Dev Tool e utilize o atalho Ctrl-F para abrir a barra de pesquisa no rodapé:

Na barra de pesquisa, digite “//”. Isso significa que você iniciou uma busca a partir de qualquer nível da página web.

Adicione “input” (que é a tag do nosso elemento), teremos “//input”. O Dev Tool retornará todos os elementos com tag “input”. São 9 no total:

Agora precisamos especificar melhor a nossa busca. Adicione “[]” (colchetes) e teremos “//input[]”.

Adicione “@id” dentro dos colchetes. Temos então “//input[@id]”. Agora o Dev Tool retornará todos os elementos com a tag “input” que tenham o atributo “id”. Reduzimos os resultados de 9 para 3:

Para finalizar, adicione “=ComprarAcai” (valor do ID do elemento), após o “@id”. Temos então “//input[@id=‘ComprarAcai’]”.

Agora o Dev Tool retornará somente elementos com a tag “input”, que tenham o atributo “id” cujo com o valor “=ComprarAcai”.

Filtrar com atributos html

Assim como utilizamos o atributo “id” para fazer a busca, podemos fazer uso de atributos como “class”, “name”, “type” entre outros.

Exemplo 2 — Utilizando mais de um atributo

Na falta do atributo id, além de utilizar outros atributos, é possível fazer uma busca utilizando dois ou mais atributos

1- Escolher o elemento no browser

Vamos até a coluna “Combo”, e selecionar o checkbox da última linha.

2- Encontrar o elemento pelo Dev Tools do chrome [f12]

Clique com o botão direito sob o elemento, e depois, em “Inspecionar elemento”.

3- Analisar atributos e elementos relacionados

Nosso checkbox é um elemento com a tag input, do tipo “checkbox”, com name “comboBaiano” e não possui ID. Dessa vez, usaremos mais de um atributo para selecionar o elemento.

4- Montar seu Xpath :)

Abra a barra de pesquisa do Dev Tool (Ctrl-F) e comece a montar o XPath…

Step 1 — Adicione “//input” para listar todos os elementos com a tag input. Temos 9 resultados.

Step 2 — Insira os colchetes para especificar a pesquisa. Agora temos “//input[]”.

Step 3 — Adicione “@type=’checkbox'” dentro dos colchetes.

Nesse momento temos o XPath “//input[@type=’checkbox’]”, que retorna 3 elementos. Para especificar melhor, vamos adicionar a pesquisa pelo atributo name em nosso XPath.

Step 4 — Adicione novos colchetes (na frente do seu XPath atual), e dentro deles adicione “@name=’comboBaiano’”.

Agora temos um XPath que retorna apenas um resultado:

//input[@type=’checkbox’][@name=’comboBaiano’]

Para encerrar

Com os exemplos acima, você já está apto a criar seus primeiros XPath em qualquer website/aplicação web. Sugestões, comente no post :)

Ferramentas recomendadas

Chrome DevTools - Chrome Developers

O Dev Tool faz parte do Navegador Chrome. É a ferramenta básica para começar escrever os primeiros XPath.

CSS and XPath checker

O CSS and XPath checker ajuda a validar um XPath criado. Se o XPath estiver “ok”, o elemento na tela ficará destacado em vermelho. Muito recomendado

Referências

Conteúdos que uso como referência quando o assunto é XPath. A leitura do primeiro e do terceiro é praticamente obrigatória, enquanto o segundo vale salvar no seu favoritos para consulta no seu dia-a-dia.

• Blog > Identificando elementos com XPath
• Xpath cheatsheet
• Como avaliar a utilização de locators nos testes automatizados de interface

XPath na prática — em 5 minutos was originally published in Test Bean on Medium, where people are continuing the conversation by highlighting and responding to this story.

Li muitas vezes pela internet à fora (em blogs ou fóruns com discussões e dúvidas relacionadas), mas nunca entendi o que, de fato, é Xpath.

Sempre me fazia perguntas do tipo: “O que é XPath?”, “Para que serve?” ou ainda “Onde utilizar XPath?”.

Hoje este é um assunto mais claro para mim, e já consigo responder estas perguntas.

O que é XPath?

XPath é uma linguagem de consulta, utilizada para identificar tags/elementos específicos em documentos XML (o que inclui HTML).

Para que serve?

Com XPath, você consegue identificar um ou mais elementos presentes em uma página web.

Botões, links, imagens, etc… Todos podem ser identificados, mesmo que não estejam visíveis, em um primeiro momento (elementos que só aparecem após um hover, por exemplo).

Onde utilizar Xpath?

Em Teste de Software, utilizamos XPath durante a automação de testes funcionais web.

Para fazer uma interação com um elemento de uma página, o framework de teste (ex: Cucumber) precisa saber como encontrar tal elemento. O XPath, é o código que fala como encontrar o elemento dentro da página.

Exemplo: Para clicar no botão “Confirmar” de uma página, utilizamos XPath para informar ao framework de teste qual o caminho ele deve seguir [dentro da página] para localizar o botão.

De forma simples e básica é isso. Você também pode encontrar informações mais detalhadas em páginas como Qualister, Wikipedia, W3C, e w3schools.

Até aqui vimos o lado teórico. Veja o post “XPath na prática — em 5 minutos” e comece a criar os primeiros XPaths.

XPath nos testes — teoria básica was originally published in Test Bean on Medium, where people are continuing the conversation by highlighting and responding to this story.