Enhance project configuration and testing setup

- Updated .gitignore to include Playwright-related directories and output files.
- Removed the test command from the Dockerfile to streamline the build process.
- Modified Makefile targets to improve clarity and remove unnecessary dependencies.
- Updated nuxt.config.ts to adjust HTTPS settings for development and improve Playwright compatibility.
- Added Playwright installation scripts to package.json for easier setup.
- Enhanced GitHub Actions workflow to better manage dependencies and testing in Docker.

These changes improve the development workflow and ensure better integration with Playwright for end-to-end testing.

Author: tacxou

.github/workflows/lint.yml

@@ -5,19 +5,53 @@ on:
     branches:
       - '*'
 
+env:
+  CI_IMG: ghcr.io/libertech-fr/sesame-gestion-mdp
+  NODE_MODULES_VOL: sesame-gestion-mdp-node-modules
+  PLAYWRIGHT_CACHE_VOL: sesame-gestion-mdp-playwright-cache
+
 jobs:
   lint-app:
     runs-on: ubuntu-latest
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
-      - name: Install app dependencies
-        run: yarn install
+      - name: Réseau Docker dev
+        run: docker network create dev || true
 
-      - name: Tests
-        run: yarn test
+      - name: Dépendances + Chromium Playwright (dans Docker)
+        run: |
+          docker run --rm \
+            -u 0 \
+            -e NODE_ENV=development \
+            -e NODE_TLS_REJECT_UNAUTHORIZED=0 \
+            -e DEBIAN_FRONTEND=noninteractive \
+            --add-host host.docker.internal:host-gateway \
+            --platform linux/amd64 \
+            --network dev \
+            -v "${GITHUB_WORKSPACE}:/data" \
+            -v "${NODE_MODULES_VOL}:/data/node_modules" \
+            -v "${PLAYWRIGHT_CACHE_VOL}:/root/.cache/ms-playwright" \
+            -w /data \
+            "${CI_IMG}" sh -lc 'yarn install --prefer-offline --non-interactive && yarn playwright:install-chromium'
 
-      - name: Build Nuxt
-        run: yarn build
+      - name: Tests + build (yarn ci dans Docker)
+        run: |
+          docker run --rm \
+            -u 0 \
+            -e CI=1 \
+            -e NODE_ENV=development \
+            -e NODE_TLS_REJECT_UNAUTHORIZED=0 \
+            -e DEBIAN_FRONTEND=noninteractive \
+            -e SESAME_HTTPS_ENABLED=false \
+            -e BROWSERSLIST_IGNORE_OLD_DATA=1 \
+            -e PLAYWRIGHT_BASE_URL=http://127.0.0.1:3000 \
+            --platform linux/amd64 \
+            --network dev \
+            -v "${GITHUB_WORKSPACE}:/data" \
+            -v "${NODE_MODULES_VOL}:/data/node_modules" \
+            -v "${PLAYWRIGHT_CACHE_VOL}:/root/.cache/ms-playwright" \
+            -w /data \
+            "${CI_IMG}" sh -lc 'yarn playwright:install-deps && yarn ci'

.gitignore

@@ -4,4 +4,7 @@ node_modules
 .env
 .DS_Store
 src/components/.DS_Store
-.output/
+.output/
+test-results/
+playwright-report/
+playwright/.cache/

Dockerfile

@@ -33,7 +33,6 @@ RUN yarn install \
 # && yarn autoclean --init \
 # && yarn autoclean --force
 
-RUN yarn test
 RUN yarn build
 
 EXPOSE 3000

Makefile

@@ -8,9 +8,12 @@ IMG_NAME = ghcr.io/libertech-fr/sesame-gestion-mdp
 BASE_NAME = sesame
 APP_NAME = sesame-gestion-mdp
 # Volume dédié : évite de monter les node_modules du mac dans le conteneur Linux.
