看下面这段代码：

context('Group Skipping - Checkout', () => {
  before(() => {
    cy.requireLoggedIn().then(() => {
      checkout.goToProductDetailsPage();
      checkout.addProductToCart();
      checkout.fillAddressForm();
      cy.get('input[type=radio][formcontrolname=deliveryModeId]:not(:disabled)')
        .first()
        .focus()
        .click();
      checkoutNextStep('/checkout/payment-details');
      checkout.fillPaymentForm();
      cy.get('.cx-review-summary-card');
      cy.saveLocalStorage();
    });
  });

第39行会触发一个 HTTP Put 请求，其触发时机在这篇文章里可以看到。

下列文字描述了一种竟态情况：

1. line 39 的代码触发了 HTTP put 请求，修改 delivery mode

2. line 40 行的代码拿到了 radio input 控件实例。 执行完了 first 和 focus 方法。

3. 此时 HTTP Put 请求使得 Spinner 控件替代了 radio input 按钮，所以后者 detached from DOM.

4. 在一个 detached from DOM 状态的元素下执行 click 方法，就会出现本文描述的错误。

解决方案

等 HTTP put 操作成功执行之后，再执行下面代码即可：

cy.get('input[type=radio][formcontrolname=deliveryModeId]')
        .first()
        .focus()
        .click(); 

完整的解决方案：

cy.intercept({
        method: 'PUT',
        path: `${Cypress.env('OCC_PREFIX')}/${Cypress.env(
          'BASE_SITE'
        )}/${Cypress.env(
          'OCC_PREFIX_USER_ENDPOINT'
        )}/current/carts/*/deliverymode?deliveryModeId=*`,
      }).as('setDeliveryMode');

      checkout.fillAddressForm();

      cy.wait('@setDeliveryMode');
      cy.get('input[type=radio][formcontrolname=deliveryModeId]')
        .first()
        .focus()
        .click();
      checkoutNextStep('/checkout/payment-details');
      checkout.fillPaymentForm();
      cy.get('.cx-review-summary-card');
      cy.saveLocalStorage();```

思路就是首先用 cy.intercept 监控 path 参数指定的 HTTP put 请求的 endpoint，使用 as 存储成一个别名，然后调用 cy.wait, 传入别名，等待其执行完毕，再执行接下来的 cy.get().click() 即可。