🎉 santosqa.com | Cypress Web Start

Author: Ricardo Santos

.DS_Store

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,json,yml}]
+charset = utf-8
+indent_style = space
+indent_size = 2

.editorconfig

@@ -0,0 +1,4 @@
+/.yarn/**            linguist-vendored
+/.yarn/releases/*    binary
+/.yarn/plugins/**/*  binary
+/.pnp.*              binary linguist-generated

.gitattributes

@@ -0,0 +1,18 @@
+.yarn
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+node_modules
+# Swap the comments on the following lines if you wish to use zero-installs
+# In that case, don't forget to run `yarn config set enableGlobalCache false`!
+# Documentation here: https://yarnpkg.com/features/caching#zero-installs
+
+#!.yarn/cache
+.pnp.*
+
+# adicionar pasta node modules e tudo que estiver dentro dela
+
+env.js

.gitignore

@@ -0,0 +1 @@
+nodeLinker: node-modules

.yarnrc.yml

@@ -0,0 +1,124 @@
+
+<p align="center">
+  <a href="https://santosqa.github.io/" target="_blank" rel="noopener noreferrer">
+    <picture>
+      <source media="(prefers-color-scheme: dark)"  srcset="./assets/cypress-logo-dark.png">
+      <source media="(prefers-color-scheme: light)" srcset="./assets/cypress-logo-dark.png">
+      <img alt="Cypress Logo" src="./assets/cypress-logo-dark.png">
+    </picture>
+  </a>
+</p>
+
+---
+
+
+[![Link Bio](https://img.shields.io/badge/Link%20Bio-59d959?style=for-the-badge&logo=about.me&logoColor=white)](https://santosqa.github.io) [![About](https://img.shields.io/badge/About.me-993399?style=for-the-badge&logo=about.me&logoColor=white)](https://about.me/santosqa) [![GitHub](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/santosqa) [![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/santosqa) [![Instagram](https://img.shields.io/badge/instagram-%23E4405F.svg?&style=for-the-badge&logo=instagram&logoColor=white)](https://www.instagram.com/santosqa_/) [![Santos QA](https://img.shields.io/badge/WWW-SantosQA.com-BD93F9?style=for-the-badge&logo=world&logoColor=white)](https://santosqa.com/) [![Apartamento Vista Mar](https://img.shields.io/badge/WWW-ApartamentoVistaMar.com-FFB86C?style=for-the-badge&logo=sun&logoColor=white)](https://www.apartamentovistamar.com/)
+
+
+---
+
+
+# 💻  Cypress WEB Start
+
+
+O Cypress é uma ferramenta moderna de automação para testes de aplicações web. Diferente de outras ferramentas de testes tradicionais, o Cypress é executado no mesmo ciclo de execução da aplicação, o que permite que você escreva, execute e depure seus testes diretamente no navegador. Ele é ideal para testes de integração, funcionalidade e interface de usuário, oferecendo uma experiência rápida e interativa.
+
+Com Cypress, é possível realizar testes end-to-end de forma eficiente e simples, validando o comportamento da aplicação de ponta a ponta, com foco na interação com os elementos presentes na maioria das páginas web. Além disso, a ferramenta fornece uma série de recursos como captura de telas, gravação de vídeos, depuração em tempo real e relatórios de testes, tornando o processo de automação e validação mais acessível.
+
+## Benefícios do Cypress:
+  **Desempenho Rápido:** Execução instantânea de testes, sem a necessidade de esperar por longos tempos de execução.
+  **Depuração Simples:** Ferramentas de depuração e exibição de comandos diretamente no navegador.
+  **Testes em Tempo Real:** Visualização do comportamento da aplicação enquanto os testes estão sendo executados.
+  **Facilidade de Uso:** Sintaxe simples e APIs intuitivas para escrever testes, ideal para iniciantes e especialistas.
+  **Documentação Extensa:** A documentação oficial oferece exemplos e guias para facilitar o aprendizado.
+
+<div style="background-color: #ffd9c9; padding: 10px; border-radius: 5px;" role="alert" aria-live="assertive">
+  <strong>⚠️ Atenção!</strong><br>
+  <p>As URLs e credenciais usadas neste projeto são de propriedade exclusiva do @papitodev e dos alunos da formação Cypress Skills. <em>Não utilize-as sem autorização.</em></p>
+</div></br>
+
+[![Cursos SantosQA](https://img.shields.io/badge/cypress-santosqa-4A7BFF?style=for-the-badge&logo=cypress&logoColor=white)](https://www.santosqa.com/top/) [![Repositorio PapitoDev](https://img.shields.io/badge/GitHub-papitoDEV-DC143C?style=for-the-badge&logo=github&logoColor=white)](https://github.com/papitodev/) [![Cypress Skills](https://img.shields.io/badge/cypress_Skills-Fernando_papito-32CD32?style=for-the-badge&logo=cypress&logoColor=white)](https://cyskills.com.br/)
+
+
+<div style="background-color: #DDA0DD; padding: 10px; border-radius: 5px;" role="note" aria-live="polite">
+  <p>💡 Este repositório é o seu ponto de partida para automatizar testes em páginas web com Cypress. Crie scripts poderosos, escaláveis e prontos para dominar qualquer aplicação! 🚀💻</p>
+  <p>⚡ Comece sua jornada de automação e leve seus testes para o próximo nível. O futuro dos testes está em suas mãos. Vamos juntos nesse desafio! 💪</p>
+</div>
+
+
+
+----------------------
+## Clonar o projeto
+
+   ` git clone https://github.com/santosqa/cypress-web-start.git `
+   ` npm install `
+   ` yarn add [email protected] -D `
+
+----------------------
+
+## Comandos de execução
+  - Abrir interface gráfica Cypress: ``` yarn cypress open ```
+  - Executar todos testes via terminal: ``` yarn cypress run ```
+
+----------------------
+## Links Úteis
+  
+  - yarn: https://yarnpkg.com/
+  - package cypress yarn: https://yarnpkg.com/package?q=cypress&name=cypress
+  - github cypress: https://github.com/cypress-io/cypress
+
+
+
+----------------------
+
+## instalação completa:
+
+  - Node.js
+  - $ pm install --global yarn -2
+  - verifique que o yarn está instalado: $  yarn --version
+  - no mac execute o comando para garantir que esteva atualizado o arquivo: $ source ~/.zshrc
+
+  - Iniciar o projeto: $ yarn init -2
+  - Instalar cypress: $ yarn add [email protected] -D
+  ( o argumento -D, indica que o pacote será adicionado como uma dependência de desenvolvimento no projeto.Em resumo, adiciona o Cypress como uma dependência que será usada apenas no ambiente de desenvolvimento, sem ser incluída no ambiente de produção.) 
+   - abrir o cypress: $ yarn cypress open
+  
+---
+
+## DOC Cypress 
+  - Viewport: https://docs.cypress.io/api/commands/viewport
+  - Hooks BeforeEach: https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests#Hooks
+
+
+----
+
+
+
+## Dicas
+
+<div style="background-color: #E6E6FA; padding: 10px; border-radius: 5px;" role="alert" aria-live="assertive">
+  <strong>🔥 1.  Uso de XPATH!</strong>
+  <p>A * Embora o Cypress não tenha suporte nativo para uso de XPath, é possível alcançar o mesmo objetivo de maneira organizada e nativa sem precisar importar plugins como "cypress-xpath".  </br>   
+  * Este exemplo demonstra como validar a mensagem de alerta para o campo obrigatório "Nome Completo".
+
+  * XPath equivalente: 
+  "//label[text()='Nome Completo']/.//div[contains(@class, 'alert-msg')]"
+    
+  * Implementação nativa com Cypress sem o uso do XPATH:  
+
+        cy.contains('label', 'Nome Completo') // Localiza o rótulo com o texto "Nome Completo"
+            .parent()                           // Navega para o elemento pai do rótulo
+            .find('.alert-msg')                 // Busca o elemento com a classe 'alert-msg'
+            .should('be.visible')               // Garante que o alerta está visível
+            .and('have.text', 'O campo nome é obrigatório.'); // Valida o texto do alerta. Use .have.text quando o objetivo é verificar o texto exato e completo de um elemento.
+  
+  </em></p>
+</div></br>
+   
+    
+    
+#
+
+---
+
+ [Ricardo Santos QA](https://github.com/santosqa) 👋🏼

README.md

@@ -0,0 +1,15 @@
+const { defineConfig } = require("cypress");
+const env = require('./env'); // Ajuste conforme a estrutura do projeto
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // Implementação de eventos Node
+    },
+    baseUrl: env.baseUrl, // Usa o baseUrl do env.js
+    viewportWidth: 1920,
+    viewportHeight: 1080,
+  },
+});
+
+

assets/cypress-logo-dark.png

@@ -0,0 +1,52 @@
+describe('CEP', () => {
+  beforeEach(() => {
+    cy.goHome()
+    cy.sucessLogin()
+    cy.goTo('/cep', 'CEP (API dos Correios)')
+    
+  })
+
+  it('Deve efetuar a consulta do CEP 04534011 com api dos correios retornando com sucesso', () => {
+    cy.get('input[name="cep"]').type('04534011')
+    cy.contains('button', 'Cadastrar').click()
+
+    cy.get('input[name="logradouro"]', {timeout: 6000})
+      .should('have.value', 'Rua Joaquim Floriano')
+    
+    cy.get('input[name="cidade"]')
+      .should('have.value', 'São Paulo')
+    
+    cy.get('input[name="estado"]')
+      .should('have.value', 'SP')
+    
+  } )
+
+  it.only('Deve efetuar a consulta na rota Mockada', () => {
+
+    const massaMock = {
+      cep: '11706170',
+      logradouro: 'Rua São João',
+      localidade: 'Praia Grande',
+      uf: 'SP'
+    }
+    
+    cy.intercept('GET', `https://viacep.com.br/ws/${massaMock.cep}/json/`, {
+      statusCode: 200,
+      body: massaMock
+    });
+
+    cy.get('input[name="cep"]').type(massaMock.cep);
+    cy.contains('button', 'Cadastrar').click()
+
+    cy.get('input[name="logradouro"]', {timeout: 6000})
+      .should('have.value', massaMock.logradouro)
+    
+    cy.get('input[name="cidade"]')
+      .should('have.value', massaMock.localidade)
+    
+    cy.get('input[name="estado"]')
+      .should('have.value', massaMock.uf)
+    
+  } )
+
+})

cypress.config.js

@@ -0,0 +1,28 @@
+describe('Checkbox', () => {
+  beforeEach(() => {
+    cy.goHome()
+    cy.sucessLogin()
+    cy.goTo('/checkbox', 'Checkbox')    
+  })
+
+  it('Deve selecionar checkbox das linguagens que usam Node.js', () => {
+    cy.get('label[for="javascript"]')
+      .click()
+
+    cy.get('label[for="typescript"]')
+    .click()
+  })
+
+
+  it('Deve selecionar todos os checkbox', () => {
+    
+    const langs = ['javascript', 'python', 'rust', 'go', 'typescript']
+    
+    langs.forEach(lang => {
+      cy.get(`label[for=${lang}]`).click()
+    })
+    
+  })
+  
+
+})

cypress/e2e/cep.cy.js

@@ -0,0 +1,23 @@
+describe('Date Picker', () => {
+  beforeEach(() => {
+    cy.goHome()
+    cy.sucessLogin()
+    cy.goTo('/date-picker', 'Date Picker')
+    
+  })
+
+  it('Deve selecionar a data do natal.', () => {
+    cy.get('input[placeholder="Escolha uma data"][readonly]')
+      .click()
+
+    cy.get('select[aria-label="Month"]')
+      .select('Dezembro')
+
+    cy.get('input[aria-label="Year"]')
+      .type('2024')
+
+    cy.get('span[aria-label="Dezembro 25, 2024"]')
+      .click()
+  })  
+
+})

cypress/e2e/checkbox.cy.js

@@ -0,0 +1,36 @@
+describe('Drag and Drop', () => {
+  beforeEach(() => {
+    cy.goHome()
+    cy.sucessLogin()
+    cy.goTo('/tasks', 'Task Board')
+    
+  })
+
+  it('Deve arrastar o item da coluna ToDo e soltar na coluna Done', () => {
+    const task = 'Desenho do Wireframe'
+
+    const dataTransfer = new DataTransfer()
+    
+    cy.contains('div[draggable="true"]', task)
+      .trigger('dragstart', { dataTransfer })
+
+    cy.contains('h4', 'Done')
+      .parent()
+      .trigger('drop', { dataTransfer })
+    
+      //valida que nao tem mais a tarefa ma coluna ToDo
+    cy.contains('h4', 'ToDo')
+      .parent()
+      .find('div[draggable="true"]')
+      .each(($el) => {
+        cy.wrap($el).should('not.contain.text', task);
+      });
+    
+      //valida que tem a tarefa na coluna Done
+    cy.contains('h4', 'Done')
+      .parent()
+      .contains('div[draggable="true"]', task)
+      .should('be.visible')
+  })
+
+})

cypress/e2e/datepicker.cy.js

@@ -0,0 +1,33 @@
+describe('IFrame', () => {
+  beforeEach(() => {
+    cy.goHome()
+    cy.sucessLogin()
+    cy.goTo('/iframe', 'IFrame')
+    
+  })
+
+  it('Deve preencher os campos em uma página com iFrame', () => {
+    cy.get('[data-cy="iframe-inputs"]')
+      .then(($iframe) => {
+        const body = $iframe.contents().find('body')
+
+        cy.wrap(body)
+          .find('#fullname')
+          .type('Ricardo Santos QA')
+        
+        cy.wrap(body)
+          .find('input[name="email"]')
+          .type('[email protected]')
+        
+        cy.wrap(body)
+          .find('input[placeholder="12345"]')
+          .type('123456')
+        
+        cy.wrap(body)
+          .find('[data-cy="date"]')
+          .type('2024-01-01')
+      })
+      
+  })
+
+})

cypress/e2e/dragandrop.cy.js

@@ -0,0 +1,18 @@
+describe('Inputs Fields', () => {
+  beforeEach(() => {
+    cy.goHome()
+    cy.sucessLogin()
+    cy.goTo('/input-fields', 'Input Fields')
+    
+  })
+
+  it('Deve preencher formulário com sucesso', () => {
+    cy.get('#fullname').type('Ricardo Santos QA')
+    cy.get('input[name="email"]').type('[email protected]')
+    cy.get('input[placeholder="12345"]').type('123456')
+    cy.get('[data-cy="date"]').type('2024-01-01')
+  })
+
+
+})
+