[Testing] Setup Playwright E2E Framework for UI and Integration Validation

[BeSovereign]

Summary

Initialize a robust E2E testing framework using Playwright to validate the Freeshard UI and the orchestration of third-party apps. This setup must be suitable for both local development and CI/CD pipelines.

Technical Context

• Base Directory: Create a new top-level directory tests/e2e/ in the freeshard repository.
• Language: TypeScript.
• Framework: Playwright Test (@playwright/test).

Implementation Details for the Agent

1. Dependency Setup:
   • Create tests/e2e/package.json with @playwright/test and typescript.
   • Add scripts: test:e2e, test:e2e:ui, test:e2e:debug.
2. Configuration (playwright.config.ts):
   • Base URL should be configurable via PORTAL_DOMAIN env (default to http://localhost).
   • Setup projects for Chromium, Firefox, and Webkit.
   • Configure webServer to optionally start the local stack if it is not running (reference docker-compose.yml).
3. Authentication Strategy:
   • Implement a setup/auth.setup.ts to handle the login flow once and save the storage state to tests/e2e/.auth/user.json.
   • All subsequent tests should use this storage state to bypass login.
4. **Directory Structure:
   tests/e2e/
   ├── playwright.config.ts
   ├── package.json
   ├── .auth/ # Gitignored
   ├── setup/
   │ └── auth.setup.ts # Global login logic
   ├── tests/
   │ └── smoke.spec.ts # Initial connectivity check
   └── utils/
   └── shard-api.ts # Helpers to interact with shard_core API

Acceptance Criteria

• npm run test:e2e executes successfully.
• Auth state is correctly cached and reused.
• Documentation provided in tests/e2e/README.md.

[TerFree70]

Hey @BeSovereign! Just wanted to say that this is a textbook perfect initialization plan for Playwright. Setting up the global auth state in auth.setup.ts to cache credentials in .auth/user.json right from day one is exactly how it should be done to keep CI execution times down.

I couldn't help but notice the 'Implementation Details for the Agent' heading. Since you're already leveraging AI agents to scaffold the foundation of the Freeshard UI testing framework, I thought you might be interested in a tool I recently launched called QA Boutique.

While your current agent is perfect for setting up the baseline config and the initial smoke.spec.ts, QA Boutique is designed to maintain your coverage permanently going forward. It's a GitHub integration that acts as an autonomous QA engineer: it reads your future PR diffs, catches logical risks, and automatically generates strictly typed Playwright .spec.ts test files based on the new code changes.

It might be the perfect plug-and-play addition to your CI/CD pipeline once this initial agent finishes laying down the infrastructure. You can check out the read-only architecture here: https://qaboutique.com/

Good luck with the agent run!

[ClaydeCode]

From the 2026-06-15 weekly: first Playwright agent tests are running against the trial environment (console mode; HTML/video report works). Next step is a persistent, locally-triggered Playwright env (Docker Compose) plus an Immich smoke suite — install app, upload image, create album, delete, log out. Pipeline integration comes after the local setup works.