I want to test whether the carousel on my website contains the correct items that are represented as company logos. Each carousel item has an <img> element with the 'alt' attribute which is where the name of the company is stored.
I have set an environment variable in the cypress.env.json file, which is represented something like this:
"companyPartners": {
"title": "Company Partners",
"partners": {
"google": "Google",
"facebook": "Facebook",
"instagram": "Instagram",
"linkedin": "LinkedIn"
}
}
The carousel elements are represented in an unordered list, something like this:
<ul class="carousel-partners ...">
<li>
<a class="carousel-item">
<img alt="Google" src="...">
</a>
</li>
<li>
<a class="carousel-item">
<img alt="Facebook" src="...">
</a>
</li>
...
</ul>
So, I want to iterate through each carousel item and verify that the values from the environment variable match the 'alt' attribute of the carousel items.
While running this command in Cypress, I am getting an error which says that only the first letter is retrieved:
Cypress.Commands.add("verifyPartners", () => {
const companyPartners = Cypress.env("companyPartners").partners
let text = ""
for(const x in companyPartners){
text += companyPartners[x]
}
cy.get('*[class^="carousel-partners"]').find("li").each(($listItem, index) => {
cy.wrap($listItem).find("img").should("have.attr", "alt", text[index])
})
});
assert expected <img.h-12.w-auto.object-contain.saturate-0> to have attribute alt with the value G, but the value was Google
Is there any way I can verify the items? Any help would be appreciated.