🧪 Projeto de Testes Funcionais Automatizados Web | Playwright | Javascript | Page Objects | GitHub Actions
Me baseei e adaptei parte do que foi ensinado nos cursos "Playwright eXpress" e "Playwright Zombie Edition" da "QAx" para esse projeto "testes-automatizados-web-front-serve-rest_playwright-javascript" que é 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, Sistemas Operacionais Windows e Linux Ubuntu, e que foi desenvolvido com o objetivo de praticar ainda mais testes automatizados web em Playwright, Javascript, Page Objects e GitHub Actions.
⚠️ 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 Web 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 Web Front ServeRest Playwright"
- Em "This workflow has a workflow_dispatch event trigger.", clicar em "Run workflow" > "Run workflow" para executar testes automatizados Web 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 [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", etc]
- Após o término da execução, clicar na run "Pipeline Testes Automatizados Web Front ServeRest Playwright"
- Na seção "Artifacts", clicar em "playwright-report-html-chrome", "playwright-report-html-firefox, etc
- Na janela aberta, escolher um diretório para baixar a pasta compactada "playwright-report-html-chrome.zip", "playwright-report-html-firefox.zip", etc
- Na seção "Artifacts", clicar em "playwright-screenshots-videos-chrome", "playwright-screenshots-videos-firefox", etc
- Na janela aberta, escolher um diretório para baixar a pasta compactada "playwright-screenshots-videos-chrome.zip", "playwright-screenshots-videos-firefox.zip", etc
🔎 Verificar no navegador padrão o report html gerado e armazenado anteriormente no GitHub Actions e descompactado no computador
- No Windows 10, abrir uma janela do "Windows Explorer"
- Acessar o diretório onde foi baixada a pasta compactada "playwright-report-html-chrome.zip", "playwright-report-html-firefox", etc anteriormente
- Descompactar a pasta
- Acessar a pasta descompactada "playwright-report-html-chrome", "playwright-report-html-firefox", etc
- Clicar 2 vezes sob o report "index.html" gerado e armazenado anteriormente no GitHub Actions e descompactado para ser aberto e verificado no navegador padrão no computador
🔎 Verificar os screenshots e vídeos 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 "playwright-screenshots-videos-chrome.zip", "playwright-screenshots-videos-firefox.zip", etc anteriormente
- Descompactar a pasta
- Acessar a pasta descompactada "playwright-screenshots-videos-chrome", "playwright-screenshots-videos-firefox", etc
- Na pasta descompactada "playwright-screenshots-videos-chrome", "playwright-screenshots-videos-firefox", etc acessada anteriormente, acessar "test-results > nome-arquivo-nome-describe-nome-cenario1-navegador1", "test-results > nome-arquivo-nome-describe-nome-cenariox-navegadorx", etc
- Clicar 2 vezes sob os screenshots gerados e armazenados anteriormente no GitHub Actions e descompactados para ser abertos e verificados no computador
- test-finished-x.png
. . .
- test-failed-x.png
Ex.1: "test-results > login-entrar-Funcionalidade-Tela-Login---Botão-cca59-te-é-seu-sistema-para-administrar-seu-ecommerce-chromium"
- test-finished-1.png
Ex.2: "test-results > login-entrar-Funcionalidade-Tela-Login---Botão-227d2-gem-×Email-é-obrigatório×Password-é-obrigatório-firefox"
- test-failed-1.png
- Na pasta descompactada "playwright-screenshots-videos-chrome", "playwright-screenshots-videos-firefox", etc acessada anteriormente, acessar "test-results > nome-arquivo-nome-describe-nome-cenario1-navegador1", "test-results > nome-arquivo-nome-describe-nome-cenariox-navegadorx", etc
- Clicar 2 vezes sob os vídeos gerados e armazenados anteriormente no GitHub Actions e descompactados para ser abertos e verificados no computador
- video.webm
Ex.1: "test-results > login-entrar-Funcionalidade-Tela-Login---Botão-cca59-te-é-seu-sistema-para-administrar-seu-ecommerce-chromium"
- video.webm
Ex.2: "test-results > login-entrar-Funcionalidade-Tela-Login---Botão-227d2-gem-×Email-é-obrigatório×Password-é-obrigatório-firefox"
- video.webm
⚠️ Antes de clonar ou executar esse projeto localmente no computador, é necessário ter os pré-requisitos e seguir as instruções abaixo 👇
- 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-web-front-serve-rest_playwright-javascript"
- 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-web-front-serve-rest_playwright-javascript.git
- Ou informar o comando abaixo para clonar este repositório via "SSH"
git clone [email protected]:AndressaKarla/testes-automatizados-web-front-serve-rest_playwright-javascript.git
- No gitbash aberto anteriormente, informar o comando abaixo para acessar o projeto "testes-automatizados-web-front-serve-rest_playwright-javascript" clonado anteriormente
cd "testes-automatizados-web-front-serve-rest_playwright-javascript"
Ex.:
C:\Projetos\Automação\testes-automatizados-web-front-serve-rest_playwright-javascript
- 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 "Playwright"
- 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
- Playwright Test for VSCode
- Microsoft
- Hyper Term Theme
- Fechar o VS Code
📑 Abrir o VS Code diretamente na pasta do projeto "testes-automatizados-web-front-serve-rest_playwright-javascript"
- No gitbash aberto anteriormente, informar o comando abaixo para abrir o VS Code diretamente na pasta do projeto "testes-automatizados-web-front-serve-rest_playwright-javascript"
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 "tests > support > 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
🚩 Executar os testes automatizados Web no navegador chrome em um ambiente de produção na interface gráfica do Playwright e Gerar os resultados dos testes no computador (test-results)
- Abrir uma janela do "Windows Explorer"
- Acessar o diretório onde foi clonado o projeto "testes-automatizados-web-front-serve-rest_playwright-javascript"
- Copiar esse diretório
- Abrir um novo gitbash
- Informar o comando abaixo para acessar o projeto "testes-automatizados-web-front-serve-rest_playwright-javascript"
cd "<diretório\copiado\anteriormente>"
Ex.:
cd "C:\Projetos\Automação\testes-automatizados-web-front-serve-rest_playwright-javascript"
- Informar o comando abaixo para abrir a interface gráfica do Playwright
npm run pw:ui
- NÃO fechar esse gitbash
- Na interface gráfica do Playwright, em "Filter", clicar no ícone à esquerda ">" para expandir
- Marcar a opção "chromium" e desmarcar outra opção que esteja marcada
- Em "TESTS" > "... spec.js", ir clicando no ícone à esquerda ">" para ir expandindo
- Em "TESTS", clicar na opção verde "Run all" para executar todas as funcionalidades e/ou cenários do projeto no navegador chrome na interface gráfica do Playwright e Gerar os resultados dos testes no computador (test-results)
- Após executar os testes, fechar a interface gráfica do Playwright
- Fechar esse gitbash
🚩 Ou executar os testes automatizados Web no navegador chrome em um ambiente de produção na interface gráfica e Gerar os resultados dos testes no computador (test-results, playwright-report)
- Abrir uma janela do "Windows Explorer"
- Acessar o diretório onde foi clonado o projeto "testes-automatizados-web-front-serve-rest_playwright-javascript"
- Copiar esse diretório
- Abrir um novo gitbash
- Informar o comando abaixo para acessar o projeto "testes-automatizados-web-front-serve-rest_playwright-javascript"
cd "<diretório\copiado\anteriormente>"
Ex.:
cd "C:\Projetos\Automação\testes-automatizados-web-front-serve-rest_playwright-javascript"
- Informar o comando abaixo para executar todas as funcionalidades e/ou cenários do projeto no navegador chrome em um ambiente de produção na interface gráfica e Gerar os resultados dos testes no computador (test-results, playwright-report):
npm run test:headed
- Após executar os testes, fechar esse gitbash
🚩 Ou executar os testes automatizados Web no navegador chrome em modo headless (2º plano) em um ambiente de produção e Gerar os resultados dos testes no computador (test-results, playwright-report)
- Abrir uma janela do "Windows Explorer"
- Acessar o diretório onde foi clonado o projeto "testes-automatizados-web-front-serve-rest_playwright-javascript"
- Copiar esse diretório
- Abrir um novo gitbash
- Informar o comando abaixo para acessar o projeto "testes-automatizados-web-front-serve-rest_playwright-javascript"
cd "<diretório\copiado\anteriormente>"
Ex.:
cd "C:\Projetos\Automação\testes-automatizados-web-front-serve-rest_playwright-javascript"
- 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 (mesmo comando que é utilizado no "Passo 6" do job "playwright-chrome" da "Pipeline Testes Automatizados Web Front ServeRest Playwright" em ".github > workflows > workflow-testes-automatizados-web-front-serve-rest-playwright.yml" no GitHub Actions) e Gerar os resultados dos testes no computador (test-results, playwright-report):
npm run test
- Após executar os testes, fechar esse gitbash
🚩 Executar os testes automatizados Web no navegador firefox em um ambiente de produção na interface gráfica do Playwright e Gerar os resultados dos testes no computador (test-results)
- Abrir uma janela do "Windows Explorer"
- Acessar o diretório onde foi clonado o projeto "testes-automatizados-web-front-serve-rest_playwright-javascript"
- Copiar esse diretório
- Abrir um novo gitbash
- Informar o comando abaixo para acessar o projeto "testes-automatizados-web-front-serve-rest_playwright-javascript"
cd "<diretório\copiado\anteriormente>"
Ex.:
cd "C:\Projetos\Automação\testes-automatizados-web-front-serve-rest_playwright-javascript"
- Informar o comando abaixo para abrir a interface gráfica do Playwright
npm run pw:ui
- NÃO fechar esse gitbash
- Na interface gráfica do Playwright, em "Filter", clicar no ícone à esquerda ">" para expandir
- Marcar a opção "firefox" e desmarcar outra opção que esteja marcada
- Em "TESTS" > "... spec.js", ir clicando no ícone à esquerda ">" para ir expandindo
- Em "TESTS", clicar na opção verde "Run all" para executar todas as funcionalidades e/ou cenários do projeto no navegador firefox na interface gráfica do Playwright e Gerar os resultados dos testes no computador (test-results)
- Após executar os testes, fechar a interface gráfica do Playwright
- Fechar esse gitbash
🚩 Ou executar os testes automatizados Web no navegador firefox em um ambiente de produção na interface gráfica e Gerar os resultados dos testes no computador (test-results, playwright-report)
- Abrir uma janela do "Windows Explorer"
- Acessar o diretório onde foi clonado o projeto "testes-automatizados-web-front-serve-rest_playwright-javascript"
- Copiar esse diretório
- Abrir um novo gitbash
- Informar o comando abaixo para acessar o projeto "testes-automatizados-web-front-serve-rest_playwright-javascript"
cd "<diretório\copiado\anteriormente>"
Ex.:
cd "C:\Projetos\Automação\testes-automatizados-web-front-serve-rest_playwright-javascript"
- Informar o comando abaixo para executar todas as funcionalidades e/ou cenários do projeto no navegador firefox em um ambiente de produção na interface gráfica e Gerar os resultados dos testes no computador (test-results, playwright-report):
npm run test:headed:ff
- Após executar os testes, fechar esse gitbash
🚩 Ou executar os testes automatizados Web no navegador firefox em modo headless (2º plano) em um ambiente de produção e Gerar os resultados dos testes no computador (test-results, playwright-report)
- Abrir uma janela do "Windows Explorer"
- Acessar o diretório onde foi clonado o projeto "testes-automatizados-web-front-serve-rest_playwright-javascript"
- Copiar esse diretório
- Abrir um novo gitbash
- Informar o comando abaixo para acessar o projeto "testes-automatizados-web-front-serve-rest_playwright-javascript"
cd "<diretório\copiado\anteriormente>"
Ex.:
cd "C:\Projetos\Automação\testes-automatizados-web-front-serve-rest_playwright-javascript"
- 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 (mesmo comando que é utilizado no "Passo 6" do job "playwright-firefox" da "Pipeline Testes Automatizados Web Front ServeRest Playwright" em ".github > workflows > workflow-testes-automatizados-web-front-serve-rest-playwright.yml" no GitHub Actions) e Gerar os resultados dos testes no computador (test-results, playwright-report):
npm run test:ff
- Após executar os testes, fechar esse gitbash
- No VS Code aberto anteriormente, acessar "playwright-report > index.html"
- Clicar com botão direito do mouse sob o report "index.html" > "Reveal in File Explorer"
- Na janela do "Windows Explorer" aberta automaticamente, clicar 2 vezes sob o report "index.html" gerado e armazenado anteriormente no computador para ser aberto e verificado no navegador padrão
- No VS Code aberto anteriormente, acessar "test-results > nome-arquivo-nome-describe-nome-cenario1-navegador1", "test-results > nome-arquivo-nome-describe-nome-cenariox-navegadorx", etc
- Clicar 2 vezes sob os screenshots
- test-finished-x.png
. . .
- test-failed-x.png
Ex.1: "test-results > login-entrar-Funcionalidade-Tela-Login---Botão-cca59-te-é-seu-sistema-para-administrar-seu-ecommerce-chromium"
- test-finished-1.png
Ex.2: "test-results > login-entrar-Funcionalidade-Tela-Login---Botão-227d2-gem-×Email-é-obrigatório×Password-é-obrigatório-firefox"
- test-failed-1.png
- No VS Code aberto anteriormente, acessar "test-results > nome-arquivo-nome-describe-nome-cenario1-navegador1", "test-results > nome-arquivo-nome-describe-nome-cenariox-navegadorx", etc
- Clicar 2 vezes sob os vídeos
- video.webm
Ex.1: "test-results > login-entrar-Funcionalidade-Tela-Login---Botão-cca59-te-é-seu-sistema-para-administrar-seu-ecommerce-chromium"
- video.webm
Ex.2: "test-results > login-entrar-Funcionalidade-Tela-Login---Botão-227d2-gem-×Email-é-obrigatório×Password-é-obrigatório-firefox"
- video.webm
