Projeto automação do login na tela de emprestimo

.gitignore

@@ -49,6 +49,9 @@ go.work.sum
 # env file
 .env
 
+#screenshots
+.png
+
 .vscode/
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 

README.md

@@ -1,79 +1,62 @@
-# TESTE QA SENIOR
-### Objetivo
-Avaliar a habilidade do candidato em configurar um ambiente de testes, utilizar Git e aplicar conhecimentos básicos de Cypress e Javascript.
-
-### Cenário
-**Aplicativo**: Acessar a nossa landing page - https://meus-emprestimos.picpay.com/ (poderá ser via navegador) com um formulário de login.
-
-### Tarefa
-- Criar um teste automatizado que:
-- Abra o navegador a sua escolha.
-- Abre o site, navegue na área não logada;
-- Preencha o formulário de cadastro;
-- Clique no botão de login.
-- Verifique se o usuário foi redirecionado para a tela inicial ou tela de erro.
-- Gerar evidências das navegações.
-
-### Instruções para o Candidato
-- Fork do repositório: 
-O candidato deverá criar um fork de um repositório GitHub com o projeto do aplicativo e o framework de testes (Appium ou Cypress) já configurado.
-
-- Configuração do ambiente: 
-O candidato deverá configurar seu ambiente de desenvolvimento com as ferramentas necessárias para executar os testes (Node.js, npm, etc.).
-
-- Criação do teste: 
-O candidato deverá criar um novo arquivo de teste e implementar o cenário descrito acima.
-
-- Execução do teste: O candidato deverá executar o teste e verificar se ele passa.
-
-- Commit e push: 
-O candidato deverá commitar as alterações e fazer um push para o seu fork.
-
-- Envio do link: 
-O candidato deverá enviar o link do seu fork para que a equipe possa avaliar o código.
-
-- Repositório Base:
-Para simplificar a avaliação, você pode criar um repositório base no GitHub com o seguinte conteúdo:
-
-- Framework de testes:
-Uma estrutura básica de testes com Appium ou Cypress, incluindo configurações e exemplos de testes.
-
-- README:
-Um arquivo README com instruções detalhadas sobre como configurar o ambiente, executar os testes e enviar a solução.
-
-## Teste Prático - Engenheiro de Qualidade Senior
-### Instruções
-
-1. **Fork este repositório:** Clique no botão "Fork" no canto superior direito.
-2. **Clone o seu fork:** `git clone https://github.com/seu_usuario/teste-pratico.git`
-3. **Instale as dependências:** `npm install`
-4. **Crie um novo arquivo de teste:** `testes/login_test.js` (ou similar)
-5. **Implemente o teste:** Siga as instruções acima para criar o teste automatizado.
-6. **Execute os testes:** `npm test`
-7. **Faça um commit e push:**
-   ```bash
-   git add .
-   git commit -m "Implementação do teste de login"
-   git push origin main
-Envie o link do seu fork: Envie o link do seu repositório para a equipe de recrutamento.
-Estrutura do Projeto
-testes: Contém os arquivos de teste.
-package.json: Lista as dependências do projeto.
-
-
-
-Dicas
-- Utilize os comentários para explicar o seu código.
-- Siga as boas práticas de desenvolvimento de testes.
-- Divida o teste em etapas menores para facilitar a leitura e a manutenção.
-- Avaliação:
-- A avaliação do teste prático poderá considerar os seguintes aspectos:
-- Correção do código: O teste executa corretamente o cenário proposto?
-- Qualidade do código: O código está bem estruturado, comentado e segue boas práticas?
-- Uso do framework: O candidato demonstra conhecimento do framework escolhido (Appium ou Cypress)?
-- Criatividade: O candidato apresentou alguma solução inovadora ou diferente?
-- Observações:
-- Flexibilidade: Adapte o nível de complexidade do teste de acordo com o perfil do candidato e a experiência desejada.
-- Personalização: Você pode adicionar outros cenários de teste para avaliar diferentes habilidades (por exemplo, testes de API, testes de performance).
-- Ferramentas: Utilize ferramentas de code review para facilitar a avaliação do código.
-- Com este teste prático, você poderá avaliar de forma mais precisa as habilidades técnicas e a capacidade de resolução de problemas dos candidatos.
+# Desafio Quality Assurance Sênior
+   Este projeto utiliza o framework de automação Cypress para realizar testes automatizados na página de login de empréstimos do PicPay (https://meus-emprestimos.picpay.com/). O objetivo é validar alguns cenários como campo obrigatório e mensagens de erro.
+
+## Pré requisitos
+   Node.js: Versão >= v18 (https://nodejs.org/en/download)
+
+   Git: Para clonar o repositório (https://git-scm.com/downloads)
+
+## Configuração do Projeto
+   1. *Clone o repositório*
+      ```
+      clone --branch challenge-qa https://github.com/AlanYasuhiro/desafio-tecnico.git
+      ```
+   2. *Acesse o diretório desafio-tecnico*
+      ```
+      cd desafio-tecnico
+      ```
+   3. *Instale as dependências*
+      ```
+      npm install
+      ```    
+## Executando o Projeto
+   *Modo Headless(sem interface gráfica)*
+   ```
+   npx cypress run html-report
+   ```
+
+## Estrutura do projeto
+   ```
+   |-- cypress/
+   |   |-- e2e/              # Testes de ponta a ponta
+   |   |   |-- login.cy.js   # Arquivo com os testes do login
+   |   |-- page/
+   |   |   |-- loginPage.js  # Arquivo com as ações feitas nos testes      
+   |   |-- reports/          # Relatório e screenshots gerados
+   |   |   |-- screenshots/  # Captura de tela dos testes
+   |   |   |-- html/         # Relatório em HTML com os resultados   
+   |   |-- support/          # Arquivos de suporte e comandos personalizados
+   |   |   |-- commands.js   # Arquivo com comandos personalizados
+   |   |   |-- e2e.js        # Arquivo com configurações dos testes e2e
+   |
+   |-- cypress.config.js     # Configurações do Cypress
+   |-- package.json          # Dependências e scripts do projeto
+   |-- README.md             # Informações do projeto
+   ```
+
+ ## Ferramentas
+   Cypress: Framework de testes
+
+   Cypress Mochawesome Reporter: Plugin para gerar relatórios
+
+
+ ## Relatório dos testes executados
+   Após executar os testes, um relatório em HTML será gerado na pasta cypress/reports/html. O nome do arquivo segue o padrão:
+```
+login-report-YYYY-MM-DDTHH:MM:SS.html
+```
+Exemplo:
+```
+login-report-2025-01-19T075118-0300.html
+```
+Para visualizar o relatório, basta abrir o arquivo no navegador.

cypress.config.js

@@ -0,0 +1,23 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+
+  e2e: {
+    baseUrl: 'https://meus-emprestimos.picpay.com/',
+    screenshotsFolder: "cypress/reports/screenshots",
+    reporter: "cypress-mochawesome-reporter",
+    reporterOptions: {
+      reportFilename: "[name]-report-[datetime]",
+      overwrite: false,
+      charts: true,
+      reportPageTitle: 'Pagina Login',
+      embeddedScreenshots: true,
+      inlineAssets: true,
+      saveAllAttempts: false,
+    },
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+      require('cypress-mochawesome-reporter/plugin')(on);
+    },
+  },
+});

cypress/e2e/login.cy.js

@@ -0,0 +1,23 @@
+/// <reference types="cypress"/>
+import loginPage from '../page/loginPage'
+
+describe('Teste pratico para automatizar a pagina de emprestimo do picpay',() => {
+
+    beforeEach(() => {
+        loginPage.openPage()
+    })
+
+    it('Login com CPF incorreto', () => {
+        loginPage.validarPaginaEmprestimo() // Valida alguns elementos se está na página certa
+        loginPage.preencherCpf('00000000000') 
+        loginPage.validarMensagemErro('*CPF Inválido') 
+    })
+
+
+    it('Login sem preencher campo obrigatório', () => {
+        loginPage.validarPaginaEmprestimo() // Valida alguns elementos se está na página certa
+        loginPage.validarCampoObrigatorio() // Valida o campo 'Acesse com seu CPF' como obrigatório
+        loginPage.validarMensagemErro('*Campo obrigatório')
+    })
+})
+

cypress/page/loginPage.js

@@ -0,0 +1,28 @@
+class loginPage{
+    openPage(){
+        cy.visit('/')
+        cy.screenshot('Site empresitmo picpay')
+    }
+
+    validarPaginaEmprestimo(){
+        cy.get('.gap-2 > .font-bold').contains('Gerencie seus contratos')
+        cy.get('#mat-input-0').should('be.visible').and('exist')
+    }
+
+    preencherCpf(cpf){
+        cy.get('#mat-input-0').type(cpf)
+        cy.screenshot('preenchendo cpf')
+    }
+
+    validarMensagemErro(mensagem){
+        cy.get('#mat-mdc-error-0').should('contain', mensagem)
+        cy.screenshot('mensagem erro ', mensagem)
+    }
+
+    validarCampoObrigatorio(){
+        cy.get('#mat-input-0').click()
+        cy.get('.bg-primary-500').click()
+    }
+}
+
+module.exports = new loginPage()