I am interested in testing Cypress to verify that an image is successfully loaded onto a page.
Here is a snippet of my source code:
import React from "react";
export default class Product extends React.Component {
render() {
return (
<div className="item">
<div className="image">
<img src="../images/Banana-Snowboard.png" alt="Snow Board" />
</div>
<div className="middel aligned content">
<div className="description">
<a>Snow Board</a>
<p>Cool Snow Board</p>
</div>
<div className="extra">
<span>Submitted by:</span>
<img
className="ui avatar image"
src="./images/avatar.png"
alt="Avatar"
/>
</div>
</div>
</div>
);
}
}
Below are the test cases I have written:
it("should display an image in a div element with the class 'image'", () => {
cy.get('div[class="image"]').find("img"); // include test code here to verify image loading and display on webpage
});
it("should display an image in a div element with the classes 'image' and 'extra'", () => {
cy.get('div[class="extra"]').find('img[class="ui avatar image"]');
// include test code here to ensure image is loaded and displayed on the webpage
});
How can I improve this code further?