click, type, and submit in Cypress

Simulating Real User Actions

Cypress action commands like .click() and .type() do more than just fire a synthetic event, they simulate the full sequence of real browser events a genuine user interaction would trigger (mousedown, focus, keypress, and so on), which matters for components that listen to those lower-level events.

Before performing an action, Cypress automatically checks that the target element is visible, not disabled, and not covered by another element, retrying briefly if it is not yet actionable.

cy.get('[data-cy="email"]').type('user@example.com');
cy.get('[data-cy="terms"]').check();
cy.get('[data-cy="plan"]').select('Pro');
cy.get('[data-cy="signup-form"]').submit();

This sequence fills an email field, checks a checkbox, selects a dropdown option, and submits a form directly.

Core Action Commands

.click({ force: true })
.type('text', { delay: 50 })
.clear()
.check()
.uncheck()
.select('Option Label')
.submit()

• .click() accepts options like { force: true } to bypass actionability checks when truly needed.
• .type() accepts special character sequences like {enter} and {backspace}.
• .check()/.uncheck() work on checkboxes and radio buttons.
• .select() chooses an option in a <select> element by its visible label or value.

Action Commands Cheat Sheet

The most frequently used interaction commands and what they do.

Typing Special Key Sequences

.type() supports a special curly-brace syntax for non-character keys, letting you simulate pressing Enter, Tab, arrow keys, or modifier key combinations as part of a realistic typing sequence.

cy.get('[data-cy="search"]')
  .type('cypress testing')
  .type('{enter}');

cy.get('[data-cy="amount"]')
  .type('{selectall}{backspace}250');

{selectall}{backspace} is a common pattern for replacing an input's entire existing value.

Two Ways to Submit a Form

You can either click the form's actual submit button, which most closely mirrors real user behavior, or call .submit() directly on the <form> element, which is faster but skips whatever click-specific logic (like a loading spinner triggered on click) the button might have attached.

• Prefer clicking the real submit button for true end-to-end coverage of the full user flow.
• Reserve .submit() for cases where the click-specific behavior is intentionally out of scope for that test.
• Never use .submit() on a form with no actual submit handler, it will not accomplish anything meaningful.

When (and When Not) to Force a Click

{ force: true } bypasses Cypress's actionability checks, useful for edge cases like clicking an element hidden behind a CSS overlay intentionally. It should not become a default habit for working around a genuinely broken or covered element in your application, since that usually indicates a real bug or a selector targeting the wrong node.

// Use sparingly and intentionally
cy.get('[data-cy="hidden-menu-item"]').click({ force: true });

Common Mistakes

• Reaching for { force: true } as a default fix whenever a click "doesn't work", instead of investigating why the element isn't actionable.
• Using .submit() when the test's actual intent is to verify the submit button's click behavior.
• Forgetting .clear() before .type() when a field might already contain a pre-filled value.
• Typing values character by character into a field that is disabled or not yet visible, relying on { force: true } instead of fixing the underlying wait.

Key Takeaways

• Action commands simulate realistic browser events, not just a single synthetic event.
• Cypress checks actionability (visible, enabled, not covered) before performing most actions.
• .type() supports special key sequences like {enter} and {selectall}{backspace}.
• Prefer clicking a real submit button over calling .submit() directly, for closer-to-real-user coverage.