How do you assert backend state when the UI lags behind?

Question

How do you assert backend state when the UI lags behind?

Answer

In an e-commerce application, a user clicks a “Submit Order” button. This action initiates a complex, long-running background job (e.g., inventory check, payment gateway processing) that takes several seconds. The UI immediately changes to a “Processing…” state, but the final success or failure state is only available after the background job completes and updates the application’s internal data store.

You need to write a Playwright test that asserts the order was successfully processed and marked as “Shipped” in the database (which is reflected in the UI), but you cannot rely solely on waiting for a specific success message to appear, as the network request for that message is delayed and unreliable during the processing phase.

As a Staff Engineer, describe the most robust and idiomatic Playwright approach to ensure the test waits until the actual state of the order is ‘Shipped’ before asserting its existence, minimizing the risk of race conditions and test flakiness. Provide the relevant Playwright code snippet demonstrating this pattern.