Quickly Export Cypress Tests Directly from Google Chrome

This is a guest post from Jecelyn Yeen.

I'm Jecelyn Yeen, a developer advocate at Google, working on Chrome DevTools. I speak English, Mandarin, Cantonese, Malay, C#, Java, Typescript & of course JavaScript 😎. Find me on: Twitter, LinkedIn, Facebook, Github. You may watch this video of me on Youtube too... and many more.

In this blog post, we’ll share how you can use the Cypress Chrome Recorder extension in the Chrome DevTools Recorder panel to easily export and view Cypress test scripts within the browser.

What is Recorder

The Recorder panel is a developer preview in Chrome DevTools that enables you to automate your user flows by recording, replaying, debugging, and measuring critical user journeys, such as adding an item to cart or filling out a payment form.

Unlock new features with the Cypress Chrome Recorder extension

By installing the Cypress Chrome Recorder extension, you can unlock new features such as exporting user flows to Cypress test scripts.

Not only that, you can view the generated Cypress script live during recordings!

Hovering over each step will instantly highlight the corresponding code, making it especially helpful for those new to the syntax.

You can also copy the Cypress test script of a specific step by clicking on the 3-dot menu or right-clicking on that step.

Additionally, you can use keyboard shortcuts to perform actions more quickly, and even customize them in the Settings > Shortcuts tab.

Convert multiple user flows at once

Furthermore, with the Cypress Chrome Recorder CLI, you can convert multiple user flow JSON files to Cypress test scripts at once!

Here is an example of the command:

bash
npx @cypress/chrome-recorder <relative path to target test folder>/*.json

Refer to the documentation for more details.

Conclusion

While the extension is still new and may have some areas for improvement, it is an excellent tool for testing your applications. Check out this webinar for a full demo of the exporting recordings from Chrome DevTools Recorder as Cypress tests:

If you encounter any issues or missing features, be sure to file an issue to help improve it. So go ahead and enjoy testing with the Cypress Chrome Recorder extension!