chore: rename to headless recorder (#103)

README.md

@@ -1,17 +1,19 @@
-# Puppeteer Recorder
+# Headless Recorder (previously Puppeteer Recorder)
 
 [![Build Status](https://travis-ci.org/checkly/puppeteer-recorder.svg?branch=develop)](https://travis-ci.org/checkly/puppeteer-recorder)
 
 #### Gold sponsor
-[<img src="chrome-store/checkly-logo.png?raw=true" alt="Checkly" width="300">](https://checklyhq.com?utm_source=github&utm_medium=sponsor-logo-github&utm_campaign=puppeteer-recorder)
+[<img src="chrome-store/checkly-logo.png?raw=true" alt="Checkly" width="300">](https://checklyhq.com?utm_source=github&utm_medium=sponsor-logo-github&utm_campaign=headless-recorder)
 
 ![](src/images/recorder.png)
 
-⭐️ We just published an update on the glorious future of Puppeteer Recorder, [check out this pinned issue](https://github.com/checkly/puppeteer-recorder/issues/83) ⭐️ 
+⭐️ Puppeteer Recorder is now **Headless Recorder** and supports Playwright! ⭐️   
 
-Puppeteer recorder is a Chrome extension that records your browser interactions and generates a
-[Puppeteer](https://github.com/GoogleChrome/puppeteer) script. Install it from the [Chrome Webstore](https://chrome.google.com/webstore/detail/puppeteer-recorder/djeegiggegleadkkbgopoonhjimgehda).
-This project is pretty fresh, but does the following already:
+Headless recorder is a Chrome extension that records your browser interactions and generates a
+[Puppeteer](http://pptr.dev/) or [Playwright](https://playwright.dev/) script. Install it from the [Chrome Webstore](https://chrome.google.com/webstore/detail/puppeteer-recorder/djeegiggegleadkkbgopoonhjimgehda).
+Don't forget to check out our sister project [theheadless.dev](https://theheadless.dev/), the open source knowledge base for Puppeteer and Playwright.
+
+This project does the following already:
 
 - Records clicks and type events.
 - Add waitForNavigation, setViewPort and other useful clauses.
@@ -30,20 +32,21 @@ This project is pretty fresh, but does the following already:
 - Click links, inputs and other elements.
 - Wait for full page load on each navigation. The icon will switch from ![](src/images/icon_rec.png) to ![](src/images/icon_wait.png).
 - Click Pause when you want to navigate without recording anything. Hit Resume to continue recording.
+
 ## Background
 
-Writing Puppeteer scripts for scraping, testing and monitoring can be tricky. A recorder / code generator can be helpful,
+Writing Puppeteer or Playwright 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](#user-content-credits--disclaimer)
 below) but adds extensibility, configurability and a smoother UI.
 
 ## Development
 
-1. Run: `git clone https://github.com/checkly/puppeteer-recorder.git`
-2. Build the project: `cd puppeteer-recorder && npm i && npm run dev`
+1. Run: `git clone https://github.com/checkly/headless-recorder.git`
+2. Build the project: `cd headless-recorder && npm i && npm run dev`
 2. Navigate to chrome://extensions
 3. Make sure 'Developer mode' is checked
 4. Click Load unpacked extension...
-5. Browse to puppeteer-recorder/build and click Select
+5. Browse to headless-recorder/build and click Select
 
 ## Cutting a Release
 
@@ -60,8 +63,9 @@ gren release --override --data-source=milestones --milestone-match="{{tag_name}}
 
 ## Credits & disclaimer
 
-Puppeteer recorder is the spiritual successor & love child of segment.io's
+Headless recorder is the spiritual successor & love child of segment.io's
 [Daydream](https://github.com/segmentio/daydream) and [ui recorder](https://github.com/yguan/ui-recorder).
+Headless Recorder was previously named "Puppeteer Recorder".
 
 ## License
 Apache 2

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "puppeteer-recorder",
+  "name": "headless-recorder",
   "version": "0.8.0",
-  "description": "A Chrome extension for recording browser interaction and generating Puppeteer scripts",
+  "description": "A Chrome extension for recording browser interaction and generating Puppeteer & Playwright scripts",
   "main": "index.js",
   "scripts": {
     "dev": "NODE_ENV=development DEBUG=puppeteer-recorder:* webpack --watch",
@@ -15,7 +15,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/checkly/puppeteer-recorder"
+    "url": "https://github.com/checkly/headless-recorder"
   },
   "keywords": [
     "puppeteer",
@@ -25,9 +25,9 @@
   "author": "Tim Nolet",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/checkly/puppeteer-recorder/issues"
+    "url": "https://github.com/checkly/headless-recorder/issues"
   },
-  "homepage": "https://github.com/checkly/puppeteer-recorder#readme",
+  "homepage": "https://github.com/checkly/headless-recorder#readme",
   "dependencies": {
     "@medv/finder": "^1.1.2",
     "events": "^3.0.0",

src/background/index.js

@@ -70,7 +70,7 @@ class RecordingController {
 
       chrome.contextMenus.create({
         id: this._menuId,
-        title: 'Puppeteer Recorder',
+        title: 'Headless Recorder',
         contexts: ['all']
       })
 

src/content-scripts/UIController.js

@@ -25,7 +25,7 @@ class UIController extends EventEmitter {
     console.debug('UIController:show')
     if (!this._overlay) {
       this._overlay = document.createElement('div')
-      this._overlay.className = 'pptrRecorderOverlay'
+      this._overlay.className = 'headlessRecorderOverlay'
       this._overlay.style.position = 'fixed'
       this._overlay.style.top = '0px'
       this._overlay.style.left = '0px'
@@ -35,7 +35,7 @@ class UIController extends EventEmitter {
 
       if (this._showSelector) {
         this._selector = document.createElement('div')
-        this._selector.className = 'pptrRecorderOutline'
+        this._selector.className = 'headlessRecorderOutline'
         this._selector.style.position = 'fixed'
         this._selector.style.border = BORDER_THICKNESS + 'px solid rgba(69,200,241,0.8)'
         this._selector.style.borderRadius = '3px'

src/content-scripts/__tests__/UIController.spec.js

@@ -30,15 +30,15 @@ it('Shows and hides the selector', () => {
   const uic = new UIController()
 
   uic.showSelector()
-  let overlay = document.querySelector('.pptrRecorderOverlay')
-  let outline = document.querySelector('.pptrRecorderOutline')
+  let overlay = document.querySelector('.headlessRecorderOverlay')
+  let outline = document.querySelector('.headlessRecorderOutline')
 
   expect(overlay).toBeDefined()
   expect(outline).toBeDefined()
 
   uic.hideSelector()
-  overlay = document.querySelector('.pptrRecorderOverlay')
-  outline = document.querySelector('.pptrRecorderOutline')
+  overlay = document.querySelector('.headlessRecorderOverlay')
+  outline = document.querySelector('.headlessRecorderOutline')
 
   expect(overlay).toBeNull()
   expect(outline).toBeNull()

src/manifest.json

@@ -1,8 +1,8 @@
 {
-  "name": "Puppeteer Recorder",
+  "name": "Headless Recorder",
   "version": "0.8.0",
   "manifest_version": 2,
-  "description": "A Chrome extension for recording browser interaction and generating Puppeteer scripts",
+  "description": "A Chrome extension for recording browser interaction and generating Puppeteer & Playwright scripts",
   "permissions": [
     "storage",
     "webNavigation",
@@ -17,7 +17,7 @@
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
   "browser_action": {
     "default_icon": "images/icon-black.png",
-    "default_title": "Puppeteer Recorder",
+    "default_title": "Headless Recorder",
     "default_popup": "index.html"
   },
   "commands": {

src/options/components/App.vue

@@ -2,7 +2,7 @@
   <div class="options">
     <div class="container">
       <div class="header">
-        Puppeteer Recorder Options
+        Headless Recorder Options
         <small class="saving-badge text-muted" v-show="saving">
           Saving...
         </small>

src/options/components/__tests__/__snapshots__/App.spec.js.snap

@@ -11,7 +11,7 @@ exports[`App.vue it has the correct pristine / empty state 1`] = `
       class="header"
     >
       
-      Puppeteer Recorder Options
+      Headless Recorder Options
       
       <small
         class="saving-badge text-muted"

src/options/template.html

@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset='utf-8'>
-  <title>Option for Puppeteer Recorder</title>
+  <title>Option for Headless Recorder</title>
 </head>
 <body>
 <div id='root'></div>

src/popup/components/App.vue

@@ -1,8 +1,8 @@
 <template>
-  <div id="puppeteer-recorder" class="recorder">
+  <div id="headless-recorder" class="recorder">
     <div class="header">
       <a href="#" @click="goHome">
-        Puppeteer recorder <span class="text-muted"><small>{{version}}</small></span>
+        Headless recorder <span class="text-muted"><small>{{version}}</small></span>
       </a>
       <div class="left">
         <div class="recording-badge" v-show="isRecording">

src/popup/components/HelpTab.vue

@@ -20,7 +20,7 @@
         <li>Take screenshot: Ctrl+Shift+A</li>
         <li>Take clipped screenshot: Ctrl+Shift+M</li>
       </ul>
-      <p>For more help and examples, <a href="https://checklyhq.com/puppeteer-recorder" target="_blank">go to the help docs</a></p>
+      <p>For more help and examples, <a href="https://checklyhq.com/headless-recorder" target="_blank">go to the help docs</a></p>
       <h4>Replaying</h4>
       <p>Install <a href="https://github.com/GoogleChrome/puppeteer">Puppeteer</a> or <a href="https://playwright.dev/">Playwright</a> on your machine. Copy and paste the code
       into a file and run as a standard node program</p>

src/popup/components/RecordingTab.vue

@@ -6,7 +6,7 @@
         <h3>No recorded events yet</h3>
         <p class="text-muted">Click record to begin</p>
         <div class="nag-cta" v-show="!isRecording">
-          <a href="https://github.com/checkly/puppeteer-recorder/issues/83" target="_blank">⚡️Updates on the roadmap of Puppeteer Recorder →</a>
+          <a href="https://checklyhq.com/headless-recorder" target="_blank">Puppeteer Recorder is now <strong>Headless Recorder</strong> and supports Playwright →</a>
         </div>
       </div>
       <div class="events" v-show="isRecording">
@@ -109,6 +109,7 @@
       }
     }
     .nag-cta {
+      margin-bottom: $spacer;
       a {
         color: $pink;
         font-size: 80%;

src/popup/components/__tests__/__snapshots__/App.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`App.vue it has the correct pristine / empty state 1`] = `
 <div
   class="recorder"
-  id="puppeteer-recorder"
+  id="headless-recorder"
 >
   <div
     class="header"
@@ -12,7 +12,7 @@ exports[`App.vue it has the correct pristine / empty state 1`] = `
       href="#"
     >
       
-      Puppeteer recorder 
+      Headless recorder 
       <span
         class="text-muted"
       >

src/popup/components/__tests__/__snapshots__/RecordingTab.spec.js.snap

@@ -30,10 +30,14 @@ exports[`RecordingTab.vue it has the correct pristine / empty state 1`] = `
         class="nag-cta"
       >
         <a
-          href="https://github.com/checkly/puppeteer-recorder/issues/83"
+          href="https://checklyhq.com/headless-recorder"
           target="_blank"
         >
-          ⚡️Updates on the roadmap of Puppeteer Recorder →
+          Puppeteer Recorder is now 
+          <strong>
+            Headless Recorder
+          </strong>
+           and supports Playwright →
         </a>
       </div>
     </div>
@@ -88,10 +92,14 @@ exports[`RecordingTab.vue it has the correct recording DOM events state 1`] = `
         style="display: none;"
       >
         <a
-          href="https://github.com/checkly/puppeteer-recorder/issues/83"
+          href="https://checklyhq.com/headless-recorder"
           target="_blank"
         >
-          ⚡️Updates on the roadmap of Puppeteer Recorder →
+          Puppeteer Recorder is now 
+          <strong>
+            Headless Recorder
+          </strong>
+           and supports Playwright →
         </a>
       </div>
     </div>
@@ -175,10 +183,14 @@ exports[`RecordingTab.vue it has the correct recording Puppeteer custom events s
         style="display: none;"
       >
         <a
-          href="https://github.com/checkly/puppeteer-recorder/issues/83"
+          href="https://checklyhq.com/headless-recorder"
           target="_blank"
         >
-          ⚡️Updates on the roadmap of Puppeteer Recorder →
+          Puppeteer Recorder is now 
+          <strong>
+            Headless Recorder
+          </strong>
+           and supports Playwright →
         </a>
       </div>
     </div>
@@ -316,10 +328,14 @@ exports[`RecordingTab.vue it has the correct waiting for events state 1`] = `
         style="display: none;"
       >
         <a
-          href="https://github.com/checkly/puppeteer-recorder/issues/83"
+          href="https://checklyhq.com/headless-recorder"
           target="_blank"
         >
-          ⚡️Updates on the roadmap of Puppeteer Recorder →
+          Puppeteer Recorder is now 
+          <strong>
+            Headless Recorder
+          </strong>
+           and supports Playwright →
         </a>
       </div>
     </div>