Implementação de automatização de testes de cadastro para o desafio técnico QA

.github/workflows/e2e-tests.yml

@@ -0,0 +1,26 @@
+name: Cypress Tests
+
+on: push
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: 🔄 Checkout
+        uses: actions/checkout@v4
+
+      - name: 🛠️ Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+
+      - name: 📦 Install Yarn
+        run: npm install yarn
+
+      - name: ⬇️ Install Dependencies
+        run: yarn install
+
+      - name: 🚀 Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          start: yarn cy:run:chrome

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+cypress/results
+cypress/screenshots
+cypress/downloads

cypress.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents() {
+      // implement node event listeners here
+    },
+    reporter: 'mochawesome',
+    reporterOptions: {
+      charts: true,
+      reportDir: 'cypress/results',
+      reportFilename: 'report',
+      overwrite: true,
+      html: true,
+      json: true,
+    },
+    viewportWidth: 1920,
+    viewportHeight: 1080,
+    baseUrl: 'https://qastage.buildbox.one/18',
+  },
+});

cypress/e2e/pages/register/elements.ts

@@ -0,0 +1,24 @@
+export const ELEMENTS = {
+  buttonRegister: '[data-cy="button-btn-enroll"]',
+  inputFistName: '[data-cy="input-signup-personal-data-firstName"]',
+  inputLastName: '[data-cy="input-signup-personal-data-lastName"]',
+  inputBirthDate: '[data-cy="input-signup-personal-data-birthDate"]',
+  inputCPF: '[data-cy="input-signup-personal-data-cpf"]',
+  inputEmail: '[data-cy="input-signup-personal-data-email"]',
+  inputConfirmEmail: '[data-cy="input-signup-personal-data-email-confirm"]',
+  inputPassword: '[data-cy="input-signup-personal-data-password"]',
+  inputConfirmPassword: '[data-cy="input-signup-personal-data-password-confirm"]',
+  inputCep: '[data-cy="input-signup-address-cep"]',
+  inputNumber: '[data-cy="input-signup-address-number"]',
+  inputComplement: '[data-cy="input-signup-address-complement"]',
+  inputCountry: '[data-cy="input-signup-address-country"]',
+  inputState: '[data-cy="input-signup-address-state"]',
+  inputCity: '[data-cy="input-signup-address-city"]',
+  toastAlert: '.toasts-list > [role="alert"]',
+  dropdownButtonProficiency: '[aria-controls="dropdown-button-1"]',
+  checkBoxTerms: '[data-cy="input-signup-personal-data-lgpd"]',
+  buttonLeveling: '.btn > Fazer Nivelamento',
+  buttonContinue: '[data-cy^="button-signup_submit_button_"]',
+  inputError: '.input-error',
+  titleSuccess: 'Thank you for joining us!',
+}

cypress/e2e/pages/register/index.ts

@@ -0,0 +1,105 @@
+import { ELEMENTS } from './elements';
+
+class RegisterPage {
+  fillFirstName(firstName: string) {
+    cy.get(ELEMENTS.inputFistName).type(firstName);
+  }
+
+  fillLastName(lastName: string) {
+    cy.get(ELEMENTS.inputLastName).type(lastName);
+  }
+
+  fillBirthDate(birthDate: string) {
+    cy.get(ELEMENTS.inputBirthDate).type(birthDate);
+  }
+
+  fillCPF(cpf: string) {
+    cy.get(ELEMENTS.inputCPF).type(cpf);
+  }
+
+  fillEmail(email: string) {
+    cy.get(ELEMENTS.inputEmail).type(email);
+  }
+
+  fillConfirmEmail(confirmEmail: string) {
+    cy.get(ELEMENTS.inputConfirmEmail).type(confirmEmail);
+  }
+
+  fillPassword(password: string) {
+    cy.get(ELEMENTS.inputPassword).type(password);
+  }
+
+  fillConfirmPassword(confirmPassword: string) {
+    cy.get(ELEMENTS.inputConfirmPassword).type(confirmPassword);
+  }
+
+  fillCep(cep: string) {
+    cy.get(ELEMENTS.inputCep).type(cep + '{enter}');
+  }
+
+  checkTerms() {
+    cy.get(ELEMENTS.checkBoxTerms).check();
+  }
+
+  selectProficiency(proficiency: string) {
+    cy.get(ELEMENTS.dropdownButtonProficiency).click();
+    cy.contains(proficiency).click();
+  }
+
+  fillNumber(number: string) {
+    cy.get(ELEMENTS.inputNumber).type(number);
+  }
+  fillComplement(complement: string) {
+    cy.get(ELEMENTS.inputComplement).type(complement);
+  }
+
+  clickRegister() {
+    cy.get(ELEMENTS.buttonRegister).click();
+  }
+
+  clickContinue() {
+    cy.get(ELEMENTS.buttonContinue).filter(':visible').contains('Próximo').should('have.css', 'display', 'flex').click();
+  }
+
+  clickLeveling() {
+    cy.get(ELEMENTS.buttonLeveling).click();
+  }
+
+  checkElementVisibility(selector: string, shouldBeVisible: boolean) {
+    cy.get(selector).should(shouldBeVisible ? 'be.visible' : 'not.be.visible');
+  }
+
+  checkErrorMessage(message: string) {
+    cy.get(ELEMENTS.inputError).should('contain', message);
+  }
+
+  verifyInputValue(selector, expectedValue) {
+    cy.get(selector).should('have.value', expectedValue);
+  }
+
+  visitRegisterPage() {
+    cy.visit('/cadastro');
+    this.clickRegister();
+  }
+
+  fillForm(Person) {
+    this.fillFirstName(Person.firstName);
+    this.fillLastName(Person.lastName);
+    this.fillBirthDate(Person.birthDate);
+    this.fillCPF(Person.cpf);
+    this.fillEmail(Person.email.toLowerCase());
+    this.fillConfirmEmail(Person.email.toLowerCase());
+    this.fillPassword(Person.password);
+    this.fillConfirmPassword(Person.password);
+    this.selectProficiency('Advanced');
+    this.checkTerms();
+  }
+
+  fillAddress(address) {
+    this.fillCep(address.CEP);
+    this.fillNumber(address.number);
+    this.fillComplement(address.complement);
+  }
+}
+
+export default new RegisterPage();

