Replace cypress-real-events with native Cypress keyboard API#184
Conversation
The single realType("{enter}") call is replaced with cy.press(Cypress.Keyboard.Keys.ENTER),
which dispatches real native keyboard events natively in Cypress 14.3.0+. With no remaining
usages, cypress-real-events is fully removed from the project.
https://claude.ai/code/session_01MpqnEptGDtH5SFAk5BC98Z
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughReplace cypress-real-events usage and related import, update Cypress to ^15.12.0 and add Node engine >=20, and modify a Cypress test to close the how-to-play dialog via its close button instead of using real-events Enter typing; README notes Node ≥ 20. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
📝 Coding Plan
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
cypress/e2e/game/how-to-play.cy.js (1)
53-55: Enforce the help-link focus precondition explicitly.The comment on line 53 claims the help link is focused, but the test does not enforce this precondition before pressing Enter. Add explicit focus to make this interaction deterministic and match the stated behavior.
Suggested fix
- // Use cy.press to dispatch a real Enter key event to the browser window while the help link is focused, - // triggering the exact scenario that happens in a real browser where the help dialog is toggled again. + // Ensure the help link is focused, then dispatch Enter to reproduce keyboard toggle behavior deterministically. + cy.get(".help-link").focus().should("have.focus"); cy.press(Cypress.Keyboard.Keys.ENTER);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@cypress/e2e/game/how-to-play.cy.js` around lines 53 - 55, The test assumes the help link is focused before calling cy.press(Cypress.Keyboard.Keys.ENTER) but doesn't enforce it; fix by explicitly focusing the help link element immediately before the cy.press call (e.g. use cy.get(...) or the same selector used elsewhere in this spec to locate the help link and call .focus() on it), then call cy.press(Cypress.Keyboard.Keys.ENTER) to trigger the Enter key interaction deterministically.package.json (1)
25-25: Consider addingengines.nodeto explicitly guard against Cypress 15's Node.js 20+ requirement.While GitHub Actions is configured with Node 20 (compatible with Cypress 15), local developers lack an explicit constraint in package.json and could attempt to run Cypress 15 on Node <20, which will fail. Adding
"engines": { "node": ">=20" }makes the requirement explicit and prevents runtime surprises.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@package.json` at line 25, Add an explicit Node engine constraint to package.json to prevent running Cypress 15 on unsupported Node versions: add a top-level "engines" object with "node": ">=20" (e.g., "engines": { "node": ">=20" }) so local developers and tools see the requirement alongside the existing "cypress" dependency; update any README or dev setup notes if present that reference Node version expectations.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@cypress/e2e/game/how-to-play.cy.js`:
- Around line 53-55: The test assumes the help link is focused before calling
cy.press(Cypress.Keyboard.Keys.ENTER) but doesn't enforce it; fix by explicitly
focusing the help link element immediately before the cy.press call (e.g. use
cy.get(...) or the same selector used elsewhere in this spec to locate the help
link and call .focus() on it), then call cy.press(Cypress.Keyboard.Keys.ENTER)
to trigger the Enter key interaction deterministically.
In `@package.json`:
- Line 25: Add an explicit Node engine constraint to package.json to prevent
running Cypress 15 on unsupported Node versions: add a top-level "engines"
object with "node": ">=20" (e.g., "engines": { "node": ">=20" }) so local
developers and tools see the requirement alongside the existing "cypress"
dependency; update any README or dev setup notes if present that reference Node
version expectations.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 9d697996-b946-4982-934c-9bfcbb18ce82
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (3)
cypress/e2e/game/how-to-play.cy.jscypress/support/e2e.jspackage.json
💤 Files with no reviewable changes (1)
- cypress/support/e2e.js
- Focus the close button explicitly before cy.press(ENTER) so the Enter key
deterministically activates the close button (which is the mechanism that
removes the dialog from the DOM). Focusing the help-link instead would re-invoke
renderDialog and leave a new dialog open, failing the assertion.
- Add "engines": {"node": ">=20"} to package.json since Cypress 15 requires Node 20+.
- Document the Node >=20 requirement in the Development section of README.md.
https://claude.ai/code/session_01MpqnEptGDtH5SFAk5BC98Z
Deploying wordle-clone with
|
| Latest commit: |
3ee2a39
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://fb7681f4.wordle-clone-8k1.pages.dev |
| Branch Preview URL: | https://claude-cypress-press-command.wordle-clone-8k1.pages.dev |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@package.json`:
- Around line 20-22: Update the Node engine constraint in package.json to
require Node >=20.1.0 instead of ">=20"; locate the "engines" -> "node" entry
and change its value to ">=20.1.0" so it aligns with Cypress 15.12.0's supported
Node ranges.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 3447a726-17f5-4661-9663-4c1ba13b1a3f
📒 Files selected for processing (3)
README.mdcypress/e2e/game/how-to-play.cy.jspackage.json
✅ Files skipped from review due to trivial changes (1)
- README.md
🚧 Files skipped from review as they are similar to previous changes (1)
- cypress/e2e/game/how-to-play.cy.js
| "engines": { | ||
| "node": ">=20" | ||
| }, |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Cypress 15 cy.press keyboard API documentation
💡 Result:
Cypress v15’s keyboard “press a key” API is cy.press() (for native keydown/keyup events).
-
Official API docs (syntax, options, supported keys, examples):
cy.press()(docs.cypress.io)- Syntax:
cy.press(key)/cy.press(key, options)(docs.cypress.io) - Prefer named keys via
Cypress.Keyboard.Keys(e.g.,Cypress.Keyboard.Keys.TAB,ENTER, arrows, etc.). (docs.cypress.io) - Notes include limitations (e.g., no multi-character strings; F1–F12 not supported). (docs.cypress.io)
- Syntax:
-
Background/announcement blog post: “Press tab in your tests: Introducing
cy.press()” (cypress.io)
Citations:
- 1: https://docs.cypress.io/api/commands/press?utm_source=openai
- 2: https://docs.cypress.io/api/commands/press?utm_source=openai
- 3: https://docs.cypress.io/api/commands/press?utm_source=openai
- 4: https://docs.cypress.io/api/commands/press?utm_source=openai
- 5: https://www.cypress.io/blog/press-tab-in-your-tests-introducing-cy-press?utm_source=openai
🌐 Web query:
Cypress 15 Node.js version requirement compatibility
💡 Result:
Cypress 15.x requires Node.js 20, 22, or 24+ on the machine where you install/run Cypress via the cypress npm package. Node.js 18 and 23 are not supported for Cypress 15 installs. [1]
Compatibility summary (Node.js → Cypress 15):
- Node 20 LTS: supported [1]
- Node 22 LTS: supported [1]
- Node 24 (and newer): supported [1]
- Node 18: not supported (upgrade required) [1]
- Node 23: not supported [1]
Note: Cypress includes a bundled Node.js for parts of its internal runtime, but your system Node.js is still used when installing the cypress npm package and fetching the Cypress binary. [1]
Sources
- Cypress Docs — Migration Guide (Cypress 15.0: “Node.js 20, 22 and 24+ support”) [1]
🌐 Web query:
Cypress 15.12.0 release version npm registry
💡 Result:
Cypress 15.12.0 is published on the npm registry.
- Install:
npm install [email protected](packages.ecosyste.ms) - Published (UTC): 2026-03-13T14:24:07.753Z (packages.ecosyste.ms)
- Tarball:
https://registry.npmjs.org/cypress/-/cypress-15.12.0.tgz(packages.ecosyste.ms) - dist.shasum:
84be43a9d85cb390ca404e5b1d030568a06ab4eb(packages.ecosyste.ms) - dist.integrity:
sha512-B2BRcudLfA4NZZP5QpA45J70bu1heCH59V1yKRLHAtiC49r7RV03X5ifUh7Nfbk8QNg93RAsc6oAmodm/+j0pA==(packages.ecosyste.ms) - Node engine requirement:
^20.1.0 || ^22.0.0 || >=24.0.0(packages.ecosyste.ms) - It is listed as the latest release. (packages.ecosyste.ms)
Citations:
- 1: https://packages.ecosyste.ms/api/v1/registries/npmjs.org/packages/cypress/versions/15.12.0
- 2: https://packages.ecosyste.ms/api/v1/registries/npmjs.org/packages/cypress/versions/15.12.0
- 3: https://packages.ecosyste.ms/api/v1/registries/npmjs.org/packages/cypress/versions/15.12.0
- 4: https://packages.ecosyste.ms/api/v1/registries/npmjs.org/packages/cypress/versions/15.12.0
- 5: https://packages.ecosyste.ms/api/v1/registries/npmjs.org/packages/cypress/versions/15.12.0
- 6: https://packages.ecosyste.ms/api/v1/registries/npmjs.org/packages/cypress/versions/15.12.0
- 7: https://packages.ecosyste.ms/registries/npmjs.org/packages/cypress/versions
Update Node engine constraint to ">=20.1.0" for precision.
All three points are confirmed:
- Cypress 15.12.0 is a valid published release (latest as of March 2026)
- The
cy.press()API exists in Cypress 15 with full support forCypress.Keyboard.Keys(e.g.,ENTER) - Node 20+ is indeed required
However, Cypress 15.12.0 specifies ^20.1.0 || ^22.0.0 || >=24.0.0. The current constraint ">=20" would allow Node 20.0.x, which does not satisfy the requirement. Change to ">=20.1.0" for alignment.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@package.json` around lines 20 - 22, Update the Node engine constraint in
package.json to require Node >=20.1.0 instead of ">=20"; locate the "engines" ->
"node" entry and change its value to ">=20.1.0" so it aligns with Cypress
15.12.0's supported Node ranges.
Test Results 14 files ±0 87 suites ±0 4m 29s ⏱️ -33s Results for commit 3ee2a39. ± Comparison against base commit d0a04d6. This pull request removes 1 and adds 1 tests. Note that renamed tests count towards both.♻️ This comment has been updated with latest results. |
cy.press dispatches keydown/keyup directly to the browser window via window.dispatchEvent. The window-level keydown handler only closes the dialog on Escape; Enter returns early when a dialog is open. No DOM element's click is synthesised, so cy.press(ENTER) can never dismiss the dialog regardless of which element is focused. Replace the focus+press approach with a direct close button click, which is the actual mechanism that removes the dialog from the DOM. Rename the test to match the updated behaviour. https://claude.ai/code/session_01MpqnEptGDtH5SFAk5BC98Z
2 participants
Summary
Removed the
cypress-real-eventsdependency and replaced its usage with Cypress's native keyboard event handling API. This simplifies the test setup and reduces external dependencies.Key Changes
cy.get(".help-link").realType("{enter}")withcy.press(Cypress.Keyboard.Keys.ENTER)in the how-to-play testcypress-real-eventsfrom devDependencies in package.jsoncypress-real-events/supportimport from cypress/support/e2e.jsImplementation Details
The test maintains the same functionality—dispatching an Enter key event to toggle the help dialog—but now uses Cypress's built-in keyboard handling instead of relying on the external real-events library. The updated comment clarifies that
cy.pressdispatches a real Enter key event to the browser window.https://claude.ai/code/session_01MpqnEptGDtH5SFAk5BC98Z
Summary by CodeRabbit
Chores
Documentation