initial commit 🚀

Author: AlexAlexandreAlves

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    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: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -0,0 +1,7 @@
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

README.md

@@ -0,0 +1,69 @@
+# Test Automation Facade Pattern
+
+Este projeto é uma suíte de testes automatizados utilizando [Playwright](https://playwright.dev/) para validar fluxos de autenticação e cadastro em uma aplicação web. O projeto adota o **Facade Pattern** para organizar e simplificar a interação com as páginas, tornando os testes mais legíveis, reutilizáveis e de fácil manutenção.
+
+## Contexto
+
+O objetivo deste repositório é demonstrar como estruturar testes automatizados de ponta a ponta (E2E) utilizando o padrão de projeto **Facade**. Esse padrão encapsula operações complexas de páginas em classes de fachada, expondo métodos de alto nível para os testes, sem que eles precisem conhecer detalhes de implementação dos elementos da interface.
+
+## Sobre o Facade Pattern
+
+O **Facade Pattern** (Padrão Fachada) é utilizado para fornecer uma interface simplificada para um conjunto de interfaces em um subsistema. No contexto deste projeto, cada fluxo de negócio (ex: autenticação, cadastro) possui uma fachada (`AuthFacade`, `RegisterFacade`) que abstrai as interações com os elementos da página, facilitando a escrita e manutenção dos testes.
+
+**Exemplo:**
+```typescript
+const register = new RegisterFacade(page);
+await register.registerAs("[email protected]", "Nome", "senha", "senha");
+```
+
+## Estrutura do Projeto
+
+- `ui/pages/`: Page Objects com os elementos e ações de cada página.
+- `ui/facade/`: Facades que encapsulam fluxos completos de negócio.
+- `tests/`: Arquivos de teste automatizados.
+- `playwright.config.ts`: Configuração do Playwright (incluindo baseURL).
+
+## Comandos Essenciais
+
+- **Executar todos os testes:**
+  ```
+  npx playwright test
+  ```
+
+- **Executar testes em modo UI interativo:**
+  ```
+  npx playwright test --ui
+  ```
+
+- **Executar testes em um navegador específico:**
+  ```
+  npx playwright test --project=chromium
+  ```
+
+- **Executar um arquivo de teste específico:**
+  ```
+  npx playwright test tests/login.test.ts
+  ```
+
+- **Executar em modo debug:**
+  ```
+  npx playwright test --debug
+  ```
+
+- **Gerar testes automaticamente com Codegen:**
+  ```
+  npx playwright codegen
+  ```
+
+## Requisitos
+
+- Node.js instalado
+- Dependências instaladas com:
+  ```
+  npm install
+  ```
+
+## Observações
+
+- O projeto utiliza `baseURL` configurado no `playwright.config.ts`, permitindo o uso de caminhos relativos nos testes.
+- Como a aplicação de exemplo não possui banco de dados persistente, os dados criados existem apenas durante a sessão.

constants/constants.ts

@@ -0,0 +1 @@
+const BASE_URL = "https://bugbank.netlify.app/";

package-lock.json

@@ -0,0 +1,13 @@
+{
+  "name": "automation-patterns",
+  "version": "1.0.0",
+  "description": "automation test patterns",
+  "main": "index.js",
+  "scripts": {},
+  "author": "Alex Alexandre Alves",
+  "license": "ISC",
+  "devDependencies": {
+    "@playwright/test": "^1.54.0",
+    "@types/node": "^24.0.13"
+  }
+}

package.json

@@ -0,0 +1,79 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: false,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* 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://bugbank.netlify.app/',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://localhost:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});

playwright.config.ts

@@ -0,0 +1,17 @@
+import { test } from '@playwright/test';
+import { OauthFlow } from '../ui/flows/oauth-flow';
+
+
+test.beforeEach(async ({ page }) => {
+    await page.goto('/')
+})
+
+test.describe('Register and Authentication tests', () => {
+
+    test('CT001 - Should be able to register and do login with a new user with success', async ({ page }) => {
+        // Start the selected flow
+        const oauthFlow = new OauthFlow(page);
+        // Do the test
+        oauthFlow.login("Testezinho da silva", "[email protected]", "12345", "12345");
+    });
+});

tests/login.test.ts

@@ -0,0 +1,33 @@
+import { expect, Page } from '@playwright/test';
+import { LoginPage } from '../pages/login-page';
+import { RegisterPage } from '../pages/register-page';
+
+export class OauthFlow {
+    constructor(private page: Page) { }
+
+    async login(name: string, email: string, password: string, confirmationPassword: string) {
+
+        const loginPage = new LoginPage(this.page);
+        const registerPage = new RegisterPage(this.page);
+
+        // Registration
+        await loginPage.clickRegisterButton(); 
+        await registerPage.fillEmail(email);
+        await registerPage.fillName(name);
+        await registerPage.fillPassword(password);
+        await registerPage.fillPasswordConfirmation(confirmationPassword);
+        await registerPage.clickRegisterButton();
+
+        // // Registration assert
+        // await expect(registerPage.confirmationMessage).toBeVisible();
+        // await expect(registerPage.confirmationIcon).toBeVisible();
+        // await registerPage.closeButton.click();
+
+        // // Do login
+        // await loginPage.fillEmail(email);
+        // await loginPage.fillPassword(password);
+        // await loginPage.clickLoginButton();
+        // await this.page.waitForURL("https://bugbank.netlify.app/home");
+        // await expect(this.page).toHaveURL("https://bugbank.netlify.app/home");
+    }
+}

ui/flows/oauth-flow.ts

@@ -0,0 +1,36 @@
+import { Page, Locator } from "@playwright/test";
+
+
+export class LoginPage {
+
+    readonly page: Page;
+    readonly emailInput: Locator;
+    readonly passwordInput: Locator;
+    readonly loginButton: Locator;
+    readonly registerButton: Locator;
+
+    constructor(page: Page) {
+        this.page = page;
+        this.emailInput = page.locator('form').filter({ hasText: 'E-mailSenhaAcessarRegistrarConheça nossos requisitosA aplicação não conta com' }).getByPlaceholder('Informe seu e-mail');
+        this.passwordInput = page.locator('form').filter({ hasText: 'E-mailSenhaAcessarRegistrarConheça nossos requisitosA aplicação não conta com' }).getByPlaceholder('Informe sua senha');
+        this.loginButton = page.getByRole('button', { name: 'Acessar' });
+        this.registerButton = page.getByRole('button', { name: 'Registrar' });
+    }
+
+    async fillEmail(email: string) {
+        await this.emailInput.fill(email);
+    }
+
+    async fillPassword(password: string) {
+        await this.passwordInput.fill(password);
+    }
+
+    async clickLoginButton() {
+        await this.loginButton.click();
+    }
+
+    async clickRegisterButton() {
+        await this.registerButton.click();
+    }
+
+}