Add Playwright E2E tests for admin link correction

Author: JLG-WOCFR-DEV

.github/workflows/frontend-tests.yml

@@ -18,3 +18,7 @@ jobs:
         run: npm ci
       - name: Run front-end tests
         run: npm test
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+      - name: Run end-to-end tests
+        run: npm run test:e2e

.gitignore

@@ -1,3 +1,6 @@
 /vendor/
 /tmp/
 /node_modules/
+.playwright/
+playwright-report/
+test-results/

README.md

@@ -54,6 +54,26 @@ Liens Morts Detector est une extension WordPress qui détecte les liens et image
 - La taille des lots analysés peut être ajustée pour s’adapter aux capacités de l’hébergement (de manière optionnelle via l’interface ou un filtre).
 - L’analyse des images distantes (CDN, sous-domaines médias) peut être activée dans les réglages. Cette vérification reste basée sur les fichiers présents dans `wp-content/uploads` et peut rallonger la durée du scan ou consommer davantage de quotas côté CDN.
 
+## Tests automatisés
+
+### JavaScript (Jest)
+- `npm test` exécute l’intégralité de la suite Jest existante.
+
+### End-to-end (Playwright)
+1. Installer les navigateurs Playwright une fois : `npx playwright install --with-deps chromium`.
+2. Exporter les variables d’environnement nécessaires à l’authentification WordPress :
+   - `WP_E2E_BASE_URL` : URL racine de l’installation locale (`https://wp.test` par exemple).
+   - `WP_E2E_USERNAME` et `WP_E2E_PASSWORD` : identifiants d’un compte ayant accès au back-office.
+   - `WP_E2E_SAMPLE_LINK` : URL cassée présente dans le rapport et utilisée par le test.
+   - `WP_E2E_REPLACEMENT_URL` (optionnel) : URL de remplacement à appliquer pendant le scénario.
+   - `WP_E2E_STORAGE_STATE` (optionnel) : chemin du fichier de session Playwright si vous ne souhaitez pas utiliser la valeur par défaut `.playwright/wp-admin-state.json`.
+3. Lancer `npm run test:e2e` pour rejouer le parcours de correction d’un lot.
+
+> 💡 Lorsqu’elles sont définies, les variables `WP_E2E_*` permettent également à la configuration Playwright de générer automatiquement un état de session réutilisable via `tests/e2e/utils/global-setup.ts`. À défaut de configuration, la suite E2E est ignorée (et renvoie un succès) ce qui permet son exécution dans la CI même sans instance WordPress accessible.
+
+### Combinaison des suites
+- `npm run test:all` exécute successivement Jest puis Playwright.
+
 ## Détection des soft 404
 
 ### Principe des heuristiques

package-lock.json

@@ -3,10 +3,13 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "test": "jest --runInBand"
+    "test": "jest --runInBand",
+    "test:e2e": "playwright test",
+    "test:all": "npm run test && npm run test:e2e"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
+    "@playwright/test": "^1.56.0",
     "@wordpress/jest-preset-default": "^12.31.0",
     "babel-jest": "^30.2.0",
     "jest": "^30.2.0",

package.json

