Customize the Recorder with extensions

You can customize the Recorder and integrate it into your workflow by installing third-party extensions that suit the tools you use.

Check out the list of known extensions.

# Install extensions

To integrate the Recorder with your tools, install extensions:

1. Choose an extension from the list of known ones and click its link.
2. In Chrome Web Store, click Add extension.
3. Open DevTools in a new tab and find new custom options in the Recorder.

This screenshot shows custom export and replay options provided by the extensions.

# List of known extensions

Currently, there are two types of extensions: Export and Replay.

# Export extensions

Export extensions let you to customize the code generated by the Recorder panel:

CodeceptJS extension

This extension lets you export JSON user flows as CodeceptJS test script. CodeceptJS is a supercharged End 2 End Testing.

Cypress extension

This extension lets you export JSON user flows as Cypress test script. Cypress is a front end testing tool built for the modern web.

Nightwatch extension

This extension lets you export JSON user flows as Nightwatch test script. Nightwatch is an end-to-end testing solution for web applications and websites.

Owloops extension

This extension lets you export recordings as Owloops tests.

Testing Library extension

This extension lets you export JSON user flows as Testing Library script. Testing Library has simple and complete testing utilities that encourage good testing practices.

WebdriverIO extension

This extension lets you export JSON user flows as WebdriverIO test script. WebdriverIO is an end-to-end testing solution for web, mobile and IoT applications and websites.

WebPageTest extension

This extension lets you export user flows from the Recorder directly as WebPageTest Custom scripts to measure site's performance. See Converting user flows to WebPageTest custom scripts to learn more.

# Replay extensions

Replay extensions let you run the recordings produced by Recorder using a third-party service, without leaving DevTools.

# Troubleshooting

If you don't see export or replay options after installing an extension, check or do the following:

• The extension only works on web pages. For example, the export option is not available for chrome:// pages like chrome://extensions.
• Always open a new browser tab after installing the extension.

Known issues:

• Issue 1351416 in Chrome 104 and 105 prevents the display of the export option if you open the Recorder as the first DevTools panel. As a workaround, open another panel first (for example, Console), then open the Recorder. The issue is fixed in Chrome 106.

# Build your own extension

To further customize the Recorder to your needs, you can build your own extension:

1. Explore the chrome.devtools.recorder API.
2. Check out example extensions.
3. Develop your extension and publish it at Chrome Web Store.
4. Feel free to add it to the list of extensions on this page.