javascript - 如何防止元素脱离 DOM 错误？

Question

我们遇到了 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')
    })
})

Answer 1

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

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