cypress-har-generator

The Cypress plugin for generating HTTP Archive (HAR) files is a tool that allows developers and QA engineers to capture detailed information about network requests made during the execution of Cypress tests.

Advantages:

• Detailed visibility into network requests including WebSocket frames, Server-Sent Events (SSE), and more.
• Ability to replay network requests in a web development tool.
• Easy integration with Cypress

Why it is important

• Improves the performance and stability of your application
• Quickly troubleshoot issues with network requests
• Saves a significant amount of time and effort in debugging and troubleshooting network issues.

The plugin allows you to record network requests from multiple targets such as pages, workers, and pop-ups, which allows you to get a more comprehensive view of your application's network activity. This is especially useful for debugging and troubleshooting issues that may be related to multiple sources.

• Install
• Setting Up the Plugin
  • Installing the plugin
  • Registering the commands
• Generating a HAR File
• Commands
  • recordHar
  • saveHar
  • disposeOfHar
• Example Usage
• License

To install the plugin as development dependency, run the following command:

$ npm i --save-dev @neuralegion/cypress-har-generator

✴ For details about changes between versions, and information about updates on previous releases, see the Releases tab on GitHub: https://github.com/BrightSec/cypress-har-generator/releases

Setting up the plugin takes two steps: installing it in the Cypress config, and registering its commands in the support file. Both are required: without the second step, Cypress fails with cy.recordHar is not a function or cy.saveHar is not a function.

Update your cypress.config.js file as follows:

const { defineConfig } = require('cypress');
const { install } = require('@neuralegion/cypress-har-generator');

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on) {
      install(on);
    }
  }
});

✴ setupNodeEvents can be defined in either the e2e or component configuration

✴ Before Cypress 10.0.0, the plugin is installed in the cypress/plugins/index.js file instead (for details see the migration guide):

const { install } = require('@neuralegion/cypress-har-generator');

module.exports = on => {
  install(on);
};

⚠ Please note that the setupNodeEvents does not support multiple on event listeners without overwriting previously defined listeners. To work around this issue, you can either call the install function at the end of the setupNodeEvents function, or use the deprecated ensureBrowserFlags as follows:

const { defineConfig } = require('cypress');
const {
  install,
  ensureBrowserFlags
} = require('@neuralegion/cypress-har-generator');

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on) {
      install(on);
      on('before:browser:launch', (browser = {}, launchOptions) => {
        ensureBrowserFlags(browser, launchOptions);
        return launchOptions;
      });
    }
  }
});

For more information, see this GitHub issue.

Add the following line to your support file, which is cypress/support/e2e.js by default (cypress/support/e2e.ts for TypeScript projects):

import '@neuralegion/cypress-har-generator/commands';

✴ Make sure the line is in the file that Cypress actually loads, which is the one set by the supportFile option. Before Cypress 10.0.0, the default support file is cypress/support/index.js, and Cypress 10.0.0 and later no longer load it. With CommonJS, use require('@neuralegion/cypress-har-generator/commands'); instead.

The import also adds the types of the commands, so TypeScript knows cy.recordHar, cy.saveHar and cy.disposeOfHar without any further configuration.

To generate a HAR file, you'll need to include the following code in your test file(s):

describe('my tests', () => {
  before(() => {
    // start recording
    cy.recordHar();
  });

  after(() => {
    // save the HAR file
    cy.saveHar();
  });
});

By default, the plugin will save the generated HAR file to the root of your project with a file name that includes the current spec's name (e.g. {specName}.har).

You can also specify a different destination folder for the generated HAR file by setting the hars_folder field in the expose object in your Cypress config file (Cypress 15.10 and later):

{
  "expose": {
    "hars_folder": "cypress/hars"
  }
}

Alternatively, you can pass the hars_folder variable in the CLI using the --expose option:

$ cypress run --browser chrome --expose hars_folder=cypress/hars

On Cypress versions before 16, the plugin also reads hars_folder from the env object, the --env option, or the CYPRESS_hars_folder environment variable when it is not exposed, unless allowCypressEnv is set to false. Cypress 16 removes Cypress.env(), so use expose there.

⚠ Notice: hars_folder was previously named hars_folders. The old name is still supported and used when hars_folder is not set, but it is deprecated and may be removed in a future major release. Please rename it in your configuration. Likewise, the CYPRESS_HARS_FOLDERS environment variable is deprecated; use CYPRESS_hars_folder instead.

