cypress-controls-ext

cypress-controls-ext

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-ext
  

  or

  yarn add -D cypress-controls-ext
  

• create control - object of type SetupControlSettings

  // simple example, you can put that into separate file
  export const myControl: SetupControlSettings = {
     // 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
     // add correct selector (with parentId)
     addEventListener: (parentId: string, listener: ListenerSetting) => {
       listener('#' + parentId + ' #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: string) => `
        #${parentId} {
          background-color: '#569532'};
        }
  
        #${parentId} .turn-mock-on-label {
          padding: 5px;
          color: red;
          font-weight: bold;
        }
      `,
  ...
  

Examples

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

Todo

• predefined controls (checkbox, dropdown)