如何防止元素脱离 DOM 错误？答案

【问题标题】：How to prevent element is detached from the DOM errors?如何防止元素脱离 DOM 错误？
【发布时间】：2020-04-30 07:40:50
【问题描述】：

cypress/jsf 和两个 PrimeFaces-Autocompletes 存在时间问题。我们对设施的输入取决于所选元素。选择元素时，发送AJAX请求，并更新工具字段。（参见下面的代码示例 - xhtml）

我们的 cypress 测试首先选择一个元素，然后想要选择一个设施。但是，设施输入字段无法清除，因为它与 DOM 分离。错误消息是：“CypressError：重试超时：cy.clear() 失败，因为此元素已与 DOM 分离。”我们已经在等待 ajax 请求（使用 cy.route），但问题仍然存在。（参见下面的代码示例 - javascript）

我们如何防止依赖输入字段的分离错误？

<!-- element -->
<p:outputLabel id="elementLabel" for="element" value="#{i18n.element}" />
<p:autoComplete id="element" value="#{bean.selectedElement}"
                  dropdown="true"completeMethod="#{bean.completeElement}"
                  var="element" itemValue="#{element}" itemLabel="#{element}">
    <p:ajax event="itemSelect" listener="#{bean.updateFacility()}" 
    partialSubmit="true" process="@this" update="facility"/>
</p:autoComplete>

<!-- facility -->
<p:outputLabel id="facilityLabel" for="facility" value="#{i18n.facility}" />
<p:autoComplete id="facility" value="#{bean.selectedFacility}" required="false"
                dropdown="true" completeMethod="#{bean.completeFacility}"
                var="facility" itemValue="#{facility}" itemLabel="#{facility}" >
</p:autoComplete>

Javascript：

cy.route({
    method: 'POST', url: '/app/dummy.xhtml'
}).as('request')
cy.selectOptionLoadingAlias('#element_input', '#element_1', '@request')
cy.selectOptionLoadingAlias('#facility_input', '#facility_1', '@request')

Cypress.Commands.add("selectOptionLoadingAlias", (inputField, selectOption, alias) => {
    cy.get(inputField).should('be.visible').clear().type('Dummy 1')

    cy.wait(alias).then((xhr) => { 
        // we checked that xhr is the correct request (update for element/facility)
        cy.get(selectOption).click()
        cy.get(selectOption).should('not.be.visible')
    })
})

【问题讨论】：

关于 cypress，我无法为您提供帮助，但我在开发 primefaces-selenium (github.com/primefaces-extensions/primefaces-selenium) 时遇到了同样的问题。当我查找“普通”硒元素时，之后进行 AJAX 更新并尝试使用它 -> 我得到了“分离元素”异常。我解决了这个问题以始终获取代理元素，该元素会在每个方法调用（如click()）上懒惰地查找组件。也许在 cypress 中有类似的东西，比如元素代理或惰性机制。
你可以试试这条线吗？ cy.get(inputField).should('be.visible').clear().type('Dummy 1').parent()
@tandraschko 我认为 cypress 中没有已知的元素代理或惰性机制。 “cy.get”应该是一种惰性获取机制。我们试过：cy.get(inputField).should("be.visible"); cy.get(inputField).clear(); cy.get(inputField).type(searchField);上面的代码不起作用（同样的问题）。
@ManuelAbascal 我们尝试添加“.parent()”，但没有解决我们的问题。
@Emjey 等待肯定有回报。万岁新的更新（S）。 :))

标签： javascript ajax jsf primefaces cypress

【解决方案1】：

尝试以下修复清除部分，点击技巧应确保元素不会被分离：

cy.get(inputField).click({force:true}).clear().type('Dummy 1');

【讨论】：