Cypress E2E testing: How to test the text message on toast container (or) popup on a web page?

Question

screenshot of html code for the error toast popupI am trying to get the element of popup (or) toast-container and asserting the text, but I am getting an error that element never found. Please someone help?

describe('Wholesoft Login Page', function(){

    it('Check Login popup', function(){

        cy.visit('https://https://platform.wholesoftmarket.com/login')
        cy.get('#email').type('kj@gmail.com')
        cy.get('#password').type('hello')
        cy.get('button.btn.active').click()
        cy.get('div').within(($div)=>{
            cy.get('div.overlay-container').should('have.text','no record found')
        }) 
    })
 })

Answer 1

You need to set a bigger timeout for the element, waiting to be present in the DOM:

cy.get('div[aria-label="Error"]', {timeout: 10000}).should('have.text','no record found')
// maybe you can use the class selector on that div (div.toast-title.ng-star-inserted)
// default timeout is 6000
// increase it until it is caught by Cypress