title: Test loading of image in Cypress
body: <p>I want to test Cypress that an image is loaded into the page.</p>
  
  <p>My source code looks like this:</p>
  
  <pre><code>import React from "react";
  
  export default class Product extends React.Component {
    render() {
      return (
        &lt;div className="item"&gt;
          &lt;div className="image"&gt;
            &lt;img src="../images/Banana-Snowboard.png" alt="Snow Board" /&gt;
          &lt;/div&gt;
          &lt;div className="middel aligned content"&gt;
            &lt;div className="description"&gt;
              &lt;a&gt;Snow Board&lt;/a&gt;
              &lt;p&gt;Cool Snow Board&lt;/p&gt;
            &lt;/div&gt;
            &lt;div className="extra"&gt;
              &lt;span&gt;Submitted by:&lt;/span&gt;
              &lt;img
                className="ui avatar image"
                src="./images/avatar.png"
                alt="Avatar"
              /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>And my test is like this:</p>
  
  <pre><code>it("should display a image in element div with class image", () =&gt; {
    cy.get('div[class="image"]').find("img"); // some code that test that image is loaded so that it is displaye on the web page
  });
  
  it("shoul diplay a image in element div with class image inside class extra", () =&gt; {
    cy.get('div[class="extra"]').find('img[class="ui avatar image"]');
    //some code that check that image is loaded so that it is display the web page
  });
  </code></pre>
  
  <p>How will that code look like?</p>