test(e2e): Playwright harness + regression test for editor scroll alignment#14
Merged
Merged
Conversation
…ll alignment happy-dom has no real layout or scrollbars, so the editor highlight/selection alignment bug (a textarea scrollbar shrinking its client box, clamping the highlight <pre> behind the selection on scroll) couldn't be caught at the unit layer — it regressed twice. This adds a minimal real-browser layer for exactly that class of bug. - playwright.config.js: serves the repo over python http.server so the harness imports the *actual* src/ modules as native ESM (no bundling); chromium. - tests/e2e/editor.html: mounts the real editor with a stub controller. - tests/e2e/editor-alignment.spec.js: loads a tall query whose last line forces a horizontal scrollbar, scrolls to the bottom, and asserts the textarea and highlight keep equal client boxes and the same scroll offset. Verified the assertions fail on the pre-fix state and pass on the fix (negative-checked in a real engine). - package.json: @playwright/test devDep + `npm run test:e2e`. Separate from `npm test` and the coverage gate. - README + .gitignore updated. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QennTvGKAtJZrv9EpQagef
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
The editor highlight/selection alignment bug (just fixed on
main,c7f618c) is a render-layer defect: a long line gives the<textarea>a horizontal scrollbar that shrinks itsclientHeight, so the highlight<pre>(no scrollbar) clamps behind the selection when scrolled to the bottom. happy-dom has no real layout or scrollbars, so the unit suite can't reproduce it — and it regressed twice. This adds a minimal real-browser layer for that class of bug.What
playwright.config.js— serves the repo overpython3 -m http.serverso the harness imports the actualsrc/modules as native ESM (no bundling, always current); Chromium.tests/e2e/editor.html— mounts the real editor with a tiny stub controller.tests/e2e/editor-alignment.spec.js— loads a tall query whose last line forces a horizontal scrollbar, scrolls to the bottom, and asserts the textarea and highlight keep equal client boxes and the same scroll offset.package.json—@playwright/testdevDep +npm run test:e2e. Kept separate fromnpm testand the coverage gate.vitestonly globstests/unit/**/*.test.js, so it ignores these specs..gitignore(/test-results/,/playwright-report/) updated.Validation
Verified in a real engine (no bundled-browser download needed for the check):
clientHeight340 == 340,scrollTop365.83 == 365.83 → both assertions pass.clientHeight326 vs 340,scrollTop379.58 vs 365.83 → both assertions fail.So the test genuinely catches the regression.
Note
The sandbox blocks
cdn.playwright.dev, sonpx playwright install chromiumcan't run here; CI / other machines install it normally (documented in the config + README). Unit suite unaffected —npm teststill green (408 tests).🤖 Generated with Claude Code
https://claude.ai/code/session_01QennTvGKAtJZrv9EpQagef