armandofc1/cypresse2eblogangular

Utilizando o Cypress E2E para testar um Blog em Angular

💻 Utilizando o Cypress E2E para testar um Blog em Angular

---

⚔ Desafio

Desafio feito no Bootcamp da Digital Innovation One.

Esse projeto tem o desafio de construir um teste E2E com Cypress para um Blog em Angular.

O blog utilizado foi o angular-realworld-example-app.

---

     Projeto para teste: Angular Real World Example App

git clone https://github.com/gothinkster/angular-realworld-example-app

cd angular-realworld-example-app

npm install

npm run start
http://localhost:4200/

     Aqui temos um aplicativo Angular contendo exemplos "reais" (CRUD, autenticação, etc) de acordo com a especificação para exemplos RealWord.
     Vamos adicionar o Cypress!

---

Instalação

     Abra outro terminal. Na pasta/angular-realworld-example-app/ execute:

npm install cypress --save-dev

npx cypress -v

     Caso tenha problemas com Proxy ou Firewall, baixe o binário e configure a variável de ambiente antes de instalar:

set CYPRESS_INSTALL_BINARY=C:\cypress.zip

npm install cypress --save-dev --verbose

---

Removendo o Protactor

     Remova o pacote:

npm uninstall protactor --save-dev

     Exclua a pasta /e2e/
     Do package.json, remova a linha: "e2e": "ng e2e"

---

Cypress Test Runner

npx cypress open

     O comando "cypress open", além de abrir o Cypress Test Runner, cria a pasta inicial /cypress/ e o arquivo de configuração /cypress.json
     E já vem com /examples/ dos principais comandos Cypress.

---

Primeiro Teste

     cypress/integrations/exemplo.spec.js

describe('Primeiro Teste', () => {
  it('Exemplos Cypress', () => {
    cy.visit('https://example.cypress.io')
    expect(true).to.equal(true)
  })
})

     describe and it come from Mocha
     expect comes from Chai

---

Como Rodar

     Para executar todos os testes da pasta /cypress/integration/:

npx cypress run

     Para executar somente um roteiro:

npx cypress run --spec "cypress/integration/examples/example.spec.js"

     Para abrir a interface do Cypress Test Runner:

npx cypress open

---

Configuração

     cypress.json

{
  "baseUrl": "http://localhost:4200",
  "pageLoadTimeout": 30000,
  "defaultCommandTimeOut": 30000,
  "viewportHeight": 800,
  "viewportWidth": 500,
  "retries": 3
}

---

🛠️ Tecnologias Utilizadas

• Cypress;
• Angular;
• JavaScript;

⏬ Como baixar o projeto

• OBS: É necessário ter o git instalado em sua máquina
• Executar o Seguinte comando no seu Terminal ou no CMD:

        git clone https://github.com/armandofc1/cypressE2EBlogAngular.git

📚 Referências

https://github.com/gothinkster/angular-realworld-example-app

⌨️ Autor

_{Armando Costa}

Contatos