cypress-cotrols-extension

cypress-controls-extension

Extension to embed controls to controls panel in cypress app

Can have event listeners and custom style

Setup

Prerequisites:

• cypress installed in project

Steps:

• install package

  npm i --save-dev cypress-controls-extension
  

  or

  yarn add -D cypress-controls-extension
  

• create control - object of type SetupControlSettings

  // simple example, you can put that into separate file
  export const myControl = {
     // uniq id to html element
     id: 'my-button',
  
     // in what modes to inject control
     mode: {
       run: false,
       open: true,
     },
  
     // html for your control
     control: () => `<button id="myBut">Button</button>`,
  
     // event listener for control
     addEventListener: (parentId: string, listener: ListenerSetting) => {
       listener('#myBut', 'click', () => {
         // will log message on #myBut click
         Cypress.log({ name: 'CLICK', message: '#myBut' });
       });
     },
     // also optional style handler could be added here
   };
  

• register control before tests

  You can do that

  • by setupControlsExtensionWithEvent(myControl); in support/index.js file : constrol will be Cypress.on('test:before:run:async'...
  • by setupControlsExtension(myControl) - this doesn't use event

Features

• You can add several controls
• You can add style handler

    {
      mode: { run: true, open: true },
      id: 'myButton',
      style: (parentId) => `
        #${parentId} {
          background-color: ${getStoredVar('MOCK') ? '#569532' : 'rgb(160,44,145)'};
        }
  
        #turnMockOnLabel {
          padding:5px;
          color: ${getStoredVar('MOCK') ? '#fff' : '#fff'};
          font-weight: bold;
        }`,
  ...
  

Examples

• Check out mock-button control
• Cypress test for using mock-button: demo.cy.ts

Todo

• predefined controls (checkbox, dropdown)