feat(03-01): Task 1 — probe HTML for A29 rrweb DOM verification (SPEC §10 #4)
- 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.
This commit is contained in:
@@ -19,6 +19,42 @@
|
|||||||
<p>This page lives at <code>chrome-extension://<id>/tests/uat/extension-page-harness.html</code>.</p>
|
<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>
|
<p>Puppeteer navigates a tab here and drives assertions via <code>window.__mokoshHarness.*</code>.</p>
|
||||||
<pre id="status">Ready.</pre>
|
<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>
|
<script type="module" src="./extension-page-harness.ts"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user