Cypress测试问题：购物车模态框无法被识别

我在做IQOS商城的自动化测试，流程是完成一系列操作后点击Add to Basket按钮，接着需要触发购物车模态框并让Cypress点击Proceed to Checkout按钮，但这里卡住了——不管用什么方法，Cypress都找不到这个模态框，报错包括CSS不可见、透明度为0等。手动测试发现点击Add to Basket后模态框消失极快，应该就是这个原因导致Cypress识别不到。我试过找解决方案但没成功，自己自动化测试经验不多。

测试代码如下：

Cypress.on('uncaught:exception', (err, runnable) => {
  // 返回false避免测试失败
  return false;
});
describe('Iqos Shop Test', () => {
  it('Add a product in the basket and proceed to checkout', () => {
    // 访问指定URL
    cy.visit('https://www.iqos.com/gb/en/home.html?gr=false');

    // 选择月份下拉框
    cy.get('#dropdownMonths')
      .parent().click();
    cy.get('#sag-month-01').click({ force: true });

    // 选择年份下拉框
    cy.get('#dropdownYears')
      .parent().click();
    cy.get('#sagyear1999').click({ force: true });

    // 点击确认按钮
    cy.get('span.sav-btn-text:contains("Confirm")').click();
    
    // 点击主横幅上的促销按钮
    cy.get('.btn-white-turquoise').eq(0).click();
    
    // 进入IQOS ILUMA ONE Starter Kit商品页
    cy.get('a[href="/gb/en/shop/iqos-iluma-one-starter-kit.html"]')
      .should('be.visible')
      .eq(0)
      .click();
  
    // 点击"Add to basket"按钮
    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 })
      });
      
  });
});

购物车模态框的HTML代码：

<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>

内容的提问来源于stack exchange，提问作者No Tools No Craft