I'm forwarding the code containing the exemplary working steps, finishing with clicking the Add to Basket button.
Steps after that should consider that a cart modal appears, and Cypress should click the Proceed to Checkout button. This is where the issue appears. No matter what I've tried Cypress couldn't find the cart modal on the page. I get various issues like CSS not visible, opacity 0 and so. While manually testing the page, I've noticed that the cart modal disappears pretty fast after clicking on the Add to Basket button so I guess it can be a possible reason why Cypress can't find it.
I have referred to a blog article written by Gleb Bahmutov https://glebbahmutov.com/blog/flaky-iframe-test/, but I couldn't really find the answer there, and I'm not that experienced in test automation, to be honest :)
Cypress.on('uncaught:exception', (err, runnable) => {
// Return false to prevent the test from failing
return false;
});
describe('Iqos Shop Test', () => {
it('Add a product in the basket and proceed to checkout', () => {
// Visit the specified URL
cy.visit('https://www.iqos.com/gb/en/home.html?gr=false');
// Select the month from the dropdown
cy.get('#dropdownMonths')
.parent().click();
cy.get('#sag-month-01').click({ force: true });
// Select the year from the dropdown
cy.get('#dropdownYears')
.parent().click();
cy.get('#sagyear1999').click({ force: true });
// Click the confirm button
cy.get('span.sav-btn-text:contains("Confirm")').click();
// Click on the promotion button on the main banner
cy.get('.btn-white-turquoise').eq(0).click();
// Buy IQOS ILUMA ONE Starter Kit
cy.get('a[href="/gb/en/shop/iqos-iluma-one-starter-kit.html"]')
.should('be.visible')
.eq(0)
.click();
// click on the "Add to cart" button
cy.get('section.product-info__wrapper')
.find('div.product-detail__react--container')
.should('be.visible')
.wait(200)
.within(() => {
cy.contains('button', 'Add to basket').should('be.visible').click({ force: true })
});
});
});
Here, I have copied the Cart modal element:
<div class="minicart__container" id="minicart" aria-label="Minicart" aria-live="polite" aria-relevant="additions removals" tabindex="-1" data-minicart-show-duration="7000" style="top: 139px;"><div class="minicart__list-wrapper"><div class="minicart__actions"><div class="add-to-cart--container"><svg class="message-icon" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle cx="16" cy="16" fill="#93b933" r="16"></circle><path d="m8 17.2337322 4.2303003 4.7662678 11.7696997-12" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"></path></g></svg><span class="add-to-cart">Item added to basket</span></div><button class="btn btn--icon btn-close link-device__header--btn"><svg class="icon-close" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g fill="none" fill-rule="evenodd" stroke="#545454" stroke-linecap="round" stroke-width="1.5"><path d="M15.485 7L-1.485 7" transform="translate(1 1) rotate(-135 7 7)"></path><path d="M15.485 7L-1.485 7" transform="translate(1 1) rotate(135 7 7)"></path></g></svg></button></div><ul class="minicart__products-list"><li class="minicart__bundle"><div class="product__name">IQOS Iluma One Starter Kit</div><div class="minicart__item"><div class="badge-container"></div><div class="minicart__product"><div class="minicart__product-left"><img class="minicart__product-img" src="/vanity/content/pmisite/gb/en/.rrp.G0000590.00.144x70.jpg/G0000590-2023-11-29T13:52:49.386.jpg" alt="IQOS ILUMA One Kit Pebble Beige 00" title="IQOS ILUMA One Kit Pebble Beige"><div class="minicart__product-info"><a href="/gb/en/shop/iluma-one-kit-pebble-beige.html" class="minicart__product-title"><span>IQOS ILUMA One Kit Pebble Beige</span></a><div class="minicart__product-bottom"><p class="minicart__product-qty"><span class="minicart__qty-label">Quantity</span><span class="minicart__qty-value">1</span></p></div></div></div><div class="minicart__product-right"><div class="minicart__product-price"><span class="minicart__discount-value">£29.00</span><span class="minicart__price-value">£17.00</span></div></div></div></div><div class="minicart__item"><div class="badge-container"></div><div class="minicart__product"><div class="minicart__product-left"><img class="minicart__product-img" src="/vanity/content/pmisite/gb/en/.rrp.G0000692.00.144x70.jpg/G0000692-2023-11-29T13:52:49.386.jpg" alt="TEREA AMBER PACK 00" title="TEREA AMBER PACK"><div class="minicart__product-info"><a href="/gb/en/shop/terea-amber-pack.html" class="minicart__product-title"><span>TEREA AMBER PACK</span></a><div class="minicart__product-bottom"><p class="minicart__product-qty"><span class="minicart__qty-label">Quantity</span><span class="minicart__qty-value">2</span></p></div></div></div><div class="minicart__product-right"><div class="minicart__product-price"><span class="minicart__price-value">£12.00</span></div></div></div></div></li></ul></div><div class="minicart__order-summary"><div class="minicart__buttons other"><a class="minicart__one-click global-btn btn--dark" href="#"><span data-pmi-el="minicart-proceed-to-checkout" class="minicart__btn-label btn__label">Proceed to checkout</span></a><a href="#" class="minicart__view-basket global-btn btn--light"><span data-pmi-el="minicart-view-basket-button" class="minicart__btn-label btn__label">View cart</span><span class="minicart__btn-label btn__label minicart-item__number"> (3)</span></a></div><div class="minicart__info"></div></div></div>