Waiting for the text to change
Hi i am trying to find a solution for the below case.
- Element rendered by a third party library shows a text "--".
- Then after few seconds when API response arrives, the "--" text gets replaced with numeric value.
Not i am trying to assert if the numeric value is rendered and withing the bounds say 100-2000. How to tackle this test ? I have tried using expect.toPass and assert not.toContainText("--") but nothing helps.
This thread is trying to answer question "How can I assert if a numeric value is rendered within certain bounds after an initial '--' text is replaced by this value, which is updated after an API response?"
I don't like the approach of waiting for API in E2E test. I suggest you to use accessibility instead:
Put <span aria-busy="true" aria-label="Waiting for value">--</span> if possible.
Then wait for all aria-busy to be resolved. You can find the function here: https://github.com/argos-ci/argos-javascript/blob/366dc3bdb4a0a8ed87fc7a2cbf28db1f218567ad/packages/browser/src/stabilization.ts#L87-L102
It is also a good method to stabilize for Visual Testing, built-in in Argos (https://argos-ci.com) by the way.
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.