Merge branch 'dev' of https://github.com/automaapp/automa into dev

src/components/content/selector/SelectorElementsDetail.vue

@@ -31,13 +31,23 @@
             >
               {{ name }}
             </p>
-            <input
-              :value="value"
+            <ui-input
+              :model-value="value"
               :placeholder="!value ? 'EMPTY' : null"
+              :data-testid="name"
+              :title="name"
               readonly
-              title="Attribute value"
-              class="bg-transparent w-full"
-            />
+              class="w-full"
+            >
+              <template #prepend>
+                <button
+                  class="absolute ml-2"
+                  @click="copySelector(name, value)"
+                >
+                  <v-remixicon name="riFileCopyLine" />
+                </button>
+              </template>
+            </ui-input>
           </div>
         </template>
       </selector-element-list>
@@ -87,10 +97,11 @@
   </ui-tab-panels>
 </template>
 <script setup>
+import { inject } from 'vue';
 import SelectorBlocks from './SelectorBlocks.vue';
 import SelectorElementList from './SelectorElementList.vue';
 
-defineProps({
+const props = defineProps({
   activeTab: {
     type: String,
     default: '',
@@ -109,4 +120,23 @@ defineProps({
   },
 });
 defineEmits(['update:activeTab', 'execute', 'highlight', 'update']);
+
+const rootElement = inject('rootElement');
+
+function copySelector(name, value) {
+  rootElement.shadowRoot
+    .querySelector(`[data-testid="${name}"] input`)
+    ?.select();
+  const type = rootElement.shadowRoot.querySelector(`select#select--1`)?.value;
+  navigator.clipboard
+    .writeText(
+      type === 'css'
+        ? `${props.selectedElements[0].tagName.toLowerCase()}[${name}="${value}"]`
+        : `//${props.selectedElements[0].tagName.toLowerCase()}[@${name}='${value}']`
+    )
+    .catch((error) => {
+      document.execCommand('copy');
+      console.error(error);
+    });
+}
 </script>

src/content/elementSelector/generateElementsSelector.js

@@ -47,9 +47,11 @@ export default function ({
       });
     }
   } else {
+    const tagName = selectedElement.tagName.toLowerCase();
+    const candidate = findSelector(selectedElement, finderOptions);
     selector =
       selectorType === 'css'
-        ? findSelector(selectedElement, finderOptions)
+        ? `${candidate.startsWith(tagName) ? '' : tagName}${candidate}`
         : generateXPath(selectedElement);
   }