We have a timing problem with cypress/jsf and two PrimeFaces-Autocompletes. Our input of facility depends on the selected element. When an element is selected an ajax request is sent and the facility field is updated. (see code example below - xhtml)

Our cypress test first selects an element and then wants to select a facility. However, the facility input field cannot be cleared because it is detached from the DOM. The error message is: "CypressError: Timed out retrying: cy.clear() failed because this element is detached from the DOM." We already wait for the ajax request (with cy.route) but the problem still occurs. (see code example below - javascript)

How can we prevent detach-errors with dependent input fields?

<!-- 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')
    })
})