-# Flux : pas de yarn install sur le Mac — make exec puis yarn install / yarn add (lockfile + package.json sur l’hôte via le montage).
-# Puis make build | make dev | make test (Vitest) | make verify (tests + build Nuxt).
+# Réseau Docker « dev » : créer une fois (make network-dev ou docker network create dev).
+# Flux : pas de yarn sur le Mac — make exec puis yarn install ; e2e / CI : docker dans .github/workflows/lint.yml.
+# Chaque « make test » / « verify » : nouveau conteneur → yarn playwright:install-deps puis tests (prérequis : node_modules + cache Playwright remplis, ex. étapes du workflow ou exec).
 NODE_MODULES_VOLUME = sesame-gestion-mdp-node-modules
+# Cache Chromium Playwright (Linux) entre les « make exec » — pas sur le Mac.
+PLAYWRIGHT_CACHE_VOLUME = sesame-gestion-mdp-playwright-cache
 
 -include .env
 
@@ -33,7 +36,7 @@ SESAME_SENTRY_DSN ?=
 $(shell mkdir -p $(CERT_DIR))
 
 .PHONY: network-dev
-network-dev: ## Créer le réseau Docker « dev » s’il n’existe pas
+network-dev: ## Créer le réseau Docker « dev » s’il n’existe pas (à lancer une fois après install machine)
 	@docker network inspect dev >/dev/null 2>&1 || docker network create dev
 
 .DEFAULT_GOAL := help
@@ -42,7 +45,7 @@ help:
 	@grep -h -E '^[-a-zA-Z0-9_\.\/]+:.*?## .*$$' $(MAKEFILE_LIST) \
 		| sort | awk 'BEGIN {FS = ":.*?## "}; {printf "  \033[32m%-18s\033[0m %s\n", $$1, $$2}'
 
-build: ## Image Docker (Dockerfile : yarn test puis yarn build ; pas de tests dans le script build)
+build: ## Image Docker (yarn build dans l’image ; pas de Playwright dans l’image — voir workflow GitHub)
 	@docker build --platform $(PLATFORM) -t $(IMG_NAME) --no-cache --progress=plain \
 		--build-arg BUILD_VERSION=$(DOCKER_TAG) \
 		--build-arg GIT_BRANCH=$(GIT_BRANCH) \
@@ -51,7 +54,7 @@ build: ## Image Docker (Dockerfile : yarn test puis yarn build ; pas de tests da
 		.
 
 # Mode « simulation » : image déjà buildée, env + certificats montés (sans écraser tout le code par le bind-mount complet)
-simulation: network-dev ## Lancer en NODE_ENV=production avec montages ciblés (.env, certificats, hash)
+simulation: ## Lancer en NODE_ENV=production avec montages ciblés (.env, certificats, hash)
 	@touch $(CURDIR)/.env.hash
 	@docker run --rm -it \
 		-e NODE_ENV=production \
@@ -71,7 +74,7 @@ simulation: network-dev ## Lancer en NODE_ENV=production avec montages ciblés (
 		-v $(CURDIR)/.env.hash:/data/.env.hash \
 		$(IMG_NAME) yarn start:prod
 
-prod: network-dev ## Production : bind-mount du dépôt sur /data
+prod: ## Production : bind-mount du dépôt sur /data
 	@docker run --rm -it \
 		-e NODE_ENV=production \
 		-e NODE_TLS_REJECT_UNAUTHORIZED=0 \
@@ -88,7 +91,7 @@ prod: network-dev ## Production : bind-mount du dépôt sur /data
 		-v $(CURDIR):/data \
 		$(IMG_NAME) yarn start:prod
 
-dev: network-dev ## Développement : nuxt dev (deps : make exec → yarn install / yarn add)
+dev: ## Développement : nuxt dev (premier lancement : make network-dev, make exec → yarn install)
 	@docker run --rm -it \
 		-e NODE_ENV=development \
 		-e NODE_TLS_REJECT_UNAUTHORIZED=0 \
