Cypress - Certain table rows (<tr), not shown inside modal window

Question

1. I click on a button => Modal window is shown
2. On real app. (DOM) - Inside that modal window we have 4 table rows inside the table body: table > tbody > tr / tr / tr / tr
3. On Cypress tests (DOM) - Inside that modal window we have 1 table row inside the table body: table > tbody > tr

1. I tried waiting a fixed period before and after i click on the button for the modal window to be shown

2. I tried scrolling initially to the button which triggers the modal window to be opened

3. I tried invoking show both on the modal window and on the needed <tr elements

• Test fails either way when searching for the #checkboxstrategy0 element (checkbox)

• here is my code (along with what i've tried):

cy.scrollElementIntoView('.select-rating-style')
    //cy.wait(10000)
    //cy.clickOption(cy.getField('a', 'class', 'select-rating-style'))
    cy.get('.select-rating-style').click()
    //cy.wait(10000)
    //cy.get('.modal-body').eq(2).should('be.visible')
    //cy.get('.modal-body').eq(2).invoke('show')
    cy.get('#checkboxstrategy0').invoke('show')

Answer 1

It sounds like the rows are loading asynchronously, and you need to assert the correct number before working with the checkbox.

cy.get('.modal-body')
  .find('tbody tr')
  .should('have.length', 4)

// test checkbox after above passes