test(editorjs): add Playwright e2e suite and propose ARIA semantics c… - #187
Open
gohabereg wants to merge 2 commits into
Open
test(editorjs): add Playwright e2e suite and propose ARIA semantics c…#187gohabereg wants to merge 2 commits into
gohabereg wants to merge 2 commits into
Conversation
…hange Adds a Playwright e2e setup for @editorjs/editorjs (Vite-served fixture mounting the real bundle from src/, no build step) covering paragraph rendering, typing, and inline-toolbar bold. Documents a gotcha where locator.press()/selectText() desync Editor.js's native caret tracking. Writing these tests surfaced that @editorjs/ui and the paragraph tool emit no ARIA roles/names anywhere, forcing CSS-class selectors instead of getByRole/getByLabel. Proposes openspec change add-editor-aria-semantics to close that gap. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Unit Tests
Mutation Tests
|
ilyamore88
reviewed
Jul 25, 2026
ilyamore88
reviewed
Jul 25, 2026
Comment on lines
+17
to
+22
| projects: [ | ||
| { | ||
| name: 'chromium', | ||
| use: { ...devices['Desktop Chrome'] }, | ||
| }, | ||
| ], |
Member
There was a problem hiding this comment.
Can you include Safari as well?
Member
Author
There was a problem hiding this comment.
Done — added a webkit project alongside chromium. Installed WebKit locally and confirmed all 3 tests pass on both browsers (6/6 total).
…ebkit e2e target Replace role="textbox" on the blocks holder with role="group" to avoid nesting a textbox inside another textbox — contenteditable elements implicitly carry role="textbox" via HTML-AAM regardless of explicit role, so putting it on the holder too would be an ARIA anti-pattern. Instead, assign role="textbox" + aria-multiline="true" + aria-label to each block's own contenteditable element (starting with Paragraph). Update proposal, design decisions, specs (ui + tools), and task checklist to reflect the revised approach. Also adds webkit (Desktop Safari) as a second Playwright project alongside chromium in packages/editorjs/playwright.config.ts.
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
2 participants
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
@editorjs/editorjshad no end-to-end coverage exercising a real browser. Writing that coverage also surfaced that@editorjs/uiand the paragraph tool emit zero ARIA roles/names, forcing brittle CSS-class selectors instead ofgetByRole/getByLabel.Stacked on #183 — the e2e fixture imports
@editorjs/editorjs'ssrc/index.ts, which only exists onfeat/editorjs-bundle-package. Base this PR against that branch, notmain.What Changes
@editorjs/editorjs:playwright.config.ts+ a Vite-served fixture (e2e/fixtures/) that mounts the real bundle fromsrc/, no build step required.e2e/tests/editor.spec.ts): initial paragraph render, typing into a block, bolding selected text via the inline toolbar.e2e/README.mddocuments a gotcha:locator.press()/locator.selectText()callelement.focus()programmatically and desync Editor.js's native caret tracking — tests must drive input via realclick()+page.keyboard.e2e/cypress-test-inventory.md: behavior inventory carried over from the v2 Cypress suite, for future e2e coverage planning..gitignoreupdated for the newe2e/dir and Playwright artifacts;test:e2e/test:e2e:uiscripts added.add-editor-aria-semantics(proposal only, not yet implemented): proposes ARIA roles/names forBlocksUI, block wrappers, the paragraph tool,ToolbarUI,ToolboxUI, and inline toolbar popover items, so tests (and real assistive tech) can eventually usegetByRole/getByLabel.Verification
yarn lint:fixclean.yarn test:e2e— 3/3 passing locally against Chromium.Known gap
test:e2eis not yet wired into CI (.github/workflows/editorjs.yml/package-check.ymlonly run lint/unit-tests/build, and no workflow in the repo installs Playwright browsers). Left out of this PR intentionally — flagged here as follow-up work.