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

标签 javascript ajax jsf primefaces cypress

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

最佳答案

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

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

关于javascript - 如何防止元素脱离 DOM 错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59719224/

相关文章:

jquery - 使用 JSF 和 jQuery 绑定(bind)基于 ID 的事件

jsf - 为什么我在 Tomcat 上运行时在我的 jsf 页面中看到 #{UserBean.userName} 但它在 Glassfish 上运行良好

javascript - 如何在点击时执行脚本

php - 来自mysql的下拉列表的值

javascript - Angularjs &lt;style&gt; 标签

javascript - 'Sys' 是未定义的 javascript 错误

jquery:中止ajax会触发完成还是失败?

java - 当用户确认保持在线时刷新 session 时间

javascript - 拖出链接后 jQuery mouseup 不触发

javascript - 如何从json中提取特定信息