cypress-real-events for native events - Build an Automation Script

Verify native click and typing using cypress-real-events

Preconditions (2)

Step 1: Open the web page at 'http://localhost:3000/testpage'

Step 2: Use native click event to click the button with id 'submit-btn'

Step 3: Use native typing event to type 'Hello123' into the input field with id 'name-input'

Step 4: Verify that the button click triggers a visible alert with text 'Button clicked!'

Step 5: Verify that the input field contains the typed text 'Hello123'

✅ Expected Result: The button is clicked using a native event, triggering the alert. The input field receives the typed text using native typing events.

Automation Requirements - Cypress with cypress-real-events plugin

Assertions Needed:

Alert with text 'Button clicked!' is shown after button click

Input field with id 'name-input' contains text 'Hello123'

Best Practices:

Use cy.realClick() and cy.realType() from cypress-real-events for native events

Avoid using cy.click() and cy.type() for this test to demonstrate native event behavior

Use explicit assertions with cy.on('window:alert') to verify alert text

Use clear and stable selectors (id selectors) for elements

Automated Solution

Cypress

import 'cypress-real-events/support';

describe('Native events test with cypress-real-events', () => {
  beforeEach(() => {
    cy.visit('http://localhost:3000/testpage');
  });

  it('should click button and type text using native events', () => {
    // Listen for alert and verify text
    cy.on('window:alert', (text) => {
      expect(text).to.equal('Button clicked!');
    });

    // Use native click event
    cy.get('#submit-btn').realClick();

    // Use native typing event
    cy.get('#name-input').realClick().realType('Hello123');

    // Verify input value
    cy.get('#name-input').should('have.value', 'Hello123');
  });
});

The test imports the cypress-real-events support to enable native event commands.

In beforeEach, it visits the test page URL.

The test listens for the window:alert event to assert the alert text triggered by the button click.

It uses cy.realClick() to perform a native click on the button with id submit-btn.

Then it uses cy.realClick() followed by cy.realType() to type Hello123 into the input field with id name-input.

Finally, it asserts that the input field's value matches the typed text.

This approach ensures the test uses real browser events, which can catch issues that synthetic Cypress events might miss.

Common Mistakes - 3 Pitfalls

Using cy.click() and cy.type() instead of cy.realClick() and cy.realType()

{'mistake': 'Not listening for window:alert event to verify alert text', 'why_bad': 'Without listening, the alert may block the test or the assertion will be missed.', 'correct_approach': "Use cy.on('window:alert', callback) to capture and assert alert text."}

Using unstable or complex selectors instead of simple id selectors

Bonus Challenge

Now add data-driven testing with 3 different input texts to type into the input field

Show Hint