init project

2026-06-25 19:06:59 -04:00
parent c5dfee6efb
commit 5d017f533a
349 changed files with 31330 additions and 0 deletions
@@ -0,0 +1,10 @@
+# Visual baselines
+
+The Playwright scenarios define the Phase 11 locale, theme, viewport, drawer, and focus-state matrix.
+Canonical PNG snapshots must be generated with the pinned Chromium build in an unblocked environment:
+
+```bash
+pnpm test:visual:update --project=chromium
+```
+
+No fabricated or manually composed screenshots are stored here. The local execution environment blocked browser installation and loopback browser navigation, so baseline approval remains an explicit release gate in the Phase 11 issue register.
@@ -0,0 +1,20 @@
+import { expect, test } from '@playwright/test';
+
+for (const scenario of [
+  { locale: 'en', theme: 'light', width: 1440, height: 1200 },
+  { locale: 'fr', theme: 'dark', width: 1024, height: 1200 },
+  { locale: 'ar', theme: 'dark', width: 390, height: 1200 },
+] as const) {
+  test(`${scenario.locale}-${scenario.theme} component matrix`, async ({ page }) => {
+    await page.addInitScript(
+      (theme) => localStorage.setItem('rdg-theme-preference', theme),
+      scenario.theme,
+    );
+    await page.setViewportSize({ width: scenario.width, height: scenario.height });
+    await page.goto(`/${scenario.locale}/component-lab`);
+    await expect(page).toHaveScreenshot(
+      `component-system-${scenario.locale}-${scenario.theme}-${scenario.width}.png`,
+      { fullPage: true },
+    );
+  });
+}
@@ -0,0 +1,30 @@
+import { expect, test } from '@playwright/test';
+
+const scenarios = [
+  { name: 'homepage-en-light-desktop', locale: 'en', theme: 'light', width: 1440, height: 1000 },
+  { name: 'homepage-en-dark-mobile', locale: 'en', theme: 'dark', width: 390, height: 844 },
+  { name: 'homepage-fr-light-tablet', locale: 'fr', theme: 'light', width: 1024, height: 900 },
+  { name: 'homepage-fr-dark-mobile', locale: 'fr', theme: 'dark', width: 390, height: 844 },
+  { name: 'homepage-ar-light-desktop', locale: 'ar', theme: 'light', width: 1440, height: 1000 },
+  { name: 'homepage-ar-dark-mobile', locale: 'ar', theme: 'dark', width: 390, height: 844 },
+  { name: 'homepage-en-light-320', locale: 'en', theme: 'light', width: 320, height: 800 },
+] as const;
+
+for (const scenario of scenarios) {
+  test(`${scenario.name} baseline`, async ({ page, context }) => {
+    test.skip(test.info().project.name !== 'chromium');
+    await page.setViewportSize({ width: scenario.width, height: scenario.height });
+    await context.addCookies([
+      {
+        name: 'hpc-theme',
+        value: scenario.theme,
+        domain: '127.0.0.1',
+        path: '/',
+        secure: false,
+        sameSite: 'Lax',
+      },
+    ]);
+    await page.goto(`/${scenario.locale}`);
+    await expect(page).toHaveScreenshot(`${scenario.name}.png`, { fullPage: true });
+  });
+}
@@ -0,0 +1,63 @@
+import { expect, test } from '@playwright/test';
+
+const scenarios = [
+  {
+    name: 'desktop-en-light',
+    locale: 'en',
+    theme: 'light',
+    viewport: { width: 1440, height: 1000 },
+  },
+  { name: 'desktop-en-dark', locale: 'en', theme: 'dark', viewport: { width: 1440, height: 1000 } },
+  { name: 'tablet-fr-light', locale: 'fr', theme: 'light', viewport: { width: 1024, height: 900 } },
+  { name: 'tablet-fr-dark', locale: 'fr', theme: 'dark', viewport: { width: 1024, height: 900 } },
+  { name: 'mobile-ar-light', locale: 'ar', theme: 'light', viewport: { width: 390, height: 844 } },
+  { name: 'mobile-ar-dark', locale: 'ar', theme: 'dark', viewport: { width: 390, height: 844 } },
+] as const;
+
+for (const scenario of scenarios) {
+  test(`${scenario.name} visual baseline`, async ({ page, context }) => {
+    test.skip(
+      test.info().project.name !== 'chromium',
+      'Canonical visual baselines use Chromium; other projects run functional coverage.',
+    );
+    await page.setViewportSize(scenario.viewport);
+    await context.addCookies([
+      {
+        name: 'hpc-theme',
+        value: scenario.theme,
+        domain: '127.0.0.1',
+        path: '/',
+        secure: false,
+        sameSite: 'Lax',
+      },
+    ]);
+    await page.goto(`/${scenario.locale}`);
+    await expect(page).toHaveScreenshot(`${scenario.name}.png`, { fullPage: true });
+  });
+}
+
+test('mobile navigation open baseline', async ({ page }) => {
+  test.skip(test.info().project.name !== 'chromium');
+  await page.setViewportSize({ width: 390, height: 844 });
+  await page.context().addCookies([
+    {
+      name: 'hpc-theme',
+      value: 'dark',
+      domain: '127.0.0.1',
+      path: '/',
+      secure: false,
+      sameSite: 'Lax',
+    },
+  ]);
+  await page.goto('/ar');
+  await page.getByRole('button', { name: 'فتح قائمة التنقل' }).click();
+  await expect(page).toHaveScreenshot('mobile-ar-dark-navigation-open.png', { fullPage: true });
+});
+
+test('keyboard focus baseline', async ({ page }) => {
+  test.skip(test.info().project.name !== 'chromium');
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await page.goto('/en');
+  await page.keyboard.press('Tab');
+  await expect(page).toHaveScreenshot('desktop-en-light-focus.png', { fullPage: true });
+});