Skip to content

Commit

Permalink
Realizando e adaptando mais algumas refatorações sugeridas no PR 1 da…
Browse files Browse the repository at this point in the history
… live Refatorando um projeto de testes ao vivo! do Talking About Testing 11.02.2024
  • Loading branch information
AndressaKarla committed Mar 23, 2024
1 parent 2f6e671 commit 38d02bd
Show file tree
Hide file tree
Showing 11 changed files with 240 additions and 98 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,10 @@ jobs:
- name: Passo 1 - Obter cópia do código-fonte do repositório
uses: actions/checkout@v3.3.0

- name: Passo 2 - Redirecionar o conteúdo de "secrets.LOGIN_ENV" para o arquivo "login.json"
- name: Passo 2 - Redirecionar os conteúdos de "secrets.LOGIN_ENV", "secrets.USUARIO_ENV", etc, para os arquivos "login.json", "usuario.json", etc
run: |
echo '${{ secrets.LOGIN_ENV }}' > ./cypress/fixtures/login.json
echo '${{ secrets.USUARIO_ENV }}' > ./cypress/fixtures/usuario.json
- name: Passo 3 - Instalar dependências, Executar testes em modo headless (2º plano) em um ambiente de desenvolvimento e Gerar os resultados dos testes
uses: cypress-io/github-action@v5.0.8
Expand Down
64 changes: 48 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,19 @@
# :information_source: Introdução
Esse projeto "testes-automatizados-e2e-front-serve-rest_cypress" é executado em um ambiente de desenvolvimento no ["front"](https://front.serverest.dev) e na ["API REST"](https://serverest.dev) do ["ServeRest"](https://github.com/ServeRest) que simula uma loja virtual, com o objetivo de me aprofundar um pouco mais nos estudos sobre testes automatizados e2e (ponta a ponta) em Cypress.

- Documentações de referência
- Cypress:
- https://www.cypress.io/
- https://example.cypress.io/commands/actions
- https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests#Folder-Structure

---
# :dart: Executar testes em um ambiente de desenvolvimento e Gerar os resultados dos testes no GitHub Actions

## :triangular_flag_on_post: Executar os testes automatizados e2e (ponta a ponta) 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 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 em modo headless (2° plano) no GitHub Actions
- 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 em modo headless (2° plano) no GitHub Actions [com os conteúdos de "secrets.LOGIN_ENV", "secrets.USUARIO_ENV", etc (baseado nos arquivos ["login.example.json"](https://github.com/AndressaKarla/testes-automatizados-e2e-front-serve-rest_cypress/blob/main/cypress/fixtures/login.example.json), ["usuario.example.json"](https://github.com/AndressaKarla/testes-automatizados-e2e-front-serve-rest_cypress/blob/main/cypress/fixtures/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 "login.json", "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"
Expand Down Expand Up @@ -53,7 +59,22 @@ Funcionalidade Tela Login - Botão Entrar -- Esquema do Cenário Validar Login u
```

---
# Antes de clonar ou executar esse projeto localmente no computador, é necessário seguir as instruções abaixo :point_down:
# Antes de clonar ou executar esse projeto localmente no computador, é necessário ter os pré-requisitos e seguir as instruções abaixo :point_down:

## :hammer_and_wrench: Sistema Operacional
- 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)


## :hammer_and_wrench: Hardware
- Mínimo de 2 CPUs para rodar o Cypress
- 1 CPU adicional se a gravação de vídeo estiver ativada


## :hammer_and_wrench: Memória RAM
- 8 GB ou superior para execuções de teste mais longos


## :hammer_and_wrench: Janela do "Windows Explorer" > aba "Exibir" e marcar algumas opções
- Abrir uma janela do "Windows Explorer"
Expand Down Expand Up @@ -158,14 +179,33 @@ npm install --force
- 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
- Material Icon Theme
- Philipp Kief
- Clicar na opção "Material Icon Theme" apresentada para habilitar a extensão

- Fechar o VS Code
## :bookmark_tabs: Abrir o VS Code diretamente na pasta do projeto "testes-automatizados-e2e-front-serve-rest_cypress"
- No cmder 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 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 ...."

## :hammer_and_wrench: Criar arquivos "login.json", "usuario.json", etc, informando os dados com base nos arquivos "login.example.json", "usuario.example.json", etc
- No VS Code aberto anteriormente, acessar "cypress > fixtures"
- Criar o arquivo "login.json"
- Informar os dados com base no arquivo ["login.example.json"](https://github.com/AndressaKarla/testes-automatizados-e2e-front-serve-rest_cypress/blob/main/cypress/fixtures/login.example.json)
- Salvar o arquivo "login.json" com os dados informados anteriormente
- Criar o arquivo "usuario.json"
- Informar os dados com base no arquivo ["usuario.example.json"](https://github.com/AndressaKarla/testes-automatizados-e2e-front-serve-rest_cypress/blob/main/cypress/fixtures/usuario.example.json)
- Salvar o arquivo "usuario.json" com os dados informados anteriormente

---
# :dart: Executar testes em um ambiente de desenvolvimento e Gerar os resultados dos testes no computador
Expand All @@ -183,16 +223,16 @@ Ex.:
```
cd "C:\Users\usuario\Desktop\testes-automatizados-e2e-front-serve-rest_cypress"
```
- Informar o comando abaixo para abrir a interface gráfica do Cypress
- Informar o comando abaixo para abrir a interface gráfica do Cypress
```
npx cypress open
npm run cy: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-e2e-front-serve-rest_cypress" > "Specs"> "E2E specs" > "cypress\e2e", clicar em "login-entrar", etc
- Em "testes-automatizados-e2e-front-serve-rest_cypress" > "Specs"> "E2E specs" > "cypress\e2e", clicar em "login-entrar", "login-cadastre-se", etc


## :triangular_flag_on_post: Ou executar os testes automatizados e2e (ponta a ponta) no navegador chrome em modo headless (2° plano) e Gerar os resultados dos testes no computador
Expand All @@ -208,22 +248,14 @@ Ex.:
```
cd "C:\Users\usuario\Desktop\testes-automatizados-e2e-front-serve-rest_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 que é utilizado no "Passo 2" da "Pipeline Testes Automatizados E2E (Ponta a Ponta) Front ServeRest Cypress" em ".github > workflows > [workflow-testes-automatizados-e2e-front-serve-rest-cypress.yml](https://github.com/AndressaKarla/testes-automatizados-e2e-front-serve-rest_cypress/blob/main/.github/workflows/workflow-testes-automatizados-e2e-front-serve-rest-cypress.yml)" no GitHub Actions) e Gerar os resultados dos testes no computador:
- 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 E2E (Ponta a Ponta) Front ServeRest Cypress" em ".github > workflows > [workflow-testes-automatizados-e2e-front-serve-rest-cypress.yml](https://github.com/AndressaKarla/testes-automatizados-e2e-front-serve-rest_cypress/blob/main/.github/workflows/workflow-testes-automatizados-e2e-front-serve-rest-cypress.yml)" no GitHub Actions) e Gerar os resultados dos testes no computador:
```
npx cypress run --browser chrome
npm run test
```

---
# Verificar os resultados das execuções dos testes automatizados e2e (ponta a ponta) no computador :female_detective:

## :bookmark_tabs: Abrir o VS Code diretamente na pasta do projeto "testes-automatizados-e2e-front-serve-rest_cypress"
- No cmder aberto anteriormente, informar o comando abaixo para abrir o VS Code diretamente na pasta do projeto "testes-automatizados-e2e-front-serve-rest_cypress"
```
code .
```
- 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 ...."

## :bookmark_tabs: Vídeos no computador
- No VS Code aberto anteriormente, acessar "cypress > videos"

Expand Down
7 changes: 4 additions & 3 deletions cypress.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,9 @@ module.exports = defineConfig({
const environment = config.env.environment || 'dev'
config.env = require(`./cypress/support/environments/${environment}.json`)
config.baseUrl = config.env.baseUrl

const baseUri = config.env.baseUri

return config
},
},
}
}
})
55 changes: 55 additions & 0 deletions cypress/e2e/login-cadastre-se.cy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
/// <reference types="cypress" />
import seletores from '../support/seletores'

/*
Funcionalidade: Tela Login - Opção Cadastre-se
Como usuário da Tela Login do front do ServeRest
Quero clicar na Opção Cadastre-se
Para validar o comportamento da funcionalidade
*/

describe('Funcionalidade: Tela Login - Opção Cadastre-se', () => {
before(() => {
cy.fixture('usuario').then((usuarioFixture) => {
cy.obterPorEmailEexcluirUsuarioPorId(usuarioFixture.admin.emailValido)
})
})

context('Dado que eu acesse a tela de Login do front do ServeRest', () => {
context('E que eu clique na opção Cadastre-se', () => {
context('E que eu esteja na tela Cadastro', () => {
beforeEach(() => {
cy.visit('/login')

cy.get(seletores.LOGIN.OPCAO_CADASTRE_SE)
.should('be.visible')
.click()

cy.url().should('be.equal', `${Cypress.config('baseUrl')}/cadastrarusuarios`)
})

context('Esquema do Cenário: Validar Cadastro Administrador', () => {
const exemplos = [
{ nome: 'nomeValido1', email: 'emailValido', senha: 'senhaValida1', mensagem: 'Cadastro realizado com sucesso' },
{ nome: 'nomeInvalidoVazio', email: 'emailInvalidoVazio', senha: 'senhaInvalidaVazia', mensagem: '×Nome é obrigatório×Email é obrigatório×Password é obrigatório' },
{ nome: 'nomeValido2', email: 'emailInvalidoDominioSemPonto', senha: 'senhaValida2', mensagem: 'Email deve ser um email válido' },
]

exemplos.forEach((ex) => {
context(`Quando eu informar os campos ${ex.nome}, ${ex.email}, ${ex.senha} e opcão Cadastrar como administrador`, () => {
it(`Então na tela de Cadastro deverá apresentar a mensagem ${ex.mensagem}`, () => {
cy.fixture('usuario').then((usuarioFixture) => {
cy.realizarLoginOpcaoCadastreSe(usuarioFixture.admin[ex.nome], usuarioFixture.admin[ex.email], usuarioFixture.admin[ex.senha])
})

cy.get(seletores.LOGIN.FORM)
.should('be.visible')
.and('contain', ex.mensagem)
})
})
})
})
})
})
})
})
18 changes: 12 additions & 6 deletions cypress/e2e/login-entrar.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,15 @@ import seletores from '../support/seletores'
Como usuário da Tela Login do front do ServeRest
Quero clicar no Botão Entrar
Para validar o comportamento da funcionalidade
*/
*/

describe('Funcionalidade: Tela Login - Botão Entrar', () => {
before(() => {
cy.fixture('usuario').then((usuarioFixture) => {
cy.obterPorEmailEincluirUsuarioAdmin(usuarioFixture.adminValido.nomeValido, usuarioFixture.adminValido.emailValido, usuarioFixture.adminValido.senhaValida)
})
})

context('Dado que eu acesse a tela de Login do front do ServeRest', () => {
beforeEach(() => {
cy.visit('/login')
Expand All @@ -23,15 +29,15 @@ describe('Funcionalidade: Tela Login - Botão Entrar', () => {
})

it('Então deverá apresentar a tela Home com o texto Bem Vindo e com o texto Este é seu sistema para administrar seu ecommerce', () => {
cy.url().should('include', `${Cypress.config('baseUrl')}/admin/home`)
cy.url().should('be.equal', `${Cypress.config('baseUrl')}/admin/home`)

cy.get(seletores.HOME.TEXTO_BEM_VINDO)
.should('be.visible')
.should('contain', 'Bem Vindo')
.and('contain', 'Bem Vindo')

cy.get(seletores.HOME.TEXTO_SISTEMA_ADMINISTRAR_ECOMMERCE)
.should('be.visible')
.should('contain', 'Este é seu sistema para administrar seu ecommerce.')
.and('contain', 'Este é seu sistema para administrar seu ecommerce.')
})
})
})
Expand All @@ -50,9 +56,9 @@ describe('Funcionalidade: Tela Login - Botão Entrar', () => {
cy.realizarLoginBotaoEntrar(loginFixture.invalido[ex.email], loginFixture.invalido[ex.senha])
})

cy.get(seletores.LOGIN.FORM_LOGIN)
cy.get(seletores.LOGIN.FORM)
.should('be.visible')
.should('contain', ex.mensagem)
.and('contain', ex.mensagem)
})
})
})
Expand Down
8 changes: 4 additions & 4 deletions cypress/fixtures/login.example.json
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
{
"adminValido": {
"emailValido": "informar-email-usuario-admin-valido@dominio.com",
"senhaValida": "informar-senha-usuario-admin-valido"
"emailValido": "informar-mesmo-email-usuario-admin-valido-fixture-usuario@qa.com",
"senhaValida": "informar-mesma-senha-usuario-admin-valido-fixture-usuario"
},
"invalido": {
"emailInvalidoVazio": "deixar-apenas-as-aspas-duplas",
"senhaInvalidaVazia": "deixar-apenas-as-aspas-duplas",
"emailInvalidoDominioSemPonto": "informar-email-usuario-invalido-dominio-sem-ponto@dominio",
"emailInvalidoDominioSemPonto": "informar-email-usuario-invalido-dominio-sem-ponto@outlook",
"senhaValida": "informar-senha-usuario-valido",
"emailInvalidoNaoCadastrado": "informar-email-usuario-invalido-nao-cadastrado@dominio.com",
"emailInvalidoNaoCadastrado": "informar-email-usuario-invalido-nao-cadastrado@gmail.com",
"senhaInvalidaNaoCadastrada": "informar-senha-usuario-invalido-nao-cadastrada"
}
}
18 changes: 18 additions & 0 deletions cypress/fixtures/usuario.example.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{
"adminValido": {
"nomeValido": "informar-nome-usuario-admin-valido",
"emailValido": "informar-mesmo-email-usuario-admin-valido-fixture-login@qa.com",
"senhaValida": "informar-mesma-senha-usuario-admin-valido-fixture-login"
},
"admin": {
"nomeValido1": "informar-outro-nome-usuario-admin-valido",
"emailValido": "informar-outro-email-usuario-admin-valido@gmail.com",
"senhaValida1": "informar-outra-senha-usuario-admin-valido",
"nomeInvalidoVazio": "deixar-apenas-as-aspas-duplas",
"emailInvalidoVazio": "deixar-apenas-as-aspas-duplas",
"senhaInvalidaVazia": "deixar-apenas-as-aspas-duplas",
"nomeValido2": "informar-outro-nome-usuario-admin-valido",
"emailInvalidoDominioSemPonto": "informar-email-usuario-admin-invalido-dominio-sem-ponto@yahoo",
"senhaValida2": "informar-outra-senha-usuario-admin-valido"
}
}
Loading

0 comments on commit 38d02bd

Please sign in to comment.