@@ -0,0 +1,37 @@
+import { defineConfig, devices } from '@playwright/test';
+import fs from 'node:fs';
+import path from 'node:path';
+
+const baseURL = process.env.WP_E2E_BASE_URL ?? 'http://localhost:8889';
+const storageStatePath = process.env.WP_E2E_STORAGE_STATE ?? path.resolve(__dirname, '.playwright', 'wp-admin-state.json');
+const hasStorageState = fs.existsSync(storageStatePath);
+
+const reporters = process.env.CI
+  ? [['github'], ['html', { open: 'never' }], ['list']]
+  : [['list'], ['html', { open: 'never' }]];
+
+export default defineConfig({
+  testDir: path.resolve(__dirname, 'tests/e2e'),
+  timeout: 120_000,
+  expect: {
+    timeout: 15_000,
+  },
+  reporter: reporters,
+  retries: process.env.CI ? 1 : 0,
+  workers: process.env.CI ? 2 : undefined,
+  use: {
+    baseURL,
+    headless: true,
+    storageState: hasStorageState ? storageStatePath : undefined,
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  globalSetup: require.resolve('./tests/e2e/utils/global-setup'),
+});

playwright.config.ts

@@ -0,0 +1,66 @@
+import { expect, test } from '@playwright/test';
+
+const baseURL = process.env.WP_E2E_BASE_URL;
+const username = process.env.WP_E2E_USERNAME;
+const password = process.env.WP_E2E_PASSWORD;
+const targetLink = process.env.WP_E2E_SAMPLE_LINK;
+const replacementFallback = targetLink ? `${targetLink}-corrige` : 'https://example.com/lien-corrige';
+const replacementUrl = process.env.WP_E2E_REPLACEMENT_URL ?? replacementFallback;
+
+const shouldSkip = !baseURL || !username || !password || !targetLink;
+
+test.describe('Correction d\'un lot de liens cassés', () => {
+  test.skip(shouldSkip, 'Les variables WP_E2E_* doivent être définies pour exécuter les tests end-to-end.');
+
+  test('permet de modifier un lien cassé depuis le tableau des liens', async ({ page }) => {
+    await page.goto('/wp-admin/admin.php?page=blc-dashboard', { waitUntil: 'domcontentloaded' });
+
+    if (page.url().includes('wp-login.php')) {
+      await page.fill('input#user_login', username!);
+      await page.fill('input#user_pass', password!);
+      await Promise.all([
+        page.waitForURL(/\/wp-admin\//, { timeout: 60_000 }),
+        page.click('input#wp-submit'),
+      ]);
+      await page.goto('/wp-admin/admin.php?page=blc-dashboard', { waitUntil: 'domcontentloaded' });
+    }
+
+    const tableRegion = page.locator('[data-blc-table-region]');
+    await expect(tableRegion, 'Le tableau des liens cassés doit être visible.').toBeVisible();
+
+    const targetRow = page.locator('#the-list tr', { hasText: targetLink! }).first();
+    await expect(targetRow, 'Le lien attendu doit être présent avant la correction.').toBeVisible();
+
+    await test.step('Ouvrir la modale d\'édition', async () => {
+      await targetRow.locator('.blc-edit-link').click();
+      await expect(page.locator('#blc-modal')).toBeVisible();
+    });
+
+    await test.step('Soumettre la nouvelle URL', async () => {
+      const modal = page.locator('#blc-modal');
+      await modal.locator('.blc-modal__input').fill(replacementUrl);
+      await Promise.all([
+        page.waitForResponse((response) =>
+          response.url().includes('admin-ajax.php') && response.request().method() === 'POST'
+        ),
+        modal.getByRole('button', { name: 'Mettre à jour' }).click(),
+      ]);
+    });
+
+    await test.step('Vérifier que la ligne est mise à jour', async () => {
+      await expect(
+        page.locator('#the-list tr', { hasText: targetLink! })
+      ).toHaveCount(0, { timeout: 20_000 });
+
+      const updatedRows = page.locator('#the-list tr', { hasText: replacementUrl });
+      if (await updatedRows.count()) {
+        const statusCell = updatedRows.first().locator('td.column-http_status');
+        await expect(statusCell).not.toBeEmpty();
+        await expect(statusCell).not.toContainText(/4\d\d|5\d\d/);
+      } else {
+        const successNotice = page.locator('#the-list tr.no-items, #wpbody-content');
+        await expect(successNotice).toContainText(/Action effectuée|Aucun lien cassé/i);
+      }
+    });
+  });
+});

tests/e2e/link-batch-correction.spec.ts

@@ -0,0 +1,37 @@
+import { chromium, FullConfig } from '@playwright/test';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+export default async function globalSetup(_config: FullConfig) {
+  const baseURL = process.env.WP_E2E_BASE_URL;
+  const username = process.env.WP_E2E_USERNAME;
+  const password = process.env.WP_E2E_PASSWORD;
+
+  if (!baseURL || !username || !password) {
+    console.warn(
+      '[playwright] Skipping authenticated storage state because WP_E2E_BASE_URL, WP_E2E_USERNAME or WP_E2E_PASSWORD is not set.'
+    );
+    return;
+  }
+
+  const storageStatePath = process.env.WP_E2E_STORAGE_STATE ?? path.resolve(__dirname, '../../../.playwright/wp-admin-state.json');
+  await fs.mkdir(path.dirname(storageStatePath), { recursive: true });
+
+  const browser = await chromium.launch();
+  const context = await browser.newContext({ baseURL });
+  const page = await context.newPage();
+
+  await page.goto('/wp-login.php');
+  await page.fill('input#user_login', username);
+  await page.fill('input#user_pass', password);
+
+  await Promise.all([
+    page.waitForURL(/\/wp-admin\//, { timeout: 60_000 }),
+    page.click('input#wp-submit'),
+  ]);
+
+  await page.goto('/wp-admin/index.php');
+
+  await context.storageState({ path: storageStatePath });
+  await browser.close();
+}