data-* not useful without looping through parent elements

[tadeusgregorian]

It would help a lot if, when checking for a data- attribute of an element, to also loop through parent html-elements. Because in most cases click events are triggered on nested elements of a UI framework.
So data-* attributes dont help a lot in this cases.

[tnolet]

@tadeusgregorian please provide a more in depth example of what it is exactly that you propose.

[ephetic]

@tnolet Right now the _dataAttribute only works if it is on the exact element you click on. Matching _dataAttributes on ancestors of an element are always ignored, thus my styled-component classes get used in the selector rather than my data-qa attribute that I can see on all of them.

I talking with @medv/finder about adding support for attributes, so right now it looks like the PR for puppeteer-recorder will be something like

--- a/src/content-scripts/EventRecorder.js
+++ b/src/content-scripts/EventRecorder.js
@@ -101,8 +101,8 @@ export default class EventRecorder {
     // for these events we cannot generate selectors, which is OK
     try {
       const optimizedMinLength = (e.target.id) ? 2 : 10 // if the target has an id, use that instead of multiple other selectors
-      const selector = this._dataAttribute && e.target.hasAttribute && e.target.hasAttribute(this._dataAttribute)
-        ? EventRecorder._formatDataSelector(e.target, this._dataAttribute)
+      const selector = this._dataAttribute
+        ? finder(e.target, {seedMinLength: 5, optimizedMinLength: optimizedMinLength, attr: (name, _value) => name === this._dataAttribute})
         : finder(e.target, {seedMinLength: 5, optimizedMinLength: optimizedMinLength})

so that the custom attributes will be used everywhere in the selector.