如何防止元素脱离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');