As a Cypress testing enthusiast, I recently encountered an issue while creating a script for testing inside SAP Hybris. Everything seemed to be running smoothly until I needed to navigate to the next page when a searched element wasn’t found on the current page. I realized this required a bit more than the straightforward search-and-click approach I was initially using.
Today, I want to share this challenge and how I overcame it. I’ll walk you through the problem, the initial approach, the hurdles I faced, and finally, the solution that worked perfectly, thanks to the collaborative effort of the Stack Overflow community.
The Initial Setup
I wrote a function checkProductOnPage to locate a product on a page. If the product wasn’t found, the function should click the pagination button to go to the next page and retry, up to a maximum number of pages. Here’s the initial code I started with:
const checkProductOnPage = (CATALOG_LABEL, retries = 0) => {
const maxRetries = 5; // Adjust this based on the maximum number of pages you expect
// Try to find the product on the current page
return cy.contains('span.yw-coll-browser-hyperlink', CATALOG_LABEL, { timeout: 10000 }) // Adjust timeout as needed
.then(productElement => {
if (productElement.length) {
// If the product element is found
return cy.wrap(productElement).scrollIntoView().should('be.visible').click({ force: true });
} else if (retries < maxRetries) {
// If the product element is not found and we haven't exceeded max retries
return cy.get('body').then(body => {
if (body.find('.z-paging-icon.z-icon-angle-right').length > 0) {
// Click on the pagination button and wait for the page to update
return cy.get('.z-paging-icon.z-icon-angle-right').eq(0).click({ force: true })
.wait(5000) // Adjust wait time as needed
.then(() => checkProductOnPage(CATALOG_LABEL, retries + 1)); // Recurse with increased retry count
} else {
throw new Error('Reached the last page and product not found');
}
});
} else {
throw new Error('Product not found after maximum retries');
}
});
};The Issue
While this approach worked well for products on the first page, it failed when the product was on subsequent pages. Specifically, when trying to find the second product G0000606, the script threw an error:
Timed out retrying after 10000ms: Expected to find content: 'Tunisia Product Catalog : Staged' within the selector: 'span.yw-coll-browser-hyperlink' but never did.
'Tunisia Product Catalog : Staged' is referring to the
const CATALOG_LABEL = ‘Tunisia Product Catalog : Staged’;
The problem lay in the cy.contains function. If the element wasn’t found, it didn’t proceed to the else block to trigger the pagination click. This caused the script to time out rather than move to the next page.
The Community Solution
After posting my issue on Stack Overflow, a helpful response pointed out that the cy.contains command would fail if the element weren’t found, thus never reaching the else block. The suggestion was to use cy.get and filter the results to check if the element exists.
Here’s the revised function based on that suggestion:
const checkProductOnPage = (CATALOG_LABEL, retries = 0) => {
const maxRetries = 5; // Adjust this based on the maximum number of pages you expect
// Try to find the product on the current page
return cy.get('span.yw-coll-browser-hyperlink', { timeout: 10000 }).then(links => {const productElement = links.filter((index, element) => {
return Cypress.$(element).text().includes(CATALOG_LABEL);
});
if (productElement.length) {
// If the product element is found
return cy.wrap(productElement).scrollIntoView().should('be.visible').click({ force: true });
} else if (retries < maxRetries) {
// If the product element is not found and we haven't exceeded max retries
return cy.get('body').then(body => {
if (body.find('.z-paging-icon.z-icon-angle-right').length > 0) {
// Click on the pagination button and wait for the page to update
return cy.get('.z-paging-icon.z-icon-angle-right').eq(0).click({ force: true })
.wait(5000) // Adjust wait time as needed
.then(() => checkProductOnPage(CATALOG_LABEL, retries + 1)); // Recurse with increased retry count
} else {
throw new Error('Reached the last page and product not found');
}
});
} else {
throw new Error('Product not found after maximum retries');
}
});
};
You may find the whole script source here: https://github.com/NoToolsNoCraft/SAP-Hybris-Cypress-Test/blob/main/4th%20Update
Implementing the Fix
By implementing the above suggestions, I successfully navigated to the next page when the product wasn’t found on the current one. This update ensured that the script continued searching through the pages until the desired product was found or the maximum number of retries was reached.
