Cypress: how to assert the element while the page is reloading?

[MaxAllianov]

Hi everyone!

I'm new in cypress and just doing my first steps, but I stuck at the simple issue for a couple of days.
How can I stop page loading and wait for the exact element to appear?
Here is the subject:
I'm trying to make a test for a wrong login/password check. Once the wrong data is submitted (after the click) the notification appears and then the page reloads instantly. The issue is that cypress waiting for the page load and then moving to the next step, but the notification is disappeared before the page reload.

Here is my code:

it.only('Login by admin with wrong Login', () => {
cy.get('#inputEmail').clear().type('[email protected]')
cy.get('#inputPassword').clear().type('help')
cy.get('#login-submit').click()
cy.get('.toast-message').should('contain', 'Wrong Email or Password')
})

My expectation is that cy.get('.toast-message').should('contain', 'Wrong Email or Password') will execute right after the click and will wait till the element is found.

How can I force cy.get to execute right after the click before the page reload?
Or am I missing something else?

[bahmutov]

This is weird - does the message just flash like that for a few milliseconds when the user enters the incorrect information? I bet not, it is shown for a few seconds before the page goes back, right?

So what you want to write is this:

cy.get('#inputPassword').clear().type('help')
// the toast might be present in the DOM, just hidden
cy.get('.toast-message').should('not.be.visible')
cy.get('#login-submit').click()
// use cy.contains command
cy.contains('.toast-message', 'Wrong Email or Password').should('be.visible')
// now we can assert that the message goes away for example
cy.get('.toast-message').should('not.be.visible')
// and we can verify the page is redirected somewhere
cy.location('pathname').should('equal', '/login')

Note: you should be careful about negative assertions, read https://glebbahmutov.com/blog/negative-assertions/

[bahmutov]

So I have slowed down the load of the page

/// <reference types="cypress" />
it('shows login error', () => {
  cy.visit('/')
  cy.get('#inputEmail').type('[email protected]')
  cy.get('#inputPassword').type('incorrect password')

  // slow down the new page load
  // to give the error message time to show
  cy.intercept('GET', '/', (req) => {
    req.reply((res) => {
      res.delay(3000)
    })
  })

  cy.get('.toast-message').should('not.exist')
  cy.get('#login-submit').click()
  // error message shows up
  cy.get('.toast-message').should('be.visible')
  // then disappears
  cy.get('.toast-message').should('not.exist')
})

But I cannot get the toast modal - it disappears and I have no idea how to "catch" it or turn it on to get the selector. Since you designed the application you might be better able to cy.get it, I have no idea how the app is designed

On a personal note, I think this is a bad application design - the "wrong password" message pops so fast before completely reloading the page, why would someone do it like that? No need to reload the page.