Using Cypress to automate k6 scripts recording

Performance testers and performance engineers use the record-correlate-replay pattern when developing test scripts for HTTP-based apps every single day. The recording step is a great candidate for automation. The question that I always ask myself here is:

Since this is a tedious task and does not add any value to tests stakeholders itself I want to spend on it as little time as possible. In one of my recent projects, I decided to give a try to a cypress+k6 tandem to see how efficient I can make it.

A few words about both tools:

What both have in common and I like the most is focus on developer experience and cloud/cicd readiness out of the box.

For this article I assume you know basics of both tools and have them installed on your machine.

What do we need to automate k6 test script recording with Cypress? We need to:

The whole concept of automation is that I am going to drive my browser with Cypress to simulate user session. Just after Cypress test starts I will turn on k6 recording thanks to the k6 Chrome plugin. At the end of the test, I will stop k6 recording and that will bring me to script editor in k6 cloud.

Let us do this.

First step is to install CRX plugin that will allow us to download k6 Browser Recorder plugin for Chrome to our disk. That is necessary because when Cypress starts Chrome, it uses its own configuration and not the system one so you do not have access to extensions you installed for yourself as a user. Once done, we will instruct Cypress to load k6 Browser Recorder from hard drive on Cypress Chrome start-up.

Confirm installation was successful by looking it up on chrome://extensions/

While on the plugin page use CRX Downloader

and download extension as zip file.

Then unzip it. I unzipped mine to ‘C:\Users\gstarczewski\Downloads\phjdhndljphphehjpgbmpocddnnmdbda’

This is how it should look like.

Once signed in go to CLI page and copy your login command with token. It should look like:

you get it from this place:

We need to issue that command in the shell(bash/powershell) where we will start Cypress so it runs with proper context.

At this point set-up is done. How do we use it with Cypress now?

A standard Cypress project has the following structure

We need to tell Cypress to load up k6 Browser Recorder extensiony by modyfying plugins/index.js file (remember to change the extension path).

For completeness that is my cypress.json :

A minimalistic cypress test displays a message to give you time to start the recording. In order to do that I use cy.intercept() to a fake URL and I ask cypress to return a HTML page for me (displayHelPage function).

Let us try it. Open powershell console where your package.json is, init k6 profile and start cypress.

Run the test from Cypress GUI

When cypress test starts go to k6 plugin extension that has been now loaded for you in Cypress Chrome and click ‘start recording’. You are recording now.

When your test ends stop the recording in a similar way (click ‘stop recording’). You should be redirected automatically to k6 cloud test editor.

That is it! Now you can repeat it as many times as you like.

Things to remember:

Gabriel Starczewski

Related posts:

Finding the right words to explain what you do in the lab to those who are unfamiliar with your work can be challenging — but fun as well! An inspiring account of a successful science outreach project.

Now the New Years hangovers are history and the festive decorations have been taken down its about time we redecorated our working lives, don’t you think? Its easy to accumulate mess and become lazy…

Punctuation. A mystery, commas occasional, it’s the period. The Beckett solution. A short statement of truth. Nothing more or less. Clarity increasing for some. Others find obscurity. Essentially an…