Playwright start

2026-05-30 10:04:12 -04:00
parent 73f29cea08
commit 1f7a0819fc
108 changed files with 37445 additions and 62 deletions
@@ -0,0 +1,51 @@
+---
+type: Task
+status: AI Gen TODO
+category: QA
+isAgentGenerated: "true"
+---
+
+# Test: Mobile Responsive Layout
+
+## Description
+
+Verify the Build Calculator and Database pages render correctly on mobile and tablet viewports, with no overlapping elements, truncated text, or unusable controls.
+
+## Rationale
+
+The `HotkeyViewerComponent.razor` contains a `@media (max-width: 1025px)` rule that scales the key container with `transform: scale(0.85)` and hides the background color. This responsive behavior is entirely CSS-driven and has zero functional test coverage. A CSS refactor could easily break this breakpoint without any existing test noticing.
+
+## Playwright Feature
+
+This test uses **`test.use({ viewport })`** with device-specific viewport sizes. Playwright provides built-in device descriptors via `devices['iPhone 13']`, `devices['Pixel 5']`, and `devices['iPad Pro 11']`.
+
+### Implementation
+
+```js
+// Use the built-in iPhone 13 descriptor
+const iPhone = devices['iPhone 13'];
+test.use({ ...iPhone });
+
+test('Build Calculator is usable on mobile', async ({ page }) => {
+  // Navigate, filter, click Q — same actions as desktop test
+  // but the assertions now validate mobile layout works
+});
+```
+
+### What to Assert (Desktop-equivalent on Mobile)
+
+- All 19 hotkey buttons are present and clickable.
+- Font size is legible (no single-character truncation on key labels).
+- Entity names are readable (not clipped by the `scaler`).
+- The filter `<select>` elements are fully visible and functional (not hidden behind the keyboard view).
+- The timeline grid scrolls horizontally without breaking the layout.
+- No horizontal scrollbar appears on the `<body>` (content fits within viewport).
+
+### Additional Device Targets
+
+| Descriptor | Type | Purpose |
+|---|---|---|
+| `iPhone 13` | 390×844 | Modern mobile portrait |
+| `Pixel 5` | 393×851 | Android mobile portrait |
+| `iPad Pro 11` | 834×1194 | Tablet landscape/portrait breakpoints |
+| Custom `{ width: 1024, height: 768 }` | 1024×768 | Exact `@media (max-width: 1025px)` boundary test |