Skip to content

Latest commit

 

History

History
46 lines (31 loc) · 1.72 KB

README.md

File metadata and controls

46 lines (31 loc) · 1.72 KB

Kool Recorder

📝 Overview

快速生成测试用例的 chrome 插件。有别于 headless recorder，kool recorder 会记录用户鼠标的实际行为（move/down/up）从而实现还原在 canvas 的操作。


🏗️ What you can do?

  • Records clicks and type events.
  • Add waitForNavigation, setViewPort and other useful clauses.
  • Generates a Puppeteer / Playwright script.
  • Shows which events are being recorded.
  • Copy to clipboard.
  • Offers configuration options.
  • Allows data-id configuration for element selection.

Note: we only record certain events. See dom-events-to-record.js in the code-generator folder for which events. This collection will be expanded in future releases.


🔧 How to use?

  • Click the icon and hit Record.
  • Hit tab after you finish typing in an input element.
  • Click on links, inputs and other elements.
  • Wait for full page load on each navigation. The icon will switch from to to indicate it is ready for more input from you.
  • Click Pause when you want to navigate without recording anything. Hit Resume to continue recording.

🖥️ Development

  1. Open the terminal and clone the project: $ git clone https://github.com/Kujiale-Mobile/kool-recorder
  2. Access project directory and use npm to install dependencies: $ cd kool-recorder && npm i
  3. Use the build npm script to build it: $ npm run dev
  4. Open chrome and navigate to extensions page using this URL: chrome://extensions
  5. Make sure 'Developer mode' is enabled
  6. Click "Load unpacked extension" button, browse the kool-recorder/build directory and select it

🚀 Release

  1. 支持 mousemove/mousedown/mouseup 事件