Mark
c02914df86
- Append form (text + email + password + submit) + table (thead + 2 rows) + modal trigger + hidden modal div below existing `<pre id="status">` scaffold; preserves `<head>` block + tokens.css link untouched (A18/A21 invariant). - Modal trigger uses inline onclick to toggle style.display — rrweb records the attribute mutation, satisfying IncrementalSnapshot emission per RESEARCH Pitfall 1 (synthetic probe HTML emits Meta + FullSnapshot but NOT IncrementalSnapshot without a DOM mutation between page load and SAVE). - Per RESEARCH Pitfall 4: the rrweb-alpha.4-leaky multi-line input element (rrweb-io/rrweb#1596) is excluded; only single-line inputs. - Per UI-SPEC §"Test Fixture Conventions": data-test-* attributes only; no data-mokosh-* (production-welcome-page reserved); no tokens.css import on the probe sub-tree (head already imports the canonical tokens for A18/A21). - npm run build exit 0; all 7 acceptance grep gates GREEN.
61 lines
2.9 KiB
HTML
61 lines
2.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Mokosh UAT Harness (extension-internal page)</title>
|
|
<!--
|
|
Plan 01-12 Wave 6: load the canonical token system on the harness
|
|
page so A18 (Lora WOFF2 reachable via @font-face) and A21
|
|
(--mks-font-display resolves to Lora) both have the @font-face
|
|
rules + CSS custom properties + .mks-display-1 class visible via
|
|
document.styleSheets + getComputedStyle. Vite's crxjs plugin
|
|
handles the asset path rebasing at build:test time so the link
|
|
resolves under dist-test/ even with content-hashed asset filenames.
|
|
-->
|
|
<link rel="stylesheet" href="../../src/shared/tokens.css">
|
|
</head>
|
|
<body>
|
|
<h1>Mokosh UAT — extension-internal page harness</h1>
|
|
<p>This page lives at <code>chrome-extension://<id>/tests/uat/extension-page-harness.html</code>.</p>
|
|
<p>Puppeteer navigates a tab here and drives assertions via <code>window.__mokoshHarness.*</code>.</p>
|
|
<pre id="status">Ready.</pre>
|
|
<!--
|
|
Plan 03-01 Wave 1 — probe HTML for A29 rrweb DOM verification
|
|
(SPEC §10 #4). Provides form + table + modal-trigger so rrweb's
|
|
record() emits Meta + FullSnapshot + IncrementalSnapshot events
|
|
against this page. Per RESEARCH Pitfall 4: this fixture omits
|
|
the rrweb-alpha.4-leaky multi-line input element (rrweb-io/rrweb
|
|
issue #1596 leaks its value even with maskInputOptions set);
|
|
only single-line inputs are used below. Per UI-SPEC Section
|
|
"Test Fixture Conventions": probe HTML uses plain data-test-*
|
|
attributes; no data-mokosh-* (production-welcome-page reserved);
|
|
no tokens.css import (the harness head already imports the
|
|
canonical tokens for A18/A21 — probe sub-tree should appear
|
|
unstyled to keep rrweb snapshots focused on structural DOM).
|
|
-->
|
|
<form id="probe-form" data-test="probe-form">
|
|
<input type="text" id="probe-text" data-test="probe-text" />
|
|
<input type="email" id="probe-email" data-test="probe-email" />
|
|
<input type="password" id="probe-password" data-test="probe-password" />
|
|
<button type="submit" id="probe-submit" data-test="probe-submit">Submit</button>
|
|
</form>
|
|
<table id="probe-table" data-test="probe-table">
|
|
<thead>
|
|
<tr><th>col-a</th><th>col-b</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>row-1-a</td><td>row-1-b</td></tr>
|
|
<tr><td>row-2-a</td><td>row-2-b</td></tr>
|
|
</tbody>
|
|
</table>
|
|
<button id="probe-modal-trigger" data-test="probe-modal-trigger"
|
|
onclick="(function(){var m=document.getElementById('probe-modal');if(m){m.style.display=(m.style.display==='block'?'none':'block');}})()">
|
|
Toggle modal
|
|
</button>
|
|
<div id="probe-modal" data-test="probe-modal" style="display:none;">
|
|
<p>Probe modal content (Plan 03-01 A29 IncrementalSnapshot trigger).</p>
|
|
</div>
|
|
<script type="module" src="./extension-page-harness.ts"></script>
|
|
</body>
|
|
</html>
|