Get memory consumption of web app with Cypress

Recently when checking performance of the web app I’ve worked on, I needed to get the memory consumption of web app after certain behavior actions.

Cypress image

To do it with Cypress, first we need to capture the app performance using the below command in the Cypress test block:

cy.window().then((window) => {
      firstTask = window.performance.memory.usedJSHeapSize
    })

By default, Chrome does not capture real time memory consumption of current browser session. Instead it checks for every 20 seconds. To get the real time memory consumption, we need to pass the following argument when initiate the Chrome browser session by updating the cypress.config.ts

export default defineConfig({
  chromeWebSecurity: false,
  waitForAnimations: true,
  defaultCommandTimeout: 10000,
  requestTimeout: 10000,
  responseTimeout: 10000,
  projectId: '4oe38f',
  video: true,
  experimentalStudio: true,
  e2e: {
    setupNodeEvents(on, config) {

      on('before:browser:launch', (browser = {
        name: "",
        family: "chromium",
        channel: "",
        displayName: "",
        version: "",
        majorVersion: "",
        path: "",
        isHeaded: false,
        isHeadless: false
      }, launchOptions) => {
        if (browser.family === 'chromium' && browser.name !== 'electron') {
          // auto open devtools
          launchOptions.args.push('--enable-precise-memory-info')
        }

        return launchOptions

      })

    },
    baseUrl: '${baseUrl}',
    specPattern: 'cypress/**/*.{js,jsx,ts,tsx}',
  },
});

Notice the line of code:

launchOptions.args.push('--enable-precise-memory-info')

Hope it helps~~

~~PEACE~~