From 07d97026d6f6d30899ba5ccbb659809351256d15 Mon Sep 17 00:00:00 2001 From: Lucas Costa Date: Sun, 26 Jan 2025 11:46:00 -0300 Subject: [PATCH 1/2] Lessons 0-2 --- cypress.config.js | 9 +++ cypress/fixtures/example.json | 5 ++ cypress/integration/CAC-TAT.spec.js | 108 ++++++++++++++++++++++++++++ cypress/plugins/index.js | 22 ++++++ cypress/support/commands.js | 38 ++++++++++ cypress/support/index.js | 20 ++++++ package-lock.json | 13 ++++ package.json | 3 +- 8 files changed, 217 insertions(+), 1 deletion(-) create mode 100644 cypress.config.js create mode 100644 cypress/fixtures/example.json create mode 100644 cypress/integration/CAC-TAT.spec.js create mode 100644 cypress/plugins/index.js create mode 100644 cypress/support/commands.js create mode 100644 cypress/support/index.js create mode 100644 package-lock.json diff --git a/cypress.config.js b/cypress.config.js new file mode 100644 index 000000000..97f47c412 --- /dev/null +++ b/cypress.config.js @@ -0,0 +1,9 @@ +const { defineConfig } = require("cypress"); + +module.exports = defineConfig({ + e2e: { + setupNodeEvents(on, config) { + // implement node event listeners here + }, + }, +}); diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json new file mode 100644 index 000000000..02e425437 --- /dev/null +++ b/cypress/fixtures/example.json @@ -0,0 +1,5 @@ +{ + "name": "Using fixtures to represent data", + "email": "hello@cypress.io", + "body": "Fixtures are a great way to mock data for responses to routes" +} diff --git a/cypress/integration/CAC-TAT.spec.js b/cypress/integration/CAC-TAT.spec.js new file mode 100644 index 000000000..e7c6c957b --- /dev/null +++ b/cypress/integration/CAC-TAT.spec.js @@ -0,0 +1,108 @@ +// 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 + +describe('Central de Atendimento ao Cliente TAT', function() { + + beforeEach(() => { + cy.visit('./src/index.html'); + }) + + it('verifica o título da aplicação', function(){ + cy.title().should('equal','Central de Atendimento ao Cliente TAT'); + }) + + it('preenche os campos obrigatórios e envia o formulário', function () { + //Criando uma variável para repetir um texto + const longText = Cypress._.repeat('Lorem ipsum dolor sit amet',15); + + //Ação + cy.get('#firstName').type('Lucas'); + cy.get('#lastName').type('Costa Milagres').should('have.value','Costa Milagres',); + cy.get('#email').type('lucasmilagres@teste.com').should('include.value','lucas'); + cy.get('#open-text-area').type(longText,{delay:0}); + cy.get('button[type="submit"]').click(); + + //Resultado esperado + cy.get('.success').should('be.visible'); + }) + + it('exibe mensagem de erro ao submeter o formulário com um email com formatação inválida', function(){ + //Ação + cy.get('#firstName').type('Lucas'); + cy.get('#lastName').type('Costa Milagres'); + cy.get('#email').type('emailinválido'); + cy.get('#open-text-area').type('Teste'); + cy.contains('button', 'Enviar').click(); + + //Resultado esperado + cy.get('.error').should('be.visible'); + }) + + it('campo telefone continua vazio quando preenchido com um valor não-numérico', () => { + cy.get('#phone') + .type('Lucas.,;~][´\!@#$%¨&*()-=') + .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', () => { + cy.get('#firstName').type('Lucas'); + cy.get('#lastName').type('Costa Milagres'); + cy.get('#email').type('lucas@teste.com'); + cy.get('#open-text-area').type('Teste'); + cy.get('#phone-checkbox').check(); + cy.contains('.button', 'Enviar').click(); + + cy.get('.error').should('be.visible'); + }) + + it('preenche e limpa os campos nome, sobrenome, email e telefone', () => { + cy.get('#firstName') + .type('Lucas') + .should('have.value','Lucas') + .clear() + .should('have.value',''); + + cy.get('#lastName') + .type('Costa Milagres') + .should('have.value','Costa Milagres') + .clear() + .should('have.value',''); + + cy.get('#email') + .type('lucas@teste.com') + .should('have.value','lucas@teste.com') + .clear() + .should('have.value',''); + + cy.get('#phone') + .type('11942563100') + .should('have.value','11942563100') + .clear() + .should('have.value',''); + }) + + it.only('exibe mensagem de erro ao submeter o formulário sem preencher os campos obrigatórios', () => { + cy.contains('Enviar').click(); + + cy.get('.error').should('be.visible'); + }) + + it('envia o formuário com sucesso usando um comando customizado', () => { + const data = { + firstName: 'Lucas', + lastName: 'Costa Milagres', + email: 'lucas@teste.com', + phone: '11912345678', + text: 'Texto de teste' + } + + cy.fillMandatoryFieldsAndSubmit(data); + + cy.get('.success').should('be.visible'); + }) + +}) \ No newline at end of file diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js new file mode 100644 index 000000000..59b2bab6e --- /dev/null +++ b/cypress/plugins/index.js @@ -0,0 +1,22 @@ +/// +// *********************************************************** +// This example plugins/index.js can be used to load plugins +// +// You can change the location of this file or turn off loading +// the plugins file with the 'pluginsFile' configuration option. +// +// You can read more here: +// https://on.cypress.io/plugins-guide +// *********************************************************** + +// This function is called when a project is opened or re-opened (e.g. due to +// the project's config changing) + +/** + * @type {Cypress.PluginConfig} + */ +// eslint-disable-next-line no-unused-vars +module.exports = (on, config) => { + // `on` is used to hook into various events Cypress emits + // `config` is the resolved Cypress config +} diff --git a/cypress/support/commands.js b/cypress/support/commands.js new file mode 100644 index 000000000..af655cdae --- /dev/null +++ b/cypress/support/commands.js @@ -0,0 +1,38 @@ +// *********************************************** +// 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', (data = { + firstName: 'John', + lastName: 'Doe', + email: 'johndoe@example.com', + text: 'Test' + }) => { + cy.get('#firstName').type(data.firstName); + cy.get('#lastName').type(data.lastName); + cy.get('#email').type(data.email); + cy.get('#open-text-area').type(data.text); + cy.contains('button', 'Enviar').click(); +}) \ No newline at end of file diff --git a/cypress/support/index.js b/cypress/support/index.js new file mode 100644 index 000000000..d68db96df --- /dev/null +++ b/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') diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..adba9dec4 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,13 @@ +{ + "name": "curso-cypress-v2", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "curso-cypress-v2", + "version": "1.0.0", + "license": "MIT" + } + } +} diff --git a/package.json b/package.json index 955063395..af957738b 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,8 @@ "description": "Repositório da versão 2 do curso básico de Cypress da Escola Talking About Testing", "main": "src/index.html", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "cy:open": "cypress open", + "test": "cypress run" }, "repository": { "type": "git", From 44cd4281d524657a081ce9896f41de249086a853 Mon Sep 17 00:00:00 2001 From: Lucas Costa Date: Wed, 29 Jan 2025 16:51:36 -0300 Subject: [PATCH 2/2] Lessons 3-4 --- cypress/integration/CAC-TAT.spec.js | 43 ++++++++++++++++++++++++++++- 1 file changed, 42 insertions(+), 1 deletion(-) diff --git a/cypress/integration/CAC-TAT.spec.js b/cypress/integration/CAC-TAT.spec.js index e7c6c957b..8b6cfea86 100644 --- a/cypress/integration/CAC-TAT.spec.js +++ b/cypress/integration/CAC-TAT.spec.js @@ -85,7 +85,7 @@ describe('Central de Atendimento ao Cliente TAT', function() { .should('have.value',''); }) - it.only('exibe mensagem de erro ao submeter o formulário sem preencher os campos obrigatórios', () => { + it('exibe mensagem de erro ao submeter o formulário sem preencher os campos obrigatórios', () => { cy.contains('Enviar').click(); cy.get('.error').should('be.visible'); @@ -105,4 +105,45 @@ describe('Central de Atendimento ao Cliente TAT', function() { cy.get('.success').should('be.visible'); }) + it('seleciona um produto (YouTube) por seu texto', () => { + cy.get('#product').select('YouTube') + .should('have.value', 'youtube'); + }) + + it('seleciona um produto (Mentoria) por seu valor (value)', () => { + cy.get('#product').select('mentoria') + .should('have.value', 'mentoria'); + }) + + it('seleciona um produto (Blog) por seu índice', () => { + cy.get('#product').select(1) + .should('have.value', 'blog'); + }) + + it('seleciona um produto por seu índice de forma aleatória', () => { + cy.get('select option') + .not('[disabled]') + .its('length', { log: false }).then(n => { + cy.get('#product').select(Cypress._.random(n - 1)); + }) + }) + + it('marca o tipo de atendimento "Feedback"(Busca mais genérica)', () => { + cy.get('[type="radio"]').check('feedback'); + + cy.get('#support-type :checked').should('be.checked').and('have.value', 'feedback'); + }) + + it('marca o tipo de atendimento "Feedback" (Busca mais específica)', () => { + cy.get('input[type="radio"][value="ajuda"]').check() + .should('be.checked'); + }) + + it('marca cada tipo de atendimento', () => { + cy.get('[type="radio"]').each(typeOfService => { + cy.wrap(typeOfService) + .check() + .should('be.checked'); + }) + }) }) \ No newline at end of file