获取具有特定子 img src 的 div答案

【问题标题】：Get a div that has a specific child img src获取具有特定子 img src 的 div
【发布时间】：2022-01-26 13:38:20
【问题描述】：

我有多个 div，下面有多个 img。我想用正确的 img src 获得 div。我怎样才能做到这一点？我试过了，但没有用。它只是将 src 与第一个 div 进行比较并失败。

cy.get('.card').find('.info-section > .logo').should('have.attr', 'src', '/assets/icons/fruit.svg')

【问题讨论】：

这能回答你的问题吗？ cypress selector on dom element attributes
它没有。我需要一个有特定 img 孩子的父母，而不是 img 本身。
见stackoverflow.com/questions/70079002/…
工作。谢谢！

标签： cypress

【解决方案1】：

反转搜索顺序 - 以具有该特定属性的子元素为目标，然后遍历卡片父元素

cy.get('[src="/assets/icons/fruit.svg"]')
  .parent('.card')

【讨论】：

【解决方案2】：

如果您提供 DOM 来查看多个 div 和 imgs，这将对您的情况有很大帮助。

我将使用下面的示例 DOM。

<div class="card">
    <div class="info-section">
        <img src="/assets/icons/vegetable.svg" />
        <div class="logo">
            <img src="/assets/icons/fruit.svg" />
        </div>
    </div>
</div>

<div class="card">
    <div class="info-section">
        <img src="/assets/icons/vegetable.svg" />
        <div class="logo">
            <img src="/assets/icons/fruit.svg" />
        </div>
    </div>
</div>

要获取<img src="/assets/icons/fruit.svg" /> 并测试它是否有src，您将执行以下操作：

cy.get('div.logo') // get div with class logo
  .find('img') // find img children
  .should('have.length', 1) // should only return 1 element
  .should('have.attr', 'src', '/assets/icons/fruit.svg') // should have src attr

【讨论】：

.children('img') 应该是 .find('img') - 你的评论是正确的！见example，子不代表子孙。
操作，呵呵。谢谢你的好收获！对于我的具体示例，.children() 可以工作，但使用.find() 可能更好。