| name | e2e-pairing |
| description | Keep frontend markup + WebKit e2e specs in sync. Use when touching component markup, CSS classes, dialogs, or adding UI spec drives — load-bearing selectors, two-mock split (devMock.ts vs mock-backend.mjs), dialog-driving rules. Also when e2e spec times out silently. |
e2e / markup pairing (frontend/tests/e2e/)
Specs drive real WebKit, match by class, no fallback. Change one side → update other SAME commit.
Load-bearing selectors (rename/retag → CI breaks)
.tree-leaf .tree-folder .drop-hover — Sidebar rows + drag target..tab-new .tab.active .tab-title .tab.active .tab-dot.on — TabBar.button.method-inline + .method-menu .method-opt — verb picker = custom dropdown, NOT <select>: open button, click .method-opt..url-icon-btn.dirty — dirty/Save reveal..dlg-input .dlg-ok (Cancel = first .dlg-btn) — in-app modal (components/Dialog.tsx via lib/dialog.ts)..tabs button (Docs), .docs-toolbar button (Edit/Preview), .docs-hint, iframe.docs-preview (sandbox="" + srcdoc)..code-editor — CM6 host (Body/Docs)..scm-open .scm-row .scm-badge .scm-section-head .scm-field-label .scm-old .scm-new .scm-raw .scm-diff-empty — source-control modal (SourceControlPanel.tsx).
Dialogs
Native window.prompt/confirm/alert gone (commit 0bc185f). Specs must drive .dlg-input/.dlg-ok — page.on("dialog") never fires on custom modal, assert times out silently. New promptDialog/confirmDialog call on tested flow: spec drives <Dialog/>.
TWO mocks — don't confuse
- e2e specs hit
frontend/src/lib/devMock.ts (webServer runs bun run dev:mock → vite --mode test → installDevMock). Bound App method spec calls (e.g. PickFile) MUST exist there — missing method NOT error, flow silently no-ops.
tests/visual/mock-backend.mjs = separate visual screenshot harness (shoot.mjs, addInitScript). Add methods only if visual harness renders path; Git*/meta methods used by settings modals or SCM panel always need it.
Sandbox iframe
WebKit can't pierce sandbox="" srcdoc iframe → assert srcdoc attribute, never frameLocator().locator() inside.
Shell invariant
Window must never scroll: .panes needs definite grid-template-rows; html,body stay overflow:hidden. height:100% child (CM6) of indefinite parent overflows shell. Guarded by shell-no-scroll.spec.
Run
cd frontend && bun run test:e2e (needs WebKit deps; CI has them).
