src/boot/dataCy.js

@@ -0,0 +1,11 @@
+export default {
+    mounted: function (el, binding, { ctx }) {
+        const { innerText, localName } = el;
+        const { type, attrs } = ctx;
+        const name = ctx.parent.attrs?.name ?? ctx.parent.attrs?.label ?? innerText;
+        const value = `${attrs.dataCy ?? name}_${type.name
+            .replace('Q', '')
+            .toLowerCase()}`;
+        el.setAttribute('data-cy', value);
+    },
+};

src/boot/quasar.js

@@ -3,12 +3,14 @@ import qFormMixin from './qformMixin';
 import keyShortcut from './keyShortcut';
 import useNotify from 'src/composables/useNotify.js';
 import { CanceledError } from 'axios';
+import dataCy from './dataCy';
 
 const { notify } = useNotify();
 
 export default boot(({ app }) => {
     app.mixin(qFormMixin);
     app.directive('shortcut', keyShortcut);
+    app.directive('dataCy', dataCy);
     app.config.errorHandler = (error) => {
         let message;
         const response = error.response;

src/components/common/VnAccountNumber.vue

@@ -79,5 +79,5 @@ function accountShortToStandard() {
 </script>
 
 <template>
-    <QInput @keydown="handleKeydown" ref="vnInputRef" v-model="internalValue" />
+    <QInput @keydown="handleKeydown" ref="vnInputRef" v-model="internalValue" v-data-cy />
 </template>

src/components/common/VnChangePassword.vue

@@ -64,6 +64,7 @@ defineExpose({ show: () => changePassDialog.value.show() });
                             size="xs"
                             style="flex: 0"
                             v-close-popup
+                            v-data-cy
                         />
                     </VnRow>
                 </slot>
@@ -113,6 +114,7 @@ defineExpose({ show: () => changePassDialog.value.show() });
                         flat
                         type="reset"
                         v-close-popup
+                        data-cy
                     />
                     <QBtn
                         :disabled="isLoading"
@@ -120,6 +122,7 @@ defineExpose({ show: () => changePassDialog.value.show() });
                         :label="t('globals.confirm')"
                         color="primary"
                         @click="validate"
+                        data-cy
                     />
                 </slot>
             </QCardActions>

src/components/common/VnDate.vue

@@ -2,7 +2,7 @@
 const model = defineModel({ type: [String, Number], required: true });
 </script>
 <template>
-    <QDate v-model="model" :today-btn="true" :options="$attrs.options" />
+    <QDate v-model="model" :today-btn="true" :options="$attrs.options" data-cy />
 </template>
 <style lang="scss" scoped>
 .q-date {

src/components/common/VnDms.vue

@@ -157,6 +157,7 @@ function addDefaultData(data) {
                     />
                 </VnRow>
                 <QInput
+                    v-data-cy
                     :label="t('globals.description')"
                     v-model="dms.description"
                     type="textarea"

src/components/common/VnInput.vue

@@ -132,7 +132,7 @@ const handleInsertMode = (e) => {
             :rules="mixinRules"
             :lazy-rules="true"
             hide-bottom-space
-            :data-cy="$attrs.dataCy ?? $attrs.label + '_input'"
+            v-data-cy
         >
             <template v-if="$slots.prepend" #prepend>
                 <slot name="prepend" />

src/components/common/VnInputDate.vue

@@ -108,6 +108,7 @@ const manageDate = (date) => {
             :clearable="false"
             @click="isPopupOpen = true"
             hide-bottom-space
+            v-data-cy
         >
             <template #append>
                 <QIcon
@@ -124,6 +125,7 @@ const manageDate = (date) => {
                         model = null;
                         isPopupOpen = false;
                     "
+                    v-data-cy
                 />
                 <QIcon
                     v-if="showEvent"
@@ -131,6 +133,7 @@ const manageDate = (date) => {
                     class="cursor-pointer"
                     @click="isPopupOpen = !isPopupOpen"
                     :title="t('Open date')"
+                    v-data-cy
                 />
             </template>
             <QMenu

src/components/common/VnSelect.vue

@@ -313,7 +313,7 @@ function handleKeyDown(event) {
         :input-debounce="useURL ? '300' : '0'"
         :loading="isLoading"
         @virtual-scroll="onScroll"
-        :data-cy="$attrs.dataCy ?? $attrs.label + '_select'"
+        v-data-cy
     >
         <template #append>
             <QIcon

src/components/common/vnDiscount.vue

@@ -98,6 +98,7 @@ function cancel({ cancel }) {
             {{ t('Mana') }} {{ toCurrency(props.mana) }}
         </QBanner>
         <QInput
+            v-data-cy
             v-model="scope.value"
             type="number"
             dense
@@ -117,6 +118,7 @@ function cancel({ cancel }) {
         <QCardActions class="q-px-none q-mt-sm" align="right">
             <QBtn :label="t('Cancel')" color="primary" flat @click="cancel(scope)" />
             <QBtn
+                data-cy
                 :label="t('Update')"
                 color="primary"
                 :loading="isLoading"

test/vitest/__tests__/composables/dataCy.spec.js

@@ -0,0 +1,68 @@
+// tests/dataCy.spec.js
+import { mount, shallowMount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import { Quasar, QInput, QSelect, QIcon, QBtn } from 'quasar';
+import dataCy from 'src/boot/dataCy.js';
+const mountWithQuasar = (component, options) => {
+    return mount(component, {
+        global: {
+            plugins: [Quasar],
+            stubs: {
+                vDataCy: true,
+            },
+            directives: {
+                dataCy: dataCy,
+            },
+        },
+        ...options,
+    });
+};
+
+describe('dataCy directive', () => {
+    it.only('applies data-cy attribute to QInput', () => {
+        const wrapper = mountWithQuasar(QInput, {
+            props: {
+                label: 'Test Input',
+            },
+        });
+        const input = wrapper.find('input');
+        dataCy.mounted(input.element, null, {
+            ctx: {
+                type: QInput,
+                attrs: { dataCy: 'Test Input' },
+                parent: { attrs: { label: 'Test Input' } },
+            },
+        });
+        expect(input.attributes('data-cy')).toBe('Test Input_input');
+    });
+
+    it('applies data-cy attribute to QSelect', () => {
+        const wrapper = mountWithQuasar(QSelect, {
+            props: {
+                label: 'Test Select',
+            },
+        });
+        const select = wrapper.find('.q-field__native');
+        expect(select.attributes('data-cy')).toBe('Test Select_select');
+    });
+
+    it('applies data-cy attribute to QIcon', () => {
+        const wrapper = mountWithQuasar(QIcon, {
+            props: {
+                name: 'home',
+            },
+        });
+        const icon = wrapper.find('i');
+        expect(icon.attributes('data-cy')).toBe('home_icon');
+    });
+
+    it('applies data-cy attribute to QBtn', () => {
+        const wrapper = mountWithQuasar(QBtn, {
+            props: {
+                label: 'Test Button',
+            },
+        });
+        const button = wrapper.find('button');
+        expect(button.attributes('data-cy')).toBe('Test Button_btn');
+    });
+});