Cypress e2e testing: How to get all the elements from dynamic dropdown and should verify using test data(more than 200 items)

user_18964198 0
Viewed 94

HTML code of the dropdown items

I wrote the code like this but I could get until 13 items only, after that it's not going for next elements. I could see the next elements when I scroll down in dropdown and it goes on... I am not sure how this works, but I think its due to the behavior of bindings in HTML.

Please can someone help to get all the elements or any other way to test this in Cypress?

cy.visit('https://dev.wholesoftmarket.com/account/signup')
        cy.get('span.ng-tns-c381-0').contains('Account Name').click()
        cy.wait(15000)
        cy.get('p-dropdownitem > li > div').each(($ele, i)=>{
            cy.wrap($ele).invoke('text').then((text)=>{
                cy.log(text)
                expect(text).to.equal(accoun_Data.dropdowntext1[i])
                })
             })
dropdown cypress javascript
2 Answers

It's a virtual scroll, so you can't get all the elements on first query. Looks like 13 at a time are loaded.

If you have an input associated, you might be able to .type() some text to filter the list.

You would only need to check the first and last items.

Otherwise, the virtual list needs to be scrolled to load the remainder.

A working example from the docs

An example of first-and-last testing of a virtual scroll box, using the basic example from the docs (100,000 items).

Note, Cypress does not wait for the .scrollTo('bottom') to complete it's action, so you have to bump the timeout up substantially when testing the bottom of the list.

cy.get('cdk-virtual-scroll-viewport')
  .find('.example-item').eq(0)
  .should('have.text', 'Item #0')

cy.get('cdk-virtual-scroll-viewport')
  .scrollTo('bottom')
  .find('.example-item', {timeout: 10000}) 
  .should('contain', 'Item #99999')

Your test would be similar, but you need to change the final index from 999 to whatever it is for your data.

cy.get('cdk-virtual-scroll-viewport')
  .find('p-dropdownitem > li > div').eq(0)
  .should('have.text', accoun_Data.dropdowntext1[0])

cy.get('cdk-virtual-scroll-viewport')
  .scrollTo('bottom')
  .find('p-dropdownitem > li > div', {timeout: 10000})
  .should('contain', accoun_Data.dropdowntext1[999])    // change index

Also note, the 2nd should() uses contain not have.text because you are checking the text from the last 13 items.

user_169977070

You can shorten the code by using $ele.text(). And you can also add trim() to remove trailing spaces.

cy.get('p-dropdownitem > li > div').each(($ele, i) => {
  expect($ele.text().trim()).to.equal(accoun_Data.dropdowntext1[i])
})
user_45712710
Related