Modificações gerais no código a fim de melhorar a ferramenta de automação

.github/workflows/playwright.yml

@@ -1,27 +1,40 @@
 name: Playwright Tests
+
 on:
   push:
-    branches: [ main, master ]
+    branches: [main, master]
   pull_request:
-    branches: [ main, master ]
+    branches: [main, master]
+
 jobs:
   test:
     timeout-minutes: 60
     runs-on: ubuntu-latest
+
     steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: lts/*
-    - name: Install dependencies
-      run: npm ci
-    - name: Install Playwright Browsers
-      run: npx playwright install --with-deps
-    - name: Run Playwright tests
-      run: npx playwright test
-    - uses: actions/upload-artifact@v4
-      if: always()
-      with:
-        name: playwright-report
-        path: playwright-report/
-        retention-days: 30
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: npx playwright test
+        env:
+          BASE_URL: ${{ secrets.BASE_URL }} # Atualiza para BASE_URL
+
+      - name: Upload Playwright Report
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -1,6 +1,6 @@
 node_modules/
-/test-results/
-/playwright-report/
-/blob-report/
-/playwright/.cache/
-.env
+test-results/
+playwright-report/
+blob-report/
+playwright/.cache/
+.env

README.md

@@ -1,33 +1,60 @@
-# TEM VAGA, MESTRE?
+![Logo Tem Vaga Mestre?](https://imgur.com/HisaR2D.png)
+
+A plataforma que conecta a comunidade RPG, valorizando a simplicidade, a diversidade e a paixão pelo jogo.
+
 ## Descrição
 
-Este projeto será uma framework de automação de teste para o projeto 'Tem Vaga, Mestre?' com o objetivo de validar testes de front-end e back-end 
+Este projeto será uma framework de automação de teste para o projeto 'Tem Vaga Mestre?' com o objetivo de validar testes de front-end e back-end
 
-### Tecnologias
+### Tecnologias utilizadas
 
-- Playwrite 
-- Node
+[![JavaScript Badge](https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&logo=javascript&logoColor=black)](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript)
+[![Node.js Badge](https://img.shields.io/badge/Node.js-43853D?style=flat-square&logo=node.js&logoColor=white)](https://nodejs.org/pt)
+[![Playwright Badge](https://img.shields.io/badge/Playwright-45ba4b?style=flat-sqare&logo=Playwright&logoColor=white)](https://playwright.dev/)
 
 ### Tarefas
+
 - [x] Instalação e configuração
-- [ ] Abrir browser e acessar a tela de perfil
+- [x] Abrir browser e acessar a tela de perfil
+- [x] Fazer o rastreio e validação de conteúdo de objetos da tela de perfil
+- [ ] Acessar a tela de cadastro de jogador
+- [ ] Validar os campos do cadastro de jogador
+- [ ] Realizar os testes de back-end
 
+### Como executar os testes
 
-### Colaboradores:
-- Bruno
-- Jéssica
-- Renata
+Execute esse comando para rodar os testes
+
+`npx playwright test`
+
+Execute esse comando para rodar os testes de forma visual
+
+`npx playwright test --ui`
 
 ### Links úteis
+
 [Documentação Playwrigth](https://playwright.dev/)
 
 [Ambiente de testes](https://frontend-nnf7bytugq-uc.a.run.app/)
 
-### Como executar os testes
-Execute esse comando para rodar os testes
-
-```npx playwright test```
-
-Execute esse comando para rodar os testes de forma visual
+### Colaboradores:
 
-```npx playwright test --ui```
+- Bruno Machado:
+  [![Github](https://img.shields.io/badge/brunomachadors-100000?style=flat-square&logo=github&logoColor=white&link=https://github.com/brunomachadors)](https://github.com/brunomachadors)
+  [![Gmail](https://img.shields.io/badge/[email protected]?style=flat-square&logo=Gmail&logoColor=white&link=mailto:[email protected])](mailto:[email protected])
+  [![Linkedin](https://img.shields.io/badge/-brunomrs-blue?style=flat-square&logo=Linkedin&logoColor=white&link=https://www.linkedin.com/in/brunomrs/)](https://www.linkedin.com/in/brunomrs/)
+
+- Jéssica Ferraz:
+  [![Github](https://img.shields.io/badge/JessieFerraz-100000?style=flat-square&logo=github&logoColor=white&link=https://github.com/JessieFerraz)](https://github.com/JessieFerraz)
+  [![Gmail](https://img.shields.io/badge/[email protected]?style=flat-square&logo=Gmail&logoColor=white&link=mailto:[email protected])](mailto:[email protected])
+  [![Linkedin](https://img.shields.io/badge/-jessieferraz-blue?style=flat-square&logo=Linkedin&logoColor=white&link=https://www.linkedin.com/in/jessieferraz/)](https://www.linkedin.com/in/jessieferraz/)
+
+- Raquel Gomes:
+  [![Github](https://img.shields.io/badge/RaquelGomes25-100000?style=flat-square&logo=github&logoColor=white&link=https://github.com/RaquelGomes25)](https://github.com/RaquelGomes25)
+  [![Gmail](https://img.shields.io/badge/[email protected]?style=flat-square&logo=Gmail&logoColor=white&link=mailto:[email protected])](mailto:[email protected])
+  [![Linkedin](https://img.shields.io/badge/-rakelmaria-blue?style=flat-square&logo=Linkedin&logoColor=white&link=https://www.linkedin.com/in/rakelmaria/)](https://www.linkedin.com/in/rakelmaria/)
+
+- Renata Valois:
+  [![Github](https://img.shields.io/badge/revalois-100000?style=flat-square&logo=github&logoColor=white&https://github.com/revalois)](https://github.com/revalois)
+  [![Gmail](https://img.shields.io/badge/[email protected]?style=flat-square&logo=Gmail&logoColor=white&link=mailto:[email protected])](mailto:[email protected])
+  [![Linkedin](https://img.shields.io/badge/-renatavalois-blue?style=flat-square&logo=Linkedin&logoColor=white&link=https://www.linkedin.com/in//renata-valois-42043357/)](https://www.linkedin.com/in//renata-valois-42043357/)

package.json

@@ -1,26 +1,33 @@
 {
   "name": "temvagamestre.teste",
   "version": "1.0.0",
-  "description": "Este projeto será uma framework de automação de teste para o projeto 'Tem Vaga, Mestre?' com o objetivo de validar testes de front-end e back-end",
-  "main": "index.js",
-  "scripts": {},
+  "description": "Framework de automação de testes para o projeto 'Tem Vaga Mestre?', com o objetivo de validar testes de front-end e back-end.",
+  "scripts": {
+    "test": "npx playwright test"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Quest-Finder/temvagamestre.teste.git"
   },
-  "keywords": [],
-  "authors": [
-    {"name": "Bruno Machado"},
-    {"name": "Jéssica Ferraz"},
-    {"name": "Renata Valois"}
+  "keywords": [
+    "automação",
+    "teste",
+    "playwright"
+  ],
+  "contributors": [
+    "Bruno Machado",
+    "Jéssica Ferraz",
+    "Raquel Gomes",
+    "Renata Valois"
   ],
-  "license": "ISC",
+  "license": "none",
   "bugs": {
     "url": "https://github.com/Quest-Finder/temvagamestre.teste/issues"
   },
   "homepage": "https://github.com/Quest-Finder/temvagamestre.teste#readme",
   "devDependencies": {
     "@playwright/test": "^1.43.1",
-    "@types/node": "^20.12.7"
+    "@types/node": "^20.12.7",
+    "dotenv": "^16.4.5"
   }
 }

pages/perfil.js

@@ -9,6 +9,9 @@ exports.PerfilPage = class PerfilPage {
   async goto() {
     await this.page.goto(PATH.perfil);
   }
+  async validateTitle() {
+    await expect(this.page).toHaveTitle(/Tem Vaga Mestre/);
+  }
 
   async clicarExtenderBio() {
     const extenderBioButton = { role: 'button', name: 'Ver mais' };
@@ -29,15 +32,28 @@ exports.PerfilPage = class PerfilPage {
     await expect(this.page.getByText(bio)).toHaveText(bio);
   }
 
-  async validarTitulo() {
-    await expect(this.page).toHaveTitle(/Tem Vaga Mestre/);
+  async validateTitleEstilosPreferidos() {
+    const tituloEstilosPreferidos = {
+      role: 'heading',
+      name: 'Estilos preferidos',
+    };
+    await expect(
+      this.page.getByRole(tituloEstilosPreferidos.role, {
+        name: tituloEstilosPreferidos.name,
+      })
+    ).toBeVisible();
   }
 
-  async validarEstilosPreferidos() {
-    const estilosPreferidos = "(//h1[contains(.,'Estilos preferidos')])[1]";
-    await expect(this.page.locator(estilosPreferidos)).toBeVisible();
+  async validarEstilosDeJogoEscolhidos(estilos) {
+    estilos.forEach(async (estilo) => {
+      const localizador = "//span[@title='" + estilo + "']";
+      await expect(this.page.locator(localizador)).toBeVisible();
+
+      await expect(this.page.locator(localizador)).toHaveText(estilo);
+    });
   }
-  async validarTituloConquistas() {
+
+  async validateTitleConquistas() {
     const conquistas = { role: 'heading', name: 'Conquistas' };
     await expect(
       this.page.getByRole(conquistas.role, { name: conquistas.name })
@@ -49,30 +65,47 @@ exports.PerfilPage = class PerfilPage {
       const localizador = "//p[contains(.,'" + insignia + "')]";
       await expect(this.page.locator(localizador)).toBeVisible();
       await expect(this.page.locator(localizador)).toHaveText(insignia);
-      console.log(insignia);
     });
   }
 
   async validarNome(nome) {
-    const nomeUsuario = "//h2[contains(.,'Lucas Marcelo')]";
-    await expect(this.page.locator(nomeUsuario)).toBeVisible();
-    await expect(this.page.locator(nomeUsuario)).toHaveText(nome);
+    const nomeUsuario = { role: 'heading', name: nome };
+    await expect(
+      this.page.getByRole(nomeUsuario.role, { name: nomeUsuario.name })
+    ).toBeVisible();
+    await expect(
+      this.page.getByRole(nomeUsuario.role, { name: nomeUsuario.name })
+    ).toHaveText(nome);
   }
 
-  async validarPronome() {
-    const pronomeUsuario = "//h2[contains(.,'(Ele - Dele)')]";
-    await expect(this.page.locator(pronomeUsuario)).toBeVisible();
+  async validarPronome(pronome) {
+    const pronomeUsuario = { role: 'heading', name: `(${pronome})` };
+    await expect(
+      this.page.getByRole(pronomeUsuario.role, { name: pronomeUsuario.name })
+    ).toBeVisible();
+    await expect(
+      this.page.getByRole(pronomeUsuario.role, { name: pronomeUsuario.name })
+    ).toHaveText(pronomeUsuario.name);
   }
 
-  async validarUsername() {
-    const username = "//h2[contains(.,'@mestremarcelo')]";
-    await expect(this.page.locator(username)).toBeVisible();
+  async validarUsername(username) {
+    const usernamePerfil = { role: 'heading', name: username };
+    await expect(
+      this.page.getByRole(usernamePerfil.role, { name: usernamePerfil.name })
+    ).toBeVisible();
+    await expect(
+      this.page.getByRole(usernamePerfil.role, { name: usernamePerfil.name })
+    ).toHaveText(username);
   }
 
-  async validarUserTitle() {
-    const userTitle =
-      "//h2[contains(.,'Mestre D&D com 15 anos de experiência')]";
-    await expect(this.page.locator(userTitle)).toBeVisible();
+  async validarUserTitle(titulo) {
+    const userTitle = { role: 'heading', name: titulo };
+    await expect(
+      this.page.getByRole(userTitle.role, { name: userTitle.name })
+    ).toBeVisible();
+    await expect(
+      this.page.getByRole(userTitle.role, { name: userTitle.name })
+    ).toHaveText(titulo);
   }
 
   async validarLocalResidencia(cidade, pais) {

playwright.config.js

@@ -1,11 +1,11 @@
 // @ts-check
 const { defineConfig, devices } = require('@playwright/test');
+require('dotenv').config();
 
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
  */
-// require('dotenv').config();
 
 /**
  * @see https://playwright.dev/docs/test-configuration
@@ -25,12 +25,16 @@ module.exports = defineConfig({
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-  baseURL: 'https://frontend-nnf7bytugq-uc.a.run.app/',
-
+    baseURL: process.env.BASE_URL,
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
   },
 
+  timeout: 10000,
+  expect: {
+    timeout: 10000,
+  },
+
   /* Configure projects for major browsers */
   projects: [
     {
@@ -76,4 +80,3 @@ module.exports = defineConfig({
   //   reuseExistingServer: !process.env.CI,
   // },
 });
-