Finally, to start running your tests, use the following command:

$ cypress run --browser chrome

🚧 Currently, only Chrome family browsers are supported. But this plugin also works with Electron, you just need to set the remote-debugging-port option when you launch Cypress as follows:

$ ELECTRON_EXTRA_LAUNCH_ARGS=--remote-debugging-port=9222 cypress run --browser electron

Please refer to the Electron documentation and the Cypress documentation for more information on how to properly configure this switch.

The plugin provides two main commands for work with HTTP Archive (HAR) files in your Cypress tests: recordHar and saveHar.

Starts recording network logs. All network requests made during the browser session will be recorded.

Here's an example of how to use the recordHar command:

cy.recordHar();

⚠ The maximum size of a single resource that can be preserved is 10MB. If you need to receive a larger response body, you should adjust the maxResourceBufferSize and maxTotalBufferSize accordingly:

cy.recordHar({
  maxTotalBufferSize: 1024 ** 3,
  maxResourceBufferSize: 100 * 1024 ** 2
});

However, note that the resource buffer size cannot be greater than 256MB due to the limit for WebSocket connections in Chrome.

You can set the content boolean flag to false to skip loading content field in the HAR.

cy.recordHar({ content: false });

To include only requests on specific hosts, you can pass an array of patterns specifying a list of hosts using the includeHosts for which to record requests:

cy.recordHar({ includeHosts: [/.*\.execute-api\.eu-west-1\.amazonaws\.com/] });

To exclude some requests, you can pass an array of patterns specifying a list of paths using the excludePaths to be excluded from the logs:

cy.recordHar({ excludePaths: [/^\/login/, /logout$/] });

You can also pass an array of MIME types for which to record requests:

cy.recordHar({ includeMimes: ['application/json'] });

This will record only requests with a MIME type of application/json.

To exclude requests based on their status code, you can use the minStatusCodeToInclude field.

For example, to only include requests that have a status code of 400 or greater, you can pass the minStatusCodeToInclude option as follows:

cy.recordHar({ minStatusCodeToInclude: 400 });

✴ As of version 6, this option will be removed. Use excludeStatusCodes instead.

Alternatively, you can have more granular control over the requests to exclude by passing an array of status codes you want to exclude from the recorded HAR file.

cy.recordHar({ excludeStatusCodes: [200, 201, 204] });

⚠ Please note that both options minStatusCodeToInclude and excludeStatusCodes are mutually exclusive.

By default, when you use recordHar command, it will include the blob requests in the recorded HAR file. However, those requests only make sense when they are used on the same page they were created. To exclude the blob requests from the recorded HAR file, set the includeBlobs to false as follows:

cy.recordHar({ includeBlobs: false });

✴ As of version 6, this flag will be disabled by default.

You can specify the filter option as a path to a module that exports a function (it can be sync or async) to filter out unwanted entries from the HAR. The function should take an Entry object as a parameter and return a boolean indicating whether the entry should be included in the final HAR or not.

Here's an example of how to use the filter option:

cy.recordHar({ filter: '../support/include-password.ts' });

And here's an example of what the include-password.ts filter module might look like:

import { Entry } from 'har-format';

export default async (entry: Entry) => {
  try {
    return /\"password":/.test(entry.request.postData.text ?? '');
  } catch {
    return false;
  }
};

In this example, the filter function will only exclude entries in the HAR where the request body contains a JSON object with a password field.

You can also modify the entries before saving the HAR by using the transform option. This option should be set to a path to a module that exports a function, similar to the filter option, to change the Entry object as desired.

cy.recordHar({ transform: '../support/remove-sensitive-data.ts' });

Here's a simple example of what the remove-sensitive-data.ts module might look like:

import { Entry } from 'har-format';

const PASSWORD_REGEXP = /("password":\s*")\w+("\s*)/;

export default async (entry: Entry) => {
  try {
    // Remove sensitive information from the request body
    if (entry.request.postData?.text) {
      entry.request.postData.text = entry.request.postData.text.replace(
        PASSWORD_REGEXP,
        '$1***$2'
      );
    }

    return entry;
  } catch {
    return entry;
  }
};

The function should take an Entry object as a parameter and return the modified.