@@ -106,7 +109,7 @@ dev: network-dev ## Développement : nuxt dev (deps : make exec → yarn install
 		-v $(NODE_MODULES_VOLUME):/data/node_modules \
 		$(IMG_NAME) yarn dev
 
-debug: network-dev ## Idem dev + inspecteur Node (9229) ; deps via make exec → yarn install / yarn add
+debug: ## Idem dev + inspecteur Node (9229)
 	@docker run --rm -it \
 		-e NODE_ENV=development \
 		-e NODE_TLS_REJECT_UNAUTHORIZED=0 \
@@ -126,7 +129,7 @@ debug: network-dev ## Idem dev + inspecteur Node (9229) ; deps via make exec →
 		-v $(NODE_MODULES_VOLUME):/data/node_modules \
 		$(IMG_NAME) sh -lc 'NODE_OPTIONS="--inspect=0.0.0.0:9229" yarn dev'
 
-exec: network-dev ## Shell : yarn install, yarn add [-D] <pkg>, yarn remove… (package.json / lock sur l’hôte ; node_modules dans le volume)
+exec: ## Shell interactif (yarn install, yarn add, …)
 	@docker run -it --rm \
 		-e NODE_ENV=development \
 		-e NODE_TLS_REJECT_UNAUTHORIZED=0 \
@@ -136,6 +139,7 @@ exec: network-dev ## Shell : yarn install, yarn add [-D] <pkg>, yarn remove… (
 		-e SESAME_SENTRY_DSN=$(SESAME_SENTRY_DSN) \
 		-v $(CURDIR):/data \
 		-v $(NODE_MODULES_VOLUME):/data/node_modules \
+		-v $(PLAYWRIGHT_CACHE_VOLUME):/root/.cache/ms-playwright \
 		$(IMG_NAME) bash
 
 stop: ## Arrêter le conteneur applicatif
@@ -147,27 +151,41 @@ stop-all: ## Arrêter le conteneur applicatif (équivalent ici, pas de stack BDD
 run-lint: ## Rejouer le job GitHub Actions « lint-app » avec act (nécessite nektos/act)
 	act --container-architecture=linux/amd64 -j lint-app
 
-test: network-dev ## Tests : nuxt prepare + Vitest (pas de build Nuxt — voir make verify)
+test: ## Tests : paquets système Chromium puis prepare + Vitest + E2E (yarn install + Chromium : voir lint.yml)
 	@docker run --rm \
+		-u 0 \
+		-e CI=1 \
 		-e NODE_ENV=development \
 		-e NODE_TLS_REJECT_UNAUTHORIZED=0 \
+		-e DEBIAN_FRONTEND=noninteractive \
+		-e SESAME_HTTPS_ENABLED=false \
+		-e BROWSERSLIST_IGNORE_OLD_DATA=1 \
+		-e PLAYWRIGHT_BASE_URL=http://127.0.0.1:3000 \
 		--platform $(PLATFORM) \
 		--network dev \
 		-v $(CURDIR):/data \
 		-v $(NODE_MODULES_VOLUME):/data/node_modules \
+		-v $(PLAYWRIGHT_CACHE_VOLUME):/root/.cache/ms-playwright \
 		-w /data \
 		$(IMG_NAME) yarn test
 
-verify: network-dev ## CI locale : yarn test puis yarn build (comme le workflow GitHub)
+verify: ## CI locale : paquets système Chromium puis yarn ci (même prérequis que test)
 	@docker run --rm \
+		-u 0 \
+		-e CI=1 \
 		-e NODE_ENV=development \
 		-e NODE_TLS_REJECT_UNAUTHORIZED=0 \
+		-e DEBIAN_FRONTEND=noninteractive \
+		-e SESAME_HTTPS_ENABLED=false \
+		-e BROWSERSLIST_IGNORE_OLD_DATA=1 \
+		-e PLAYWRIGHT_BASE_URL=http://127.0.0.1:3000 \
 		--platform $(PLATFORM) \
 		--network dev \
 		-v $(CURDIR):/data \
 		-v $(NODE_MODULES_VOLUME):/data/node_modules \
