Introducing the New WebPageTest Recorder Chrome Extension

WebPageTest’s custom scripting functionality unlocks some very powerful testing capabilities, including being able to test multi-step user journeys and flows through your site and application. Writing those scripts, however, can sometimes be challenging.

Today, that’s getting a whole lot easier thanks to the new WebPageTest Recorder extension that let’s you export flows from Chrome’s built-in recorder directly as WebPageTest Custom scripts. The extension is available today and works in Chrome versions 104 and up.

The Chrome Recorder & Multi-Step Tests

Chrome now ships with a new Recorder panel built into their developer tools. When you start a recording, Chrome will start to record each action you take on the page—clicks, scrolling, navigation, and more. That script can then be replayed in developer tools, or exported for storage or use elsewhere.

We were immediately excited about the potential here! Measuring user journeys in a site enables you to see what the full experience of a critical flow in your site is like.

For example, an e-commerce site should absolutely be testing an add-to-cart flow to see what the experience is like. A product may want to test the login or sign-up flow. Measuring the full user journey helps to expose potential bottlenecks you may miss by testing only a single page.

Not only that, but the ability to record and test interactions makes it simpler to test what the performance of your site is after the initial load. A site built as a single-page application may want to script a flow that allows them see how the performance of routes hold up once the SPA has been initialized. An application that handles and displays a lot of interactive data may want to test how those interactions hold up.

The easier it is to test these kinds of flows, the more likely folks are to do it.

Converting to WebPageTest custom scripts

We wanted to see if we could take advantage of the new recorder functionality to make multi-step testing in WebPageTest more approachable. Clicking around a site is, after all, a lot less work than writing out a custom script yourself.

So we quickly got to work building an experimental npm module to convert the exported JSON of a recorder session to a WebPageTest custom script. We’ve been quietly using it for awhile now, making a few refinements as we bump into edge cases.

And now, thanks to Chrome’s recent update to allow Chrome extensions to enable exporting directly to another format, and the wonderful quick work of Siddhant Shukla, we’re able to make that entire flow much more simple with the new extension.

Using the extension

With the extension installed, generating custom scripts for WebPageTest becomes dead simple. You can start a new recording in Chrome, interact with the site until you’ve got the flow you want to test, and then click the Export icon. You’ll be presented with the ability to export as a WebPageTest custom script. The extension will do the conversion on the fly and generate a text file that you can save, with your script all written for you.

You can paste the contents of the script directly into the Script tab (under Advanced Configuration), chose from any of our locations and adjust any other relevant settings and away you go.

One of the things we’re most excited about is that while the recording happens inside of Chrome, once we’ve got it exported into WebPageTest custom scripting, we can use that same script to test performance in other browsers as well! For example, here’s a product flow tested in Firefox, using the recorder script generated by Chrome.

We’re all ears!

We’re incredibly excited about the extension and how much easier it makes it to test multi-step flows in WebPageTest—it’s already our favorite way of generating those custom scripts.

The extension is available today, so please try it out.

If you find any situations where it generates unexpected results or something seems amiss, please let us know so we can clean them up. We’re looking forward to hearing how things go, and to making ways to test multi-step flows even easier in the future.