赛普拉斯 - 迭代具有不同值的相同元素？

Question

我有这个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>

我想验证我的项目名称是否存在于 DOM 中（有一次我将使用第一个值“Winter Feel Package”然后使用“Christmas Wreath”对其进行测试）但是当我使用'cy.get' 的幼稚做法我得到了唯一的第一项。

这是我尝试过的：首先我尝试了天真的方法：

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)
        })
    }

无论如何都会返回第一个元素。

这是我第二次去，但在这里我得到一个没有元素的空数组：

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)
        })
    }

DOM 非常简单，我正在努力如何去做，如果它是 java 我会把它放在列表中并遍历这个列表，但在这里我真的迷失了自己。

Answer 1

我推荐 cypress-iframe 包，因为它是确保 iframe 完全加载且不会在您的测试中出现混乱的最安全方法。

getProductName(itemName) {

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

赛普拉斯 - 迭代具有不同值的相同元素？

Cypress - iterating through same elements with different values?

javascript

cypress

ui-testing