v1.4.4

package.json

@@ -1,6 +1,6 @@
 {
   "name": "automa",
-  "version": "1.4.1",
+  "version": "1.4.4",
   "description": "An extension for automating your browser by connecting blocks",
   "license": "MIT",
   "repository": {
@@ -36,6 +36,7 @@
     "@vuex-orm/core": "^0.36.4",
     "compare-versions": "^4.1.2",
     "crypto-js": "^4.1.1",
+    "css-selector-generator": "^3.6.0",
     "dayjs": "^1.10.7",
     "defu": "^5.0.1",
     "drawflow": "^0.0.51",

src/background/workflow-engine/blocks-handler/handler-interaction-block.js

@@ -45,7 +45,10 @@ async function interactionHandler(block, { refData }) {
       frameId: this.activeTab.frameId || 0,
     });
 
-    if (block.data.saveData || block.data.getValue) {
+    if (
+      (block.data.saveData && block.name !== 'forms') ||
+      block.data.getValue
+    ) {
       const currentColumnType =
         this.columns[block.data.dataColumn]?.type || 'any';
       const insertDataToColumn = (value) => {

src/components/newtab/logs/LogsDataViewer.vue

@@ -92,6 +92,10 @@ const dataStr = computed(() => {
 });
 
 function exportData(type) {
-  dataExporter(props.log.data, { name: state.fileName, type }, true);
+  dataExporter(
+    props.log.data?.table || props.log.data,
+    { name: state.fileName, type },
+    true
+  );
 }
 </script>

src/content/element-selector/App.vue

@@ -151,7 +151,7 @@
 </template>
 <script setup>
 import { reactive, ref, watch, inject, nextTick } from 'vue';
-import { finder } from '@medv/finder';
+import { getCssSelector } from 'css-selector-generator';
 import { debounce } from '@/utils/helper';
 import AppBlocks from './AppBlocks.vue';
 import AppSelector from './AppSelector.vue';
@@ -193,7 +193,12 @@ const cardRect = reactive({
 
 /* eslint-disable  no-use-before-define */
 const getElementSelector = (element) =>
-  state.selectorType === 'css' ? finder(element) : generateXPath(element);
+  state.selectorType === 'css'
+    ? getCssSelector(element, {
+        includeTag: true,
+        blacklist: ['[focused]', /focus/],
+      })
+    : generateXPath(element);
 
 function generateXPath(element) {
   if (!element) return null;
@@ -299,27 +304,48 @@ function handleMouseMove({ clientX, clientY, target }) {
   Object.assign(hoverElementRect, getElementRect(target));
 }
 function handleClick(event) {
-  const { target, path } = event;
+  const { target, path, ctrlKey, shiftKey } = event;
 
   if (target === rootElement || state.hide || state.isExecuting) return;
 
-  event.preventDefault();
   event.stopPropagation();
+  event.preventDefault();
 
   const attributes = Array.from(target.attributes).map(({ name, value }) => ({
     name,
     value,
   }));
-  state.selectedElements = [
-    {
-      ...getElementRect(target),
-      attributes,
-      element: target,
-      highlight: false,
-    },
-  ];
-
-  state.elSelector = getElementSelector(target);
+
+  let targetElement = target;
+  const targetElementDetail = {
+    ...getElementRect(target),
+    attributes,
+    element: target,
+    highlight: false,
+  };
+
+  if ((state.selectorType === 'css' && ctrlKey) || shiftKey) {
+    let elementIndex = -1;
+    const elements = state.selectedElements.map(({ element }, index) => {
+      if (element === targetElement) {
+        elementIndex = index;
+      }
+
+      return element;
+    });
+
+    if (elementIndex === -1) {
+      targetElement = [...elements, target];
+      state.selectedElements.push(targetElementDetail);
+    } else {
+      targetElement = elements.splice(elementIndex, 1);
+      state.selectedElements.splice(elementIndex, 1);
+    }
+  } else {
+    state.selectedElements = [targetElementDetail];
+  }
+
+  state.elSelector = getElementSelector(targetElement);
 
   selectedElement.index = 0;
   selectedElement.path = path;

src/content/element-selector/index.js

@@ -64,7 +64,7 @@ function elementSelectorInstance() {
 
     const automaStyle = document.createElement('style');
     automaStyle.classList.add('automa-element-selector');
-    automaStyle.innerHTML = `.automa-element-selector { pointer-events: none } \n [automa-isDragging] { user-select: none }`;
+    automaStyle.innerHTML = `.automa-element-selector { pointer-events: none; direction: ltr } \n [automa-isDragging] { user-select: none }`;
 
     initElementSelector(rootElement);
 

src/content/services/record-workflow.js

@@ -1,4 +1,4 @@
-import { finder } from '@medv/finder';
+import { getCssSelector } from 'css-selector-generator';
 import browser from 'webextension-polyfill';
 import { debounce } from '@/utils/helper';
 
@@ -27,7 +27,7 @@ function changeListener({ target }) {
   if (execludeInput) return;
 
   let block = null;
-  const selector = finder(target);
+  const selector = getCssSelector(target);
   const isSelectEl = target.tagName === 'SELECT';
   const elementName = target.ariaLabel || target.name;
 
@@ -94,7 +94,7 @@ function keyEventListener({
 
   if (isTextField) return;
 
-  const selector = finder(target);
+  const selector = getCssSelector(target);
 
   addBlock({
     id: 'trigger-event',
@@ -125,7 +125,7 @@ function clickListener(event) {
 
   if (isTextField) return;
 
-  const selector = finder(target);
+  const selector = getCssSelector(target);
 
   if (target.tagName === 'A') {
     if (event.ctrlKey || event.metaKey) return;
@@ -167,7 +167,7 @@ function clickListener(event) {
 const scrollListener = debounce(({ target }) => {
   const isDocument = target === document;
   const element = isDocument ? document.documentElement : target;
-  const selector = isDocument ? 'html' : finder(target);
+  const selector = isDocument ? 'html' : getCssSelector(target);
 
   addBlock((recording) => {
     const lastFlow = recording.flows[recording.flows.length - 1];