diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml new file mode 100644 index 0000000..02dbf6b --- /dev/null +++ b/.github/workflows/playwright.yml @@ -0,0 +1,39 @@ +name: Playwright Tests +on: + push: + branches: [main] + pull_request: + branches: [main] + +jobs: + test: + timeout-minutes: 60 + runs-on: ubuntu-latest + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: "lts/*" + + - name: Install pnpm + run: npm install -g pnpm + + - name: Install dependencies + run: pnpm install + + - name: Install Playwright Browsers + run: pnpm exec playwright install --with-deps + + - name: Run Playwright tests + run: pnpm exec playwright test + + - name: Upload Playwright Report + uses: actions/upload-artifact@v4 + if: ${{ !cancelled() }} + with: + name: playwright-report + path: playwright-report/ + retention-days: 30 diff --git a/client/.gitignore b/client/.gitignore new file mode 100644 index 0000000..488575a --- /dev/null +++ b/client/.gitignore @@ -0,0 +1,5 @@ + clientnode_modules/ +/test-results/ +/playwright-report/ +/blob-report/ +/playwright/.cache/ diff --git a/client/package.json b/client/package.json index 227fdc5..ce24cbd 100644 --- a/client/package.json +++ b/client/package.json @@ -32,7 +32,7 @@ }, "devDependencies": { "@antfu/eslint-config": "^3.0.0", - "@playwright/test": "^1.46.1", + "@playwright/test": "^1.48.0", "@rushstack/eslint-patch": "^1.10.4", "@testing-library/jest-dom": "^6.5.0", "@testing-library/vue": "^8.1.0", diff --git a/client/playwright.config.ts b/client/playwright.config.ts index fd557af..b8894a1 100644 --- a/client/playwright.config.ts +++ b/client/playwright.config.ts @@ -1,26 +1,23 @@ -import process from "node:process"; -import { defineConfig, devices } from "@playwright/test"; +import { defineConfig, devices } from '@playwright/test'; + +// For CI, you may want to set BASE_URL to the deployed application. +const baseURL = process.env["BASE_URL"] || "http://localhost:5173"; /** * Read environment variables from file. * https://github.com/motdotla/dotenv */ -// require('dotenv').config(); +// 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: "./e2e", - /* Maximum time one test can run for. */ - timeout: 30 * 1000, - expect: { - /** - * Maximum time expect() should wait for the condition to be met. - * For example in `await expect(locator).toHaveText();` - */ - timeout: 5000, - }, + testDir: './tests', + /* Run tests in files in parallel */ + fullyParallel: true, /* Fail the build on CI if you accidentally left test.only in the source code. */ forbidOnly: !!process.env.CI, /* Retry on CI only */ @@ -28,83 +25,52 @@ export default defineConfig({ /* 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", + reporter: 'html', /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ use: { - /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */ - actionTimeout: 0, - /* Base URL to use in actions like `await page.goto('/')`. */ - baseURL: "http://localhost:5173", + baseURL, /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ - trace: "on-first-retry", - - /* Only on CI systems run the tests headless */ - headless: !!process.env.CI, + trace: 'on-first-retry', }, /* Configure projects for major browsers */ projects: [ { - name: "chromium", - use: { - ...devices["Desktop Chrome"], - }, - }, - { - name: "firefox", - use: { - ...devices["Desktop Firefox"], - }, + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, }, + { - name: "webkit", - use: { - ...devices["Desktop Safari"], - }, + name: 'firefox', + use: { ...devices['Desktop Firefox'] }, }, /* Test against mobile viewports. */ // { // name: 'Mobile Chrome', - // use: { - // ...devices['Pixel 5'], - // }, + // use: { ...devices['Pixel 5'] }, // }, // { // name: 'Mobile Safari', - // use: { - // ...devices['iPhone 12'], - // }, + // use: { ...devices['iPhone 12'] }, // }, /* Test against branded browsers. */ // { // name: 'Microsoft Edge', - // use: { - // channel: 'msedge', - // }, + // use: { ...devices['Desktop Edge'], channel: 'msedge' }, // }, // { // name: 'Google Chrome', - // use: { - // channel: 'chrome', - // }, + // use: { ...devices['Desktop Chrome'], channel: 'chrome' }, // }, ], - /* Folder for test artifacts such as screenshots, videos, traces, etc. */ - // outputDir: 'test-results/', - /* Run your local dev server before starting the tests */ - webServer: { - /** - * Use the dev server by default for faster feedback loop. - * Use the preview server on CI for more realistic testing. - * Playwright will re-use the local server if there is already a dev-server running. - */ - command: process.env.CI ? "vite preview --port 5173" : "vite dev", - port: 5173, - reuseExistingServer: !process.env.CI, - }, + // webServer: { + // command: 'npm run start', + // url: 'http://127.0.0.1:3000', + // reuseExistingServer: !process.env.CI, + // }, }); diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml index f2de122..3a2f8a9 100644 --- a/client/pnpm-lock.yaml +++ b/client/pnpm-lock.yaml @@ -46,7 +46,7 @@ importers: specifier: ^3.0.0 version: 3.7.3(@typescript-eslint/utils@8.8.1(eslint@9.12.0)(typescript@5.4.5))(@vue/compiler-sfc@3.5.11)(eslint@9.12.0)(typescript@5.4.5)(vitest@2.1.2(@types/node@20.16.11)(jsdom@25.0.1)(terser@5.34.1)) '@playwright/test': - specifier: ^1.46.1 + specifier: ^1.48.0 version: 1.48.0 '@rushstack/eslint-patch': specifier: ^1.10.4 diff --git a/client/src/components.d.ts b/client/src/components.d.ts index 67d8c9e..b5f7f66 100644 --- a/client/src/components.d.ts +++ b/client/src/components.d.ts @@ -2,7 +2,7 @@ // @ts-nocheck // Generated by unplugin-vue-components // Read more: https://github.com/vuejs/core/pull/3399 -export {}; +export {} /* prettier-ignore */ declare module 'vue' { diff --git a/client/tests/homePage.spec.ts b/client/tests/homePage.spec.ts new file mode 100644 index 0000000..72f6959 --- /dev/null +++ b/client/tests/homePage.spec.ts @@ -0,0 +1,22 @@ +// tests/homePage.spec.js +import { test, expect } from '@playwright/test'; + +test.describe('Home Page', () => { + test.beforeEach(async ({ page }) => { + await page.goto('http://localhost:5173'); // URL de votre application + }); + + test('should display the header elements', async ({ page }) => { + const headerLogo = page.locator('[data-testid="header-logo"]'); + await expect(headerLogo).toBeVisible(); + await expect(headerLogo).toContainText('Ministère'); + + const serviceTitle = page.locator('.fr-header__service-title'); + await expect(serviceTitle).toBeVisible(); + await expect(serviceTitle).toContainText('Référentiel des Applications'); + + const serviceTagline = page.locator('.fr-header__service-tagline'); + await expect(serviceTagline).toBeVisible(); + await expect(serviceTagline).toContainText('Une application pour les réunir toutes'); + }); +}); \ No newline at end of file