cypress-real-events for native events - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Cypress test using cypress-real-events?

Consider this Cypress test code snippet that uses cypress-real-events to simulate a native click event on a button. What will be the value of clicked after the test runs?

Cypress

let clicked = false;

cy.document().then(doc => {
  const button = doc.createElement('button');
  button.textContent = 'Click me';
  button.addEventListener('click', () => { clicked = true; });
  doc.body.appendChild(button);
  cy.get('button').realClick();
}).then(() => {
  cy.wrap(null).then(() => {
    // Check clicked value here
  });
});

A clicked remains false because realClick does not trigger native events

B Test throws an error because realClick is not a valid Cypress command

C clicked is undefined because the variable is out of scope

D clicked becomes true because realClick triggers the native click event

💡 Hint

Remember that cypress-real-events triggers native browser events, unlike Cypress's default .click()

The realClick() command from cypress-real-events triggers the native click event on the button element. This causes the event listener to run and sets clicked to true.

❓ assertion

intermediate

Which assertion correctly verifies a native keyboard event triggered by cypress-real-events?

You want to test that pressing the 'Enter' key on an input triggers a native keydown event that sets pressedEnter to true. Which assertion correctly verifies this after using realPress('Enter')?

Cypress

let pressedEnter = false;

cy.get('input').then($input => {
  $input[0].addEventListener('keydown', e => {
    if (e.key === 'Enter') pressedEnter = true;
  });
  cy.wrap($input).realPress('Enter');
});

A cy.wrap(null).should(() => { expect(pressedEnter).to.be.true; });

B cy.get('input').should('have.value', 'Enter').and(() => { expect(pressedEnter).to.be.true; });

C cy.wrap(null).should(() => { expect(pressedEnter).to.equal('Enter'); });

D cy.get('input').should('have.focus').and(() => { expect(pressedEnter).to.be.false; });

💡 Hint

The variable is outside the DOM, so use cy.wrap(null) to assert its value.

Since pressedEnter is a variable outside the DOM, the assertion must be wrapped in cy.wrap(null).should() to wait and check its value. Option A correctly asserts it is true.

🔧 Debug

advanced

Why does this cypress-real-events test fail to trigger a native mouseover event?

This test tries to trigger a native mouseover event on a div but the event listener never runs. What is the most likely reason?

Cypress

let hovered = false;

cy.get('div#hover-target').realHover().then($div => {
  $div[0].addEventListener('mouseover', () => { hovered = true; });
});

A The event listener is added after the realHover command runs, so it misses the event

B hovered variable is not accessible inside the event listener

C The selector 'div#hover-target' is invalid and does not find the element

D realHover does not trigger native mouseover events, only mouseenter

💡 Hint

Check the order of commands and event listener attachment.

The event listener is added inside the then callback, but realHover() is called outside that callback, so it runs before the listener is attached. The event is missed.

❓ framework

advanced

Which cypress-real-events command simulates a native drag and drop sequence?

You want to simulate a native drag and drop on an element using cypress-real-events. Which command sequence correctly triggers native drag events?

A cy.get('#drag').trigger('dragstart').trigger('drag').trigger('drop');

B cy.get('#drag').realMouseDown().realMouseMove(100, 0).realMouseUp();

C cy.get('#drag').realDrag();

D cy.get('#drag').realClick().realClick();

💡 Hint

Native drag and drop requires mouse down, move, then mouse up events.

Option B uses realMouseDown(), realMouseMove(), and realMouseUp() to simulate the native drag sequence. Other options either use synthetic events or invalid commands.

🧠 Conceptual

expert

Why is using cypress-real-events preferred over Cypress's default .click() for testing native event handlers?

Select the best explanation for why cypress-real-events commands like realClick() are preferred when testing native event handlers in web applications.

A Because cypress-real-events automatically retries commands on failure, unlike Cypress's default commands.

B Because Cypress's default .click() triggers native events but does not wait for animations, causing flaky tests.

C Because cypress-real-events triggers native browser events that bubble and behave exactly like real user interactions, ensuring event listeners relying on native events run correctly.

D Because Cypress's default .click() only works on buttons, while cypress-real-events works on all elements.

💡 Hint

Think about how native events differ from synthetic events in browser behavior.

Cypress's default .click() triggers synthetic events that may not behave exactly like native browser events. cypress-real-events triggers real native events, ensuring event listeners that depend on native event properties and bubbling behave correctly.