cypress/e2e/pages/register/register.cy.ts

@@ -0,0 +1,178 @@
+import { createPerson } from '../../../utils/person';
+import { ELEMENTS } from './elements';
+import registerPage from './index';
+
+describe('Registro bem-sucedido', () => {
+  beforeEach(() => {
+    Cypress.on("uncaught:exception", (err, runnable) => {
+      return false;
+    });
+  });
+  it('Deve realizar registro com dados válidos com sucesso', () => {
+    cy.intercept('POST', 'https://qastage.buildbox.one/wp-admin/admin-ajax.php').as('register');
+    const Person = createPerson();
+    registerPage.visitRegisterPage();
+    registerPage.fillForm(Person);
+    registerPage.clickContinue();
+    registerPage.fillAddress(Person.address);
+    registerPage.clickContinue();
+    cy.wait('@register').then(({ response }) => {
+      expect(response?.statusCode).to.eq(204);
+    });
+    cy.contains(ELEMENTS.titleSuccess).should('be.visible');
+  });
+
+  it('Deve realizar o login com os dados registrados', () => {
+    const Person = createPerson();
+    registerPage.visitRegisterPage();
+    registerPage.fillForm(Person);
+    registerPage.clickContinue();
+    registerPage.fillAddress(Person.address);
+    registerPage.clickContinue();
+    cy.contains(ELEMENTS.titleSuccess).should('be.visible');
+    cy.visit('/sign-in');
+    cy.loginUI(Person.email, Person.password);
+    cy.url().should('include', '/dashboard');
+    cy.contains(`${Person.firstName} ${Person.lastName}`).should('be.visible');
+  });
+});
+
+
+describe('Verificar Validação dos Campos', () => {
+  it('Deve exibir mensagem de erro ao clicar, digitar e apagar para o primeiro nome', () => {
+    registerPage.visitRegisterPage();
+    cy.get(ELEMENTS.inputFistName).click().type('a').clear();
+    registerPage.checkErrorMessage('Precisa ser preenchido');
+  });
+
+  it('Deve exibir mensagem de erro ao clicar, digitar e apagar para o sobrenome', () => {
+    registerPage.visitRegisterPage();
+    cy.get(ELEMENTS.inputLastName).click().type('b').clear();
+    registerPage.checkErrorMessage('Precisa ser preenchido');
+  });
+
+  it('Deve exibir mensagem de erro para formato de data de nascimento inválido', () => {
+    const Person = createPerson();
+    registerPage.visitRegisterPage();
+    registerPage.fillBirthDate('04/30/2024');
+    registerPage.checkErrorMessage('Data de nascimento inválida.');
+  });
+  it('Deve exibir mensagem de erro para registro com data de nascimento futura', () => {
+    const futureBirthDate = new Date(Date.now() + 1 * 365 * 24 * 60 * 60 * 1000);
+    registerPage.visitRegisterPage();
+    registerPage.fillBirthDate(futureBirthDate.toLocaleDateString('pt-BR'));
+    registerPage.checkErrorMessage('Data de nascimento inválida.');
+  });
+
+  it('Deve exibir mensagem de erro para confirmação de senha inconsistente', () => {
+    const password = 'password';
+    const differentPassword = 'different-password';
+    registerPage.visitRegisterPage();
+    registerPage.fillPassword(password);
+    registerPage.fillConfirmPassword(differentPassword);
+    registerPage.checkErrorMessage('As senhas não são iguais.');
+  });
+
+  it('Deve exibir mensagem de erro para e-mail inválido', () => {
+    registerPage.visitRegisterPage();
+    const email = 'a@b.c';
+    cy.get(ELEMENTS.inputEmail).type(email).tab()
+    registerPage.checkErrorMessage('Email inválido.');
+
+  });
+  it('Deve exibir mensagem de erro para e-mail incompleto', () => {
+    registerPage.visitRegisterPage();
+    const email = 'teste@';
+    cy.get(ELEMENTS.inputEmail).type(email).tab()
+    registerPage.checkErrorMessage('Precisa ser email');
+  });
+
+  it('Deve exibir mensagem de erro para confirmação de e-mail inconsistente', () => {
+    const email = 'mail@gmail.com';
+    const differentEmail = 'diferent-mail@gmail.com';
+    registerPage.visitRegisterPage();
+    registerPage.fillEmail(email);
+    registerPage.fillConfirmEmail(differentEmail);
+    registerPage.checkErrorMessage('Os e-mails não são iguais.');
+  })
+
+  it('Deve exibir mensagem de erro para CPF inválido', () => {
+    const Person = createPerson();
+    registerPage.visitRegisterPage();
+    cy.get(ELEMENTS.inputCPF).type('00000000000').tab();
+    registerPage.checkErrorMessage('CPF inválido.');
+  });
+})
+
+describe('Registro Duplicado', () => {
+
+  it('Deve exibir mensagem de erro para e-mail já existente', () => {
+    const Person = createPerson();
+    registerPage.visitRegisterPage();
+    registerPage.fillForm(Person);
+    registerPage.clickContinue();
+    registerPage.fillAddress(Person.address);
+    registerPage.clickContinue();
+    registerPage.visitRegisterPage();
+    cy.get(ELEMENTS.inputEmail).type(Person.email.toLowerCase()).tab();
+    registerPage.checkErrorMessage('Este email já está em uso.');
+  });
+
+  it('Deve exibir mensagem de erro para CPF já existente', () => {
+    const Person = createPerson();
+    registerPage.visitRegisterPage();
+    registerPage.fillForm(Person);
+    registerPage.clickContinue();
+    registerPage.fillAddress(Person.address);
+    registerPage.clickContinue();
+    registerPage.visitRegisterPage();
+    cy.get(ELEMENTS.inputCPF).type(Person.cpf.toLowerCase(), { delay: 5 }).tab();
+    registerPage.checkErrorMessage('Este CPF já está em uso.');
+  });
+})
+
+describe('Validação de Endereço e CEP', () => {
+  it('Deve exibir mensagem de erro para CEP inválido', () => {
+    const Person = createPerson();
+    registerPage.visitRegisterPage();
+    registerPage.fillForm(Person);
+    registerPage.clickContinue();
+    cy.get(ELEMENTS.inputCep).type('12345678910').tab();
+    cy.get(ELEMENTS.toastAlert).should('contain', 'CEP não encontrado');
+  });
+  it('Deve preencher automaticamente dos campos de endereço com um CEP válido', () => {
+    const Person = createPerson();
+    registerPage.visitRegisterPage();
+    registerPage.fillForm(Person);
+    registerPage.clickContinue();
+    registerPage.fillAddress(Person.address);
+    registerPage.verifyInputValue(ELEMENTS.inputCountry, Person.address.country)
+    registerPage.verifyInputValue(ELEMENTS.inputState, Person.address.state)
+    registerPage.verifyInputValue(ELEMENTS.inputCity, Person.address.city)
+  });
+
+})
+
+describe('Responsividade', () => {
+
+  const urlImage = 'url("https://qastage.buildbox.one/wp-content/themes/bx-wp-theme/assets/images/register-welcome.jpg")'
+
+  const viewports = [
+    { name: 'mobile', width: 375, height: 667 },
+    { name: 'tablet', width: 768, height: 1024 },
+    { name: 'desktop', width: 1440, height: 900 },
+  ];
+
+  viewports.forEach(viewport => {
+    it(`Deve exibir o background corretamente no modo ${viewport.name}`, () => {
+      cy.viewport(viewport.width, viewport.height);
+      cy.visit('/cadastro');
+
+      if (viewport.width >= 1440) {
+        cy.get('div.bg-welcome').should('have.css', 'background-image', urlImage)
+      } else {
+        cy.get('div.bg-welcome').should('not.have.css', 'background-image', urlImage)
+      }
+    });
+  });
+});