O Cypress é uma ferramenta moderna de automação para testes de aplicações web. Diferente de outras ferramentas de testes tradicionais, o Cypress é executado no mesmo ciclo de execução da aplicação, o que permite que você escreva, execute e depure seus testes diretamente no navegador. Ele é ideal para testes de integração, funcionalidade e interface de usuário, oferecendo uma experiência rápida e interativa.
Com Cypress, é possível realizar testes end-to-end de forma eficiente e simples, validando o comportamento da aplicação de ponta a ponta, com foco na interação com os elementos presentes na maioria das páginas web. Além disso, a ferramenta fornece uma série de recursos como captura de telas, gravação de vídeos, depuração em tempo real e relatórios de testes, tornando o processo de automação e validação mais acessível.
Desempenho Rápido: Execução instantânea de testes, sem a necessidade de esperar por longos tempos de execução. Depuração Simples: Ferramentas de depuração e exibição de comandos diretamente no navegador. Testes em Tempo Real: Visualização do comportamento da aplicação enquanto os testes estão sendo executados. Facilidade de Uso: Sintaxe simples e APIs intuitivas para escrever testes, ideal para iniciantes e especialistas. Documentação Extensa: A documentação oficial oferece exemplos e guias para facilitar o aprendizado.
As URLs e credenciais usadas neste projeto são de propriedade exclusiva do @papitodev e dos alunos da formação Cypress Skills. Não utilize-as sem autorização.
💡 Este repositório é o seu ponto de partida para automatizar testes em páginas web com Cypress. Crie scripts poderosos, escaláveis e prontos para dominar qualquer aplicação! 🚀💻
⚡ Comece sua jornada de automação e leve seus testes para o próximo nível. O futuro dos testes está em suas mãos. Vamos juntos nesse desafio! 💪
git clone https://github.com/santosqa/cypress-web-start.git
npm install
yarn add cypress@13.15.0 -D
- Abrir interface gráfica Cypress:
yarn cypress open - Executar todos testes via terminal:
yarn cypress run
- yarn: https://yarnpkg.com/
- package cypress yarn: https://yarnpkg.com/package?q=cypress&name=cypress
- github cypress: https://github.com/cypress-io/cypress
-
Node.js
-
$ pm install --global yarn -2
-
verifique que o yarn está instalado: $ yarn --version
-
no mac execute o comando para garantir que esteva atualizado o arquivo: $ source ~/.zshrc
-
Iniciar o projeto: $ yarn init -2
-
Instalar cypress: $ yarn add cypress@13.15.0 -D ( o argumento -D, indica que o pacote será adicionado como uma dependência de desenvolvimento no projeto.Em resumo, adiciona o Cypress como uma dependência que será usada apenas no ambiente de desenvolvimento, sem ser incluída no ambiente de produção.)
-
abrir o cypress: $ yarn cypress open
- Viewport: https://docs.cypress.io/api/commands/viewport
- Hooks BeforeEach: https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests#Hooks
A * Embora o Cypress não tenha suporte nativo para uso de XPath, é possível alcançar o mesmo objetivo de maneira organizada e nativa sem precisar importar plugins como "cypress-xpath".
* Este exemplo demonstra como validar a mensagem de alerta para o campo obrigatório "Nome Completo".
-
XPath equivalente: "//label[text()='Nome Completo']/.//div[contains(@class, 'alert-msg')]"
-
Implementação nativa com Cypress sem o uso do XPATH:
cy.contains('label', 'Nome Completo') // Localiza o rótulo com o texto "Nome Completo" .parent() // Navega para o elemento pai do rótulo .find('.alert-msg') // Busca o elemento com a classe 'alert-msg' .should('be.visible') // Garante que o alerta está visível .and('have.text', 'O campo nome é obrigatório.'); // Valida o texto do alerta. Use .have.text quando o objetivo é verificar o texto exato e completo de um elemento.