看下面这段代码：
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 请求，其触发时机在这篇文章里可以看到。
下列文字描述了一种竟态情况：
- line 39 的代码触发了 HTTP put 请求，修改 delivery mode
- line 40 行的代码拿到了 radio input 控件实例。 执行完了 first 和 focus 方法。
- 此时 HTTP Put 请求使得 Spinner 控件替代了 radio input 按钮，所以后者 detached from DOM.
- 在一个 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() 即可。
