Cypress Interacting with Elements

Finding an element is only the first step in a Cypress test. The next step involves interacting with it, such as clicking, typing, or selecting an option. This topic covers the most common interaction commands.

Clicking Elements

The click command simulates a mouse click on a selected element.

cy.get('#submit-button').click()

Cypress waits briefly for the element to become clickable before performing the action. This built-in waiting reduces failures caused by slow-loading pages.

A Simple Way to Picture It

Think of Cypress as a careful assistant handing you a form to sign. The assistant waits until the pen is actually in your hand before letting go. Cypress waits until an element is ready before it clicks, types, or selects anything on it.

Typing into Fields

The type command enters text into an input field, one character at a time.

cy.get('#username').type('john_doe')

Cypress simulates real keystrokes, which triggers the same events a real user would cause while typing.

Clearing a Field First

Some fields already contain default text that needs removal before typing new values.

cy.get('#search-box').clear().type('cypress testing')

Selecting Dropdown Options

The select command chooses an option from a dropdown menu.

cy.get('#country').select('India')

Cypress can select an option using its visible label or its underlying value attribute.

Checking Boxes and Radio Buttons

The check command selects a checkbox or radio button.

cy.get('#agree-terms').check()
cy.get('#payment-method').check('creditcard')

The uncheck command removes a selection from a checkbox, though it does not apply to radio buttons.

Interaction Flow Diagram

Find Element (cy.get)
     |
     v
Wait until actionable
     |
     v
Perform Action (click, type, select)
     |
     v
Page updates in response

Hovering Over Elements

Cypress does not offer a direct hover command, since real hover behavior depends on mouse position tracking. Testers often trigger the underlying event manually to simulate this behavior.

cy.get('.menu-item').trigger('mouseover')

Dragging and Dropping

Drag and drop interactions require triggering a sequence of mouse events, since no single built-in command exists for this action.

cy.get('.drag-item').trigger('mousedown')
cy.get('.drop-zone').trigger('mousemove').trigger('mouseup')

Scrolling to an Element

The scrollIntoView command brings an element into the visible area before interacting with it.

cy.get('#footer-link').scrollIntoView().click()

This step matters for long pages where an element sits far below the visible screen area.

Forcing an Interaction

Cypress sometimes blocks an interaction because it detects an element is covered or hidden. Adding the force option skips this safety check.

cy.get('#hidden-button').click({ force: true })

Use this option carefully, since it can hide real bugs related to visibility or overlapping elements.

Combining Multiple Interactions

A realistic test often chains several interactions together to simulate a full user action.

cy.get('#username').type('john_doe')
cy.get('#password').type('secret123')
cy.get('#login-button').click()

This sequence fills a login form and submits it, matching what a real user would do.

Key Points

• The click command simulates a mouse click on an element.
• The type command enters text and triggers real keystroke events.
• The select and check commands handle dropdowns, checkboxes, and radio buttons.
• Hover and drag actions require triggering mouse events manually.
• The force option skips visibility checks but should be used carefully.