🧪 Projeto de Testes Funcionais Automatizados E2E (Ponta a Ponta) | Cypress v13.15.0 | Javascript | Commands | App Actions | GitHub Actions
Esse projeto "testes-automatizados-e2e-front-serve-rest_cypress" é executado em um ambiente de produção no "front" e na "API REST" do "ServeRest" que simula uma loja virtual, nos navegadores Chrome e Firefox; nos Sistemas Operacionais Windows 10 e Linux Ubuntu 22.04, com o objetivo de praticar ainda mais testes automatizados e2e (ponta a ponta) em Cypress v13.15.0, Javascript, Commands, App Actions e GitHub Actions.
- Documentações de referência
⚠️ Instruções considerando Windows 10, para outras versões do Windows ou outros sistemas operacionais talvez seja necessário algumas adaptações
🚩 Executar os testes automatizados E2E (ponta a ponta) no navegador chrome, firefox, etc em modo headless (2° plano) em um ambiente de produção 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 E2E (Ponta a Ponta) Front ServeRest Cypress"
- Em "This workflow has a workflow_dispatch event trigger.", clicar em "Run workflow" > "Run workflow" para executar os testes automatizados E2E (ponta a ponta) no navegador chrome, firefox, em modo headless (2° plano) em um ambiente de produção no GitHub Actions [com os conteúdos de "secrets.USUARIO_ENV", etc (baseado nos arquivos "usuario.example.json", etc, e configurados na aba "Settings" desse repositório > "Secrets and variables" > "Actions" > "Secrets" > "Repository secrets") que foram redirecionados para os arquivos "usuario.json"]
- Após o término da execução, clicar na run "Pipeline Testes Automatizados E2E (Ponta a Ponta) Front ServeRest 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", "cypress-screenshots-firefox", etc
- Na janela aberta, escolher um diretório para baixar a pasta compactada "cypress-screenshots-chrome.zip", "cypress-screenshots-firefox.zip", etc
🔎 Verificar os vídeos gerados e armazenados anteriormente no GitHub Actions e descompactados no computador
- No Windows 10, 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", "cypress-screenshots-firefox.zip", etc anteriormente
- Descompactar a pasta
- Na pasta descompactada "cypress-screenshots-chrome", "cypress-screenshots-firefox", etc, 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.:
Funcionalidade Tela Cadastro de usuários ... -- Então na tela de Cadastro deverá apresentar a mensagem ... (failed).png
. . .
Funcionalidade Tela Login ... -- Então deverá apresentar a tela Home ... -- after each hook.png
. . .
Funcionalidade Tela Login ... -- Então na tela Login deverá apresentar a mensagem ... -- 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"
- Caso ainda não tenha o git e gitbash baixado e instalado, acessar o link do git e gitbash, baixar e instalar como administrador
- Caso ainda não tenha configurado o git, seguir os passos apresentados nesse link Configure a ferramenta e configurar
- Seguir os passos apresentados nesse link "Guia Passo a Passo para Remover o Node.js no Windows"
- Baixar e instalar o node v18.12.1 > node-v18.12.1-x64.msi
- Abrir um novo gitbash ou outro terminal
- 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 gitbash ou terminal
- Abrir uma janela do "Windows Explorer"
- Acessar o diretório onde será clonado o projeto "testes-automatizados-e2e-front-serve-rest_cypress"
- Copiar esse diretório
- Abrir um novo gitbash
- Informar o comando abaixo para acessar onde será clonado o projeto
cd "<diretório\copiado\anteriormente>"
Ex.:
cd "C:\Projetos\Automação"
- Informar o comando abaixo para clonar este repositório via "HTTPS"
git clone https://github.com/AndressaKarla/testes-automatizados-e2e-front-serve-rest_cypress.git
- Ou informar o comando abaixo para clonar este repositório via "SSH"
git clone git@github.com:AndressaKarla/testes-automatizados-e2e-front-serve-rest_cypress.git
- No gitbash aberto anteriormente, informar o comando abaixo para acessar o projeto “testes-automatizados-e2e-front-serve-rest_cypress” clonado anteriormente
cd testes-automatizados-e2e-front-serve-rest_cypress
Ex.:
C:\Projetos\Automação\testes-automatizados-e2e-front-serve-rest_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:
- Hyper Term Theme
- HasseNasse
- Clicar na opção "Hyper Term Black" apresentada para habilitar a extensão
- HasseNasse
- Material Icon Theme
- Philipp Kief
- Clicar na opção "Material Icon Theme" apresentada para habilitar a extensão
- Philipp Kief
- Cypress Snippets
- Cliff Su
- Hyper Term Theme
- Fechar o VS Code
📑 Abrir o VS Code diretamente na pasta do projeto "testes-automatizados-e2e-front-serve-rest_cypress"
- No gitbash aberto anteriormente, informar o comando abaixo para abrir o VS Code diretamente na pasta do projeto "testes-automatizados-e2e-front-serve-rest_cypress"
code .
- Aguardar o VS Code ser aberto
- Fechar esse gitbash
- 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 arquivos "usuario.json", etc, informando os dados com base nos arquivos "usuario.example.json", etc
- No VS Code aberto anteriormente, acessar "cypress > fixtures"
- Criar o arquivo "usuario.json"
- Informar os dados com base no arquivo "usuario.example.json"
- Salvar o arquivo "usuario.json" com os dados informados anteriormente
- Informar os dados com base no arquivo "usuario.example.json"
🚩 Executar os testes automatizados E2E (ponta a ponta) no navegador chrome em um ambiente de produção na interface gráfica do Cypress e Gerar os resultados dos testes no computador (cypress > screenshots)
- Ter o navegador Chrome instalado
- Abrir uma janela do "Windows Explorer"
- Acessar o diretório onde foi clonado o projeto “testes-automatizados-e2e-front-serve-rest_cypress”
- Copiar esse diretório
- Abrir um novo gitbash
- Informar o comando abaixo para acessar o projeto "testes-automatizados-e2e-front-serve-rest_cypress"
cd "<diretório\copiado\anteriormente>"
Ex.:
cd "C:\Projetos\Automação\testes-automatizados-e2e-front-serve-rest_cypress"
- Informar o comando abaixo para abrir a interface gráfica do Cypress
npm run cy:open
- NÃO fechar esse gitbash
- 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-e2e-front-serve-rest_cypress" > "Specs"> "E2E specs" > "cypress\e2e", clicar em "login", "cadastro-usuarios", etc
- Após executar os testes, fechar todas as interfaces gráficas do Cypress
- Fechar esse gitbash
🚩 Ou executar os testes automatizados E2E (ponta a ponta) no navegador chrome em modo headless (2° plano) em um ambiente de produção e Gerar os resultados dos testes no computador (cypress > screenshots; cypress > videos)
- Abrir uma janela do "Windows Explorer"
- Acessar o diretório onde foi clonado o projeto “testes-automatizados-e2e-front-serve-rest_cypress”
- Copiar esse diretório
- Abrir um novo gitbash
- Informar o comando abaixo para acessar o projeto "testes-automatizados-e2e-front-serve-rest_cypress"
cd "<diretório\copiado\anteriormente>"
Ex.:
cd "C:\Projetos\Automação\testes-automatizados-e2e-front-serve-rest_cypress"
- Informar o comando abaixo para executar todas as funcionalidades e/ou cenários do projeto no navegador chrome em modo headless (2º plano) em um ambiente de produção (comando semelhante ao que é utilizado no "Passo 3" do job "cypress-chrome" da "Pipeline Testes Automatizados E2E (Ponta a Ponta) Front ServeRest Cypress" em ".github > workflows > workflow-testes-automatizados-e2e-front-serve-rest-cypress.yml" no GitHub Actions) e Gerar os resultados dos testes no computador (cypress > screenshots; cypress > videos):
npm run test
- Após executar os testes, fechar esse gitbash
🚩 Executar os testes automatizados E2E (ponta a ponta) no navegador firefox em um ambiente de produção na interface gráfica do Cypress no computador (cypress > screenshots)
- Ter o navegador Firefox instalado
- Abrir uma janela do "Windows Explorer"
- Acessar o diretório onde foi clonado o projeto “testes-automatizados-e2e-front-serve-rest_cypress”
- Copiar esse diretório
- Abrir um novo gitbash
- Informar o comando abaixo para acessar o projeto "testes-automatizados-e2e-front-serve-rest_cypress"
cd "<diretório\copiado\anteriormente>"
Ex.:
cd "C:\Projetos\Automação\testes-automatizados-e2e-front-serve-rest_cypress"
- Informar o comando abaixo para abrir a interface gráfica do Cypress
npm run cy:open
- NÃO fechar esse gitbash
- Na interface gráfica do Cypress, clicar em "Continue"
- Em "Welcome to Cypress!", clicar em "E2E Testing"
- Em "Choose a browser", clicar em "Firefox"
- Clicar em "Start E2E Testing in Firefox"
- Em "testes-automatizados-e2e-front-serve-rest_cypress" > "Specs"> "E2E specs" > "cypress\e2e", clicar em "login", "cadastro-usuarios", etc
- Após executar os testes, fechar todas as interfaces gráficas do Cypress
- Fechar esse gitbash
🚩 Ou executar os testes automatizados e2e (ponta a ponta) no navegador firefox em modo headless (2° plano) em um ambiente de produção e Gerar os resultados dos testes no computador (cypress > screenshots)
- Abrir uma janela do "Explorador de Arquivos"
- Acessar o diretório onde foi clonado o projeto "testes-automatizados-e2e-front-serve-rest_cypress"
- Copiar esse diretório
- Abrir um novo gitbash
- Informar o comando abaixo para acessar o projeto "testes-automatizados-e2e-front-serve-rest_cypress"
cd "<diretório\copiado\anteriormente>"
Ex.:
cd "C:\Projetos\Automação\testes-automatizados-e2e-front-serve-rest_cypress"
- Informar o comando abaixo para executar todas as funcionalidades e/ou cenários do projeto no navegador firefox em modo headless (2º plano) em um ambiente de produção (comando semelhante ao que é utilizado no "Passo 3" do job "cypress-firefox" da "Pipeline Testes Automatizados E2E (Ponta a Ponta) Front ServeRest Cypress" em ".github > workflows > workflow-testes-automatizados-e2e-front-serve-rest-cypress.yml" no GitHub Actions) e Gerar os resultados dos testes no computador (cypress > screenshots):
npm run test:ff
- Após executar os testes, fechar esse gitbash
- 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.:
Funcionalidade Tela Cadastro de usuários ... -- Então na tela de Cadastro deverá apresentar a mensagem ... (failed).png
. . .
Funcionalidade Tela Login ... -- Então deverá apresentar a tela Home ... -- after each hook.png
. . .
Funcionalidade Tela Login ... -- Então na tela Login deverá apresentar a mensagem ... -- after each hook.png
