Extension to embed controls to controls panel in cypress app
npm install cypress-controls-extExtension to embed controls to controls panel in cypress app
Can have event listeners and custom style
Steps:
1. install package
```
npm i --save-dev cypress-controls-ext
`
or
`
yarn add -D cypress-controls-ext
2. create control - object of type SetupControlSettings
`typescript
// 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: () => ,
// 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
};
`setupControlsExtensionWithEvent(myControl);
3. register control before tests
You can do that
- by in support/index.js file : constrol will be Cypress.on('test:before:run:async'...setupControlsExtension(myControl)
- by - this doesn't use event
typescript
...
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;
}
`,
...
``