cypress-real-events for native events

Introduction

Sometimes, Cypress commands don't trigger real browser events exactly like a user would. The cypress-real-events plugin helps send real native events to elements, making tests closer to real user actions.

When you want to test how your app reacts to real mouse or keyboard events.

When Cypress's default commands like .click() or .type() don't trigger certain event listeners.

When testing drag-and-drop or hover effects that need real browser events.

When you want to simulate real user interactions more accurately for better test reliability.

Syntax

Cypress

cy.get('selector').realClick()
cy.get('selector').realHover()
cy.get('selector').realType('text')

Use realClick() to send a native click event.

Use realHover() to simulate mouse hover with native events.

Examples

This clicks the button with a real native click event.

Cypress

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

This triggers a native mouse hover event on the menu item.

Cypress

cy.get('.menu-item').realHover()

This types the email text using native keyboard events.

Cypress

cy.get('input[name="email"]').realType('[e-mail]')

Sample Program

This test suite visits a sample page and uses cypress-real-events to perform native clicks, hovers, and typing. It then checks if the UI reacts correctly.

Cypress

describe('Real Events Test', () => {
  beforeEach(() => {
    cy.visit('https://example.cypress.io/commands/actions')
  })

  it('should real click the button and show alert', () => {
    cy.get('.action-btn').realClick()
    cy.get('.action-btn').should('have.class', 'active')
  })

  it('should real hover to show tooltip', () => {
    cy.get('.trigger-hover').realHover()
    cy.get('.tooltip').should('be.visible')
  })

  it('should real type in input', () => {
    cy.get('.action-email').realType('[e-mail]')
    cy.get('.action-email').should('have.value', '[e-mail]')
  })
})

Important Notes

Make sure to install cypress-real-events plugin and import it in your cypress/support/e2e.js file.

Native events can be slower but more reliable for some UI behaviors.

Use real events when default Cypress commands don't trigger your app's event handlers.

Summary

cypress-real-events helps send real native browser events in Cypress tests.

Use it to simulate real user clicks, hovers, and typing more accurately.

This improves test reliability for UI behaviors that depend on native events.