cy.trigger() for custom events in Cypress - Test Execution Trace

Test Overview

This test triggers a custom event on a button and verifies that the event handler updates the page content as expected.

Test Code - Cypress

Cypress

describe('Custom event trigger test', () => {
  it('should trigger a custom event and update text', () => {
    cy.visit('https://example.cypress.io/commands/actions')
    cy.get('#action-canvas')
      .trigger('myCustomEvent', { detail: { message: 'Hello Cypress!' } })
    cy.get('#custom-event-output').should('contain.text', 'Hello Cypress!')
  })
})

Execution Trace - 5 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Cypress test runner is ready	-	PASS
2	Browser opens and navigates to 'https://example.cypress.io/commands/actions'	Page with various action examples is loaded	Page loaded successfully	PASS
3	Find element with id 'action-canvas'	Element '#action-canvas' is visible on the page	Element exists and is visible	PASS
4	Trigger custom event 'myCustomEvent' on '#action-canvas' with detail { message: 'Hello Cypress!' }	Custom event dispatched on the element	Event handler updates '#custom-event-output' text	PASS
5	Find element with id 'custom-event-output' and check text contains 'Hello Cypress!'	Element '#custom-event-output' shows updated text	Text contains 'Hello Cypress!'	PASS

Failure Scenario

Failing Condition: The custom event handler is not attached or does not update the output element

Execution Trace Quiz - 3 Questions

What does cy.trigger('myCustomEvent') do in this test?

A It dispatches a custom event named 'myCustomEvent' on the selected element

B It clicks the element with id 'myCustomEvent'

C It types 'myCustomEvent' into the element

D It waits for the element to appear

Key Result

Always verify that custom events trigger the expected changes by asserting the updated UI elements, ensuring your event handlers work correctly.