fix: e2e test improvements and early i18n initialization

- Create screenshots directory before taking screenshots
- Use web-first assertions for button visibility checks
- Fix isFormReset() to check against data-default attribute
- Initialize I18n early in admin.php for API calls before HTML output
- Update .gitignore to track screenshots/.gitkeep

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: JohnRDOrazio

.gitignore

@@ -11,4 +11,5 @@ credentials.php
 e2e/.auth/
 playwright-report/
 test-results/
-e2e/screenshots/
+e2e/screenshots/*
+!e2e/screenshots/.gitkeep

admin.php

@@ -93,6 +93,11 @@ function isLocalhost(): bool
 // Create PSR-compliant HTTP client
 $apiClient = new ApiClient(null, 10, 5, $logger);
 
+// Initialize I18n early so we can use locale for API requests before HTML output
+include_once 'includes/I18n.php';
+use LiturgicalCalendar\UnitTestInterface\I18n;
+$i18n = new I18n();
+
 // Fetch tests data from API
 try {
     $testsData   = $apiClient->fetchJsonWithKey("$baseUrl/tests", 'litcal_tests');
@@ -105,6 +110,20 @@ function isLocalhost(): bool
     die('Failed to fetch tests data. Please try again later.');
 }
 
+// Fetch events data from API with locale (before HTML output for consistent error pages)
+$eventsEndpoint = "$baseUrl/events";
+$apiClient->setLocale($i18n->locale);
+try {
+    $eventsData = $apiClient->fetchJsonWithKey($eventsEndpoint, 'litcal_events');
+    $LitCalAllLitEvents = $eventsData['litcal_events'];
+} catch (RuntimeException $e) {
+    $logger->error('Failed to fetch events data', ['error' => $e->getMessage()]);
+    if ($debugMode) {
+        die('Could not fetch data from ' . $eventsEndpoint . ': ' . $e->getMessage());
+    }
+    die('Failed to fetch events data. Please try again later.');
+}
+
 // Signal that this page has the login modal (for topnavbar.php)
 define('HAS_LOGIN_MODAL', true);
 
@@ -129,7 +148,8 @@ function isLocalhost(): bool
                     <option value="" selected>--</option>
                     <?php
                     foreach ($LitCalTests as $LitCalTest) {
-                        echo "<option value=\"{$LitCalTest['name']}\">{$LitCalTest['name']}</option>";
+                        $escapedName = htmlspecialchars($LitCalTest['name'], ENT_QUOTES, 'UTF-8');
+                        echo "<option value=\"{$escapedName}\">{$escapedName}</option>";
                     }
                     ?>
                 </select>
@@ -236,19 +256,6 @@ class="fas fa-flask-vial fa-2x text-black d-inline-block me-4"
 </main>
 <!-- End of Main Content -->
 <?php
-// Fetch events data from API with locale
-$eventsEndpoint = "$baseUrl/events";
-$apiClient->setLocale($i18n->locale);
-try {
-    $eventsData = $apiClient->fetchJsonWithKey($eventsEndpoint, 'litcal_events');
-    $LitCalAllLitEvents = $eventsData['litcal_events'];
-} catch (RuntimeException $e) {
-    $logger->error('Failed to fetch events data', ['error' => $e->getMessage()]);
-    if ($debugMode) {
-        die('Could not fetch data from ' . $eventsEndpoint . ': ' . $e->getMessage());
-    }
-    die('Failed to fetch events data. Please try again later.');
-}
 // Include the test creation modal (hidden by JS when not authenticated)
 include_once 'components/NewTestModal.php';
 ?>

e2e/admin.spec.ts

@@ -1,4 +1,6 @@
 import { test, expect } from './fixtures';
+import { mkdir } from 'fs/promises';
+import path from 'path';
 
 /**
  * E2E tests for admin.php JWT authentication and test management
@@ -105,8 +107,8 @@ test.describe('Admin Page - Authenticated State', () => {
 
         for (let i = 0; i < buttonCount; i++) {
             const btn = protectedButtons.nth(i);
-            const isHidden = await btn.evaluate(el => el.classList.contains('d-none'));
-            expect(isHidden).toBe(false);
+            // Use web-first assertion for consistency
+            await expect(btn).not.toHaveClass(/\bd-none\b/);
         }
     });
 
@@ -212,6 +214,8 @@ test.describe('Admin Page - 401 Response Handling', () => {
 });
 
 test.describe('Admin Page - Visual Regression', () => {
+    const screenshotsDir = path.join(__dirname, 'screenshots');
+
     test('should not have dropdown clipping issues', async ({ adminPage, page }) => {
         await adminPage.goToAdmin();
         await adminPage.waitForAuth();
@@ -226,7 +230,10 @@ test.describe('Admin Page - Visual Regression', () => {
         });
         expect(parentOverflow).not.toBe('hidden');
 
+        // Ensure screenshots directory exists before taking screenshot
+        await mkdir(screenshotsDir, { recursive: true });
+
         // Optionally take a screenshot for manual review
-        await page.screenshot({ path: 'e2e/screenshots/dropdown-no-clipping.png', fullPage: true });
+        await page.screenshot({ path: path.join(screenshotsDir, 'dropdown-no-clipping.png'), fullPage: true });
     });
 });

e2e/fixtures.ts

@@ -185,9 +185,12 @@ export class AdminPageHelper {
      * Check if the form is in a clean/reset state
      */
     async isFormReset(): Promise<boolean> {
-        const testName = await this.page.locator('#testName').textContent();
+        const testNameEl = this.page.locator('#testName');
+        const testName = await testNameEl.textContent();
+        const testNameDefault = await testNameEl.getAttribute('data-default');
         const description = await this.page.locator('#description').inputValue();
-        return testName === '' && description === '';
+        // Form is reset when testName shows the default label and description is empty
+        return testName === testNameDefault && description === '';
     }
 
     /**

e2e/screenshots/.gitkeep

@@ -3,7 +3,10 @@
 
 use LiturgicalCalendar\UnitTestInterface\I18n;
 
-$i18n = new I18n();
+// Only create I18n if not already initialized (e.g., by admin.php for early API calls)
+if (!isset($i18n)) {
+    $i18n = new I18n();
+}
 $pageName = basename($_SERVER["SCRIPT_FILENAME"], '.php');
 ?><!DOCTYPE html>
 <html lang="<?php echo $i18n->locale; ?>">