Prevent race conditions when testing with playwright

[languitar]

We have a project using htmx that is tested with playwright. In that scenario, for instance, with boosted links, we see that in playwright htmx actions sometimes don't happen. Things work if the headless browser interaction is slowed down. As far as I could debug this, we end up in a similar situation to what is already described in the playwright hydration documentation: interactions seem to happen before htmx has installed all required callbacks. Is there a common pattern how to solve this with the htmx + playwright combination? Especially for boosting, where the DOM element to interact on is already a link, it feels weird that in some loading state the boosting does not work correctly sometimes.

[Telroshan]

I'm also using playwright for htmx-based tests, though I'm not using boosting so I may be off the mark in this situation, let me know.
I have 2 "tricks"

• Check that htmx has been initialized before moving on with the actual tests

const htmx = await page.evaluate("window.htmx")
expect(htmx).not.toEqual(null)

You could use this in a beforeEach hook for example to avoid repetition

• Define a simple utility function to ensure things were settled between 2 actions where the second action would require the first one to be completed before moving on, such as

async function htmxReady(page: Page) {
    await expect(page.locator('.htmx-request, .htmx-settling, .htmx-swapping, .htmx-added')).toHaveCount(0)
}

Which makes sure no request is still in flight (simple assumption that if no element has any of the htmx requests, it's that the requests have all been resolved. Note that if you wanted the most reliable and precise setup, you would use event listeners bound to htmx's lifecycle events). Using it as

await htmxReady(page)

[languitar]

Thanks, we'll give that a shot and see if that resolves all issues we see.