All Projects → checkly → Headless Recorder

checkly / Headless Recorder

Licence: apache-2.0
Chrome extension that records your browser interactions and generates a Playwright or Puppeteer script.

Programming Languages

javascript
184084 projects - #8 most used programming language
Vue
7211 projects
HTML
75241 projects
CSS
56736 projects

Projects that are alternatives of or similar to Headless Recorder

Singlefile
Web Extension for Firefox/Chrome/MS Edge and CLI tool to save a faithful copy of an entire web page in a single HTML file
Stars: ✭ 4,417 (-67.96%)
Mutual labels:  chrome-extension, chrome, puppeteer
Qawolf
🐺 Create browser tests 10x faster
Stars: ✭ 2,912 (-78.88%)
Mutual labels:  chrome, puppeteer, playwright
My Notes
Simple and fast note-taking in Chrome with Google Drive support.
Stars: ✭ 155 (-98.88%)
Mutual labels:  chrome-extension, chrome
React Rewind
Time Travel Debugger for React useReducer
Stars: ✭ 159 (-98.85%)
Mutual labels:  chrome-extension, chrome
Buttercup Browser Extension
🌏 Buttercup browser extension
Stars: ✭ 164 (-98.81%)
Mutual labels:  chrome-extension, chrome
Floccus
☁️ Sync your bookmarks privately across browsers
Stars: ✭ 2,630 (-80.92%)
Mutual labels:  chrome-extension, chrome
Disable Javascript
Adds the ability to disable JavaScript on specific sites.
Stars: ✭ 151 (-98.9%)
Mutual labels:  chrome-extension, chrome
Sponsorblock
Skip YouTube video sponsors (browser extension)
Stars: ✭ 3,627 (-73.69%)
Mutual labels:  chrome-extension, chrome
Notes
📔 Linux、MySQL、Nginx、PHP、Git、Shell 等笔记
Stars: ✭ 1,835 (-86.69%)
Mutual labels:  chrome-extension, chrome
Puppeteer Recorder
Record animations using puppeteer. Based on electron-recorder.
Stars: ✭ 169 (-98.77%)
Mutual labels:  chrome, puppeteer
Nim
Streamline Your Node.js Debugging Workflow with Chromium (Chrome, Edge, More) DevTools.
Stars: ✭ 168 (-98.78%)
Mutual labels:  chrome-extension, chrome
Vue Chrome Extension Boilerplate
Boilerplate for Chrome extension using Vue.js and Webpack with auto-reload enabled.
Stars: ✭ 171 (-98.76%)
Mutual labels:  chrome-extension, chrome
Rize
High-level, fluent and chainable API provided library for puppeteer.
Stars: ✭ 147 (-98.93%)
Mutual labels:  chrome, puppeteer
Awesome Chrome Extension Boilerplate
Use react + typescript + webpack to enhance your chrome extension development experience
Stars: ✭ 146 (-98.94%)
Mutual labels:  chrome-extension, chrome
Chrome Extensions Reloader
A chrome extension for reloading unpacked extensions
Stars: ✭ 154 (-98.88%)
Mutual labels:  chrome-extension, chrome
Puppeteer Sharp
Headless Chrome .NET API
Stars: ✭ 2,122 (-84.61%)
Mutual labels:  chrome, puppeteer
Replacegooglecdn
♋ 一个 Chrome 插件:将 Google CDN 替换为国内的。
Stars: ✭ 2,400 (-82.59%)
Mutual labels:  chrome-extension, chrome
Chromium Vim
Vim bindings for Google Chrome.
Stars: ✭ 2,150 (-84.4%)
Mutual labels:  chrome-extension, chrome
Synology Download Manager
An open source browser extension for adding/managing download tasks to your Synology DiskStation.
Stars: ✭ 138 (-99%)
Mutual labels:  chrome-extension, chrome
Timecat
A Magical Web Recorder & Player 🖥
Stars: ✭ 1,955 (-85.82%)
Mutual labels:  chrome-extension, chrome

Headless Recorder 1.0 - Easily generate Playwright/Puppeteer scripts while browsing | Product Hunt

Headless Recorder

Headless Recorder

Github Build Chrome Webstore Users Chrome Webstore Version

🎥 Headless recorder is a Chrome extension that records your browser interactions and generates a Playwright/Puppeteer script.


Headless recorder demo


👀 Overview

Headless recorder is a Chrome extension that records your browser interactions and generates a Playwright or Puppeteer script. Install it from the Chrome Webstore to get started!

This project builds on existing open source projects (see Credits) but adds extensibility, configurability and a smoother UI. For more information, please check our documentation.

🤔 Do you want to learn more about Puppeteer and Playwright? Check our open Headless Guides


🏗️ What you can do?

  • Records clicks and type events.
  • Add waitForNavigation, setViewPort and other useful clauses.
  • Generates a Playwright & Puppeteer script.
  • Preview CSS selectors of HTML elements.
  • Take full page and element screenshots.
  • Pause, resume and restart recording.
  • Persist latest script in your browser
  • Copy to clipboard.
  • Run generated scripts directly on Checkly
  • Flexible configuration options and dark mode support.
  • Allows data-id configuration for element selection.

Recorded Events

  • click
  • dblclick
  • change
  • keydown
  • select
  • submit
  • load
  • unload

This collection will be expanded in future releases. 💪


🔧 How to use?

  1. Click the icon and hit the red button.

  2. 👉 Hit tab after you finish typing in an input element. 👈

  3. Click on links, inputs and other elements.

  4. Wait for full page load on each navigation.

    The icon will switch from recording icon to waiting icon to indicate it is ready for more input from you.

  5. Click Pause when you want to navigate without recording anything. Hit Resume to continue recording.

⌨️ Shortcuts

  • alt + k: Toggle overlay
  • alt + shift + F: Take full page screenshot
  • alt + shift + E: Take element screenshot

🖥️ Run Locally

After cloning the project, open the terminal and navigate to project root directory.

$ npm i # install dependencies

$ npm run serve # run development mode

$ npm run test # run test cases

$ npm run lint # run and fix linter issues

$ npm run build # build and zip for production

🧩 Install Locally

  1. Open chrome and navigate to extensions page using this URL: chrome://extensions.
  2. Make sure "Developer mode" is enabled.
  3. Click "Load unpacked extension" button, browse the headless-recorder/dist directory and select it.


🚀 Release

  1. Bump version using npm version (patch, minor, major).
  2. Push changes with tags git push --tags
  3. Generate a release using gren: gren release --override --data-source=milestones --milestone-match="{{tag_name}}"

🚨 Make sure all issues associated with the new version are linked to a milestone with the name of the tag.


🙏 Credits

Headless recorder is the spiritual successor & love child of segment.io's Daydream and ui recorder.


📄 License

MIT

Checkly
Delightful Active Monitoring for Developers
From Checkly with ♥️

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].