如何禁用Cypress日志条目悬浮触发的时间机器功能？

I totally get your frustration—accidentally triggering the time machine via log hovers and spawning unwanted requests is a real pain. Here are a few reliable ways to disable this feature, depending on your Cypress version:

Method 1: Use Official Configuration Flag (Cypress 12+) #

Cypress added an experimental flag to turn off time travel entirely in newer versions. Just add this to your cypress.config.js (or .ts):

module.exports = {
  e2e: {
    experimentalDisableTimeTravel: true,
    // Keep your existing config options here
  }
};

This is the cleanest approach as it directly disables the feature at the configuration level, no hacks needed.

Method 2: CSS Override (Works for Most Versions) #

If you're on an older Cypress version where the experimental flag isn't available, inject custom CSS to hide the time machine UI and prevent hover triggers. Add this code to your cypress/support/e2e.js (or equivalent support file):

// Disable time machine hover interactions
Cypress.on('window:before:load', (win) => {
  const style = win.document.createElement('style');
  style.textContent = `
    /* Hide the time machine replay button that appears on hover */
    .command-hover-container {
      display: none !important;
    }
    /* Block hover events on log entries that trigger time travel */
    .command-wrapper {
      pointer-events: none !important;
    }
    /* Optional: Re-enable click events to expand log details if you need them */
    .command-wrapper .command-name, .command-wrapper .command-message {
      pointer-events: auto !important;
    }
  `;
  win.document.head.appendChild(style);
});

This hides the time machine controls and stops hover events from triggering the snapshot replay, while optionally keeping log entries clickable for expanding details.

Method 3: Override Cypress's Snapshot Retrieval #

For a more direct approach, you can override the internal method that Cypress uses to fetch snapshots for time travel. Add this to your support file:

// Disable time travel by nullifying snapshot retrieval
Cypress.on('test:after:run', () => {
  const runner = window.Cypress?.runner;
  if (runner && runner.getSnapshot) {
    runner.getSnapshot = () => null;
  }
});

This ensures no snapshots are fetched when hovering logs, effectively disabling the time machine feature.

Pick the method that best fits your Cypress version—method 1 is ideal if you're on 12+, otherwise method 2 is a safe bet that won't break other functionality.

内容的提问来源于stack exchange，提问作者alfredopacino