everyone! I would really appreciate some help regarding the following issue I encountered during a website test.

So, 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 })
      });
      
  });
});

I’ve tried improvising a code like this but it doesn’t work:

 // Wait for the Minicart to appear and be visible
    cy.get('div#minicart.minicart__container', { timeout: 10000 })
          .should('be.Visible')
      .eq(0)
      .wait(200)
      .click({ force: true })
          .then($minicart => {
           // Log the visibility state
           cy.log('Minicart visibility:', $minicart.is(':visible'));

           // Ensure the Minicart is indeed visible
           cy.wrap($minicart).eq(0).within(() => {
           // Click on the 'Proceed to checkout' button if it exists
              cy.contains('a.minicart__one-click.global-btn.btn--dark', 'Proceed to checkout', { timeout: 10000 })
                .should('be.visible')
                .click({ force: true });