Wait for element change about cypress-wait-until

[NoriSte]

Here's the solution, you can find it this repository of mine. You do not need to use cy.waitUntil but I've added two tests, one with Cypress' built-in utilities and one with cy.waitUntil.

Common part:

let mutationsHistory
beforeEach(() => {
  cy.visit('/')

  mutationsHistory = []
  cy.get('#some-id').then(($targetNode) => {
    const observer = new MutationObserver((mutationsList) => mutationsHistory.push(mutationsList))
    observer.observe($targetNode[0], { childList: true })
  })
})

leveraging the MutationObserver API, Cypress records all the mutations in the mutationsList array.

Cypress built-in solution
This simple script waits until the mutations array contains something

cy.wrap(mutationsHistory)
  .should('have.length.greaterThan', 0)

With cy.waitUntil:
The same of the above code but with cy.waitUntil

cy.waitUntil(() => mutationsHistory.length)

Always opt for the built-in solution if you can 😉

This is the full code of the test

/// <reference types="Cypress" />

context('DOM change detection', () => {
  let mutationsHistory
  beforeEach(() => {
    cy.visit('/')

    mutationsHistory = []
    cy.get('#some-id').then(($targetNode) => {
      const observer = new MutationObserver((mutationsList) => mutationsHistory.push(mutationsList))
      observer.observe($targetNode[0], { childList: true })
    })
  })

  it('Should detect the DOM change', () => {
    cy.contains('Mutate after a random delay').click()
    cy.wrap(mutationsHistory)
      .should('have.length.greaterThan', 0)
      .then((mutationsHistory) => {
        cy.log('Now you can do whatever you want with `mutationsHistory`')
        console.log(mutationsHistory)
      })
  })

  it('Should detect the DOM change with cy.waitUntil', () => {
    cy.contains('Mutate after a random delay').click()
    cy.waitUntil(() => (mutationsHistory.length ? mutationsHistory : false)).then(
      (mutationsHistory) => {
        cy.log('Now you can do whatever you want with `mutationsHistory`')
        console.log(mutationsHistory)
      }
    )
  })
})

I hope it helps 😉

[NoriSte]

Hi @Wulfheart

How can I detect a status change in the

element

What do you mean by "status change"? A change in the children? A change in the attributes?

Is there anything that allows you to be completely sure that something changed? I guess that you have SSR and re-hydration in browserland? Timestamps could be a good idea.

Anyway: before speaking about how to use cy.waitUntil to detect a change we need to clarify how to detect a change at all, that's why I'm asking above 😉

[Wulfheart]

@NoriSte thanks for your quick response. Generally speaking I’d like to detect a DOM change in a specific container.

[NoriSte]

Tomorrow I could add a more complete answer, meanwhile take a look at MutationObserver.

[Wulfheart]

Thank you for this extensive solution.