Here's a quick snippet to allow you change the HTML of a page before Cypress fires your tests.
In an ideal world you would want to have different server side rendered HTML pages and you would just call
page-2.html but in my case the component I'm trying to test inherits a configuration from a central location. It is simply not possible for me to amend that central configuration, as it would affect all other tests/components.
Thus we make use of the
onBeforeLoad callback function to change the HTML in Cypress. The callback function is described as:
Called before your page has loaded all of its resources.
So, it turns out this
I couldn't find a way to prevent this race condition. Even if the documentation says the
cy commands are not promises (yes, they do mention the use of
then but according to them it's not a promise).
In any case, here's the snippet (just like the official docs):