Angular Cypress how to get elements which has got dynamic ids

Question

I am completely new to E2E with Cypress. I have a table with dynamic rows. I want to shift+select particular column in all the rows and copy paste a value.

Can anyone help me how to get the dynamic element. in this example i have 108 rows and i want to select 3rd column of each row. The column has to following id. and i want to change value 'No' to 'Yes' in this example.

<div class="wj-cell wj-alt wj-wrap editable-cell" tabindex="-1" role="gridcell" aria-required="true" id="catRatingImportManualInputRow105Col3" style="left: 610px; top: 3485px; width: 155px; height: 33px;">
    <button class="wj-btn wj-btn-glyph wj-right wj-elem-dropdown" type="button" tabindex="-1" aria-label="Toggle Dropdown" aria-expanded="false">
        <span class="wj-glyph-down"></span>
    </button>
    No
</div>

Thanks

question from:https://stackoverflow.com/questions/65849030/angular-cypress-how-to-get-elements-which-has-got-dynamic-ids

Answer 1

You can use each() to loop through your table in cypress. to access the third element you can use the index value.

Since your id is catRatingImportManualInputRow105Col3 is dynamic, so we will use only use the part of your id that is static, so your css selector should be something like: div[id*="catRatingImportManualInputRow"]

cy.get('div[id*="catRatingImportManualInputRow"]').each(($ele, index) => {
    if (index == 2)
        //Do something with the third element
        cy.wrap($ele).click().type('Yes')
})