Playwright Framework – Hocine Benbara

OverviewVue d'ensemble

A production-grade end-to-end test framework built with Playwright and TypeScript. It implements the Page Object Model, uses custom fixtures for dependency injection, drives test data from JSON files, and pushes results automatically to Zephyr Scale via a custom reporter. Un framework de tests end-to-end prêt pour la production, construit avec Playwright et TypeScript. Il implémente le Page Object Model, utilise des fixtures personnalisées pour l'injection de dépendances, pilote les données depuis des fichiers JSON, et pousse les résultats automatiquement vers Zephyr Scale via un reporter personnalisé.

Project structureStructure du projet

src/ ├── fixtures/ │ └── baseTest.ts // custom fixtures – DI for page objects ├── pages/ │ ├── BasePage.ts // shared helpers (goto, waitFor…) │ ├── LoginPage.ts │ └── DashboardPage.ts ├── locators/ │ └── login.locators.ts // all selectors in one place ├── data/ │ └── testData.json // credentials, env config ├── reporters/ │ └── zephyrReporter.ts // auto-push results to Zephyr Scale └── tests/ └── login.spec.ts

Key featuresFonctionnalités clés

🏗️

Page Object ModelPage Object Model
Each page has its own class. Selectors are defined once in a dedicated locators file — never hardcoded in test files. Chaque page a sa propre classe. Les sélecteurs sont définis une fois dans un fichier de locators dédié — jamais codés en dur dans les tests.
⚡

Custom fixturesFixtures personnalisées
Page objects are injected into tests via test.extend() — no manual instantiation, no shared state between tests. Les page objects sont injectés dans les tests via test.extend() — pas d'instanciation manuelle, pas d'état partagé entre tests.
📊

Data-driven via JSONData-driven via JSON
All test data (users, URLs, expected values) lives in data/testData.json. Environment-specific configs are injected via BASE_URL env variable. Toutes les données de test (utilisateurs, URLs, valeurs attendues) vivent dans data/testData.json. Les configs par environnement sont injectées via la variable BASE_URL.
📸

Screenshot on failureScreenshot sur échec
Configured via screenshot: 'only-on-failure' in playwright.config.ts — zero extra code in test files. Configuré via screenshot: 'only-on-failure' dans playwright.config.ts — aucun code supplémentaire dans les tests.
📋

Zephyr Scale reporting
A custom reporter reads test results after each run and pushes Pass/Fail/Blocked statuses to Zephyr Scale via the REST API — no manual update needed. Un reporter personnalisé lit les résultats après chaque run et pousse les statuts Pass/Fail/Blocked vers Zephyr Scale via l'API REST — aucune mise à jour manuelle.
🔁

CI / GitHub Actions
Runs on every push. Secrets injected at runtime. HTML report uploaded as artifact — accessible directly from the Actions summary. S'exécute à chaque push. Secrets injectés au runtime. Rapport HTML uploadé en artefact — accessible directement depuis le résumé Actions.

Core configConfig principale

playwright.config.ts

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  reporter: [['html', { outputFolder: 'playwright-report', open: 'always' }]],
  testDir: './tests',
  timeout: 30 * 1000,
  use: {
    headless: false,
    baseURL: process.env.BASE_URL,
    screenshot: 'only-on-failure',
  },
  projects: [{
    name: 'chromium',
    use: { ...devices['Desktop Chrome'] },
  }],
});

CI / GitHub Actions

.github/workflows/playwright.yml

name: Playwright Tests
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20' }
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test
        env:
          BASE_URL:      ${{ secrets.BASE_URL }}
          ZEPHYR_TOKEN:  ${{ secrets.ZEPHYR_TOKEN }}
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-report
          path: playwright-report/