Wait For The Page And Elements To Fully Render Before Interacting To Avoid Detached From DOM Error

This video shows how I wait for the page to fully load by observing the new elements that appear during the tests, and the Ajax calls the application is making. My goal is to only work with the page after it has finished loading and re-rendering (otherwise I might get a dreaded "Element detached from DOM" Cypress error). In this case, when testing a Shopware site, the charts were loaded at the start, and the menu items were getting their labels from the server using an Ajax call. If the test does not "wait" for the labels, it might try to click the menu item. If the Ajax call returns and the application re-renders the menu item element, Cypress might fail to click the menu properly. Here is my more robust test:

// make sure the application has finished loading its charts
// the menu item will request the label "Overview" from the server
// let's wait for that menu to appear before clicking the menu item
// verify we end up on the right page after the menu click

[animeshkr]

Your videos are very useful, thanks for that,

Just a suggestion,
Please use Mic based headphone, since while you are explain some topics sometime you are saying some words very slow and its hard to catch while watching videos

[jackky]

I thought .contains was just basically searching for something but I see in this video you use it to wait for that something to be there. It's weird because what if the thing is not there. so how can you depend on the .contains

[AstomoPancoroPutro]

hello sir. I wonder if there is a way to rerun test soon after cy.intercept timeout error. thank you

[rpdecks]

@bahutmov these videos are great... I wish I had discovered them sooner. For some reason I spend way too much time banging my head against walls. I should just watch more YouTube ;)

[shashankatole]

when we use in if condition they're required to first wrap element. I use to
wait but they do not work. pls, help me how to do.