feat: support `|>` syntax in xpath

src/content/commandPalette/App.vue

@@ -249,7 +249,7 @@ function onKeydown(event) {
   }
 
   const shortcuts = window._automaShortcuts;
-  if (shortcuts.length < 1) return;
+  if (!shortcuts || shortcuts.length < 1) return;
 
   const automaShortcut = shortcuts.every((shortcutKey) => {
     if (shortcutKey === 'mod') return ctrlKey || metaKey;

src/content/index.js

@@ -1,9 +1,10 @@
 import browser from 'webextension-polyfill';
-import findSelector from '@/lib/findSelector';
-import { toCamelCase } from '@/utils/helper';
+import cloneDeep from 'lodash.clonedeep';
 import { nanoid } from 'nanoid';
 import automa from '@business';
-import cloneDeep from 'lodash.clonedeep';
+import FindElement from '@/utils/FindElement';
+import findSelector from '@/lib/findSelector';
+import { toCamelCase, isXPath } from '@/utils/helper';
 import handleSelector from './handleSelector';
 import blocksHandler from './blocksHandler';
 import showExecutedBlock from './showExecutedBlock';
@@ -45,7 +46,13 @@ async function executeBlock(data) {
   const removeExecutedBlock = showExecutedBlock(data, data.executedBlockOnWeb);
   if (data.data?.selector?.includes('|>')) {
     const [frameSelector, selector] = data.data.selector.split(/\|>(.+)/);
-    const frameElement = document.querySelector(frameSelector);
+
+    let findBy = data?.data?.findBy;
+    if (!findBy) {
+      findBy = isXPath(frameSelector) ? 'xpath' : 'cssSelector';
+    }
+
+    const frameElement = FindElement[findBy]({ selector: frameSelector });
     const frameError = (message) => {
       const error = new Error(message);
       error.data = { selector: frameSelector };

src/utils/helper.js

@@ -1,7 +1,7 @@
 import browser from 'webextension-polyfill';
 
 export function isXPath(str) {
-  const regex = /^[(/@]/;
+  const regex = /^([(/@]|id\()/;
 
   return regex.test(str);
 }