Cypress遍历list时如何仅获取当前列表下的.card元素

代码存在两个核心问题：

• cy.get(".card")默认从整个页面根节点开始查找元素，没有绑定当前遍历到的列表作为查找范围，自然会返回所有列表下的全部卡片
• 把DOM元素集合对象cards直接拼接进CSS选择器字符串，对象转字符串的结果就是[object Object]，属于完全无效的选择器，必然报错。另外把长度断言写在.card的遍历回调里也不合理，要统计当前列表下的卡片总数，不需要遍历每一张卡片再判断。

外层cy.get('.list').each()回调的第一个参数list，就是当前循环到的单个列表的原生DOM引用，只要把这个元素作为查找上下文，Cypress就只会在这个列表内部查找卡片，不会跨列表匹配元素。

修正后的完整代码如下：

cy.visit('http://localhost:3000/')
cy.get('.list').each((list, index) => {
    cy.contains('Learn').click()
    cy.url().should('include', '/localhost')

    cy.get(`[data-testid="card-input-${index}"]`)
        .type('Learn Cypress')
        .should('have.value', 'Learn Cypress')
    cy.get(`[data-testid="btnAdd-${index}"]`).click()

    // 以当前list为查找范围，仅匹配该列表下的.card元素
    cy.get('.card', { withinSubject: list }).should('have.length', 4)

    // 如果后续需要遍历当前列表下的卡片，用同样的上下文即可
    cy.get('.card', { withinSubject: list }).each((card) => {
        // 单卡片的测试逻辑写在这里
    })
})

如果不习惯传withinSubject配置项，也可以用find写法，效果完全一致：

// 先包装当前列表元素，再查找内部的卡片
cy.wrap(list).find('.card').should('have.length', 4)

内容的提问来源于stack exchange，提问作者Robert Veselý