{"id":13393335,"url":"https://github.com/checkly/headless-recorder","last_synced_at":"2025-10-05T16:30:49.030Z","repository":{"id":37116582,"uuid":"144624857","full_name":"checkly/headless-recorder","owner":"checkly","description":"Chrome extension that records your browser interactions and generates a Playwright or Puppeteer script. ","archived":true,"fork":false,"pushed_at":"2022-12-16T13:35:36.000Z","size":12114,"stargazers_count":15074,"open_issues_count":1,"forks_count":721,"subscribers_count":184,"default_branch":"main","last_synced_at":"2025-01-22T23:41:29.144Z","etag":null,"topics":["chrome","chrome-extension","playwright","puppeteer","vue"],"latest_commit_sha":null,"homepage":"https://checklyhq.com/headless-recorder","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/checkly.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-13T19:31:11.000Z","updated_at":"2025-01-22T16:21:52.000Z","dependencies_parsed_at":"2023-01-29T14:00:18.219Z","dependency_job_id":null,"html_url":"https://github.com/checkly/headless-recorder","commit_stats":null,"previous_names":["checkly/puppeteer-recorder"],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/checkly%2Fheadless-recorder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/checkly%2Fheadless-recorder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/checkly%2Fheadless-recorder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/checkly%2Fheadless-recorder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/checkly","download_url":"https://codeload.github.com/checkly/headless-recorder/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235204471,"owners_count":18952328,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome","chrome-extension","playwright","puppeteer","vue"],"created_at":"2024-07-30T17:00:50.551Z","updated_at":"2025-10-05T16:30:43.549Z","avatar_url":"https://github.com/checkly.png","language":"JavaScript","readme":"# 🚨 Deprecated!\nAs of Dec 16th 2022, Headless Recorder is fully deprecated. No new changes, support, maintenance or new features are expected to land.\n\nFor more information and possible alternatives refer to this [issue](https://github.com/checkly/headless-recorder/issues/232).\n\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"200px\" src=\"./assets/logo.png\" alt=\"Headless Recorder\" /\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003cimg height=\"128\" src=\"https://www.checklyhq.com/images/footer-logo.svg\" align=\"right\" /\u003e\n  \u003ch1\u003eHeadless Recorder\u003c/h1\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003cimg src=\"https://github.com/checkly/headless-recorder/workflows/Lint%20\u0026%20Build%20\u0026%20Test/badge.svg?branch=main\" alt=\"Github Build\"/\u003e\n  \u003cimg src=\"https://img.shields.io/chrome-web-store/users/djeegiggegleadkkbgopoonhjimgehda?label=Chrome%20Webstore%20-%20Users\" alt=\"Chrome Webstore Users\" /\u003e\n  \u003cimg src=\"https://img.shields.io/chrome-web-store/v/djeegiggegleadkkbgopoonhjimgehda?label=Chrome%20Webstore\" alt=\"Chrome Webstore Version\" /\u003e\n\u003c/p\u003e\n\n\n\u003e 🎥 Headless recorder is a Chrome extension that records your browser interactions and generates a Playwright/Puppeteer script.\n\n\n\u003cbr\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./assets/hr.gif\" alt=\"Headless recorder demo\" /\u003e\n\u003c/p\u003e\n\u003cbr\u003e\n\n## Overview\n\nHeadless recorder is a Chrome extension that records your browser interactions and generates a [Playwright](https://playwright.dev/) or [Puppeteer](http://pptr.dev/) script. Install it from the [Chrome Webstore](https://chrome.google.com/webstore/detail/puppeteer-recorder/djeegiggegleadkkbgopoonhjimgehda) to get started!\n\nThis project builds on existing open source projects (see [Credits](#-credits)) but adds extensibility, configurability and a smoother UI. For more information, please check our [documentation](https://www.checklyhq.com/docs/headless-recorder/).\n\n\u003e 🤔 Do you want to learn more about Puppeteer and Playwright? Check our open [Headless Guides](https://www.checklyhq.com/learn/headless/)\n\n\u003cbr\u003e\n\n## What you can do?\n\n- Records clicks and type events.\n- Add waitForNavigation, setViewPort and other useful clauses.\n- Generates a Playwright \u0026 Puppeteer script.\n- Preview CSS selectors of HTML elements.\n- Take full page and element screenshots.\n- Pause, resume and restart recording.\n- Persist latest script in your browser\n- Copy to clipboard.\n- Run generated scripts directly on [Checkly](https://checklyhq.com)\n- Flexible configuration options and dark mode support.\n- Allows `data-id` configuration for element selection.\n\n#### Recorded Events\n  - `click`\n  - `dblclick`\n  - `change`\n  - `keydown`\n  - `select`\n  - `submit`\n  - `load`\n  - `unload`\n\n\u003e This collection will be expanded in future releases. 💪\n\n\u003cbr\u003e\n\n## How to use?\n\n1. Click the icon and hit the red button.\n2. 👉 Hit \u003ckbd\u003etab\u003c/kbd\u003e after you finish typing in an `input` element. 👈\n3. Click on links, inputs and other elements.\n4. Wait for full page load on each navigation.\n\n    **The icon will switch from \u003cimg width=\"24px\" height=\"24px\" src=\"./assets/rec.png\" alt=\"recording icon\"/\u003e\n    to \u003cimg width=\"24px\" height=\"24px\" src=\"./assets/wait.png\" alt=\"waiting icon\"/\u003e to indicate it is ready for more input from you.**\n\n5. Click Pause when you want to navigate without recording anything. Hit Resume to continue recording.\n\n### ⌨️ Shortcuts\n\n- `alt + k`: Toggle overlay\n- `alt + shift + F`: Take full page screenshot\n- `alt + shift + E`: Take element screenshot\n\n\u003cbr\u003e\n\n## Run Locally\n\nAfter cloning the project, open the terminal and navigate to project root directory.\n\n```bash\n$ npm i # install dependencies\n\n$ npm run serve # run development mode\n\n$ npm run test # run test cases\n\n$ npm run lint # run and fix linter issues\n\n$ npm run build # build and zip for production\n```\n\n\u003cbr\u003e\n\n## Install Locally\n\n1. Open chrome and navigate to extensions page using this URL: [`chrome://extensions`](chrome://extensions).\n1. Make sure \"**Developer mode**\" is enabled.\n1. Click \"**Load unpacked extension**\" button, browse the `headless-recorder/dist` directory and select it.\n\n![](./assets/dev-guide.png)\n\n\u003cbr\u003e\n\n## Release\n\n1. Bump version using `npm version` (patch, minor, major).\n2. Push changes with tags `git push --tags`\n3. Generate a release using **gren**: `gren release --override --data-source=milestones --milestone-match=\"{{tag_name}}\"`\n\n\u003e 🚨 Make sure all issues associated with the new version are linked to a milestone with the name of the tag.\n\n\u003cbr\u003e\n\n## Credits\n\nHeadless recorder is the spiritual successor \u0026 love child of segment.io's [Daydream](https://github.com/segmentio/daydream) and [ui recorder](https://github.com/yguan/ui-recorder).\n\n\u003cbr\u003e\n\n## License\n\n[MIT](https://github.com/checkly/headless-recorder/blob/main/LICENSE)\n\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://checklyhq.com?utm_source=github\u0026utm_medium=sponsor-logo-github\u0026utm_campaign=headless-recorder\" target=\"_blank\"\u003e\n  \u003cimg width=\"100px\" src=\"./assets/checkly-logo.png?raw=true\" alt=\"Checkly\" /\u003e\n  \u003c/a\u003e\n  \u003cbr /\u003e\n  \u003ci\u003e\u003csub\u003eDelightful Active Monitoring for Developers\u003c/sub\u003e\u003c/i\u003e\n  \u003cbr\u003e\n  \u003cb\u003e\u003csub\u003eFrom Checkly with ♥️\u003c/sub\u003e\u003c/b\u003e\n\u003cp\u003e\n\n","funding_links":[],"categories":["Opensource projects","JavaScript","Testing Tools","chrome","Automation","vue","chrome-extension"],"sub_categories":["React Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcheckly%2Fheadless-recorder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcheckly%2Fheadless-recorder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcheckly%2Fheadless-recorder/lists"}