+		-v $(PLAYWRIGHT_CACHE_VOLUME):/root/.cache/ms-playwright \
 		-w /data \
-		$(IMG_NAME) sh -lc 'yarn test && yarn build'
+		$(IMG_NAME) yarn ci
 
 ncu: ## Vérifier les mises à jour des dépendances
 	@npx npm-check-updates
@@ -200,3 +218,4 @@ hibp-key-hex: ## Générer une clé 32 octets (64 caractères hex)
 
 hibp-key-b64: ## Générer une clé 32 octets (base64)
 	@printf "SESAME_PASSWORD_HISTORY_HIBP_KEY=%s\n" "$$(openssl rand -base64 32)"
+

README.md

@@ -1,5 +1,8 @@
 # sesame-gestion-mdp
 Gestion des mot de passe sesame
+
+Les commandes **yarn** (install, test, build, etc.) se font dans **Docker** : `make build` puis `make exec`, puis par exemple `yarn install` et `yarn playwright:install` dans le shell du conteneur. Sur la CI, **`make ci-github`** enchaîne tout sans yarn sur le runner.
+
 ## build release
 Construire une release : 
 

nuxt.config.ts

@@ -1,13 +1,14 @@
-import { readFileSync, writeFileSync } from 'fs'
+import { readFileSync } from 'fs'
 import consola from 'consola'
 
