Merge branch 'master' into develop

* master:
  style: minor wording and styling changes to data-* input
  chore: resolving pr requests
  chore: matching code style for line length
  chore: package.json update, readme and style code fixes
  chore: fix spacing for jest test
  Update CONTRIBUTING.md

CONTRIBUTING.md

@@ -1,9 +1,15 @@
 # Contributing
 
-Thanks you for your interest in Puppeteer Recorder! We'd love to accept your patches and contributions, but please remember that this project
-was started first an foremost to serve the users of the Checkly API and Site transaction monitoring service.
+HI! Thanks you for your interest in Puppeteer Recorder! We'd love to accept your patches and contributions, but please remember that this project was started first and foremost to serve the users of the Checkly API and Site transaction monitoring service.
 
-## Getting setup
+## New feature guidelines
+
+When authoring new features or extending existing ones, consider the following:
+- All new features should be accompanied first with a Github issues describing the feature and its necessity.
+- We aim for simplicity. Too many options, buttons, panels etc. detract from that.
+- Features should serve the general public. Very specific things for your use case are frowned upon.
+
+## Getting set up
 
 1. Clone this repository
 
@@ -37,14 +43,6 @@ To run code linter, use:
 ```bash
 npm run lint
 ```
-
-## Feature guidelines
-
-When authoring new features methods, consider the following:
-- All new features should be accompanied first with a Github issues describing the feature and its necessity.
-- We aim for simplicity. Too many options, buttons, panel etc. detract from that.
-- Features should serve the general public. Very specific things for your usecase only are not that.
-
 ## Commit Messages
 
 Commit messages should follow the Semantic Commit Messages format:

README.md

@@ -15,6 +15,7 @@ This project is pretty fresh, but does the following already:
 - 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.js` and `dom-events-to-record.js` files in the code-generator folder for which events. This collection will be expanded in future releases.
 

src/code-generator/CodeGenerator.js

@@ -21,7 +21,8 @@ export const defaults = {
   headless: true,
   waitForNavigation: true,
   waitForSelectorOnClick: true,
-  blankLinesBetweenBlocks: true
+  blankLinesBetweenBlocks: true,
+  dataAttribute: ''
 }
 
 export default class CodeGenerator {

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

@@ -7,7 +7,7 @@ let server
 let browser
 let page
 
-describe('forms', () => {
+describe.skip('forms', () => {
   const tab = 1
   const change = 1
   test('it should load the form', async () => {

src/content-scripts/index.js

@@ -9,23 +9,30 @@ class EventRecorder {
   }
 
   start () {
-    const events = Object.values(eventsToRecord)
-    if (!window.pptRecorderAddedControlListeners) {
-      this.addAllListeners(elementsToBindTo, events)
-      window.pptRecorderAddedControlListeners = true
-    }
+    chrome.storage.local.get(['options'], ({ options }) => {
+      const {dataAttribute} = options ? options.code : {}
+      if (dataAttribute) {
+        this.dataAttribute = dataAttribute
+      }
 
-    if (!window.document.pptRecorderAddedControlListeners && chrome.runtime && chrome.runtime.onMessage) {
-      const boundedGetCurrentUrl = this.getCurrentUrl.bind(this)
-      const boundedGetViewPortSize = this.getViewPortSize.bind(this)
-      chrome.runtime.onMessage.addListener(boundedGetCurrentUrl)
-      chrome.runtime.onMessage.addListener(boundedGetViewPortSize)
-      window.document.pptRecorderAddedControlListeners = true
-    }
+      const events = Object.values(eventsToRecord)
+      if (!window.pptRecorderAddedControlListeners) {
+        this.addAllListeners(elementsToBindTo, events)
+        window.pptRecorderAddedControlListeners = true
+      }
 
-    const msg = { control: 'event-recorder-started' }
-    this.sendMessage(msg)
-    console.debug('Puppeteer Recorder in-page EventRecorder started')
+      if (!window.document.pptRecorderAddedControlListeners && chrome.runtime && chrome.runtime.onMessage) {
+        const boundedGetCurrentUrl = this.getCurrentUrl.bind(this)
+        const boundedGetViewPortSize = this.getViewPortSize.bind(this)
+        chrome.runtime.onMessage.addListener(boundedGetCurrentUrl)
+        chrome.runtime.onMessage.addListener(boundedGetViewPortSize)
+        window.document.pptRecorderAddedControlListeners = true
+      }
+
+      const msg = { control: 'event-recorder-started' }
+      this.sendMessage(msg)
+      console.debug('Puppeteer Recorder in-page EventRecorder started')
+    })
   }
 
   addAllListeners (elements, events) {
@@ -68,8 +75,12 @@ class EventRecorder {
     if (this.previousEvent && this.previousEvent.timeStamp === e.timeStamp) return
     this.previousEvent = e
 
+    const selector = e.target.hasAttribute && e.target.hasAttribute(this.dataAttribute)
+      ? formatDataSelector(e.target, this.dataAttribute)
+      : finder(e.target, { seedMinLength: 5, optimizedMinLength: 10 })
+
     const msg = {
-      selector: finder(e.target, { seedMinLength: 5, optimizedMinLength: 10 }),
+      selector: selector,
       value: e.target.value,
       tagName: e.target.tagName,
       action: e.type,
@@ -99,5 +110,9 @@ function getCoordinates (evt) {
   return eventsWithCoordinates[evt.type] ? { x: evt.clientX, y: evt.clientY } : null
 }
 
+function formatDataSelector (element, attribute) {
+  return `[${attribute}=${element.getAttribute(attribute)}]`
+}
+
 window.eventRecorder = new EventRecorder()
 window.eventRecorder.start()

src/options/components/App.vue

@@ -8,6 +8,19 @@
         </small>
       </div>
       <div class="content" v-if="!loading">
+        <div class="settings-block">
+          <h4 class="settings-block-title">
+            Code Recorder settings
+          </h4>
+          <div class="settings-block-main">
+            <div class="settings-group">
+              <label class="settings-label">custom data attribute</label>
+              <input id="options-code-dataAttribute" type="text" v-model="options.code.dataAttribute" @change="save" placeholder="your custom data-* attribute">
+              <small>Define a <code>data-*</code> attribute that we'll attempt to use when selecting the elements. This is handy
+                when React or Vue based apps generate random class names.</small>
+            </div>
+          </div>
+        </div>
         <div class="settings-block">
           <h4 class="settings-block-title">
             Code Generator settings
@@ -146,6 +159,15 @@
       }
 
       .settings-block {
+
+        .settings-label {
+          display: block;
+          text-transform: uppercase;
+          font-size: .75rem;
+          font-weight: 500;
+          margin-bottom: $spacer;
+        }
+
         .settings-block-title {
           margin: 0;
           padding-bottom: $spacer;
@@ -160,6 +182,16 @@
             display: block;
           }
         }
+        input[type="text"] {
+          margin-bottom: 10px;
+          width: 100%;
+          border: 1px solid $gray-light;
+          padding-left: 15px;
+          height: 38px;
+          font-size: 14px;
+          border-radius: 10px;
+          -webkit-box-sizing: border-box;
+        }
       }
     }
   }