cy.trigger() for custom events in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to trigger a custom event named 'myEvent' on the element with id 'button'.

Cypress

cy.get('#button').[1]('myEvent')

Drag options to blanks, or click blank then click option'

Ainvoke

Bclick

Ctype

Dtrigger

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click' instead of 'trigger' for custom events.

Using 'type' which is for typing text, not triggering events.

The trigger command is used to fire custom events on elements in Cypress.

2fill in blank

medium

Complete the code to trigger a custom event 'myEvent' with additional data { key: 'value' } on the element with class 'item'.

Cypress

cy.get('.item').trigger('myEvent', [1])

Drag options to blanks, or click blank then click option'

A{ key: 'value' }

B[ key: 'value' ]

C'key: value'

Dkey: 'value'

Attempts:

3 left

💡 Hint

Common Mistakes

Passing data as a string instead of an object.

Using square brackets which define arrays, not objects.

When triggering events with extra data, pass an object as the second argument.

3fill in blank

hard

Fix the error in the code to correctly trigger a custom event 'customEvent' with bubbling enabled on the element with id 'box'.

Cypress

cy.get('#box').trigger('customEvent', { [1]: true })

Drag options to blanks, or click blank then click option'

AbubbleEvent

Bbubbles

Cbubble

DeventBubbles

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'bubble' instead of 'bubbles'.

Using incorrect property names that do not enable bubbling.

The correct property to enable event bubbling is bubbles set to true.

4fill in blank

hard

Fill both blanks to trigger a custom event 'update' with bubbling and cancelable options set to true on the element with class 'card'.

Cypress

cy.get('.card').trigger('update', { [1]: true, [2]: true })

Drag options to blanks, or click blank then click option'

Abubbles

Bcancelable

Ccancel

Dbubble

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'bubble' instead of 'bubbles'.

Using 'cancel' instead of 'cancelable'.

To enable event bubbling and allow the event to be cancelable, use bubbles and cancelable set to true.

5fill in blank

hard

Fill all three blanks to trigger a custom event 'refresh' with bubbling and cancelable set to true, and pass detail data { id: 123 } on the element with id 'container'.

Cypress

cy.get('#container').trigger('refresh', { [1]: true, [2]: true, [3]: { id: 123 } })

Drag options to blanks, or click blank then click option'

Abubbles

Bcancelable

Cdetail

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'data' instead of 'detail' for custom event data.

Omitting 'cancelable' or 'bubbles' properties.

The detail property is used to pass custom data with the event. bubbles and cancelable enable event propagation and cancellation.