Installation

Install this package:

npm i cypress-plugin-xhr-toggle
# or
yarn add cypress-plugin-xhr-toggle

Import the plugin into your cypress/support/e2e.js file:

import 'cypress-plugin-xhr-toggle'
// or
require('cypress-plugin-xhr-toggle')

Usage

Open Cypress in GUI mode and see a new button. Click on it to hide all your XHR lines to de-clutter your timeline. You can set this up as default behavior by setting up hideXhr in your config:

Cypress 15+ (using expose)

import { defineConfig } from "cypress";

export default defineConfig({
  fixturesFolder: false,
  e2e: {
    setupNodeEvents(on, config) {},
  },
  expose: {
    hideXhr: true
  },
});

Cypress 10–14 (using env)

import { defineConfig } from "cypress";

export default defineConfig({
  fixturesFolder: false,
  e2e: {
    setupNodeEvents(on, config) {},
    env: {
      hideXhr: true
    }
  },
});