Search code examples
javascripttestingdomeventscypress

How Cypress handles the clicks?

This is the HTML code

<div>
<li class="tabLblProperties"><a href="/pw/properties/properties_home.do">Properties</a></li>
</div>

The <a> tag is inside the <li> i.e class="tabLblProperties" but writing the cypress code simply like this

cy.get('.tabLblProperties').click()

instead of

cy.get('.tabLblProperties a').click()

I am confused how this is working? Because the anchor tag is in the li, the clickable is a tag, not the li, right? But it is working! Please explain me how this is happening.

Solution

  • It's not specific to Cypress, but applies to all Javascript - events bubble.

    See Event bubbling for a tutorial.

    In Cypress specifically, there is no switch or option on the .click() command, but if you try .trigger('click') instead, you can turn off bubbles.

    Experiment with this:

    cy.get('.tabLblProperties').trigger('click', {bubbles:false})

    The exact behavior depends on the implementation of the events in the app.