Cypress - iterating through same elements with different values?

Question

I have this DOM:

div<data-hook='cart-content'>
    <section data-hook="item">  
        <h3 data-hook='product-name'>Winter Feel Package</h3>
    <section data-hook="item">  
        <h3 data-hook='product-name'>Christmas Wreath</h3>

I want to verify that my item name exist in the DOM (one time I will test it using the first value "Winter Feel Package" and then with "Christmas Wreath") however when I use the naive approch of 'cy.get' I am getting the only first item.

this is what I tried: first I tried the naive approach:

getProductName(itemName){
        cy.get("iframe[title='Cart Page']").its('0.contentDocument')
        .should('exist').its('body')
        .should('not.be.undefined').then(cy.wrap)
        .find("div[data-hook='item-list'] section[data-hook='item'] h3[data-hook='product-name']")
        .then(($elem)=>{
            expect($elem).to.have.text(itemName)
        })
    }

which returned me the first element no matter what.

this was my second go but here I got an empty array with no elements:

getProductName(itemName){
        cy.get("iframe[title='Cart Page']").its('0.contentDocument')
        .should('exist').its('body')
        .should('not.be.undefined').then(cy.wrap)
        .find("div[data-hook='item-list'] section[data-hook='item'] h3[data-hook='product-name']")
        .then(($elem)=>{
            let items = $elem.map((i, el)=>{
                return Cypress.$(el).get("h3[data-hook='product-name']")
            })
            expect(items.get()).to.contain(itemName)
            // expect($elem).to.have.text(itemName)
        })
    }

The DOM is quite simple and I am struggling how to do it , if it was java I would put it inside List and iterate through this list but here I truly lose myself.

user8745435 · Accepted Answer · 2021-02-09 00:07:53Z

1

I recommend the cypress-iframe package because it's the safest way to ensure the iframe is fully loaded, without clutter in your test.

getProductName(itemName) {

  cy.iframe('[title="Cart Page"]')  
    .contains('h3[data-hook="product-name"]', itemName); // gets just the h3 with text
}

answered Feb 9, 2021 at 0:07

user8745435

Sign up to request clarification or add additional context in comments.

2 Comments

tupac shakur Over a year ago

OK, and this is not an assertion it will not assert in my test that the text exist.

user14783414 Over a year ago

@tupacshakur you are mistaken, .contains() will assert that the text exits within an h3. You can verify by putting in some non-existing text.

Collectives™ on Stack Overflow

Cypress - iterating through same elements with different values?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related