From 8cb6a034167d0525674d91536b09912ae5a74c86 Mon Sep 17 00:00:00 2001 From: Caroline Robillard Date: Mon, 23 Dec 2024 15:37:39 +0100 Subject: [PATCH] test: :white_check_mark: Add package playwright for test e2e --- .github/workflows/playwright.yml | 39 ++++++++++++++ client/.gitignore | 5 ++ client/package.json | 3 +- client/playwright.config.ts | 88 ++++++++++---------------------- client/pnpm-lock.yaml | 29 ++++++----- client/src/components.d.ts | 2 +- client/tests/homePage.spec.ts | 22 ++++++++ 7 files changed, 112 insertions(+), 76 deletions(-) create mode 100644 .github/workflows/playwright.yml create mode 100644 client/.gitignore create mode 100644 client/tests/homePage.spec.ts 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..db4b546 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.49.1", "@rushstack/eslint-patch": "^1.10.4", "@testing-library/jest-dom": "^6.5.0", "@testing-library/vue": "^8.1.0", @@ -47,6 +47,7 @@ "eslint-plugin-playwright": "^1.6.2", "jsdom": "^25.0.0", "npm-run-all2": "^6.2.2", + "playwright": "^1.49.1", "rimraf": "^5.0.10", "typescript": "~5.4.5", "unplugin-auto-import": "^0.18.2", 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..976213d 100644 --- a/client/pnpm-lock.yaml +++ b/client/pnpm-lock.yaml @@ -46,8 +46,8 @@ 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 - version: 1.48.0 + specifier: ^1.49.1 + version: 1.49.1 '@rushstack/eslint-patch': specifier: ^1.10.4 version: 1.10.4 @@ -90,6 +90,9 @@ importers: npm-run-all2: specifier: ^6.2.2 version: 6.2.3 + playwright: + specifier: ^1.49.1 + version: 1.49.1 rimraf: specifier: ^5.0.10 version: 5.0.10 @@ -1003,8 +1006,8 @@ packages: resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==} engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0} - '@playwright/test@1.48.0': - resolution: {integrity: sha512-W5lhqPUVPqhtc/ySvZI5Q8X2ztBOUgZ8LbAFy0JQgrXZs2xaILrUcNO3rQjwbLPfGK13+rZsDa1FpG+tqYkT5w==} + '@playwright/test@1.49.1': + resolution: {integrity: sha512-Ky+BVzPz8pL6PQxHqNRW1k3mIyv933LML7HktS8uik0bUXNCdPhoS/kLihiO1tMf/egaJb4IutXd7UywvXEW+g==} engines: {node: '>=18'} hasBin: true @@ -3317,13 +3320,13 @@ packages: pkg-types@1.2.1: resolution: {integrity: sha512-sQoqa8alT3nHjGuTjuKgOnvjo4cljkufdtLMnO2LBP/wRwuDlo1tkaEdMxCRhyGRPacv/ztlZgDPm2b7FAmEvw==} - playwright-core@1.48.0: - resolution: {integrity: sha512-RBvzjM9rdpP7UUFrQzRwR8L/xR4HyC1QXMzGYTbf1vjw25/ya9NRAVnXi/0fvFopjebvyPzsmoK58xxeEOaVvA==} + playwright-core@1.49.1: + resolution: {integrity: sha512-BzmpVcs4kE2CH15rWfzpjzVGhWERJfmnXmniSyKeRZUs9Ws65m+RGIi7mjJK/euCegfn3i7jvqWeWyHe9y3Vgg==} engines: {node: '>=18'} hasBin: true - playwright@1.48.0: - resolution: {integrity: sha512-qPqFaMEHuY/ug8o0uteYJSRfMGFikhUysk8ZvAtfKmUK3kc/6oNl/y3EczF8OFGYIi/Ex2HspMfzYArk6+XQSA==} + playwright@1.49.1: + resolution: {integrity: sha512-VYL8zLoNTBxVOrJBbDuRgDWa3i+mfQgDTrL8Ah9QXZ7ax4Dsj0MSq5bYgytRnDVVe+njoKnfsYkH3HzqVj5UZA==} engines: {node: '>=18'} hasBin: true @@ -5372,9 +5375,9 @@ snapshots: '@pkgr/core@0.1.1': {} - '@playwright/test@1.48.0': + '@playwright/test@1.49.1': dependencies: - playwright: 1.48.0 + playwright: 1.49.1 '@polka/url@1.0.0-next.28': {} @@ -8086,11 +8089,11 @@ snapshots: mlly: 1.7.2 pathe: 1.1.2 - playwright-core@1.48.0: {} + playwright-core@1.49.1: {} - playwright@1.48.0: + playwright@1.49.1: dependencies: - playwright-core: 1.48.0 + playwright-core: 1.49.1 optionalDependencies: fsevents: 2.3.2 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