Categories
Mastering Development

How to select a specific checkbox with dynamic id’s with Cypress

I’m trying to select a checkbox but there isn’t a single identifier I can figure out that will let me select a specific checkbox.

HTML:
enter image description here

Note, this is checkbox two of three on the page. The ID will change depending on my flow, so I can’t use the ID to grab this. While it currently shows up as 4 it could be much higher by the time my test gets to it.

This is what I used to find all checkbox’s on the current page: cy.get(‘.mat-checkbox-input’)

However, I can’t use .eq() to select the second option as it throws an error that the element is detached from the DOM.

Is there any good way to grab a list of checkboxes or selectors in general, and then iterate through them to use only the one I want? In this scenario, i know the checkbox is always the second checkbox.

Everything in this image is identical to the other two checkboxes with the exception of the ID. I guess this is how Angular tends to work. Of course as noted earlier, the ID will change as the page loads, or things are interacted with making it impossible to tell what the number is.

All also have the same label code:
enter image description here

Leave a Reply

Your email address will not be published. Required fields are marked *