Create cypress project

.github/workflows/ci.yml

@@ -0,0 +1,12 @@
+name: End-to-end tests 
+on: [push]//disparado sempre que for dado um push em qualquer branch
+jobs:
+  cypress-run://roda o comando e os testes
+    runs-on: ubuntu-20.04//roda numa imagem linux
+    steps:
+      - name: Checkout//roda para o github baixar no workspace o doc
+        uses: actions/checkout@v2
+      # Install NPM dependencies, cache them correctly
+      # and run all Cypress tests
+      - name: Cypress run
+        uses: cypress-io/github-action@v2

correção.txt

@@ -0,0 +1,122 @@
+// CAC-TAT.spec.js created with Cypress
+//
+// Start writing your Cypress tests below!
+// If you're unfamiliar with how Cypress works,
+// check out the link below and learn how to write your first test:
+// https://on.cypress.io/writing-first-test
+
+//const cypress = require("cypress");
+
+
+//exercicio 1
+//<reference types="Cypress" />
+describe('Central de atendimento ao cliente TAT', function() {
+    //beforeEach == antes de cada teste
+    beforeEach(() => {
+        // Visita a página inicial
+    });
+
+    it('verifica o titulo da aplicação', function() {   
+        // Verifica o título da página
+        // Espera o título ser igual a 'Central de Atendimento ao Cliente TAT'
+    });
+
+    // Função de callback - exercício extra 1
+    it('preenche os campos obrigatórios e envia o formulário', function() {
+        // Preenche os campos obrigatórios com dados específicos
+        // Envia o formulário
+        // Verifica se a mensagem de sucesso aparece
+    });
+
+    // Função de callback - exercício extra 2
+    // Usar o `only` para testar a função que está sendo realizada
+    it('exibe mensagem de erro por email invalido', function() {
+        // Preenche o email com formato inválido
+        // Clica no botão de envio
+        // Verifica se a mensagem de erro é exibida
+    });
+
+    // Função de callback - exercício extra 3
+    it('exibe mensagem de erro ao submeter o formulário com um email com formatação inválida', function() {
+        // Preenche o telefone com um valor inválido
+        // Verifica que o telefone está vazio
+    });
+
+    it('exibe mensagem de erro quando o telefone se torna obrigatório mas não é preenchido antes do envio do formulário', function() {
+        // Marca o checkbox de telefone
+        // Clica no botão de envio
+        // Verifica se a mensagem de erro é exibida
+    });
+
+    it('envia o formulário com sucesso usando um comando customizado', function() {
+        // Chama um comando customizado para preencher os campos obrigatórios e enviar o formulário
+        // Verifica se a mensagem de sucesso é exibida
+    });
+
+    // Exercício extra 8
+    it('alterar o get para contains', function() {
+        // Usa `cy.contains()` para clicar no botão 'Enviar'
+        // Verifica se a mensagem de erro é exibida
+    });
+
+    // Aula 4 ex extra 1
+    it('seleciona um produto (YouTube) por seu texto', function() {
+        // Seleciona o produto 'YouTube' no dropdown
+        // Verifica se o valor selecionado é 'youtube'
+    });
+
+    it('(mentoria) pelo seu value', function() {
+        // Seleciona o valor 'mentoria' no dropdown
+        // Verifica se o valor selecionado é 'mentoria'
+    });
+
+    it('testando #product', function() {
+        // Seleciona o valor do dropdown pelo índice (1)
+        // Verifica se o valor selecionado é 'blog'
+    });
+
+    // Aula marcando input do tipo radio
+    it('marca o tipo de atendimento feedback', function() {
+        // Marca o radio button com o valor 'feedback'
+        // Verifica se o valor marcado é 'feedback'
+    });
+
+    // Exercício: Marca ambos os checkboxes e depois desmarca o último
+    it('Crie um teste chamado marca ambos checkboxes, depois desmarca o último', function() {
+        // Marca todos os checkboxes
+        // Desmarca o último checkbox
+        // Verifica se o último checkbox está desmarcado
+    });
+
+    // Testando o upload de arquivo
+    it('seleciona um arquivo da pasta fixtures', function() {
+        // Seleciona um arquivo da pasta 'fixtures'
+        // Verifica se o nome do arquivo é 'example.json'
+    });
+
+    // Selecionando arquivo utilizando uma fixture com alias
+    it('seleciona um arquivo utilizando uma fixture para a qual foi dado um alias', function() {
+        // Define o alias para o arquivo 'example.json'
+        // Usa o alias para selecionar o arquivo
+    });
+
+    // Lidando com link que abre na página do navegador
+    // Como testar a página que abre em outro link?
+    // Exemplo de como testar o link da política de privacidade
+    it('acessa a página da política de privacidade removendo o target e então clicando no link', function() {
+        // Remove o atributo 'target' do link
+        // Clica no link
+        // Verifica se a nova página tem o título correto
+    });
+
+    // Exercício extra 2: desafio
+    it.only('testa a página da política de privacidade de forma independente', function() {
+        // Remove o atributo 'target' do link
+        // Clica no link
+        // Verifica se o título da página é 'Central de Atendimento ao Cliente TAT - Política de privacidade'
+    });
+
+});
+
+
+na raiz do projeto crie um diretorio oculto(name.github/)

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,196 @@
+// CAC-TAT.spec.js created with Cypress
+//
+// Start writing your Cypress tests below!
+// If you're unfamiliar with how Cypress works,
+// check out the link below and learn how to write your first test:
+// https://on.cypress.io/writing-first-test
+
+//const cypress = require("cypress");
+
+
+//exercicio 1
+//<reference types="Cypress" />
+describe('Central de atendimento ao cliente TAT', function() {
+   //beforEach == antes de cada
+   beforeEach( () => {
+        cy.visit('./src/index.html')
+   });
+
+   it('verifica o titulo da aplicação', function() {   
+      //visitar a pagina
+
+      cy.title().should('eq', 'Central de Atendimento ao Cliente TAT')
+
+      //visitar a pagina ->> cy.visit('./src/index.html')
+
+   })
+
+
+
+    //função de callback - exercicio extra 1
+   it('preenche os campos obrigatórios e envia o formulário',function(){
+       cy.get('#firstName')
+       .type('Maria')
+
+       //.click()// click is used to activite the button with id specific
+       cy.get('#lastName').type('Ferreira',{delay:0, force: true})
+
+       cy.get('#email')
+       .type('[email protected]')
+
+       cy.get('#phone')
+       .type('11963877943')
+
+       cy.get('#open-text-area').type('nao sei')
+
+       cy.get('.button').click()
+
+       cy.get('.success').should('be.visible')
+       //mandar click no botão do tipo submit
+    })
+
+     //função de callback - exercicio extra 2
+    //usar o only para testar a função que esta sendo realizada, modo de uso: it.only()
+    it('exibe mensagem de erro por email invalido',function(){
+       cy.get('#email').type('mariaFerreira@')
+       cy.get('.button').click()
+       cy.get('.error').should('be.visible')        
+
+    })
+
+    //função de callback - exercicio extra 3
+    it('exibe mensagem de erro ao submeter o formulário com um email com formatação inválida', function(){
+       cy.get('#phone')
+       .type('ahdgd')
+      // .expect(number).not.to.include('text')
+       .should('have.value','')
+
+    })
+
+    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('#phone-checkbox').check()
+       cy.get('.button').click()
+       cy.get('.error').should('be.visible')
+
+    })
+
+
+
+    it('envia o formulário com sucesso usando um comando customizado',function(){
+     cy.fillMandatoryFieldsAndSubmit()
+     cy.get('.success').should('be.visible')
+   })
+
+   //exercicio extra 8
+   it('alterar o get para contains', function(){
+     cy.contains('button', 'Enviar').click()
+     cy.get('.error').should('be.visible')
+  })
+
+  //aula 4 ex extra 1
+  it('seleciona um produto (YouTube) por seu texto', function() {
+     //define o elemento, q é tipo select e especifica o elemento que se chama youtube
+     cy.get('select').select('YouTube')
+     //verifica valor
+     .should('have.value', 'youtube')
+   })
+
+
+   it('(mentoria) pelo seu value',function (){
+     cy.get('#product')
+     .select('mentoria')
+     .should('have.value','mentoria')
+   })
+
+
+   it('testando #product',function(){
+     cy.get('#product')
+     .select(1)
+     .should ('have.value','blog')
+   })
+
+  //aula marcando input do tipo radio
+  it(' marca o tipo de atendimento feedback', function(){
+     cy.get('input[type="radio"] [value = "feedback"]').check('feedback')
+     .should('have.value', 'feedback')
+ })
+
+// it(' marca o tipo de atendimento', function(){
+  //.it para iterar um array
+  //.wrap
+//  cy.get('input[type="radio"]')
+
+//  .should('have.length', 3)//CONTA QTDE
+  //pega cada um dos radios
+ // .each (function ($radio){
+//     cy.wrap($radio).check()//empacotou
+//     cy.wrap($radio).should('be.checked')
+  //})
+
+
+
+//.uncheck and check
+it('Crie um teste chamado marca ambos checkboxes, depois desmarca o último',function(){
+  cy.get('input[type="checkbox"]').check()
+  .last()//
+  cy.get('input[type="checkbox"]').uncheck().should('not.be.checked')
+
+})
+
+//fazer upload de arquivo no cyprees
+it('seleciona um arquivo da pasta fixtures', function () {
+  cy.get('input[type="file"]') // Identifica o elemento do tipo "file"
+     .should('not.have.value') // Verifica que inicialmente o input não tem valor
+     .selectFile('cypress/fixtures/example.json') // Seleciona o arquivo da pasta fixtures
+     .should(function($input) {
+        // Acessa o arquivo selecionado e verifica se o nome do arquivo é 'example.json'
+        expect($input[0].files[0].name).to.equal('example.json');
+     });
+});
+
+//exercicio extra 2 
+it('seleciona um arquivo utilizando uma fixture para a qual foi dada um alias' , function(){
+  cy.fixture('example.json').as('sampleFile')//o as atribui um alias 
+  cy.get('input[type=  file]')
+     .selectFile('@sampleFile')//o @identifica que é um alias
+     //extenção cypress helper
+})
+
+//lidando com link que abre na pagina do navegador, ler a pagina trade-offs
+//como testar a pagina que abre em outro link?
+
+//it.only('verifica que a política de privacidade abre em outra aba sem a necessidade de um clique')
+
+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')//remove atributo target
+  .click()
+})
+
+//ex extra 2 desafio
+it.only('testa a página da política de privacidade de forma independente' , function (){
+  cy.get('a')
+  .invoke('removeAttr' , 'target')
+  .click ()
+  cy.title().should('eq', 'Central de Atendimento ao Cliente TAT - Política de privacidade')
+
+  //outra maneira
+  //usa o cy.visit e depois p cy.contains e .should be.visable
+
+  //alterar a viewport para test em mobile
+  //alterar cyopen no package.json com: --config viewportWidth=410 viewportHeight=860
+
+})
+
+
+})
+
+
+   //aula 4 ex extra 1
+   //it('',function(){
+
+  // })
+
+
+
+

cypress/support/commands.js

@@ -0,0 +1,34 @@
+// ***********************************************
+// 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', () => {
+    cy.get('#firstName').type("Lavinia");
+    cy.get('#lastName').type("Rocha");
+    cy.get('#email').type("[email protected]");
+    cy.get('#open-text-area').type("nada a declarar");
+    cy.get('.button').click();
+    cy.get('.success').should('be.visible'); // Verifica se a mensagem de sucesso aparece
+});