Break the app on purpose

.github/workflows/ci.yml

@@ -0,0 +1,12 @@
+name: End-to-end tests 🧪
+on: [push]
+jobs:
+  cypress-run:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      # Install NPM dependencies, cache them correctly
+      # and run all Cypress tests
+      - name: Cypress run
+        uses: cypress-io/github-action@v2

README.md

@@ -1,29 +1,37 @@
-# Testes automatizados com Cypress - Básico
+# cypress-basico-v2
 
-👋 Seja bem-vindo(a)!
+Sample project for the basic course of the Talking About Testing online school.
 
-É muito bom tê-lo(a) aqui. Tenho certeza que você vai adorar este curso. ❤️
+## Pre-requirements
 
-## O que você vai aprender
+It is required to have Node.js and npm installed to run this project.
 
-Durante o curso de testes automatizados com Cypress (básico), você vai aprender:
+> I used versions `v16.13.2` and `8.3.2` of Node.js and npm, respectively. I suggest you use the same or later versions.
 
-- Como configurar um projeto Cypress do zero
-- Como visitar páginas locais e remotas
-- Como lidar com os elementos mais comuns encontrados em aplicações web
-- Como testar _upload_ de arquivos
-- Como realizar as mais diversas verificações de resultados esperados
-- Como criar comandos customizados
-- Como lidar com links que abrem em outra aba do navegador
-- Como rodar testes simulando as dimensões de um dispositivo móvel
-- Como resolver os mesmos problemas de diferentes formas, conhecendo a [API do Cypress](https://docs.cypress.io/api/table-of-contents)
-- Como executar os testes em um _pipeline_ de integração contínua sempre que mudanças ocorrerem no código da aplicação (ou dos testes)
-- Como criar uma documentação mínima para seu projeto de testes automatizados
+## Installation
 
-## Vamos começar?
+Run `npm install` (or `npm i` for the short version) to install the dev dependencies.
 
-Vá para a seção [estrutura do curso](./lessons/_course-structure_.md).
+## Tests
+
+You can run the tests simulating a desktop or mobile viewport
+
+### Desktop
+
+Run `npm test` (or `npm t` for the short version) to run the test in headless mode on a desktop viewport.
+
+Or, run `npm run cy:open` to open Cypress in interactive mode on a desktop viewport.
+
+### Mobile
+
+Run `npm run test:mobile` to run the test in headless mode on a mobile viewport.
+
+Or, run `npm run cy:open:mobile` to open Cypress in interactive mode on a mobile viewport.
+
+## Support this project
+
+If you want to support this project, leave a ⭐.
 
 ___
 
-Este é mais um curso da [**Escola Talking About Testing**](https://udemy.com/user/walmyr).
+This project was created with 💚 by [Walmyr](https://walmyr.dev).

cypress.json

@@ -0,0 +1,5 @@
+{
+  "pluginsFile": false,
+  "viewportHeight": 880,
+  "viewportWidth": 1280
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/CAC-TAT.spec.js

@@ -0,0 +1,209 @@
+/// <reference types="Cypress" />
+
+describe ('Central de Atendimento ao Cliente TAT', function() {
+    beforeEach(function(){
+        cy.visit('./src/index.html')
+    })
+
+    it('verifica o título da aplicação', function() {
+        cy.title().should('be.equal', 'Central de Atendimento ao Cliente TAT')
+    })
+
+    it('preenche os campos obrigatórios e envia o formulário', function() {
+        cy.get('#firstName').type('Gabriella')
+        cy.get('#lastName').type('Santos')
+        cy.get('#email').type('[email protected]')
+        cy.get('#open-text-area').type('teste')
+        cy.get('button[type="submit"]').click()
+        cy.get('.success').should('be.visible')
+    })
+
+    //Alternativa para escrever textos longos sem perder tanto tempo no teste, assim pode-se sobrescrever para diminuir o valor do delay
+    it('Exc.1- preenche os campos obrigatórios e envia o formulário', function() {
+        const longtext='teste,testes,teste,teste,teste,teste,teste,teste,teste'
+        cy.get('#firstName').type('Gabriella')
+        cy.get('#lastName').type('Santos')
+        cy.get('#email').type('[email protected]')
+        cy.get('#open-text-area').type(longtext, {delay: 0})
+        cy.get('button[type="submit"]').click()
+        cy.get('.success').should('be.visible')
+    })
+
+    it('Exc.2-exibe mensagem de erro ao submeter o formulário com um email com formatação inválida', function() {
+        cy.get('#firstName').type('Gabriella')
+        cy.get('#lastName').type('Santos')
+        cy.get('#email').type('[email protected]')
+        cy.get('#open-text-area').type('teste')
+        cy.get('button[type="submit"]').click()
+        cy.get('.error').should('be.visible')
+        cy.contains('span', 'Valide os campos obrigatórios!').should('be.visible')
+    })
+
+    it('Exc.3-campo telefone continua vazio quando não preenchido coom valor não-numérico', function() {
+        cy.get('#phone')
+            .type('abcdefjhij')
+            .should('have.value', '')
+    })
+
+    it('Exc.4-exibe mensagem de erro quando o telefone se torna obrigatório mas não é preenchido antes do envio do formulário', function(){
+        cy.get('#firstName').type('Gabriella')
+        cy.get('#lastName').type('Santos')
+        cy.get('#email').type('[email protected]')
+        cy.get('#phone-checkbox').check()
+        cy.get('#open-text-area').type('teste')
+        cy.get('button[type="submit"]').click()
+        cy.get('.error').should('be.visible')
+        cy.contains('span', 'Valide os campos obrigatórios!').should('be.visible')
+    })
+
+    it('Exc.5-preenche e limpa os campos nome, sobrenome, email e telefone', function() {
+        cy.get('#firstName')
+            .type('Gabriella')
+            .should('have.value', 'Gabriella')
+            .clear()
+            .should('have.value', '')
+
+        cy.get('#lastName')
+            .type('Santos')
+            .should('have.value', 'Santos')
+            .clear()
+            .should('have.value', '')
+
+         cy.get('#email')
+            .type('[email protected]')
+            .should('have.value', '[email protected]')
+            .clear()
+            .should('have.value', '')
+
+         cy.get('#phone')
+            .type('12345678')
+            .should('have.value', '12345678')
+            .clear()
+            .should('have.value', '')
+
+        cy.get('#open-text-area')
+            .type('teste')
+            .should('have.value', 'teste')
+            .clear()
+            .should('have.value', '')
+    })
+
+    it('Exc.6-exibe mensagem de erro ao submeter o formulário sem preencher os campos obrigatórios', function() {
+        cy.get('button[type="submit"]').click()
+        cy.get('.error').should('be.visible')
+        cy.contains('span', 'Valide os campos obrigatórios!').should('be.visible')
+    })
+
+    it('Exc.7-envia o formuário com sucesso usando um comando customizado', function() {
+        cy.fillMandatoryFieldsAndSubmit()
+    })
+
+    it('Exc.8-substituir get por contains e verificar que o teste continua passando', () => {
+        cy.get('#firstName').type('Gabriella')
+        cy.get('#lastName').type('Santos')
+        cy.get('#email').type('[email protected]')
+        cy.get('#open-text-area').type('teste')
+        //cy.get('button[type="submit"]').click()
+        cy.contains('button', 'Enviar').click()
+        cy.get('.success').should('be.visible')
+    })
+
+    it('seleciona um produto (YouTube) por seu texto', function() {
+       cy.get('#product').select('YouTube')
+       .should('have.value', 'youtube')
+    })
+
+    it('seleciona um produto (Mentoria) por seu valor (value)', function() {
+        cy.get('#product').select('mentoria')
+        .should('have.value', 'mentoria')
+    })
+
+    it('seleciona um produto (Blog) por seu índice', function() {
+        cy.get('#product').select(1)
+        .should('have.value', 'blog')
+    })
+
+    it('marca o tipo de atendimento "Feedback"', function() {
+        cy.get('input[type="radio"][value="feedback"]')
+        .check()
+        .should('have.value', 'feedback')
+    })
+
+    it('marca cada tipo de atendimento', function() {
+        cy.get('input[type="radio"]')
+        .should('have.length',3)
+        .each(function($radio){
+            cy.wrap($radio).check()
+            cy.wrap($radio).should('be.checked')
+        })
+
+    })
+
+    it('marca ambos checkboxes, depois desmarca o último', function () {
+        cy.get('input[type="checkbox"]')
+            .check()
+            .should('be.checked')
+            .last()
+            .uncheck()
+            .should('not.be.checked')
+    })
+    it('exibe mensagem de erro quando o telefone se torna obrigatório mas não é preenchido antes do envio do formulário', function() {
+        cy.get('#firstName').type('Gabriella')
+        cy.get('#lastName').type('Santos')
+        cy.get('#email').type('[email protected]')
+        cy.get('#phone-checkbox').check()
+        cy.get('#open-text-area').type('teste')
+        cy.get('button[type="submit"]').click()
+        cy.get('.error').should('be.visible')
+        cy.contains('span', 'Valide os campos obrigatórios!').should('be.visible')
+    })
+
+    it('seleciona um arquivo da pasta fixtures', () => {
+        cy.get('input[type="file"]#file-upload')
+         .should('not.have.value')
+         .selectFile('./cypress/fixtures/example.json')
+         .should(function($input) {
+            expect($input[0].files[0].name).to.equal('example.json')
+           // console.log($input)
+         })
+    })
+
+    it('seleciona um arquivo simulando um drag-and-drop', function() {
+        cy.get('input[type="file"]#file-upload')
+         .should('not.have.value')
+         .selectFile('./cypress/fixtures/example.json', {action:'drag-drop'})
+         .should(function($input) {
+            expect($input[0].files[0].name).to.equal('example.json')
+           // console.log($input)
+         })
+    })
+
+    it('seleciona um arquivo utilizando uma fixture para a qual foi dada um alias', function() {
+        cy.fixture('example.json').as('sampleFile')
+        cy.get('input[type="file"]#file-upload')
+         .should('not.have.value')
+         .selectFile('@sampleFile')
+         .should(function($input) {
+            expect($input[0].files[0].name).to.equal('example.json')
+           // console.log($input)
+         })
+    })
+
+    it('verifica que a política de privacidade abre em outra aba sem a necessidade de um clique', function() {
+        cy.get('#privacy a').should('have.attr','target','_blank')
+    })
+
+    it('acessa a página da política de privacidade removendo o target e então clicando no link', function() {
+        cy.get('#privacy a')
+            .invoke('removeAttr','target')
+            .click()
+        cy.contains('Talking About Testing').should('be.visible')
+    })
+
+    it('testa a página da política de privacidade de forma independente',function() {
+
+    })
+
+})
+
+

cypress/integration/privacy.spec.js

@@ -0,0 +1,17 @@
+/// <reference types="Cypress" />
+
+describe ('CAC TAT - Política de privacidade', function() {
+    beforeEach(function () {
+        cy.visit('./src/privacy.html')
+    })
+
+
+    it('testa a página da política de privacidade de forma independente', function () {
+/*         cy.get('#title').contains('CAC TAT - Política de privacidade')
+            .should('be.visible') */
+        cy.contains('h1', 'CAC TAT - Política de privacidade')
+            .should('be.visible')
+    })
+
+})
+

cypress/support/commands.js

@@ -0,0 +1,36 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+Cypress.Commands.add('fillMandatoryFieldsAndSubmit', function() {
+    cy.get('#firstName').type('Gabriella')
+    cy.get('#lastName').type('Santos')
+    cy.get('#email').type('[email protected]')
+    cy.get('#open-text-area').type('teste')
+    cy.get('button[type="submit"]').click()
+    cy.get('.success').should('be.visible')
+  })
+
+

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

lessons/__intro__.md

@@ -0,0 +1,29 @@
+# Testes automatizados com Cypress - Básico
+
+👋 Seja bem-vindo(a)!
+
+É muito bom tê-lo(a) aqui. Tenho certeza que você vai adorar este curso. ❤️
+
+## O que você vai aprender
+
+Durante o curso de testes automatizados com Cypress (básico), você vai aprender:
+
+- Como configurar um projeto Cypress do zero
+- Como visitar páginas locais e remotas
+- Como lidar com os elementos mais comuns encontrados em aplicações web
+- Como testar _upload_ de arquivos
+- Como realizar as mais diversas verificações de resultados esperados
+- Como criar comandos customizados
+- Como lidar com links que abrem em outra aba do navegador
+- Como rodar testes simulando as dimensões de um dispositivo móvel
+- Como resolver os mesmos problemas de diferentes formas, conhecendo a [API do Cypress](https://docs.cypress.io/api/table-of-contents)
+- Como executar os testes em um _pipeline_ de integração contínua sempre que mudanças ocorrerem no código da aplicação (ou dos testes)
+- Como criar uma documentação mínima para seu projeto de testes automatizados
+
+## Vamos começar?
+
+Vá para a seção [estrutura do curso](./course-structure_.md).
+
+___
+
+Este é mais um curso da [**Escola Talking About Testing**](https://udemy.com/user/walmyr).