cypress-pause/src/modify-runner-ui.js

A Cypress plugin that adds a Pause & Resume button to the test runner UI.

export default function modifyCypressRunnerUI() {
    const observer = new MutationObserver(() => {
      const controls = document.querySelector('div.controls');
      if (!controls) {
        console.log('⏳ Waiting for Cypress Test Runner controls...');
        return;
      }
  
      // Stop observing once we find the right place
      observer.disconnect();
  
      console.log('✅ Injecting Pause & Resume Button inside div.controls...');
  
      // Prevent duplicate button injection
      if (document.getElementById('cypress-pause-button')) {
        console.log('⚠️ Pause button already exists, skipping injection.');
        return;
      }
  
      // Create a new span container for the button
      const buttonContainer = document.createElement('span');
      buttonContainer.style.marginLeft = '10px';
  
      // Create the button
      const pauseButton = document.createElement('button');
      pauseButton.id = 'cypress-pause-button';
      pauseButton.innerText = 'Pause';
      pauseButton.style.cssText = `
        background-color: red;
        color: white;
        padding: 8px 16px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
      `;
  
      let isPaused = false;
      pauseButton.addEventListener('click', () => {
        if (isPaused) {
          Cypress.emit('resume:tests'); // Resume tests
          pauseButton.innerText = 'Pause';
          pauseButton.style.backgroundColor = 'red';
        } else {
          Cypress.emit('pause:tests'); // Pause tests
          pauseButton.innerText = 'Resume';
          pauseButton.style.backgroundColor = 'green';
        }
        isPaused = !isPaused;
      });
  
      // Append the button inside the new span, then add it to div.controls
      buttonContainer.appendChild(pauseButton);
      controls.appendChild(buttonContainer);
  
      console.log('✅ Pause & Resume button injected successfully!');
    });
  
    // Watch for UI changes
    observer.observe(document.body, { childList: true, subtree: true });
  }
  
  // Run only when Cypress is detected
  if (window.Cypress) {
    console.log('👀 Watching for Cypress UI changes...');
    modifyCypressRunnerUI();
  }