Intermediate18 min read

User Interactions

Simulate clicks, typing, form submission, and advanced pointer actions.

Clicking Elements

cy.click() triggers native click on visible, enabled elements. Cypress scrolls element into view automatically. Use { force: true } only when necessary—it bypasses actionability checks and hides real user issues.

Double-click, right-click, and multiple clicks supported via options. Click coordinates relative to element for canvas or map UIs.

cy.get('[data-cy="add-to-cart"]').click();
cy.get('[data-cy="menu"]').rightclick();
cy.get('[data-cy="item"]').dblclick();

Typing and Clearing

cy.type() simulates keyboard input with realistic delay optional. cy.clear() empties inputs before typing new values. Special keys use {{enter}}, {{esc}}, {{selectAll}} syntax.

For contenteditable or rich text editors, verify editor API or use real paste events if type insufficient.

{ delay: 0 } speeds typing for large forms in tests
type on disabled fields fails—assert enabled first
Use cy.focused() after tab navigation keyboard tests

cy.get('input[name="email"]')
  .clear()
  .type("user@example.com");

cy.get('input[name="search"]').type("query{enter}");

Form Submission

Submit via button click or cy.submit() on form element. Intercept API calls to assert payload without full backend when appropriate.

Validate success and error states after submit—URL change, toast message, inline validation errors.

cy.get('[data-cy="login-form"]').within(() => {
  cy.get('input[name="email"]').type("ada@example.com");
  cy.get('input[name="password"]').type("secret");
  cy.get('button[type="submit"]').click();
});

cy.url().should("include", "/dashboard");

Selects, Checks, and Files

cy.select() chooses option in select element. check/uncheck for checkboxes and radios. selectFile uploads files to input[type=file] with fixture path.

Drag-and-drop uses trigger or dedicated commands; complex DnD may need custom events matching library implementation.

cy.get('select[name="country"]').select("US");
cy.get('[type="checkbox"]').check();
cy.get('input[type="file"]').selectFile("cypress/fixtures/doc.pdf");

Actionability

Cypress waits for element to be attached, visible, not disabled, not covered, and stable before action. Failures explain which check failed—use message to fix UI not force option.

Animations causing instability may need CSS reduced motion in test env or wait for animation end via assertion on class.