Merge pull request #33 from petrogad/data-id

Addition of Data-id selection

Author: tnolet

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/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>
+                <input id="options-code-dataAttribute" type="text" v-model="options.code.dataAttribute" @change="save" placeholder="Custom data-id selector">
+                Define a data-id attribute that we'll attempt to use when selecting the elements.
+              </label>
+            </div>
+          </div>
+        </div>
         <div class="settings-block">
           <h4 class="settings-block-title">
             Code Generator settings
@@ -160,6 +173,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;
+        }
       }
     }
   }