共计 3774 个字符，预计需要花费 10 分钟才能阅读完成。
这个谬误音讯的剖析和解决方案，能够参考 Cypress 的官网文档。
这个谬误音讯提醒咱们，咱们编写的 Cypress 代码正在同一个“死去”的 DOM 元素交互。
显然，在实在的应用场景下，一个用户也无奈同这种类型的 UI 元素交互。
看个理论例子：
<body>
<div id="parent">
<button>delete</button>
</div>
</body>这个 button 被点击之后，会将本人从 DOM 树中移除：
$('button').click(function () {
// when the <button> is clicked
// we remove the button from the DOM
$(this).remove()})下列这行测试代码会引起谬误：
cy.get('button').click().parent()当 cypress 执行到下一个 parent 命令时，检测到施加该命令的 button 曾经从 DOM 树中移除了，因而会报错。
解决方案：
cy.get('button').click()
cy.get('#parent')解决此类问题的指导方针：
Guard Cypress from running commands until a specific condition is met
两种实现 guard 的形式：
- Writing an assertion
- Waiting on an XHR
看另一个例子：
输出 clem，从后果列表里抉择 User clementine , 即所谓的 type head search 成果。
测试代码如下：
it('selects a value by typing and selecting', () => {
// spy on the search XHR
cy.server()
cy.route('https://jsonplaceholder.cypress.io/users?term=clem&_type=query&q=clem').as('user_search')
// first open the container, which makes the initial ajax call
cy.get('#select2-user-container').click()
// then type into the input element to trigger search, and wait for results
cy.get('input[aria-controls="select2-user-results"]').type('clem{enter}')
// select a value, again by retrying command
// https://on.cypress.io/retry-ability
cy.contains('.select2-results__option', 'Clementine Bauch').should('be.visible').click()
// confirm Select2 widget renders the name
cy.get('#select2-user-container').should('have.text', 'Clementine Bauch')
})要点：
应用 cy.route 监控某个 XHR, 这里能够监控相对路径吗？
本地测试通过，在 CI 上运行时会遇到下列谬误：
如何剖析这个问题呢？能够应用 pause 操作，让 test runner 暂停。
// first open the container, which makes the initial ajax call
cy.get('#select2-user-container').click().pause()当咱们点击了 select2 widget 时，会立刻触发一个 AJAX call. 而测试代码并不会期待 clem 搜寻申请的返回。它只是二心查找 “Clementine Bauch” 的 DOM 元素。
// first open the container, which makes the initial ajax call
cy.get('#select2-user-container').click()
// then type into the input element to trigger search,
// and wait for results
cy.get('input[aria-controls="select2-user-results"]').type('clem{enter}')
cy.contains('.select2-results__option',
'Clementine Bauch').should('be.visible').click()下面的测试在本地运行时大部分工夫可能会通过，但在 CI 上它可能会常常失败，因为网络调用速度较慢，浏览器 DOM 更新可能较慢。以下是测试和应用程序如何进入导致“detached element”谬误的竞争条件。
- 测试点击小部件
- Select2 小部件触发第一个搜寻 Ajax 调用。在 CI 上，此调用可能比预期慢。
- 测试代码输出“clem”进行搜寻，这会触发第二个 AJAX 调用。
- Select2 小部件接管对带有十个用户名的第一个搜寻 Ajax 调用的响应，其中一个是“Clementine Bauch”。这些名称被增加到 DOM
而后测试搜寻可见的抉择“Clementine Bauch”– 并在初始用户列表中找到它。
而后，测试运行器将要单击找到的元素。留神这里的竟态条件。当第二个搜寻 Ajax 调用“term=clem”从服务器返回时。Select2 小部件删除以后的选项列表，只显示两个找到的用户：“Clementine Bauch”和“Clementina DuBuque”。
而后测试代码执行 Clem 元素的点击。
Cypress 抛出谬误，因为它要单击的带有文本“Clementine Bauch”的 DOM 元素不再链接到 HTML 文档；它已被应用程序从文档中删除，而 Cypress 依然援用了该元素。
这就是问题的本源。
上面这段代码能够人为地让这个竟态条件总是触发：
cy.contains('.select2-results__option',
'Clementine Bauch').should('be.visible')
.pause()
.then(($clem) => {
// remove the element from the DOM using jQuery method
$clem.remove()
// pass the element to the click
cy.wrap($clem)
})
.click()既然理解了竟态条件触发的本源，修改起来就有方向了。
咱们心愿测试在持续之前始终期待应用程序实现其操作。
解决方案：
cy.get('#select2-user-container').click()
// flake solution: wait for the widget to load the initial set of users
cy.get('.select2-results__option').should('have.length.gt', 3)
// then type into the input element to trigger search
// also avoid typing "enter" as it "locks" the selection
cy.get('input[aria-controls="select2-user-results"]').type('clem')咱们通过 cy.get(‘XXX’).should(”) 操作，确保在执行 clem 输出之前，初始的 user list 对应的 AJAX 肯定回复到服务器上了，否则 select2-options 的长度必然小于 3.
当测试在搜寻框中键入“clem”时，应用程序将触发 Ajax 调用，该调用返回用户的子集。因而，测试须要期待显示新汇合 – 否则它将从初始列表中找到“Clementine Bauch”并遇到 detached 谬误。咱们晓得只有两个用户匹配“clem”，因而咱们能够再次确认显示的用户数以期待应用程序。
/ then type into the input element to trigger search, and wait for results
cy.get('input[aria-controls="select2-user-results"]').type('clem')
// flake solution: wait for the search for "clem" to finish
cy.get('.select2-results__option').should('have.length', 2)
cy.contains('.select2-results__option', 'Clementine Bauch')
.should('be.visible').click()
// confirm Select2 widget renders the name
cy.get('#select2-user-container')
.should('have.text', 'Clementine Bauch') 如果自觉的在 click 调用里传入 force:true 的参数，可能会引入新的问题。
更多 Jerry 的原创文章，尽在：” 汪子熙 ”:
