Esse projeto "testes-automatizados-web-qacoders-academy_cypress" é executado em um ambiente de automação no "ERP do Qa.Coders Academy", desenvolvido para o curso "Workshop de Liderança Técnica de QA (Tech Lead QA)" do "Qa.Coders Academy".
-
Aula 01
- Aspectos da liderança;
- "FIORELLI (2004) define a liderança como sendo "a capacidade de exercer influência sobre as pessoas.""
- Assessment;
- Diagrama;
- Aspectos da liderança;
-
Aula 02
- Documentação de Teste;
- Testes de software;
-
Aula 03 e 04
- Projeto de Automação;
- Automação com Cypress;
- Instalação e configuração do Cypress versão 13.6.3;
- Testes independentes;
- Custom Commands;
- Reusos e refatorações;
- Evidências das execuções dos testes automatizados em formato de videos e capturas de tela (screenshots);
- Entre outros conteúdos;
- Documentações de referência
-
Aula 05
- DevOps - Configuração do CI
- GitHub Actions
- DevOps - Configuração do CI
🚩 Executar os testes automatizados web no navegador chrome em modo headless (2° plano) e Gerar os resultados dos testes no GitHub Actions
- Nesse repositório, acessar a aba "Actions"
- Na seção "Actions", clicar em "Pipeline Testes Automatizados Web ERP Qa.Coders Academy Cypress"
- Em "This workflow has a workflow_dispatch event trigger.", clicar em "Run workflow" > "Run workflow" para executar os testes automatizados web no navegador chrome em modo headless (2° plano) no GitHub Actions [com o conteúdo de "secrets.CYPRESS_ENV" (baseado no arquivo "cypress.env.example.json" e configurado na aba "Settings" desse repositório > "Secrets and variables" > "Actions" > "Secrets" > "Repository secrets") que foi redirecionado para o arquivo "cypress.env.json"]
- Após o término da execução, clicar na run "Pipeline Testes Automatizados Web ERP Qa.Coders Academy Cypress"
- Na seção "Artifacts", clicar em "cypress-videos-chrome"
- Na janela aberta, escolher um diretório para baixar a pasta compactada "cypress-videos-chrome.zip"
- Na seção "Artifacts", clicar em "cypress-screenshots-chrome"
- Na janela aberta, escolher um diretório para baixar a pasta compactada "cypress-screenshots-chrome.zip"
Verificar os vídeos gerados e armazenados anteriormente no GitHub Actions e descompactados no computador 🕵️♀️
- Abrir uma janela do "Windows Explorer"
- Acessar o diretório onde foi baixada a pasta compactada "cypress-videos-chrome.zip" anteriormente
- Descompactar a pasta
- Acessar a pasta descompactada "cypress-videos-chrome"
- Clicar 2 vezes sob os vídeos gerados e armazenados anteriormente no GitHub Actions e descompactados para ser abertos e verificados no computador
Ex.:
login.cy.js.mp4
Verificar os screenshots gerados e armazenados anteriormente no GitHub Actions e descompactados no computador 🕵️♀️
- Abrir uma outra janela do "Windows Explorer"
- Acessar o diretório onde foi baixada a pasta compactada "cypress-screenshots-chrome.zip" anteriormente
- Descompactar a pasta
- Na pasta descompactada "cypress-screenshots-chrome", acessar "nome-suite-testes.cy.js"
Ex.:
login.cy.js
- Clicar 2 vezes sob os screenshots gerados e armazenados anteriormente no GitHub Actions e descompactados para ser abertos e verificados no computador
Ex.:
Login -- Login com e-mail inválido ... (failed).png
. . .
Login com sucesso -- after each hook.png
Antes de clonar ou executar esse projeto localmente no computador, é necessário ter os pré-requisitos e seguir as instruções abaixo 👇
- macOS 10.9 ou superior (Intel ou Apple Silicon 64-bit (x64 ou arm64))
- Linux Ubuntu 20.04 ou superior, Fedora 21 e Debian 8 (x86_64 ou Arm 64 bits (x64 ou arm64))
- Windows 10 ou superior (apenas 64 bits)
- Mínimo de 2 CPUs para rodar o Cypress
- 1 CPU adicional se a gravação de vídeo estiver ativada
- 8 GB ou superior para execuções de teste mais longos
- Abrir uma janela do "Windows Explorer"
- Clicar na aba "Exibir"
- Marcar a opção "Extensões de nomes de arquivos"
- Marcar a opção "Itens ocultos"
- Abrir uma janela do "Windows Explorer"
- Acessar o diretório "C:"
- Criar uma pasta "tools"
- Baixar o Console Emulator (cmder)
- Clicar com botão direito na pasta compactada > Extrair para "cmder"
- Mover a pasta descompactada "cmder" para o diretório "C:\tools" criado anteriormente
- Acessar o diretório "C:\tools\cmder"
- Clicar com botão direito no executável "cmder.exe" > Enviar para > Área de trabalho (criar atalho)
- Acessar a Área de Trabalho
- Clicar 2 vezes no atalho "Cmder - Atalho"
- Clicar na opção "Unblock and Continue"
- Seguir os passos apresentados nesse link "COMO REMOVER COMPLETAMENTE O NODE.JS DO WINDOWS?"
- Baixar e instalar o node v18.12.1 > node-v18.12.1-x64.msi
- Abrir um novo cmder ou outro terminal de preferência
- Informar o comando abaixo para confirmar se o node realmente foi instalado
node --version
- Verificar se foi retornada a mesma versão do node instalada anteriormente:
v18.12.1
- Informar o comando abaixo para confirmar se o npm realmente foi instalado
npm --version
- E verificar se foi retornada essa mesma versão do npm:
8.19.2
- Fechar esse cmder ou terminal
- Caso ainda não tenha o git baixado e instalado, acessar o site do git, baixar e instalar
- Caso ainda não tenha configurado o git, seguir os passos apresentados nesse link Configure a ferramenta e configurar
- Abrir uma janela do "Windows Explorer"
- Acessar o diretório onde será clonado o projeto "testes-automatizados-web-qacoders-academy_cypress"
- Copiar esse diretório
- Abrir um novo cmder
- Informar o comando abaixo para acessar onde será clonado o projeto
cd "<diretório copiado anteriormente>"
Ex.:
cd "C:\PROJETOS\WorkshopLiderancaTecnicaQA"
- Informar o comando abaixo para clonar este repositório via "HTTPS"
git clone https://github.com/AndressaKarla/testes-automatizados-web-qacoders-academy_cypress.git
- Ou informar o comando abaixo para clonar este repositório via "SSH"
git clone git@github.com:AndressaKarla/testes-automatizados-web-qacoders-academy_cypress.git
- No cmder aberto anteriormente, informar o comando abaixo para acessar o projeto “testes-automatizados-web-qacoders-academy_cypress” clonado anteriormente
cd testes-automatizados-web-qacoders-academy_cypress
Ex.:
C:\PROJETOS\WorkshopLiderancaTecnicaQA\testes-automatizados-web-qacoders-academy_cypress
- Informar o comando abaixo para forçar, mesmo tendo possíveis conflitos, a instalação das dependências do projeto
npm install --force
- Caso ainda não tenha o VS Code baixado e instalado, acessar o site do Visual Studio Code, baixar e instalar com a opção "System Installer"
- Com o Visual Studio Code aberto, caso seja apresentado alguma mensagem de "Instalar pacote de idiomas ...", clicar no ícone de configurações > "Don't Show Again"
- Clicar na opção "Manage > Profiles > Create Profile"
- Em "Profile name", informar "Cypress"
- Clicar na opção "Create"
- Clicar na opção "Extensions", informar e instalar as extensões abaixo:
- Cypress Snippets
- Cliff Su
- One Dark Pro
- binaryify
- Clicar na opção "One Dark Pro Darker" apresentada para habilitar a extensão
- binaryify
- Material Icon Theme
- Philipp Kief
- Clicar na opção "Material Icon Theme" apresentada para habilitar a extensão
- Philipp Kief
- Cypress Snippets
📑 Abrir o VS Code diretamente na pasta do projeto "testes-automatizados-web-qacoders-academy_cypress"
- No cmder aberto anteriormente, informar o comando abaixo para abrir o VS Code diretamente na pasta do projeto "testes-automatizados-web-qacoders-academy_cypress"
code .
- Aguardar o VS Code sert aberto
- Fechar esse cmder
- No VS Code aberto, caso seja apresentado "Do you trust the authors on the files in this folder?", marcar a opção "Trust the authors of all files in the parent folder ...."
- Clicar no botão "Yes, I trust the authors ...."
🛠️ Criar arquivo "cypress.env.json", informando os dados com base no arquivo "cypress.env.example.json"
- No VS Code aberto anteriormente, acessar "testes-automatizados-web-qacoders-academy_cypress"
- Criar o arquivo "cypress.env.json"
- Informar os dados com base no arquivo "cypress.env.example.json"
- Salvar o arquivo "cypress.env.json" com os dados informados anteriormente
🚩 Executar os testes automatizados web no navegador chrome na interface gráfica do Cypress no computador
- Abrir uma janela do "Windows Explorer"
- Acessar o diretório onde foi clonado o projeto “testes-automatizados-web-qacoders-academy_cypress”
- Copiar esse diretório
- Abrir um novo cmder
- Informar o comando abaixo para acessar o projeto "testes-automatizados-web-qacoders-academy_cypress"
cd "<diretório copiado anteriormente>"
Ex.:
cd "C:\PROJETOS\WorkshopLiderancaTecnicaQA\testes-automatizados-web-qacoders-academy_cypress"
- Informar o comando abaixo para abrir a interface gráfica do Cypress
npm run cypress:open
- NÃO fechar esse cmder
- Na interface gráfica do Cypress, clicar em "Continue"
- Em "Welcome to Cypress!", clicar em "E2E Testing"
- Em "Choose a browser", clicar em "Chrome"
- Clicar em "Start E2E Testing in Chrome"
- Em "testes-automatizados-web-qacoders-academy_cypress" > "Specs"> "E2E specs" > "cypress\e2e", clicar em "login", etc
🚩 Ou executar os testes automatizados web no navegador chrome em modo headless (2° plano) e Gerar os resultados dos testes no computador
- Abrir uma janela do "Windows Explorer"
- Acessar o diretório onde foi clonado o projeto “testes-automatizados-web-qacoders-academy_cypress”
- Copiar esse diretório
- Abrir um novo cmder
- Informar o comando abaixo para acessar o projeto "testes-automatizados-web-qacoders-academy_cypress"
cd "<diretório copiado anteriormente>"
Ex.:
cd "C:\PROJETOS\WorkshopLiderancaTecnicaQA\testes-automatizados-web-qacoders-academy_cypress"
- Informar o comando abaixo para executar todas as features e/ou cenários do projeto em modo headless (2° plano - mesmo modo e comando semelhante ao que é utilizado no "Passo 3" da "Pipeline Testes Automatizados Web ERP Qa.Coders Academy Cypress" em ".github > workflows > workflow-testes-automatizados-web-qacoders-academy-cypress.yml" no GitHub Actions) e Gerar os resultados dos testes no computador:
npm run cypress:run
- No VS Code aberto anteriormente, acessar "cypress > videos"
Ex.:
login.cy.js.mp4
- No VS Code aberto anteriormente, em "cypress > screenshots", acessar "nome-suite-testes.cy.js"
Ex.:
login.cy.js
- Clicar 2 vezes sob os screenshots
Ex.:
Login -- Login com e-mail inválido ... (failed).png
. . .
Login com sucesso -- after each hook.png
