intotheeast-com/docs/working/specs/2026-06-21-playwright-tests-design.md

Playwright Tests — Improvement & Expansion

Date: 2026-06-21 Status: Approved

---

Goal

Reorganise the flat tests/ui/ directory into feature-scoped subdirectories, add a dedicated GPX Manager test suite (end-to-end), plug three gaps in the post form suite, and extend the axe accessibility scans to two new pages.

---

Folder Structure

Current flat layout becomes:

tests/
  fixtures/
    test-photo.jpg          (existing)
    test-nonimage.txt       (existing)
    test-route.gpx          (new — minimal valid GPX XML, ~200 bytes, one trackpoint)
  ui/
    auth/
      auth.setup.js         (moved)
      auth.spec.js          (moved)
    post/
      post.spec.js          (moved + P6-P8 added)
      validation.spec.js    (moved)
    gpx/
      gpx-journey.spec.js   (moved)
      gpx-manager.spec.js   (new)
    maps/
      maps.spec.js          (moved)
    stories/
      stories.spec.js       (moved)
    dailies/
      dailies.spec.js       (moved)
    home/
      home.spec.js          (moved)
      home-highlights.spec.js (moved)
    nav/
      nav.spec.js           (moved)
    trip/
      trip-filter.spec.js   (moved)
    a11y/
      accessibility.spec.js (moved + AX6-AX7 added)
    helpers.js              (stays at ui/ root — shared by all subdirs)
  global-setup.js           (unchanged)

playwright.config.js requires no changes — testDir: './tests/ui' recurses automatically. The auth.setup.js testMatch: /auth\.setup\.js/ resolves by filename regardless of depth.

---

New Fixture: test-route.gpx

Minimal valid GPX 1.1 file, one trackpoint. Accepted by Grav's media handler without triggering real GPX parsing in the app.

<?xml version="1.0" encoding="UTF-8"?>
<gpx version="1.1" creator="test" xmlns="http://www.topografix.com/GPX/1/1">
  <trk><trkseg>
    <trkpt lat="43.7696" lon="11.2558"><ele>50</ele></trkpt>
  </trkseg></trk>
</gpx>

---

New Tests: gpx/gpx-manager.spec.js

All tests run against the live Grav API (end-to-end, no mocking).

Auth

ID	Description
GM1	/gpx-manager with auth renders one .gpx-trip section per published trip
GM2	/gpx-manager without auth shows #grav-login inline login form (fresh context, no storageState)

File Listing

ID	Description
GM3	After the page loads, the file list for italy-2026-demo either shows a table or the "No GPX files." empty state — the .gpx-loading placeholder must not remain

Upload

ID	Description
GM4	Upload test-route.gpx to italy-2026-demo → filename test-route.gpx appears in the file list table
GM5	Upload a file with a non-slug name ("My Route 1.gpx", same buffer, fake name via setInputFiles({ name, mimeType, buffer })) → list shows my-route-1.gpx (slugified)
GM6	Submit the upload form without selecting a file → .gpx-status shows "Choose a file first."

Delete

ID	Description
GM7	After uploading test-route.gpx, click its Delete button, confirm the dialog → row disappears from the file list

Cleanup

afterAll reads tests/.auth/user.json, extracts the session cookie, and issues Node-level fetch DELETE calls to /api/v1/pages/trips/italy-2026-demo/media/<filename> for any fixture files that remain (guards against mid-test failures leaving orphaned files).

---

Post Form Additions: post/post.spec.js

Three new tests appended to the existing P1–P5 suite. P2 (photo upload) stays skipped.

ID	Description
P6	Successful submit shows "Entry posted successfully!" text in the page (currently the test only waits for .form-messages, .notices without asserting content)
P7	Date field is pre-filled on page load with a timestamp within 5 minutes of Date.now() (blueprint default: now, format Y-m-d H:i)
P8	After a successful submit, title and content fields are empty (blueprint reset: true flushes the form)

---

Accessibility Additions: a11y/accessibility.spec.js

Two new axe scans appended to the existing AX1–AX5 block.

ID	URL	Notes
AX6	/gpx-manager	API mocked with page.route() so the file list renders without a real upload dependency
AX7	/trips/italy-2026-demo/stories/val-dorcia-at-dawn	Story page not yet covered by any axe scan

---

What Does Not Change

• playwright.config.js — untouched
• tests/global-setup.js — untouched
• All existing test IDs (A1–A5, G1–G5, M1–M8, etc.) — test logic is unchanged; files are moved, not rewritten
• P2 — stays skipped; photo upload path needs post-form improvements first
• helpers.js — stays at tests/ui/helpers.js; import paths in moved specs update from ./helpers to ../helpers