How to run Cypress UI and API tests under k6 performance measuring control?

I want to run Cypress tests on a website and measure the performance with k6. Currently I run the Cypress tests on Windows locally and in a GitLab pipeline. I followed these video tutorials (https://www.youtube.com/watch?v=1mtYVDA2_iQ + https://www.youtube.com/watch?v=9yWQ5m8RdH4) to test it in the Grafana Cloud but in the end I want to adapt it to a setup that does not have any connection to the outside.

Aim: All shall run in a GitLab pipeline in our own environment with k6 automatically measuring the Cypress tests, recording the results and storing the artifacts. All running on our own server, no cloud needed, no contact to the outside. I’m lacking information on how to do that. Currently I am bound to Chrome for Testing 116 because Google Chrome v137 and higher does not allow loading extensions via --load-extension. Integrating k6 into Cypress gives: “Google Chrome v137 and higher does not allow loading extensions via --load-extension. If you need to load an extension to test with Cypress, please use Chrome for Testing, Chromium, or another Chrome variant that supports loading extensions.”

That’s why I went to Chrome for Testing. We need to test it with recent and future Chrome versions, though, and other browsers as well. So I don’t know yet how to lift that up to recent browser versions.

To achieve that private setup stepwise, this is what I have now: I’m running Cypress tests from the console in headed mode. K6 is installed locally and configured in cypress.config.js. Chrome for Testing is installed in version: '116.0.5793.0' with Grafana k6 Browser Recorder 1.0.8. I launch the k6 plugin in Chrome for recording locally, no Cloud recording. I start my Cypress session, finish it, finish the recording. After the recording, k6 lists a file with a UUID for download. When I click on it, neither the file nor the parent folder in a Windows Explorer opens. So I cannot access the file to see the result. In the recording history of the k6 browser plugin, there is a Download button that also does not download the file. Regular downloads in the browser from other resources work. I tried with multiple recordings, closed the browser and Cypress session, started new sessions – always the same result. How can I access these files? They are also not automatically downloaded to the set Downloads folder. When I click on the k6 plugin icon again, then it says “No data recorded yet”. Has it really recorded anything?

K6 is installed in a local path. My cypress.config.js has these settings:

const { defineConfig } = require("cypress"); module.exports = defineConfig({ e2e: { baseUrl: "https://hidden.com", defaultCommandTimeout: 15000, setupNodeEvents(on, config) { on('before:browser:launch', (browser = {}, launchOptions) => { console.log(launchOptions.args) // print all current args const k6path = "C:\k6\k6.exe" if (browser.isHeaded) { try { launchOptions.extensions.push(k6path); } catch (error) { console.log("extension not available"); //when in headless mode } return launchOptions } }) }, 

I also tried other browsers. After disabling Chrome for Testing and reenabling all browsers, I installed the “Grafana k6 Browser Recorder” and “CRX Extractor/Downloader” to Firefox. When I select Firefox in Cypress, Firefox starts but does not show the Cypress Test Manager, just a blank tab. “Opening E2E Testing in Firefox”. My website to test is not loaded, not even in the URL field. From the extensions that I installed before, none is shown in the Extension area. Only the Cypress extension and for this it says “Cypress – can’t read and change data on this site”. The other extensions that I installed in the session before are not installed anymore.

What is a good or the best way to run Cypress tests a) controlling k6 or b) k6 controlling Cypress tests?