feat(e2e): Playwright suite — 134 tests across 9 spec areas + UA matrix
Adds an end-to-end Playwright test suite under e2e/ that spins up an
isolated docker-compose stack (Postgres :55432, Caddy :3101, backend with
EVENTSNAP_TEST_MODE=1, SvelteKit adapter-node frontend) and exercises the
SvelteKit app against the real Rust backend.
Phase 1 — happy paths covering every documented USER_JOURNEYS.md flow:
01-auth/ join, recover, admin login, leave event, PIN lockout
02-upload/ gallery picker (API path), rate-limit + admin toggle
03-feed/ like/comment SSE, filters, SSE reconnect on visibility
04-host/ event lock API, ban/unban, promote
05-admin/ config validation, foundational authz guards, stats
06-export/ /export status + download stub
__smoke/ cross-UA happy-path (runs on every UA project)
Phase 2 — adversarial + browser chaos:
07-adversarial/ XSS payloads (6 × display name path), SQLi shapes,
length / encoding / RTL override / NUL byte;
file-upload boundaries (ELF body claimed as JPEG,
oversize vs max_image_size_mb, zero-byte, NUL
filename, path-traversal, SVG-with-script);
JWT alg:none, signature/payload tamper, expired
session, PIN brute-force (serial + parallel),
admin password brute-force; deep authz (cross-user
delete, banned user across like/comment/feed-read,
host→admin escalation); small-scale DDoS (20× /join,
10MB comment body, 10 concurrent SSE).
08-browser-chaos/ localStorage / sessionStorage / cookie purge,
IndexedDB drop mid-session, offline → reconnect,
slow-3G, 503 flakes, 429 with no retry storm,
multi-tab same/different user, no-JS, hostile CSS,
clock skew ±1h / -2d, localStorage quota exhausted.
Phase 3 — mobile gestures (runs only on chromium-mobile / Pixel 7):
09-mobile/ touch-target ≥44px audit, env(safe-area-inset-bottom)
structural check, long-press (FeedListCard → ContextSheet,
quick-tap negation, click-suppression), double-tap
(feed card like + lightbox heart-burst, via synthetic
pointer events to bypass the first-tap-fires-click trap),
viewport reflow (portrait/landscape/narrow/phablet),
plus fixme stubs documenting planned gestures (swipe
lightbox L/R, swipe-down dismiss, pull-to-refresh,
long-press-comment).
Cross-UA matrix (chromium-engine projects run @smoke only):
chromium-pixel7, chromium-galaxy-s22, samsung-internet (Samsung UA
emulation on Galaxy viewport), edge-android, plus webkit-iphone,
chrome-ios, firefox-android, firefox-desktop — the latter four need
libavif16 on the host (Playwright dep) but the configs are in place.
Infrastructure:
- fixtures/test.ts central test.extend (api, db, adminToken, guest,
host, signIn). Per-test DB truncate via the dev-only POST
/admin/__truncate route, gated by EVENTSNAP_TEST_MODE=1.
- helpers/sse-listener.ts, helpers/upload-client.ts (Node-side
multipart for adversarial file-upload tests + JPEG/PNG/ELF magic
constants), helpers/touch.ts (longPress / doubleTap / swipe /
inlineStyle / computedStyle).
- 10 page objects covering every route + UploadSheet/Lightbox.
- global-setup waits for /health, logs in admin, disables every
rate-limit and quota toggle.
- .github/workflows/e2e.yml: PR check runs chromium-desktop + the
smoke matrix in parallel, uploads playwright-report/ and traces on
failure.
Findings the suite surfaces as live `[finding]` warnings (not silenced):
1. /admin/login has no rate-limit or lockout (bcrypt cost only).
2. PIN-attempt counter races under parallel /recover requests.
3. Zero-byte uploads pass /api/v1/upload.
4. SVG-with-script can pass the magic-byte check (consider CSP +
X-Content-Type-Options on /media/*).
Stack-internal docs live in e2e/README.md (UA tier table, Samsung
Internet escalation tiers A/B/C, debugging tips, roadmap).
Final tally: 134 passed / 0 failed / 9 skipped (test.fixme stubs for
not-yet-shipped gestures and one UI-upload-flow investigation).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
103
e2e/helpers/touch.ts
Normal file
103
e2e/helpers/touch.ts
Normal file
@@ -0,0 +1,103 @@
|
||||
/**
|
||||
* Touch-gesture primitives for Phase 3 mobile specs.
|
||||
*
|
||||
* The app uses two custom Svelte actions:
|
||||
*
|
||||
* 1. `longpress` — listens for `pointerdown`, starts a 500 ms timer,
|
||||
* cancels on pointerup / pointermove > 10 px / pointercancel.
|
||||
* [frontend/src/lib/actions/longpress.ts]
|
||||
*
|
||||
* 2. `doubletap` — listens for `pointerup` and times consecutive
|
||||
* releases within 300 ms on roughly the same coordinate.
|
||||
* [frontend/src/lib/actions/doubletap.ts]
|
||||
*
|
||||
* Both listen to pointer events, which fire from mouse, touch, and pen
|
||||
* input. We drive them with `page.mouse` because it works identically
|
||||
* across all Playwright engines and respects the project's mobile
|
||||
* viewport — the action doesn't care whether the underlying device was
|
||||
* touch or mouse.
|
||||
*/
|
||||
import type { Locator, Page } from '@playwright/test';
|
||||
|
||||
async function centerOf(locator: Locator): Promise<{ x: number; y: number }> {
|
||||
const box = await locator.boundingBox();
|
||||
if (!box) throw new Error(`Cannot get bounding box for locator (not visible?)`);
|
||||
return { x: box.x + box.width / 2, y: box.y + box.height / 2 };
|
||||
}
|
||||
|
||||
/** Hold the pointer down on `locator` for `durationMs`. Default 600 ms beats the 500 ms long-press threshold. */
|
||||
export async function longPress(page: Page, locator: Locator, durationMs = 600) {
|
||||
const { x, y } = await centerOf(locator);
|
||||
await page.mouse.move(x, y);
|
||||
await page.mouse.down();
|
||||
await page.waitForTimeout(durationMs);
|
||||
await page.mouse.up();
|
||||
}
|
||||
|
||||
/**
|
||||
* Two rapid pointer-event pairs within the doubletap action's 300 ms window.
|
||||
*
|
||||
* Dispatches synthetic `pointerdown`/`pointerup` directly on the element via
|
||||
* `page.evaluate` (not via `page.mouse`). Why: with real mouse events, the
|
||||
* first tap fires the element's `onclick` synchronously — which on a
|
||||
* FeedListCard image button means the lightbox opens *before* the second tap
|
||||
* lands. That makes mouse-driven double-tap impossible to test in headless
|
||||
* Chromium. Dispatching pointer events bypasses the synthetic click pipeline
|
||||
* entirely, so we can exercise the `doubletap` action's contract directly.
|
||||
*/
|
||||
export async function doubleTap(page: Page, locator: Locator) {
|
||||
await locator.evaluate((el: HTMLElement) => {
|
||||
const rect = el.getBoundingClientRect();
|
||||
const x = rect.left + rect.width / 2;
|
||||
const y = rect.top + rect.height / 2;
|
||||
const mk = (type: string) =>
|
||||
new PointerEvent(type, {
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
clientX: x,
|
||||
clientY: y,
|
||||
pointerType: 'touch',
|
||||
isPrimary: true,
|
||||
});
|
||||
el.dispatchEvent(mk('pointerdown'));
|
||||
el.dispatchEvent(mk('pointerup'));
|
||||
// Second tap < 300 ms later.
|
||||
return new Promise<void>((resolve) =>
|
||||
setTimeout(() => {
|
||||
el.dispatchEvent(mk('pointerdown'));
|
||||
el.dispatchEvent(mk('pointerup'));
|
||||
resolve();
|
||||
}, 50)
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
/** Touch swipe from start to end coordinates via the touchscreen API (mobile viewports). */
|
||||
export async function swipe(
|
||||
page: Page,
|
||||
from: { x: number; y: number },
|
||||
to: { x: number; y: number },
|
||||
steps = 10
|
||||
) {
|
||||
// page.touchscreen.tap exists but doesn't expose move; fall back to dispatching
|
||||
// raw touch events via page.evaluate when needed. For now, mouse-based pointer
|
||||
// events are equivalent because the app's planned swipe handlers (when they
|
||||
// land) will use pointer events too.
|
||||
await page.mouse.move(from.x, from.y);
|
||||
await page.mouse.down();
|
||||
for (let i = 1; i <= steps; i++) {
|
||||
const t = i / steps;
|
||||
await page.mouse.move(from.x + (to.x - from.x) * t, from.y + (to.y - from.y) * t);
|
||||
}
|
||||
await page.mouse.up();
|
||||
}
|
||||
|
||||
/** Read computed style on a locator. Useful for asserting `padding-bottom` includes env(safe-area-inset-bottom). */
|
||||
export async function computedStyle(locator: Locator, prop: string): Promise<string> {
|
||||
return locator.evaluate((el, p) => getComputedStyle(el).getPropertyValue(p), prop);
|
||||
}
|
||||
|
||||
/** Read the raw inline `style` attribute (env() vars expand only inside computed style, not here). */
|
||||
export async function inlineStyle(locator: Locator): Promise<string> {
|
||||
return locator.evaluate((el) => (el as HTMLElement).getAttribute('style') ?? '');
|
||||
}
|
||||
Reference in New Issue
Block a user