In this example, the transform function will replace any occurrences of password with *** in the request body of each entry.

✴ The plugin also supports files with .js, .mjs and .cjs extensions.

By default, the path is relative to the spec folder. But by providing a rootDir it will look for the module in the provided directory:

cy.recordHar({
  filter: 'cypress/support/include-password.ts',
  rootDir: Cypress.config('projectRoot')
});

Stops recording and saves all requests that have occurred since recordHar was run to a HAR file. By default, the file is saved to the root of the project with a file name that includes the current spec's name (e.g. {specName}.har).

cy.saveHar();

You can pass a file name to change the default naming behavior.

cy.saveHar({ fileName: 'example.com.har' });

You can customize a destination folder overriding any previous settings:

cy.saveHar({ outDir: './hars' });

You can also pass the waitForIdle option to wait for all pending requests to complete before saving the HAR file:

cy.saveHar({ waitForIdle: true });

This option is false by default. When set to true, the plugin will monitor the count of pending requests and wait for it to reach zero before proceeding with saving the HAR file. This ensures that all responses have been received and the data in the file is complete and accurate.

Additionally, you can pass the maxWaitDuration option to specify the maximum time to wait for the pending requests to complete:

cy.saveHar({ waitForIdle: true, maxWaitDuration: 20000 });

The maxWaitDuration option is set to 5000 milliseconds by default, meaning it will wait for 5 seconds until all pending requests have completed.

You can also pass the minIdleDuration option to specify the minimum duration in milliseconds to wait for the network idle during the maxWaitDuration time. The network is idle if there are no pending requests during this time.

cy.saveHar({ waitForIdle: true, minIdleDuration: 1000 });

The minIdleDuration option is set to 100 milliseconds by default.

Stops the ongoing recording of network requests and disposes of the recorded logs, which will be not saved to a HAR file.

You may use this command if you have started recording network logs with recordHar command, but you decide to refuse to save the recorded logs to a HAR file. Here's an example of how you might use this command to dispose of the HAR:

describe('my tests', () => {
  beforeEach(() => {
    // start recording
    cy.recordHar();
  });

  afterEach(function () {
    const { state } = this.currentTest;
    if (state === 'passed') {
      // decide not to save the recorded logs
      cy.disposeOfHar();
    }
  });
});

To generate a HAR file during your tests, you'll need to include the recordHar and saveHar commands in your test file(s). Here's an example of how you might use these commands in a test:

describe('my tests', () => {
  before(() => {
    // start recording
    cy.recordHar();
  });

  after(() => {
    // save the HAR file
    cy.saveHar();
  });
});

You can also generate a HAR file only for Chrome browser sessions, if it is not interactive run, and only if the test has failed:

describe('my tests', () => {
  beforeEach(() => {
    const isInteractive = Cypress.config('isInteractive');
    const isChrome = Cypress.browser.name === 'chrome';
    if (!isInteractive && isChrome) {
      cy.recordHar();
    }
  });

  afterEach(function () {
    const { state } = this.currentTest;
    const isInteractive = Cypress.config('isInteractive');
    const isChrome = Cypress.browser.name === 'chrome';
    if (!isInteractive && isChrome && state !== 'passed') {
      cy.saveHar();
    }
  });
});

If you're using Cypress version 6.2.0 or higher, you can set up hooks in a single step, eliminating the need to define them in each spec file. To do this, you need to call enableExperimentalLifecycle in addition to install as shown below:

const { defineConfig } = require('cypress');
const {
  install,
  enableExperimentalLifecycle
} = require('@neuralegion/cypress-har-generator');

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      install(on);
      enableExperimentalLifecycle(on, config);
    }
  }
});

⚠ Please note, to utilize this experimental mechanism for setting up lifecycle, you must either disable the interactive mode or enable the "experimentalInteractiveRunEvents" feature. For more details, see the documentation: https://docs.cypress.io/guides/references/experiments#Configuration

✴ If a run can be stopped early, for example by Cypress.stop() or a plugin such as cypress-fail-fast, Cypress skips the remaining after and afterEach hooks, so a cy.saveHar() call in them never runs. Use enableExperimentalLifecycle in that case: it saves the HAR from the Node process at the end of each spec, which happens even when the run is stopped.

Copyright © 2024 Bright Security.

This project is licensed under the MIT License - see the LICENSE file for details.