I want to use cy.get to query the new DOM after the re-render. But the DOM is updated but cypress seems to cached the DOM on the initial load. The cy.get still returning the element in the first load not the update element after the re-render.
Is there away to force cy.get to query the new DOM. cy.get only picked up the correct value after cy.reload(true); But this is not what the user would do. Since the user don't need to reload the page to seem the change.
Here is an example
// first load
<div id='first-name'>
John Smith
</div>
// after 10 seconds
<div id='first-name'>
Grace Smith
</div>
So cy.get('#first-name') should have the text John Smith after 10 seconds cy.get('#first-name') should have the text Grace Smith
cy.get('[data-testid=slot1-text] > tspan').then(text => {
expect(text.text()).equal('PARKINGFRESERVED');
});
cy.get('[data-testid=slot1-text] > tspan:last-child').then(text => {
cy.wrap(text).should('have.class', 'parking-status-reserved');
expect(text.text()).equal('RESERVED');
});
cy.server();
cy.route('GET', '/mocks/parkingLotConfigs.json', parkingLotConfigsMock).as(
'parkingLotConfigs'
);
// @TODO remove reload, when there is a better way.
// Without using reload the page is updated because of pooling. But cypress does not
// pick up the change in the re-rendered DOM. reload is used as work around only.
// https://stackoverflow.com/questions/62205766/cypress-get-not-querying-the-new-dom-after-rerender
cy.reload(true);
cy.wait('@parkingLotConfigs');
cy.get('[data-testid=slot1-text] > tspan').then(text => {
expect(text.text()).equal('PARKINGFRESERVED');
});
cy.get('[data-testid=slot1-text] > tspan:last-child').then(text => {
cy.wrap(text).should('have.class', 'parking-status-reserved');
expect(text.text()).equal('RESERVED');
});