-let https = {}
+/** `https: {}` active souvent du TLS par défaut ; `false` force le HTTP en dev (sonde Playwright sur http://127.0.0.1:3000). */
+let devHttps: false | { key: string; cert: string } = false
 if (/yes|1|on|true/i.test(`${process.env.SESAME_HTTPS_ENABLED}`)) {
   try {
-    https = {
+    devHttps = {
       key: readFileSync(`${process.env.SESAME_HTTPS_PATH_KEY}`, 'utf8'),
       cert: readFileSync(`${process.env.SESAME_HTTPS_PATH_CERT}`, 'utf8'),
-    };
+    }
     consola.info('[Nuxt] SSL certificates loaded successfully')
   } catch (error) {
     consola.warn('[Nuxt] Error while reading SSL certificates', error)
@@ -17,10 +18,36 @@ if (/yes|1|on|true/i.test(`${process.env.SESAME_HTTPS_ENABLED}`)) {
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   compatibilityDate: '2024-04-03',
-  devtools: { enabled: true },
+  /** Quasar + vite-node : sans ça, `__QUASAR_SSR_SERVER__` reste non défini (hook vite insuffisant). Mode SPA adapté à cette UI. */
+  ssr: false,
+  /** E2E : moins de sockets (devtools) → moins de `write EPIPE` quand Playwright coupe les connexions. */
+  devtools: { enabled: process.env.E2E_TEST !== '1' },
   modules: ["nuxt-quasar-ui","@nuxt-alt/proxy"],
+  vite: {
+    define: {
+      // Constantes lues par `quasar/.../Platform.js` (import ESM, hors bundles vite:extendConfig).
+      __QUASAR_SSR__: false,
+      __QUASAR_SSR_SERVER__: false,
+      __QUASAR_SSR_CLIENT__: false,
+      __QUASAR_SSR_PWA__: false,
+    },
+    // E2E (Playwright) : évite « optimized deps changed → reload » + coupure TCP pendant les tests.
+    server: {
+      hmr: process.env.E2E_TEST !== '1',
+      ...(process.env.E2E_TEST === '1'
+        ? {
+            /** Pas de watch FS : moins d’activité réseau / rechargements pendant les e2e. */
+            watch: null,
+          }
+        : {}),
+    },
+    optimizeDeps: {
+      include: ['fast-password-entropy', 'hibp'],
+      holdUntilCrawlEnd: true,
+    },
+  },
   devServer: {
-    https,
+    https: devHttps,
   },
   srcDir: "src",
   appConfig: {
@@ -83,5 +110,5 @@ export default defineNuxtConfig({
     plugins: [
       'Notify'
     ]
-  }
+  },
 })

package.json

@@ -7,7 +7,11 @@
     "dev": "nuxt dev --host 0.0.0.0",
     "lint": "yarn nuxt prepare",
     "test:unit": "yarn vitest run",
-    "test": "yarn lint && yarn test:unit",
+    "playwright:install-deps": "playwright install-deps chromium",
+    "playwright:install-chromium": "playwright install chromium",
+    "playwright:install": "playwright install --with-deps chromium",
+    "test:e2e": "playwright test",
+    "test": "yarn lint && yarn test:unit && yarn test:e2e",
     "ci": "yarn test && yarn build",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
@@ -16,6 +20,7 @@
     "start": "node .output/server/index.mjs"
   },
   "devDependencies": {
+    "@playwright/test": "^1.51.1",
     "vitest": "^3.2.4"
   },
   "dependencies": {

playwright.config.ts

@@ -0,0 +1,64 @@
+import { defineConfig, devices } from '@playwright/test'
+
+const baseURL = process.env.PLAYWRIGHT_BASE_URL ?? 'http://127.0.0.1:3000'
+/** URL exacte pour la sonde de démarrage (évite blocage si baseURL sans slash final). */
+const webServerUrl = new URL('/', baseURL).href
+
+/** Désactive le webServer intégré (tu lances déjà `yarn dev` à part). */
+const skipWebServer = !!process.env.PLAYWRIGHT_SKIP_WEB_SERVER
+
+/**
+ * Le serveur Nuxt doit répondre en HTTP sur baseURL : désactive HTTPS pour l’e2e
+ * (sinon Playwright attend du HTTP alors que Nuxt écoute en HTTPS → attente infinie).
+ */
+const webServerEnv = {
+  CI: 'true',
+  /** Lu par `nuxt.config` : pas de HMR pendant le serveur lancé par Playwright (évite reload + ECONNRESET). */
+  E2E_TEST: '1',
+  /** Vue menu avec « Changer mon mot de passe » / « J'ai oublié… » (`LoginMenu.vue`, `action === 'menu'`). */
+  ACTION: 'menu',
+  BROWSERSLIST_IGNORE_OLD_DATA: '1',
+  SESAME_HTTPS_ENABLED: 'false',
+  SESAME_HTTPS_PATH_KEY: '',
+  SESAME_HTTPS_PATH_CERT: '',
+} as const
+
+export default defineConfig({
+  testDir: 'tests/e2e',
+  /** Un seul worker + pas de parallélisme de fichiers : un seul client sur le `yarn dev` partagé (évite EPIPE / races). */
+  fullyParallel: false,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 1 : 0,
+  workers: 1,
+  reporter: process.env.CI ? 'github' : 'list',
+  timeout: 60_000,
+  expect: { timeout: 15_000 },
+  use: {
+    baseURL,
+    trace: 'on-first-retry',
+    ignoreHTTPSErrors: true,
+    launchOptions: {
+      args: ['--disable-dev-shm-usage', '--no-sandbox'],
+    },
+  },
+  projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
+  ...(skipWebServer
+    ? {}
+    : {
+        webServer: {
+          command: 'yarn dev',
+          url: webServerUrl,
+          reuseExistingServer: !process.env.CI,
+          timeout: 300_000,
+          /** Réduit les EPIPE côté transport Playwright ↔ sous-processus (plus de pipe stdout/stderr). */
+          stdout: 'ignore',
+          stderr: 'ignore',
+          env: {
+            ...Object.fromEntries(
+              Object.entries(process.env).filter((e): e is [string, string] => e[1] !== undefined),
+            ),
+            ...webServerEnv,
+          },
+        },
+      }),
+})