Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesSome links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Use cy.press() to move through AG Grid and .type() only on the editor that actually receives text. A grid cell and its editing input are often different focus targets. Click or navigate to the intended cell, enter edit mode with the key your application supports, assert that the editor has focus, type into that editor, and then assert the post-edit focus separately. Do not expect .type() to keep a wrapper cell focused while it types into another element.
Why cell focus and editor focus are different
AG Grid normally displays a cell as a grid-managed element, then creates or reveals an input, textarea, or contenteditable element when editing starts. The browser can focus only one element at a time. During editing, the editor—not the cell wrapper—usually owns focus so that keyboard events and input events reach the text control.
Cypress adds an important behavior: if the subject passed to .type() is not focused, Cypress first clicks it. That automatic click is convenient for ordinary forms but can move focus away from the cell you intended to keep active. A cell wrapper may also be focusable while not being the text editor, so typing on it can start a different interaction or fail to change the value.
Free tools Windows power users keep installed
One-click scans. No signup required.
Decide which focus state you need at each point:
- Navigation focus: the selected AG Grid cell, used for arrows, Tab, Enter, or F2.
- Editing focus: the input or contenteditable control that receives characters.
- After-commit focus: the cell or next cell selected by your grid’s Enter, Tab, blur, or custom navigation rules.
Trying to assert all three at once creates a false test. Assert the state that should exist after each action.
The command choice: .type() versus cy.press()
| Task | Preferred command | Reason |
|---|---|---|
| Enter text into an input, textarea, or contenteditable editor | .type('text') |
It emits keyboard and input events for text entry on a focusable subject. |
| Move with Arrow, Tab, or Enter in a non-form grid context | cy.press(Cypress.Keyboard.Keys...) |
It dispatches native keyboard events intended for navigation and focus management. |
| Verify the active target | .should('have.focus') |
It checks the browser’s actual focused element instead of assuming where focus went. |
Cypress documents that chaining further subject-dependent commands after .type() is unsafe. Re-query the editor or cell before a later assertion. This also protects the test from AG Grid replacing an editor node when editing commits.
A reliable Cypress sequence
1. Give the cell a stable selector
Prefer a selector owned by your application, such as a data-testid, a row identifier combined with a column identifier, or an accessible role/name. Avoid depending on AG Grid’s generated CSS classes or a column’s visual position when rows can be sorted or virtualized.
cy.get('[data-testid=target-cell]')2. Activate or navigate to the cell
If clicking is the application’s normal way to select a cell, click it and assert focus. If a test starts on another cell, use native navigation keys and assert after the move. Use the key constants supplied by your installed Cypress version.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11cy.get('[data-testid=target-cell]')
.click()
.should('have.focus')
cy.press(Cypress.Keyboard.Keys.ARROWDOWN)
cy.get('[data-testid=next-cell]').should('have.focus')Do not use .type('{downarrow}') as a substitute for navigation unless your application specifically treats that text command as required. Cypress recommends cy.press() for navigation keys and focus management.
3. Enter edit mode using the grid’s configured key
AG Grid commonly permits Enter or F2 to begin editing, but the exact trigger can be changed by grid options, an editor, or application event handlers. Send the key your application uses, then assert the real editor—not merely the cell wrapper.
cy.press(Cypress.Keyboard.Keys.ENTER)
cy.get('[data-testid=cell-editor]')
.should('be.visible')
.and('have.focus')If your editor is an input generated inside a cell, target the element with contenteditable, or the input/textarea itself. For a contenteditable editor, target the element carrying the contenteditable attribute rather than a child text node.
4. Type only after the editor owns focus
cy.get('[data-testid=cell-editor]')
.should('have.focus')
.clear()
.type('new value')
cy.get('[data-testid=cell-editor]')
.should('have.value', 'new value')The explicit focus assertion catches a wrong selector before Cypress can silently click it. If the editor is contenteditable, assert its text or application state instead of using have.value, for example .should('contain.text', 'new value').
Recommended Free Tools
5. Commit and check the resulting focus
Whether Enter, Tab, blur, or another action commits the value is application-specific. Perform that action, re-query the cell, and assert the focus that your grid is configured to produce.
cy.press(Cypress.Keyboard.Keys.ENTER)
cy.get('[data-testid=target-cell]')
.should('contain.text', 'new value')
.and('have.focus')Use the final have.focus assertion only if your configuration returns focus to the cell. If Enter advances to another cell or the editor intentionally retains focus, assert that documented result instead. A test should describe your behavior, not an assumed AG Grid default.
A complete example with separate navigation and editing assertions
it('edits the intended AG Grid cell without losing control of focus', () => {
cy.get('[data-testid=price-cell-42]')
.click()
.should('have.focus')
cy.press(Cypress.Keyboard.Keys.ENTER)
cy.get('[data-testid=price-editor]')
.should('be.visible')
.and('have.focus')
.clear()
.type('19.99')
cy.get('[data-testid=price-editor]')
.should('have.value', '19.99')
cy.press(Cypress.Keyboard.Keys.ENTER)
cy.get('[data-testid=price-cell-42]')
.should('contain.text', '19.99')
.should('have.focus')
})Replace every data-testid with selectors from your application. The example assumes Enter opens and commits editing and returns focus to the same cell; change those two steps when your grid uses F2, Tab, blur, or a custom editor.
AG Grid settings that change the outcome
suppressCellFocus
If suppressCellFocus is enabled, AG Grid deliberately disables cell focus. A test that expects have.focus on a cell will fail even if editing works. Remove that setting when cell-level focus is part of the keyboard contract, or assert the editor and another application-defined focus target instead.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Navigation callbacks
navigateToNextCell and tabToNextCell can replace the default destination after an arrow, Enter, or Tab. When these callbacks are present, identify the cell they return and assert that cell rather than the visual neighbor you would get from defaults.
Custom cell renderers and editors
Buttons, links, nested inputs, and other focusable elements inside a custom component are the component’s responsibility. AG Grid notes that custom components must implement their own internal focus and navigation behavior. A grid-level test may need to press a key on the component’s actual control, and the grid may need suppressKeyboardEvent to prevent the grid from consuming that key.
// Illustrative configuration; adapt to your component
const gridOptions = {
suppressCellFocus: false,
navigateToNextCell: params => {
// return the application-defined next position
return params.nextCellPosition
},
suppressKeyboardEvent: params => {
// return true only for keys your custom editor handles
return false
}
}The callback bodies above are deliberately minimal. Their return values and key rules must match your application’s row model, editor, and accessibility design.
When .type() appears to steal focus
The subject was never focused
Check the command log and add .should('have.focus') immediately before .type(). If it fails, you are targeting the wrong node, the editor has not opened, or another element intercepted the click.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →You typed on the cell wrapper
Inspect the live DOM while edit mode is active. Locate the input or element with contenteditable and use that selector. The wrapper can remain visually selected while the editor is a sibling or descendant with its own focus.
Editing replaced the DOM node
AG Grid can create and destroy editors as rows enter or leave edit mode. Do not retain a stale subject across a commit. Re-query the editor for its value and re-query the cell for its final text and focus.
A key was interpreted as navigation
If a string containing special-key syntax produces unexpected movement, separate the actions: use cy.press() for the navigation key, then .type() for ordinary text. This makes the intended event sequence explicit.
Troubleshooting checklist
| Symptom | Likely cause | Fix |
|---|---|---|
.type() edits a different cell |
The subject was unfocused, so Cypress clicked it; virtualization or duplicate selectors may also select another row. | Use a row-and-column-specific selector, assert focus before typing, and confirm the editor belongs to the intended row. |
| The cell never reports focus | suppressCellFocus is enabled or a custom renderer owns focus. |
Change the grid option or assert the renderer’s control instead. |
| Enter does nothing | The application uses F2 or a custom edit trigger, or the grid is not focused. | Verify the configured trigger, press it with cy.press(), and wait for the editor to become visible. |
| Value assertion fails after typing | The editor is contenteditable, formats the value, or was replaced after commit. | Assert text or application state as appropriate and re-query after the commit action. |
| Tab or arrows move unexpectedly | tabToNextCell, navigateToNextCell, or suppressKeyboardEvent changes defaults. |
Read the installed grid configuration and assert the callback’s actual destination. |
| Test passes locally but flakes in CI | The editor opens asynchronously, rows are virtualized, or a fixed delay races the render. | Wait on a visible editor or a specific application state; avoid arbitrary sleeps and broad force: true clicks. |
Making focus tests reliable and fast
- Use deterministic selectors. Include stable row identity and column identity where duplicate cells can exist.
- Wait for state, not time. Assert that the editor is attached, visible, and focused instead of waiting a fixed number of milliseconds.
- Keep one responsibility per assertion. Check navigation focus, editor focus, value, and post-commit focus at the point each should be true.
- Do not overuse retries or force. They can hide a real focus defect. Fix the selector or readiness condition first.
- Account for virtualization. Scroll or navigate through the grid using its supported behavior, then query the rendered target; off-screen rows may not have DOM nodes.
- Match installed versions. Cypress command availability and AG Grid keyboard behavior can vary by version. Check the versions used by the project and adapt key constants and editor markup accordingly.
These practices reduce rerenders and unnecessary DOM searches, improving suite performance without weakening the focus contract.
Or skip the browser setup
If you need a clean screenshot of a page containing the grid for a bug report or visual record, ScreenshotNeo can capture it with one request. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be disabled. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
See the ScreenshotNeo API documentation for all options. A basic capture is:
curl -G 'https://api.screenshotneo.com/v1/shot' -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpThe same request in Python:
import requests
r = requests.get('https://api.screenshotneo.com/v1/shot', params={'access_key': 'YOUR_API_KEY', 'url': 'https://example.com'}, timeout=90)
r.raise_for_status()
open('shot.webp', 'wb').write(r.content)And in Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));ScreenshotNeo includes full-page capture, custom waits, CSS or JavaScript, device and viewport settings, request blocking, cookies and headers, element capture, PDFs, async jobs, bulk capture, caching, signed links, and an OpenAPI specification on every plan. The Free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account when you want to capture a clean reproduction.
FAQ
Can one Cypress command keep both the cell and editor focused?
No. The browser has one active element. During editing, focus normally belongs to the editor; after commit, the grid may return it to a cell or move it elsewhere.
Should I use cy.focused()?
Yes, when you need to inspect the active element generically. A selector-specific .should('have.focus') is usually clearer because it also proves that the intended editor or cell was selected.
Does a custom cell editor change the test pattern?
The pattern remains the same, but the editor must expose a stable focusable target and implement its internal keyboard rules. Inspect that component’s contract before choosing selectors or expected destinations.
Why does a test pass when I click but fail when I navigate with arrows?
Clicking and keyboard navigation can invoke different AG Grid handlers. Verify the grid is focused before pressing the arrow, and check whether navigation callbacks or keyboard suppression alter the destination.
Frequently Asked Questions
Can one Cypress command keep both the cell and editor focused?
No. The browser has one active element. During editing, focus normally belongs to the editor; after commit, the grid may return it to a cell or move it elsewhere.
Should I use cy.focused() in a grid test?
Use it when inspecting the active element generically; a selector-specific have.focus assertion is clearer when you need to prove the intended editor or cell is focused.
Does a custom cell editor change the test pattern?
The pattern stays the same, but the editor must expose a stable focusable target and implement its own keyboard rules.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
