Cypress recorder is a Chrome extension that records your browser interactions and generates a
Cypress-io script. Install it from the Chrome Webstore.
This project is pretty fresh, but does the following already:
- Records clicks and type events.
- Add setViewPort and other useful clauses.
- Generates a Cypress script.
- Shows which events are being recorded.
- Copy to clipboard.
- Offers configuration options.
- Allows data-id configuration for element selection.
Note: we only record clicks etc. on a handful of elements, see the
elements-to-bind-to.jsanddom-events-to-record.jsfiles in the code-generator folder for which events. This collection will be expanded in future releases.
- Click the icon and hit Record.
- Hit tab after you finish typing in an
inputelement. - Click links, inputs and other elements.
- Wait for full page load on each navigation. The icon will switch from
to 
. - Click Pause when you want to navigate without recording anything. Hit Resume to continue recording.
Writing Cypress scripts for scraping, testing and monitoring can be tricky. A recorder / code generator can be helpful, even if the code isn't perfect. This project builds on other projects (see disclaimer below) but add extensibility, configurability and a smoother UI.
- Run:
git clone https://github.com/oscartavarez/cypress-recorder.git - Build the project:
cd cypress-recorder && npm i && npm run dev - Navigate to chrome://extensions
- Make sure 'Developer mode' is checked
- Click Load unpacked extension...
- Browse to cypress-recorder/build and click Select
Cypress recorder is a slightly code customization for cypres.io base on the excelent work of Puppeteer recorder.
Apache 2