Return to Question

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'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'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 });

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">&nbsp;(3)</span></a></div><div class="minicart__info"></div></div></div>