Community member Jonathan Channon recently approached me about an appropriate way to test your Htmx-powered applications using the Playwright testing framework. It can be annoying to get the timing right between sending an HTMX request, processing it on the server, and applying it to the page.
In this post, we’ll see a surefire way to wait for Htmx to finish before testing the state of your pages, thus leading to more reliable tests and faster test execution. Let’s go.
The Htmx Counter Application
Let’s first see what application we’ll be testing. It’s a simple **Counter ** component that increases in value when the user presses a button.
The ASP.NET Core endpoint is straightforward.
Clicking the button will make a request to the server, increment the value, and return the HTML snippet to be processed into the page.
Now, let’s move on to the next part of the process, the Htmx lifecycle.
Htmx Request Lifecycle Events
Htmx contains multiple lifecycle events that we can utilize during a request. These events allow us to modify outgoing requests and understand what stages Htmx is at during the processing phase.
The lifecycle event we are most interested in is
htmx:afterSettle
. Settling is the process after all DOM changes have been applied and the page is now stable. Let’s hook into this page event and write a console message. I’ve added this to the typical
site.js
file, but it can go anywhere within your application.
Now, whenever we settle the page, a console message will be written with the value of
playwright:continue
. We’ll see how to register this script into our page in the next section using the Playwright APIs.
Playwright and Htmx Extensions
Now, let’s look at our test.
We first call the RegisterHtmxLifecycleListener
script. This is the same JavaScript seen above. Then, we call
WaitForHtmx
, which will wait for the console message in our page’s output. Let’s see how these extension methods work.
It’s that easy. Now, your Playwright tests can wait for messages generated by the Htmx lifecycle, so you don’t have to worry about changes to your implementation on the front or back end changing how your tests execute. Additionally, you won’t have to waste time waiting for random delays to progress through your tests.
I hope you found this post helpful. Have fun building Htmx apps tested by Playwright. Cheers.