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.

Practice

1. What does cy.trigger() do in Cypress when testing web pages?

easy

A. It simulates user or custom events on page elements.

B. It creates a new database entry.

C. It styles the page elements dynamically.

D. It fetches data from an API.

Solution

1. Step 1: Understand the purpose of cy.trigger()

   cy.trigger() is used in Cypress to simulate events like clicks or custom events on elements.

2. Step 2: Compare options with the purpose

   Only the option 'It simulates user or custom events on page elements.' correctly describes simulating events. Other options describe unrelated actions.

3. Final Answer:

   It simulates user or custom events on page elements. -> Option A

4. Quick Check:

   cy.trigger() = simulate events [OK]

Hint: Remember: cy.trigger() fires events on elements [OK]

Common Mistakes:

• Thinking cy.trigger() fetches data
• Confusing cy.trigger() with styling functions
• Assuming it modifies database entries

2. Which of the following is the correct syntax to trigger a custom event named myEvent on an element with id #btn in Cypress?

easy

A. cy.get('#btn').trigger('myEvent')

B. cy.trigger('#btn', 'myEvent')

C. cy.get('#btn').fire('myEvent')

D. cy.triggerEvent('#btn', 'myEvent')

Solution

1. Step 1: Recall correct method chaining in Cypress

   To trigger an event on an element, first select it with cy.get(), then call .trigger() with the event name.

2. Step 2: Check each option's syntax

   cy.get('#btn').trigger('myEvent') matches the correct pattern. The other options use invalid Cypress commands.

3. Final Answer:

   cy.get('#btn').trigger('myEvent') -> Option A

4. Quick Check:

   Use cy.get().trigger() for events [OK]

Hint: Always select element first with cy.get(), then trigger event [OK]

Common Mistakes:

• Calling trigger() directly on cy without get()
• Using non-existent methods like fire() or triggerEvent()
• Passing selector as first argument to trigger()

3. Consider the code:

cy.get('#input').trigger('customChange', { detail: { value: 42 } })

What will be the effect of this code in a Cypress test?

medium

A. It causes a syntax error because of the detail object.

B. It changes the value of #input to 42 directly.

C. It triggers a click event instead of 'customChange'.

D. It triggers a 'customChange' event on #input with extra data { value: 42 }.

Solution

1. Step 1: Understand event triggering with extra options

   The trigger method can send custom events with additional data via the detail property.

2. Step 2: Analyze the code effect

   The code triggers 'customChange' on '#input' and passes { value: 42 } as event detail. It does not change input value directly or cause syntax errors.

3. Final Answer:

   It triggers a 'customChange' event on #input with extra data { value: 42 }. -> Option D

4. Quick Check:

   trigger(event, {detail}) sends custom event data [OK]

Hint: Use detail object to pass extra event data [OK]

Common Mistakes:

• Assuming trigger changes element properties directly
• Confusing event name with standard events like click
• Thinking detail causes syntax errors

4. You wrote this Cypress code:

cy.get('#form').trigger('submit', { bubbles: true })

But the form does not submit as expected. What is the likely problem?

medium

A. You must pass the event object manually; trigger() cannot send options.

B. The event name 'submit' is invalid for trigger().

C. The 'submit' event must be triggered on the form element, but it requires calling .submit() instead.

D. The bubbles option should be false for submit events.

Solution

1. Step 1: Understand how form submission works in Cypress

   Triggering 'submit' event alone may not cause form submission; Cypress recommends using .submit() command.

2. Step 2: Analyze the code and options

   The 'submit' event must be triggered on the form element, but it requires calling .submit() instead. correctly states that triggering 'submit' event is not enough; .submit() triggers native submission. Other options are incorrect about event validity and options usage.

3. Final Answer:

   The 'submit' event must be triggered on the form element, but it requires calling .submit() instead. -> Option C

4. Quick Check:

   Use .submit() to submit forms, not just trigger('submit') [OK]

Hint: Use .submit() for forms, not just trigger('submit') [OK]

Common Mistakes:

• Assuming trigger('submit') submits form
• Misusing bubbles option for submit event
• Thinking trigger() cannot send options

5. You want to test a custom event dataReady on a div with id #container. This event should carry a payload with a list of items. Which code correctly triggers this event with the payload { items: [1, 2, 3] } and ensures event bubbles up?

hard

A. cy.get('#container').trigger('dataReady', { items: [1, 2, 3], bubbles: true })

B. cy.get('#container').trigger('dataReady', { detail: { items: [1, 2, 3] }, bubbles: true })

C. cy.get('#container').trigger('dataReady', { detail: [1, 2, 3], bubbles: false })

D. cy.get('#container').trigger('dataReady', { payload: { items: [1, 2, 3] }, bubbles: true })

Solution

1. Step 1: Recall how to pass custom data in events

   Custom event data must be inside a detail object when triggering events.

2. Step 2: Check bubbling option and payload structure

   cy.get('#container').trigger('dataReady', { detail: { items: [1, 2, 3] }, bubbles: true }) correctly uses detail with the payload and sets bubbles: true. Other options either miss detail or have wrong payload keys or bubbling.

3. Final Answer:

   cy.get('#container').trigger('dataReady', { detail: { items: [1, 2, 3] }, bubbles: true }) -> Option B

4. Quick Check:

   Use detail for payload and bubbles:true to bubble event [OK]

Hint: Put payload inside detail and set bubbles:true to bubble event [OK]

Common Mistakes:

• Passing payload outside detail object
• Forgetting to set bubbles:true for bubbling
• Using wrong property names like payload instead of detail