WebPageTest (WPT) recently released a Chrome Extension that allows you to record an experience in DevTools, export that experience, then add that export to WPT to run as a test.

The team at WPT does a great job of explaining this, but quickly, this allows us to:

• record a multi-step user experience, like “add to cart, continue shopping, add to cart, edit cart, checkout”,
• export a script from DevTools,
• import that script into WPT, and
• run tests in WPT that repeat those steps.

This allows us to measure what users experience while performing complex operations on our sites, which allows us to make sure that complex operation runs as smoothly as possible, and try to find and fix any issues, ideally before our users do!

TOC

• Install Browser Extension
• Create a Recording in DevTools
• Understand the Recording from DevTools
• Export a Recording from DevTools
• Import and Test a Recording into WebPageTest

Install Browser Extension

As the article above says, step 1 is to install their Chrome Extension (note that you need Chrome 104+, so upgrade first if needed).

Once installed, I also recommend adding it to the top panel of your DevTools to make using it easier:

Now we’re ready to create a recording.

Create a Recording in DevTools

1. In Chrome DevTools, click the Recorder tab.
2. If you have previous recordings, you will see a screen like this (note this extension comes with a prerecorded Test 1):
   
3. If you have no recordings, you will see a screen like this:
   
4. In either case, to start a new test, click the Start a new recording button (simply Start a recording in the second screenshot).
   Note: If you want to include the page load experience in your recording, you might want to start your experience with about:blank, then navigate to the site after the recording has started.
5. Before recording can start, you need to enter a Recording Name. This should be something that describes what you are testing. Perhaps something like “EL US Checkout”.
   (Ignore the Selector Attribute for now, more on it later.)
6. When you are ready, click the big red Start a new recording button:
   
7. The recording will now begin, and will track every click you make on the page you are recording!
8. As you click, the Recorder panel should start to show stuff like the screenshot below.
9. Notice the Replay settings and Environment data related to this recording, followed by the steps you have recorded up to that point, followed by a notice that you are still Recording…
10. Continue clicking and doing anything else you wish to record. When you are finished, click the End recording button.
    (Don’t worry if you make a mistake or two along the way, as you can edit the recording once it is finished.)
    

Understand the Recording from DevTools

After you have completed a recording, the Recorder screen will display every step it recorded.

Note that some steps are descriptive, click Click Element “Quick Shop”, while others are initially not, like Click…

However, you can expand a step to view details that might help explain what was clicked.

You can also click the 3-dot menu to get options for that specific step, like Add step before, Add step after or Remove step.

If you are happy with this recording, you can then export it for use elsewhere.

Export a Recording from DevTools

To export a recording, make sure the recording you want to export is open in the Recorder panel, and click the “Export” button.

A dropdown will open with three options; select the one you prefer (choose Export as a WebpageTest custom script if you want to import into WebpageTest):

Give the file a name and it will download to your hard-drive.

You can now share that file with team mates or import it into some other testing platform, such as WebpageTest.

Import and Test a Recording into WebPageTest

(Note that you can import this recording into other external services as well, such as Puppeteer, or even into DevTools, so you can reply previously exported tests, or tests exported by someone else!)

1. To import into WebPageTest, open the custom script and copy the contents:
   
2. Go to WebPageTest (we always recommend logging in, using a free account is fine), expand the Advanced Configuration section, setup all of the specs as you wish (device type, location, etc.) then click the Script tab, paste the copied custom script, and click the Start Test button:
   
3. The page should then refresh and notify you that the test has begun:
   
4. When the test completes, the page will refresh and display you will see your test results, based on your imported custom script:
   (Note the various “steps”, highlighted with the arrows below.)
   

Happy testing,
Atg

Top⇪