The dreadful error "failed because the page updated" - shouldn't it do not exist in v12? #27490

dziedrius · 2023-08-08T11:47:57Z

dziedrius
Aug 8, 2023

There was an issue with whooping number of comments - #7306, which states:

Before these changes, Cypress stored a single DOM element (or window) reference that is passed between a set of commands to assert on, which could become stale as the App under test updated.

With these changes, Cypress will now re-query for the DOM element (window object) to ensure its always the most up-to-date reference to verify

Given this, I was expecting that the "failed because the page updated" should be gone forever, seems it is not the case.
In current documentation, there's reference about the error:
https://docs.cypress.io/guides/references/error-messages#cy-failed-because-the-page-updated
which is really nice, because it explains in quite detail what is going on and even provides an example.

What I did not like, was this:

Queries (.get(), .as() and.parent(), for example) and assertions (.should(), .and()) are safe to chain off of. Commands (such as .click()) are not.

If something is not safe, wouldn't it be nice to provide full list, because right now I need... to guess? try? but this is a race condition, how much trying is enough?
Shouldn't API terminate chaining on unsafe command?

In my case, it was failing on seemingly simple chain:

cy.get('[data-test="row"]').should('contain', 'test string').eq(0).click();

So I thought, may be eq is not a safe command, may be I should do a scientific experiment to prove it.
So I took example from help:

<!DOCTYPE html>
<html>

<head>
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>

<body>
    <div data-testid="parent">
        <button><span>Delete</span></button>
    </div>
    <script>
        $('button').click(function () {
            // when the <button> is clicked
            // we remove the button from the DOM,
            // and add a new, identical one.
            $(this).replaceWith(this.outerHTML)
        })
    </script>
</body>

</html>

And put it to the test from help too, first as it was originally in help:

describe('template spec', () => {
  it('passes', () => {
    cy.visit('http://localhost:3300/index.html');
    cy.get('button').click().parent();
  })
})

And it failed, just as described in documentation.
Then tried to mimic my situation and replaced line with click with my case:

    cy.get('button').should('contain', 'Delete').eq(0).click();

And it passes, so it seems that eq is safe command after all. But it does not pass in my actual test suite, even though it was passing with cypress v11.

P.S. I am sorry if this looks like a rant (it actually is a rant after first week with cypress in my life, I need to steam off), hopefully this is a good source for discussion too.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

The dreadful error "failed because the page updated" - shouldn't it do not exist in v12? #27490

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

The dreadful error "failed because the page updated" - shouldn't it do not exist in v12? #27490

dziedrius Aug 8, 2023

Replies: 0 comments

dziedrius
Aug 8, 2023