How to *properly* test quickly updating UIs

[mduft]

Hey,

We have an angular application under test. In some cases we have actions that have an immediate effect on the UI, e.g. adding or removing a row from a table due to data changes in the backend. In the test we trigger the according action and then have a check like this:

cy.contains('tr', 'default').click();

In rare cases we get a detached DOM element due to changing data in the service(s) and thus updating of the UI (rapidly):

15:20:03       CypressError: Timed out retrying after 60050ms: `cy.click()` failed because this element is detached from the DOM.
15:20:03  
15:20:03  `<tr _ngcontent-dsl-c307="" role="row" mat-row="" cdkdrag="" class="mat-row cdk-row cdk-drag cdk-drag-disabled ng-star-inserted" style="cursor: pointer;">...</tr>`
15:20:03  
15:20:03  Cypress requires elements be attached in the DOM to interact with them.
15:20:03  
15:20:03  The previous command that ran was:
15:20:03  
15:20:03    > `cy.contains()`

The application re-created the table contents in this case due to some data change in the application, which is invisible to a user, but affects cypress a lot. How can we avoid this situation all together?

Thanks!