看下面这段代码：

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() 即可。

SAP 电商云 Spartacus UI set delivery mode HTTP put 请求的触发时机相关推荐

SAP 电商云 Spartacus UI 修改 Delivery Mode 触发的三个 HTTP 请求
LoaderState: loading 状态在 true 和 false 之间的切换,通过 loader .reducer.ts 里的 reducer 函数进行.每次通过 store.dispatc ...
SAP 电商云 Spartacus UI 设置 Delivery Mode 的时序分析和一个竞争条件问题分享
(1) State.loading这个值存储在什么地方的? (2) 什么时候变为 true?什么时候变为 false? Component/service 需要消费存储在 store 中的数据,通过 ...
SAP 电商云 Spartacus UI 设置 delivery mode 在 3G 慢速网络下的排队效果
能看到明显的HTTP PUT 请求的排队效果. 从发送请求的时间戳也能看出. 一旦 filter 条件满足之后: 会并行发送所有的 HTTP put 请求: 这段代码什么时候会被调用?setMode ...
SAP 电商云 Spartacus UI 产品搜索结果的设计明细
我们使用如下 url 访问 SAP 电商云 Spartacus UI 产品搜索页面: http://localhost:4000/electronics-spa/en/USD/search/sony ...
Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例
关于 Mobile First 的概念,请查看我这篇文章:什么是前端开发中的 mobile first 策略. 下图是 SAP 电商云 Spartacus UI 的搜索结果页面: 其布局设计:temp ...
SAP 电商云 Spartacus UI ComponentDataProvider defer 工厂函数
为什么 this.componentService.getItems 最后就触发到 Component-data.provider.ts 工厂函数的执行了? 29行的 getService: getS ...
SAP 电商云 Spartacus UI 里如何捕捉语言设置的更改
我们知道在 SAP 电商云 Spartacus UI 里,用户可以通过下拉菜单更改当前访问 site 的语言: 监控语言变化的代码: this.subscription.add(this.langua ...
在 SAP 电商云 Spartacus UI 里手动注入 module 的几种排列组合
先把所有的排列组合罗列如下: (1) 通过构造函数注入 QuickOrderFacade,但不调用其方法 (2) 通过构造函数注入 QuickOrderFacade,调用其方法 (3) 手动通过 in ...
SAP 电商云 Spartacus UI Proxy Facade 的一个实际例子
如何理解 SAP 电商云 Spartacus UI 中的 proxy facade? Jerry 这篇文章什么是 SAP 电商云 Spartacus UI 的 proxy façade提供了理论上的解 ...

SAP 电商云 Spartacus UI set delivery mode HTTP put 请求的触发时机

解决方案

SAP 电商云 Spartacus UI set delivery mode HTTP put 请求的触发时机相关推荐

最新文章

热门文章