'Get a div that has a specific child img src

I have multiple divs with multiple imgs under them. I'd like to get the div with the correct img src. How can I do this? I tried this and it didn't work. It just compared the src with the first div and failed.

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

cypress

Solution 1:^[1]

Reverse the search order - target the child element with that specific attribute, then traverse to the card parent

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

Solution 2:^[2]

It would greatly help your situation if you provided the DOM to see the multiple divs and imgs.

I'll be using the example DOM below.

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

To get the <img src="/assets/icons/fruit.svg" /> and test it has src, you will do the following:

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Fody
Solution 2

'Get a div that has a specific child img src

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]