feat: add selector type in element exist block

src/components/newtab/workflow/edit/EditElementExists.vue

@@ -1,5 +1,15 @@
 <template>
   <div>
+    <ui-select
+      :model-value="data.findBy || 'cssSelector'"
+      :placeholder="t('workflow.blocks.base.findElement.placeholder')"
+      class="w-full mb-2"
+      @change="updateData({ findBy: $event })"
+    >
+      <option v-for="type in selectorTypes" :key="type" :value="type">
+        {{ t(`workflow.blocks.base.findElement.options.${type}`) }}
+      </option>
+    </ui-select>
     <ui-input
       :model-value="data.selector"
       :label="t('workflow.blocks.element-exists.selector')"
@@ -27,6 +37,7 @@
   </div>
 </template>
 <script setup>
+import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
@@ -39,7 +50,15 @@ const emit = defineEmits(['update:data']);
 
 const { t } = useI18n();
 
+const selectorTypes = ['cssSelector', 'xpath'];
+
 function updateData(value) {
   emit('update:data', { ...props.data, ...value });
 }
+
+onMounted(() => {
+  if (!props.data.findBy) {
+    updateData({ findBy: 'cssSelector' });
+  }
+});
 </script>

src/content/blocks-handler/handler-element-exists.js

@@ -1,21 +1,32 @@
-function elementExists({ data }) {
+import { handleElement } from '../helper';
+
+function elementExists(block) {
   return new Promise((resolve) => {
     let trying = 0;
 
+    const isExists = () => {
+      try {
+        const element = handleElement(block, { returnElement: true });
+
+        return !!element;
+      } catch (error) {
+        console.error(error);
+        return false;
+      }
+    };
+
     function checkElement() {
-      if (trying >= (data.tryCount || 1)) {
+      if (trying > (block.data.tryCount || 1)) {
         resolve(false);
         return;
       }
 
-      const element = document.querySelector(data.selector);
-
-      if (element) {
+      if (isExists()) {
         resolve(true);
       } else {
         trying += 1;
 
-        setTimeout(checkElement, data.timeout || 500);
+        setTimeout(checkElement, block.data.timeout || 500);
       }
     }
 

src/content/blocks-handler/handler-javascript-code.js

@@ -40,8 +40,23 @@ function javascriptCode(block) {
   sessionStorage.setItem(`automa--${block.id}`, JSON.stringify(block.refData));
   const automaScript = getAutomaScript(block.id);
 
-  return new Promise((resolve) => {
-    const isScriptExists = document.getElementById('automa-custom-js');
+  return new Promise((resolve, reject) => {
+    let documentCtx = document;
+
+    if (block.frameSelector) {
+      const iframeCtx = document.querySelector(
+        block.frameSelector
+      )?.contentDocument;
+
+      if (!iframeCtx) {
+        reject(new Error('iframe-not-found'));
+        return;
+      }
+
+      documentCtx = iframeCtx;
+    }
+
+    const isScriptExists = documentCtx.getElementById('automa-custom-js');
     const scriptAttr = `block--${block.id}`;
 
     if (isScriptExists && isScriptExists.hasAttribute(scriptAttr)) {
@@ -62,7 +77,7 @@ function javascriptCode(block) {
             item.src,
             'background'
           );
-          const scriptEl = document.createElement('script');
+          const scriptEl = documentCtx.createElement('script');
 
           scriptEl.type = 'text/javascript';
           scriptEl.innerHTML = script;
@@ -74,14 +89,14 @@ function javascriptCode(block) {
         } catch (error) {
           return null;
         }
-      }, []) || [];
+      }) || [];
 
     Promise.allSettled(promisePreloadScripts).then((result) => {
       const preloadScripts = result.reduce((acc, { status, value }) => {
         if (status !== 'fulfilled' || !value) return acc;
 
         acc.push(value);
-        document.body.appendChild(value.script);
+        documentCtx.body.appendChild(value.script);
 
         return acc;
       }, []);
@@ -112,7 +127,7 @@ function javascriptCode(block) {
         timeout = setTimeout(cleanUp, block.data.timeout);
       });
 
-      document.body.appendChild(script);
+      documentCtx.body.appendChild(script);
 
       timeout = setTimeout(cleanUp, block.data.timeout);
     });

src/utils/shared.js

@@ -384,7 +384,7 @@ export const tasks = {
     data: {
       description: '',
       timeout: 20000,
-      code: 'console.log("Hello world!")',
+      code: 'console.log("Hello world!");\nautomaNextBlock()',
       preloadScripts: [],
     },
   },