cy.trigger() for custom events in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does cy.trigger() do in Cypress?

cy.trigger() simulates an event on a DOM element, like clicks or custom events, to test how your app reacts.

beginner

How do you trigger a custom event named myEvent on an element using cy.trigger()?

Use cy.get('selector').trigger('myEvent') to fire the custom event myEvent on the selected element.

intermediate

Can cy.trigger() send extra data with a custom event? How?

Yes! Pass an object as the second argument with extra properties, like { detail: { key: 'value' } }, to send data with the event.

intermediate

What is a real-life example of using cy.trigger() with a custom event?

Imagine a button that fires a userLoggedIn event. You can test it by triggering userLoggedIn on the button and checking if the app updates accordingly.

beginner

Why use cy.trigger() instead of cy.click() for custom events?

cy.click() only simulates mouse clicks. cy.trigger() can simulate any event, including custom ones your app listens for.

What is the main purpose of cy.trigger() in Cypress?

A To simulate any event on a DOM element

B To type text into input fields

C To navigate to a new page

D To take screenshots

cy.trigger() simulates events like clicks or custom events on elements.

How do you pass extra data with a custom event using cy.trigger()?

A By adding a third argument with data

B By passing an object as the second argument

C By chaining <code>.data()</code> after <code>cy.trigger()</code>

D You cannot pass extra data

Extra data is passed as an object in the second argument of cy.trigger().

Which of these events can cy.trigger() simulate?

A Only mouse clicks

B Only keyboard events

C Any DOM event including custom events

D Only form submissions

cy.trigger() can simulate any DOM event, including custom ones.

If your app listens for a custom event dataLoaded, how do you test it with Cypress?

A Use <code>cy.trigger('dataLoaded')</code> on the element

B Use <code>cy.visit('dataLoaded')</code>

C Use <code>cy.type('dataLoaded')</code>

D Use <code>cy.click()</code> on the element

Trigger the custom event dataLoaded with cy.trigger() to test event handling.

Why might you choose cy.trigger() over cy.click()?

A <code>cy.click()</code> only works on buttons

B <code>cy.click()</code> is deprecated

C <code>cy.trigger()</code> types text faster

D <code>cy.trigger()</code> can simulate events other than clicks

cy.trigger() is more flexible and can simulate any event, not just clicks.

Explain how to use cy.trigger() to simulate a custom event with extra data on a DOM element.

Think about how you tell Cypress which element and event to use, and how to add data.

Describe a scenario where using cy.trigger() is better than cy.click() in testing.

Consider events your app listens for that are not mouse clicks.