I'm working on the SAP Hybris e-commerce platform and encountered a Cypress issue while trying to click on a product in the product list. Cypress successfully finds the product by its code. The product list from Hybris organizes products by market, and I was trying to interact with a product in the Slovakia market.
I used the class name of the product, but since there are multiple elements with the same class name on the page, I used the .eq(8) command to target the 9th element. However, Cypress initially couldn't find the element. I've thought it was because it was outside the viewport. To resolve this, I added the .scrollIntoView() command to scroll the page down so that Cypress could find and interact with the element.
The final command I've used looks like this:
cy.get('span.yw-coll-browser-hyperlink').eq(8).scrollIntoView().should('be.visible').click();
As you can see on the screenshot the Cypress error says:
We initially found matching element(s), but while waiting for them to become actionable, they disappeared from the page. Common situations why this happens:
- Your JS framework re-rendered asynchronously
- Your app code reacted to an event firing and removed the element
Here is the HTML element I'm trying to interact with:
<span id="kAYZbx60" class="yw-coll-browser-hyperlink z-label" title=" [] - VEEV Sleeve Lake [G0000499] - Slovakia Product Catalog : Staged"> [] - VEEV Sleeve Lake [G0000499] - Slovakia Product Catalog : Staged</span>
In the meantime, I've tried using the following command, and it seems to be working fine:
cy.get('span.yw-coll-browser-hyperlink').contains("VEEV Sleeve Lake [G0000499] - Slovakia Product Catalog : Staged").scrollIntoView().should('be.visible').click({force:true});
I've used the .contains() command instead of .eq().
