fix: css selector generator

src/components/block/BlockGroup.vue

@@ -152,6 +152,7 @@ function handleDataChange({ detail }) {
   block.data.blocks[itemIndex].data = detail.data;
 }
 function editBlock(payload) {
+  console.log(payload);
   emitter.emit('editor:edit-block', {
     ...tasks[payload.id],
     ...payload,

src/content/elementSelector/App.vue

@@ -81,7 +81,7 @@
 <script setup>
 import { reactive, ref, watch, inject, onMounted, onBeforeUnmount } from 'vue';
 import { debounce } from '@/utils/helper';
-import { finder } from '@medv/finder';
+import findSelector from '@/lib/findSelector';
 import FindElement from '@/utils/FindElement';
 import SelectorQuery from '@/components/content/selector/SelectorQuery.vue';
 import SharedElementSelector from '@/components/content/shared/SharedElementSelector.vue';
@@ -222,7 +222,7 @@ function selectElementPath(type) {
   state.selectedElements = [getElementRect(element, true)];
   state.elSelector = selectedElement.cache.has(element)
     ? selectedElement.cache.get(element)
-    : finder(element);
+    : findSelector(element);
 }
 function onMouseup() {
   if (state.isDragging) state.isDragging = false;

src/content/elementSelector/generateElementsSelector.js

@@ -1,4 +1,4 @@
-import { finder } from '@medv/finder';
+import findSelector from '@/lib/findSelector';
 import { generateXPath } from '../utils';
 
 export default function ({
@@ -23,7 +23,7 @@ export default function ({
     const isInList = target.closest('[automa-el-list]');
 
     if (isInList) {
-      const childSelector = finder(target, {
+      const childSelector = findSelector(target, {
         root: isInList,
         idName: () => false,
       });
@@ -31,7 +31,7 @@ export default function ({
 
       selector = `${listSelector} ${childSelector}`;
     } else {
-      const parentSelector = finder(
+      const parentSelector = findSelector(
         selectedElement.parentElement,
         finderOptions
       );
@@ -49,7 +49,7 @@ export default function ({
   } else {
     selector =
       selectorType === 'css'
-        ? finder(selectedElement, finderOptions)
+        ? findSelector(selectedElement, finderOptions)
         : generateXPath(selectedElement);
   }
 

src/content/elementSelector/listSelector.js

@@ -1,4 +1,4 @@
-import { finder } from '@medv/finder';
+import findSelector from '@/lib/findSelector';
 
 /* eslint-disable  no-cond-assign */
 export function getAllSiblings(el, selector) {
@@ -96,7 +96,7 @@ export default function (target, { frameElement, onlyInList } = {}) {
   if (automaListEl) {
     if (target.hasAttribute('automa-el-list')) return [];
 
-    const childSelector = finder(target, {
+    const childSelector = findSelector(target, {
       root: automaListEl,
       idName: () => false,
     });

src/content/index.js

@@ -1,5 +1,5 @@
 import browser from 'webextension-polyfill';
-import { finder } from '@medv/finder';
+import findSelector from '@/lib/findSelector';
 import { toCamelCase } from '@/utils/helper';
 import blocksHandler from './blocksHandler';
 import showExecutedBlock from './showExecutedBlock';
@@ -171,7 +171,7 @@ function messageListener({ data, source }) {
             let $ctxElSelector = '';
 
             if (contextElement) {
-              $ctxElSelector = finder(contextElement);
+              $ctxElSelector = findSelector(contextElement);
               contextElement = null;
             }
 

src/content/services/recordWorkflow/App.vue

@@ -195,10 +195,10 @@
 </template>
 <script setup>
 import { ref, reactive, watch, onMounted, onBeforeUnmount } from 'vue';
-import { finder } from '@medv/finder';
 import browser from 'webextension-polyfill';
 import { toCamelCase } from '@/utils/helper';
 import { tasks } from '@/utils/shared';
+import findSelector from '@/lib/findSelector';
 import SharedElementSelector from '@/components/content/shared/SharedElementSelector.vue';
 import { getElementRect } from '../../utils';
 import addBlock from './addBlock';
@@ -343,7 +343,7 @@ function selectElementPath(type) {
   selectState.selectedElements = [getElementRect(element)];
   selectState.childSelector = elementsPath.cache.has(element)
     ? elementsPath.cache.get(element)
-    : finder(element);
+    : findSelector(element);
 }
 function clearSelectState() {
   if (selectState.list && selectState.listId) {

src/content/services/recordWorkflow/recordEvents.js

@@ -1,8 +1,8 @@
-import { finder } from '@medv/finder';
 import { nanoid } from 'nanoid';
 import browser from 'webextension-polyfill';
 import { debounce } from '@/utils/helper';
 import { recordPressedKey } from '@/utils/recordKeys';
+import findSelector, { finder } from '@/lib/findSelector';
 import addBlockToFlow from './addBlock';
 
 let isMainFrame = true;
@@ -13,14 +13,6 @@ const isAutomaInstance = (target) =>
 const textFieldEl = (el) =>
   ['INPUT', 'TEXTAREA'].includes(el.tagName) || el.isContentEditable;
 
-function findSelector(element) {
-  return finder(element, {
-    tagName: () => true,
-    attr: (name, value) =>
-      name === 'id' ||
-      (name.startsWith('aria') && !name.startsWith('aria-disabled') && value),
-  });
-}
 async function addBlock(detail) {
   try {
     const data = await addBlockToFlow(detail, isMainFrame);

src/lib/findSelector.js

@@ -0,0 +1,13 @@
+import { finder as finderLib } from '@medv/finder';
+
+const ariaAttrs = ['aria-label', 'aria-labelledby'];
+
+export const finder = finderLib;
+
+export default function (element, options = {}) {
+  return finder(element, {
+    tagName: () => true,
+    attr: (name, value) => name === 'id' || (ariaAttrs.includes(name) && value),
+    ...options,
+  });
+}