Cypress: Cypress is not able to verify the existence of newly attached element

[kapalkat]

Current behavior:

Cypress is not able to verify the existence of newly attached element.

Desired behavior:

Cypress is able to get a new DOM element.

Steps to reproduce:

My test looks like follow:

1. Visit page
2. Fill in the form
3. Submit
4. Wait for success XHR status
5. Verify newly attached success toast.

The strange thing is that I have multiple forms on different pages and this works on 90% of them.
My toast mechanism is EXACTLY the same on all of those pages so I really don't know where the problem might be.

My XHR wait and then toast verification looks like follow:

cy.wait('@putProductsRateSingle').then((response) => {
      expect(response.status).to.eq(200)
    })
cy.get('#toast-container .toast-success', { timeout: 5000 }).should('contain', 'Parcel updated!')

Versions

3.0.2, MacOS, Chrome

[pgroot91]

Why do you need the timeout on the toast? Guess it waits and the toast will disappear by that time it does the assertion?

[kapalkat]

This timeout just increases the time when Cypress looks for the element. The default is 4 seconds.
When it finds the element during this timeout it doesn't wait until the end of it! It's doing the assertion right after it finds the element. This is the main rule in Cypress!
https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#When-Elements-Are-Missing

[kapalkat]

The bug is really difficult to track and not sure if it's worth to do it. The situation when it appears:
Test:

cy.get('#non-fixed-column-table')
  .as('table')
  .then(($table) => {
    cy.getTdElementToCorrespondingTh($table, "CONTRACT TONNES", parcelRowIdentifier)
      .should('contain', this.voyageParcelToEdit.editedParcel.contractTonnesBeforeUpdate.toLocaleString())
  })

cy.get('.toast')

and I the function which I am calling from commands looks like below:

Cypress.Commands.add("getTdElementToCorrespondingTh", function (tableObject, thName, RowUniqueIndicator) {
  cy.wrap(tableObject).within(() => {
    cy.get('thead > tr > th').contains(thName).should('exist').then(($thNameElement) => {
      const thNameElementIndex = Cypress.$($thNameElement).index()
      let correspondingTdRowIndex = 0
      if (typeof RowUniqueIndicator == 'string') {
        correspondingTdRowIndex = Cypress.$('tbody > tr').find(':contains(' + RowUniqueIndicator + ')').parent().index()
      } else {
        correspondingTdRowIndex = RowUniqueIndicator - 1
      }
      return cy.get('tbody > tr:eq(' + correspondingTdRowIndex + ') > td:eq(' + thNameElementIndex + ')')
    })
  })
})

When I change 'this' to 'within' in my test like so:

cy.get('#non-fixed-column-table')
  .as('table')
  .then(($table) => {

to this:

cy.get('#non-fixed-column-table')
  .as('table')
  .within(($table) => {

all works fine.
Tried to track this but really don't know what might be wrong here.

[PatElder]

Got a similar issue after updating to 3.1.1 The toasts that appeared in the tests for my web app would never disappear although they did on localhost when trying to replicate the issue.

Following a downgrade back to 3.1.0 I no longer had the issue just as before the update.

[jennifer-shehane]

Unfortunately we'll have to close this issue if no reproducible example is provided.

Can anyone provide a way to reproduce this - test code and/or html code that we can run on our machines to reproduce?

[davidzambrana]

@kapalkat in your case, if you change your

cy.get('#toast-container .toast-success', { timeout: 5000 }).should('contain', 'Parcel updated!')

to

cy.contains('.toast-success', 'Parcel updated!')

do you still see the same issue?

In my case I'm verifying the toasts this way and I haven't got any problem so far.

[kapalkat]

@davidzambrana Thanks for the tip. The way you described works fine!
However, I have already found a solution; I am using cy.within() while getting element before the toast. This resolved my issue.