cy.trigger() for custom events in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ query_result

intermediate

What is the output of this Cypress command?

Consider the following Cypress test code snippet that triggers a custom event on a button element. What will be the value of the variable eventTriggered after running this code?

Cypress

let eventTriggered = false;

cy.get('button#submit').then($btn => {
  $btn[0].addEventListener('myCustomEvent', () => {
    eventTriggered = true;
  });
});

cy.get('button#submit').trigger('myCustomEvent');

A undefined

B false

C true

D Throws an error

💡 Hint

Remember that trigger fires the event listeners attached to the element.

The trigger command fires the custom event myCustomEvent on the button element, which sets eventTriggered to true.

📝 Syntax

intermediate

Which option correctly triggers a custom event with additional data?

You want to trigger a custom event named dataReady on a div with id container and pass an object { loaded: true } as event detail. Which of the following Cypress commands is correct?

A cy.get('#container').trigger('dataReady', { detail: { loaded: true } });

B cy.get('#container').trigger('dataReady', { eventDetail: { loaded: true } });

C cy.get('#container').trigger('dataReady', { data: { loaded: true } });

D cy.get('#container').trigger('dataReady', { loaded: true });

💡 Hint

Custom event data should be passed inside the detail property.

The trigger command passes event data inside an object with the detail key for custom events.

🔧 Debug

advanced

Why does this custom event not trigger the listener?

Given this code, why does the event listener not run when cy.trigger() is called?

cy.get('#box').trigger('customEvent', { detail: { value: 42 } });

cy.get('#box').then($el => {
  $el[0].addEventListener('customEvent', () => {
    console.log('Event fired');
  });
});

A The event listener is attached to the wrong element.

B The event name in trigger is misspelled.

C Custom events cannot be triggered with cy.trigger().

D The event listener is attached asynchronously and may not be ready before trigger runs.

💡 Hint

Think about the timing of attaching listeners and triggering events in Cypress commands.

The listener is attached inside a then callback, which runs asynchronously. The trigger command may run before the listener is attached, so the event is not caught.

❓ optimization

advanced

How to optimize triggering multiple custom events on the same element?

You need to trigger three different custom events start, progress, and end on a div with id progressBar. Which approach is the most efficient in Cypress?

A Trigger all events at once with <code>cy.get('#progressBar').trigger(['start', 'progress', 'end'])</code>.

B Get the element once with <code>cy.get('#progressBar')</code> and chain triggers: <code>.trigger('start').trigger('progress').trigger('end')</code>.

C Use <code>cy.get('#progressBar').then($el => { $el.trigger('start'); $el.trigger('progress'); $el.trigger('end'); })</code>.

D Call <code>cy.get('#progressBar').trigger('start')</code>, then <code>cy.get('#progressBar').trigger('progress')</code>, then <code>cy.get('#progressBar').trigger('end')</code> separately.

💡 Hint

Minimize DOM queries and use Cypress chaining.

Chaining triggers after a single get reduces DOM queries and keeps commands in Cypress chain, improving efficiency.

🧠 Conceptual

expert

What is the correct way to listen for a custom event triggered by cy.trigger() in Cypress?

You want to verify that a custom event dataLoaded is triggered on an element during a test. Which approach correctly listens and asserts the event firing?

A Attach an event listener inside <code>cy.get()</code> and set a flag variable, then assert the flag after <code>trigger()</code>.

B Use <code>cy.get().then($el => { const spy = cy.spy(); $el[0].addEventListener('dataLoaded', spy); }).trigger('dataLoaded').then(() => { expect(spy).to.have.been.called; })</code>.

C Use <code>cy.get().then($el => { cy.spy($el[0], 'dispatchEvent') }).trigger('dataLoaded').should('have.been.called')</code>.

D Use <code>cy.get().trigger('dataLoaded').should('have.been.called')</code> to assert the event was triggered.

💡 Hint

Attach an event listener that sets a flag before triggering and assert the flag after.

Option A correctly attaches an event listener inside a then callback that sets a flag variable, triggers the event, then asserts the flag to verify the event fired.