i18n-dashboard 0.7.0 → 0.9.0

package/README.md

@@ -66,6 +66,8 @@
 - **CORS auto-detection** — multiple app URLs per project; all are checked for CORS on `/locale/[lang].json`
 - **Global loading overlay** — a full-page loading screen prevents interaction before data is ready, including on direct page load (F5) for any route
 - **Dark mode** — system preference + manual toggle
+- **Cypress E2E test suite** — full test coverage across all pages (auth, dashboard, projects, translations, languages, users, review, settings); CI-ready with GitHub Actions
+- **GitHub Actions CI** — E2E tests run automatically on every push to `develop` and `main`; Cypress screenshots uploaded as artifacts on failure
 
 ---
 
@@ -723,6 +725,7 @@ npx i18n-dashboard sync
 | [@vitalets/google-translate-api](https://github.com/vitalets/google-translate-api) | 9.x | Google Translate (free tier) |
 | [Commander.js](https://github.com/tj/commander.js) | 13.x | CLI |
 | [bcryptjs](https://github.com/dcodeIO/bcrypt.js) | 2.x | Password hashing |
+| [Cypress](https://www.cypress.io/) | 13.x | E2E test suite |
 
 ---
 

package/composables/useKeys.ts

@@ -114,11 +114,26 @@ export function useKeys(options: {
     return Array.isArray(v) ? v[0] : v
   })
 
-  const { data: keyData, pending: detailPending, refresh: detailRefresh } = useAsyncData(
-    `key-${keyId.value ?? 'none'}`,
-    () => keyId.value ? keyService.getKey(keyId.value) : Promise.resolve(null),
-    { watch: [keyId] },
-  )
+  const keyData = ref<Awaited<ReturnType<typeof keyService.getKey>> | null>(null)
+  const detailPending = ref(false)
+
+  async function detailRefresh() {
+    const id = keyId.value
+    if (!id) { keyData.value = null; return }
+    detailPending.value = true
+    try {
+      keyData.value = await keyService.getKey(id)
+    }
+    catch {
+      keyData.value = null
+    }
+    finally {
+      detailPending.value = false
+    }
+  }
+
+  onMounted(detailRefresh)
+  watch(keyId, (id) => { if (id) detailRefresh() })
 
   const savingLang = ref<string | null>(null)
   async function saveTranslation(langCode: string, value: string): Promise<void> {

package/composables/useLanguages.ts

@@ -38,11 +38,24 @@ export function useLanguages() {
 
   // ── Project languages (API) ──────────────────────────────────────────────
 
-  const { data, pending, refresh } = useAsyncData<LanguageItem[]>(
-    'project-languages',
-    () => languageService.getLanguages(currentProject.value?.id),
-    { watch: [() => currentProject.value?.id], default: () => [] },
-  )
+  const data = ref<LanguageItem[]>([])
+  const pending = ref(false)
+
+  async function refresh() {
+    pending.value = true
+    try {
+      data.value = await languageService.getLanguages(currentProject.value?.id)
+    }
+    catch {
+      data.value = []
+    }
+    finally {
+      pending.value = false
+    }
+  }
+
+  onMounted(refresh)
+  watch(() => currentProject.value?.id, (id) => { if (id) refresh() })
 
   const projectLanguages = computed(() => data.value ?? [])
 

package/composables/useProfile.ts

@@ -12,13 +12,26 @@ export function useProfile(userId?: MaybeRefOrGetter<number | string>) {
   const targetId = computed(() => userId ? toValue(userId) : null)
   const period = ref<ProfilePeriod>('all')
 
-  const { data: profile, pending, refresh } = useAsyncData(
-    () => targetId.value ? `user-profile-${targetId.value}-${period.value}` : `user-profile-${period.value}`,
-    () => targetId.value
-      ? profileService.getUserProfile(targetId.value, period.value)
-      : profileService.getProfile(period.value),
-    { watch: [targetId, period], server: false },
-  )
+  const profile = ref<any>(null)
+  const pending = ref(false)
+
+  async function refresh() {
+    pending.value = true
+    try {
+      profile.value = targetId.value
+        ? await profileService.getUserProfile(targetId.value, period.value)
+        : await profileService.getProfile(period.value)
+    }
+    catch {
+      profile.value = null
+    }
+    finally {
+      pending.value = false
+    }
+  }
+
+  onMounted(refresh)
+  watch([targetId, period], refresh)
 
   // ── Own account editing (current logged-in user) ─────────────────────────
 

package/composables/useSettings.ts

@@ -5,11 +5,23 @@ export function useSettings() {
   const toast = useToast()
   const { t } = useT()
 
-  const { data, pending, refresh } = useAsyncData(
-    'settings',
-    () => settingsService.getSettings(),
-    { default: () => ({} as Record<string, string>) },
-  )
+  const data = ref<Record<string, string>>({})
+  const pending = ref(false)
+
+  async function refresh() {
+    pending.value = true
+    try {
+      data.value = await settingsService.getSettings()
+    }
+    catch {
+      data.value = {}
+    }
+    finally {
+      pending.value = false
+    }
+  }
+
+  onMounted(refresh)
 
   const settings = computed(() => data.value ?? {})
 

package/composables/useUsers.ts

@@ -11,11 +11,26 @@ export function useUsers(scope: 'project' | 'global' = 'project') {
     scope === 'global' ? {} : { project_id: currentProject.value?.id },
   )
 
-  const { data, pending, refresh } = useAsyncData(
-    scope === 'global' ? 'users-global' : 'users',
-    () => userService.getUsers(usersQuery.value),
-    { watch: [usersQuery], default: () => [] },
-  )
+  const data = ref<any[]>([])
+  const pending = ref(false)
+
+  async function refresh() {
+    pending.value = true
+    try {
+      data.value = await userService.getUsers(usersQuery.value)
+    }
+    catch {
+      data.value = []
+    }
+    finally {
+      pending.value = false
+    }
+  }
+
+  onMounted(refresh)
+  watch(usersQuery, (q) => {
+    if (scope === 'global' || q.project_id) refresh()
+  })
 
   const users = computed(() => data.value ?? [])
 

package/layouts/default.vue

@@ -9,7 +9,7 @@
   <div class="min-h-screen bg-gray-50 dark:bg-gray-950 flex">
 
     <!-- ── Sidebar ─────────────────────────────────────────────────────────── -->
-    <aside class="w-56 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col shrink-0">
+    <aside data-cy="main-sidebar" class="w-56 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col shrink-0">
 
       <!-- Logo -->
       <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-800">
@@ -89,6 +89,7 @@
             <NuxtLink
               v-for="project in userProjects"
               :key="project.id"
+              :data-cy="'sidebar-project-' + project.id"
               :to="`/projects/${project.id}`"
               class="w-full flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm transition-colors text-left"
               :class="'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'"
@@ -115,6 +116,7 @@
       <div v-if="isSuperAdmin" class="p-2 border-t border-gray-200 dark:border-gray-800">
         <p class="text-xs text-gray-400 font-medium px-2 mb-1.5 uppercase tracking-wide">{{ t('nav.administration', 'Administration') }}</p>
         <NuxtLink
+          data-cy="sidebar-all-users-link"
           to="/users"
           class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors"
           :class="isActive('/users')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "i18n-dashboard",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "A web dashboard to manage vue-i18n translation keys with database persistence",
   "type": "module",
   "bin": {
@@ -15,7 +15,9 @@
     "start:detach": "node bin/cli.mjs start --detach",
     "stop": "node bin/cli.mjs stop",
     "init": "node bin/cli.mjs init",
-    "sync": "node bin/cli.mjs sync"
+    "sync": "node bin/cli.mjs sync",
+    "cy:open": "cypress open",
+    "cy:run": "cypress run"
   },
   "dependencies": {
     "@nuxt/ui": "^3.3.7",
@@ -84,6 +86,7 @@
   "license": "MIT",
   "devDependencies": {
     "@iconify-json/heroicons": "^1.2.3",
-    "@types/node": "^25.3.5"
+    "@types/node": "^25.3.5",
+    "cypress": "^15.12.0"
   }
 }

package/pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-6">
+  <div data-cy="dashboard-page" class="p-6">
     <DashboardWidgetGrid />
   </div>
 </template>

package/pages/login.vue

@@ -6,7 +6,7 @@
           <UIcon name="i-heroicons-language" class="text-white text-lg" />
         </div>
         <div>
-          <h1 class="text-lg font-bold text-gray-900 dark:text-white">i18n Dashboard</h1>
+          <h1 data-cy="login-title" class="text-lg font-bold text-gray-900 dark:text-white">i18n Dashboard</h1>
           <p class="text-xs text-gray-400">{{ t('login.title', 'Log in') }}</p>
         </div>
       </div>
@@ -21,6 +21,7 @@
           class="w-full"
           autocomplete="email"
           autofocus
+          data-cy="login-email"
         />
       </UFormField>
 
@@ -31,15 +32,16 @@
           placeholder="••••••••"
           class="w-full"
           autocomplete="current-password"
+          data-cy="login-password"
         />
       </UFormField>
 
-      <p v-if="error" class="text-sm text-red-500 bg-red-50 dark:bg-red-900/20 rounded-lg px-3 py-2">
+      <p v-if="error" data-cy="login-error" class="text-sm text-red-500 bg-red-50 dark:bg-red-900/20 rounded-lg px-3 py-2">
         <UIcon name="i-heroicons-exclamation-circle" class="inline mr-1" />
         {{ error }}
       </p>
 
-      <UButton type="submit" block :loading="loading" class="mt-2">
+      <UButton type="submit" block :loading="loading" class="mt-2" data-cy="login-submit">
         {{ t('login.submit', 'Sign in') }}
       </UButton>
     </form>

package/pages/projects/[id]/languages.vue

@@ -2,10 +2,10 @@
   <div class="p-6">
     <div class="flex items-center justify-between mb-6">
       <div>
-        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ t('languages.title', 'Languages') }}</h1>
+        <h1 data-cy="languages-title" class="text-2xl font-bold text-gray-900 dark:text-white">{{ t('languages.title', 'Languages') }}</h1>
         <p class="text-gray-500 dark:text-gray-400 mt-0.5 text-sm">{{ t('languages.subtitle', 'Manage project languages') }}</p>
       </div>
-      <UButton icon="i-heroicons-plus" @click="showAdd = true">{{ t('languages.add', 'Add a language') }}</UButton>
+      <UButton data-cy="languages-add-btn" icon="i-heroicons-plus" @click="showAdd = true">{{ t('languages.add', 'Add a language') }}</UButton>
     </div>
 
     <!-- Skeleton -->
@@ -28,6 +28,7 @@
       <UCard
           v-for="lang in languages"
           :key="lang.code"
+          :data-cy="'language-card-' + lang.code"
           class="relative"
       >
         <div class="flex items-start justify-between">
@@ -42,7 +43,7 @@
           </div>
 
           <div class="flex items-center gap-2">
-            <UBadge v-if="lang.is_default" color="primary" size="xs">{{ t('languages.default_badge', 'Default') }}</UBadge>
+            <UBadge v-if="lang.is_default" :data-cy="'lang-default-badge-' + lang.code" color="primary" size="xs">{{ t('languages.default_badge', 'Default') }}</UBadge>
             <UDropdownMenu :items="getLangActions(lang)">
               <UButton color="neutral" icon="i-heroicons-ellipsis-vertical" size="xs" variant="ghost"/>
             </UDropdownMenu>
@@ -52,7 +53,7 @@
         <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-800">
           <div class="flex items-center justify-between text-sm">
             <span class="text-gray-500">{{ t('languages.coverage', 'Coverage') }}</span>
-            <span class="font-medium text-gray-700 dark:text-gray-300">
+            <span :data-cy="'lang-coverage-' + lang.code" class="font-medium text-gray-700 dark:text-gray-300">
               {{ getCoverage(lang.code) }}%
             </span>
           </div>
@@ -98,11 +99,12 @@
     </div>
 
     <!-- Add Language modal -->
-    <UModal v-model:open="showAdd" :title="t('languages.add_modal_title', 'Add a language')">
+    <UModal data-cy="add-language-modal" v-model:open="showAdd" :title="t('languages.add_modal_title', 'Add a language')">
       <template #body>
         <div class="space-y-4">
           <UFormField :label="t('languages.language_label', 'Language')" required>
             <UInput
+              data-cy="lang-search-input"
               v-model="langSearch"
               :placeholder="t('onboarding.languages_search', 'Search for a language...')"
               icon="i-heroicons-magnifying-glass"
@@ -164,7 +166,7 @@
       </template>
       <template #footer>
         <div class="flex justify-end gap-3">
-          <UButton color="neutral" variant="ghost" @click="showAdd = false">{{ t('common.cancel', 'Cancel') }}</UButton>
+          <UButton data-cy="add-language-cancel-btn" color="neutral" variant="ghost" @click="showAdd = false">{{ t('common.cancel', 'Cancel') }}</UButton>
           <UButton :loading="adding" :disabled="!newLang.code" @click="addLanguage">{{ t('languages.add', 'Add') }}</UButton>
         </div>
       </template>

package/pages/projects/[id]/review.vue

@@ -2,7 +2,7 @@
   <div class="p-6">
     <div class="flex items-center justify-between mb-6">
       <div>
-        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ t('review.title', 'Review queue') }}</h1>
+        <h1 data-cy="review-title" class="text-2xl font-bold text-gray-900 dark:text-white">{{ t('review.title', 'Review queue') }}</h1>
         <p class="text-gray-500 dark:text-gray-400 mt-0.5 text-sm">
           {{ reviewItems.length }} {{ t('review.pending_count', 'translation') }}{{ reviewItems.length > 1 ? t('review.pending_count_plural', 's') : '' }} {{ t('review.pending_label', 'pending review') }}
         </p>
@@ -23,7 +23,7 @@
     </div>
 
     <!-- Empty -->
-    <div v-else-if="!reviewItems.length" class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 py-16 text-center">
+    <div v-else-if="!reviewItems.length" data-cy="review-empty-state" class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 py-16 text-center">
       <UIcon name="i-heroicons-check-badge" class="text-5xl text-green-400 mb-3" />
       <p class="text-gray-600 dark:text-gray-400 font-medium">{{ t('review.empty_title', 'No translations pending') }}</p>
       <p class="text-gray-400 text-sm mt-1">{{ t('review.empty_hint', 'All reviewed translations have already been approved.') }}</p>
@@ -34,6 +34,7 @@
       <div
         v-for="item in reviewItems"
         :key="item.id"
+        :data-cy="'review-item-' + item.id"
         class="bg-white dark:bg-gray-900 rounded-xl border border-blue-200 dark:border-blue-800/60 overflow-hidden"
       >
         <div class="flex items-start gap-4 p-4">
@@ -70,6 +71,7 @@
               />
             </UTooltip>
             <UButton
+              data-cy="mark-reviewed-btn"
               icon="i-heroicons-check"
               color="success"
               size="sm"
@@ -95,7 +97,7 @@ const { t } = useT()
 const hasAccess = computed(() =>
   currentProject.value ? canApprove(currentProject.value.id) : false,
 )
-watch(hasAccess, (ok) => { if (!ok) navigateTo('/') }, { immediate: true })
+watch(hasAccess, (ok) => { if (import.meta.client && !ok) navigateTo('/') }, { immediate: true })
 
 const {
   reviewItems,

package/pages/projects/[id]/settings.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="p-6">
     <div class="mb-6">
-      <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ t('settings.title', 'Settings') }}</h1>
+      <h1 data-cy="settings-title" class="text-2xl font-bold text-gray-900 dark:text-white">{{ t('settings.title', 'Settings') }}</h1>
       <p class="text-gray-500 dark:text-gray-400 mt-1">{{ t('settings.subtitle', 'Global dashboard configuration') }}</p>
     </div>
 
@@ -87,6 +87,7 @@
               :label="t('settings.scan_exclude', 'Folders excluded from scan')"
           >
             <UInput
+                data-cy="settings-scan-exclude"
                 v-model="form.scan_exclude"
                 class="w-full"
                 placeholder="node_modules,dist,.nuxt,.output"
@@ -227,6 +228,7 @@
               <p class="text-xs text-gray-400">{{ t('settings.export_all_languages_hint', 'A single JSON file with all languages') }}</p>
             </div>
             <UButton
+                data-cy="settings-export-all-btn"
                 color="neutral"
                 icon="i-heroicons-arrow-down-tray"
                 size="sm"
@@ -251,6 +253,7 @@
                 <UBadge v-if="lang.is_default" color="primary" size="xs" variant="soft">{{ t('languages.default_badge', 'Default') }}</UBadge>
               </div>
               <UButton
+                  :data-cy="'export-lang-btn-' + lang.code"
                   color="neutral"
                   icon="i-heroicons-arrow-down-tray"
                   size="xs"
@@ -339,7 +342,7 @@
 
       <!-- Save button -->
       <div class="flex justify-end">
-        <UButton :loading="saving || savingProject" icon="i-heroicons-check" @click="onSave">
+        <UButton data-cy="settings-save-btn" :loading="saving || savingProject" icon="i-heroicons-check" @click="onSave">
           {{ t('settings.save', 'Save') }}
         </UButton>
       </div>
@@ -417,7 +420,8 @@
     }
   }, { immediate: true })
 
-  const apiAddress = document.location.origin
+  const reqUrl = useRequestURL()
+  const apiAddress = reqUrl.origin
 
   const apiExamples = computed(() => [
     { label: t('settings.api_example_english', 'English translations'), url: `${apiAddress}/locale/en.json` },

package/pages/projects/[id]/translations/[keyId].vue

@@ -44,10 +44,10 @@
 
     <!-- Header -->
     <div class="flex items-start gap-3">
-      <UButton icon="i-heroicons-arrow-left" color="neutral" variant="ghost" size="xs" :to="`/projects/${projectId}/translations`" class="mt-0.5 shrink-0" />
+      <UButton data-cy="key-back-link" icon="i-heroicons-arrow-left" color="neutral" variant="ghost" size="xs" :to="`/projects/${projectId}/translations`" class="mt-0.5 shrink-0" />
       <div class="flex-1 min-w-0">
         <div class="flex items-center gap-2 flex-wrap">
-          <h1 class="text-lg font-mono font-bold text-gray-900 dark:text-white break-all">{{ keyData.key }}</h1>
+          <h1 data-cy="key-title" class="text-lg font-mono font-bold text-gray-900 dark:text-white break-all">{{ keyData.key }}</h1>
           <UBadge v-if="keyData.is_unused" color="warning" variant="subtle" size="xs">
             <UIcon name="i-heroicons-exclamation-triangle" class="mr-1" />
             {{ t('status.unused', 'Unused') }}
@@ -76,7 +76,7 @@
                 <UBadge v-if="lang.is_default" color="primary" variant="soft" size="xs">{{ t('languages.default_badge', 'Default') }}</UBadge>
               </div>
               <div class="flex items-center gap-1">
-                <UBadge :color="statusColor(lang.code)" variant="soft" size="xs">{{ statusLabel(lang.code) }}</UBadge>
+                <UBadge :data-cy="'translation-status-' + lang.code" :color="statusColor(lang.code)" variant="soft" size="xs">{{ statusLabel(lang.code) }}</UBadge>
                 <UTooltip :text="sourceText ? `${t('translations.translate_to', 'Translate to')} ${findLanguage(lang.code)?.nativeName || lang.name}` : t('translations.no_source', 'No source available')">
                   <UButton
                     icon="i-heroicons-sparkles"
@@ -111,6 +111,7 @@
               <!-- Single textarea -->
               <div v-else :ref="el => activeTextareaWrapper = el as HTMLElement">
                 <UTextarea
+                  :data-cy="'translation-textarea-' + lang.code"
                   v-model="editValue"
                   :rows="3"
                   autofocus
@@ -167,10 +168,10 @@
 
               <!-- Actions row -->
               <div class="flex items-center gap-2 mt-2 flex-wrap">
-                <UButton size="xs" :loading="saving === lang.code" @click="saveTranslation(lang.code)">
+                <UButton :data-cy="'save-translation-btn-' + lang.code" size="xs" :loading="saving === lang.code" @click="saveTranslation(lang.code)">
                   {{ t('translations.save', 'Save') }}
                 </UButton>
-                <UButton size="xs" color="neutral" variant="ghost" @click="editingLang = null">
+                <UButton :data-cy="'cancel-translation-btn-' + lang.code" size="xs" color="neutral" variant="ghost" @click="editingLang = null">
                   {{ t('translations.cancel', 'Cancel') }}
                 </UButton>
                 <div class="ml-auto flex items-center gap-1.5">
@@ -194,6 +195,7 @@
               <!-- Plural display -->
               <div
                 v-if="getTranslationValue(lang.code) && getPluralForms(lang.code).length > 1"
+                :data-cy="'translation-value-' + lang.code"
                 class="cursor-pointer group"
                 @click="startEdit(lang)"
               >
@@ -216,11 +218,13 @@
               <!-- Single value display -->
               <p
                 v-else-if="getTranslationValue(lang.code)"
+                :data-cy="'translation-value-' + lang.code"
                 class="text-sm text-gray-700 dark:text-gray-300 leading-relaxed cursor-pointer hover:text-primary-600 dark:hover:text-primary-400 whitespace-pre-wrap px-2 py-1.5 rounded hover:bg-gray-50 dark:hover:bg-gray-800/60 transition-colors"
                 @click="startEdit(lang)"
               >{{ getTranslationValue(lang.code) }}</p>
               <button
                 v-else
+                :data-cy="'translation-value-' + lang.code"
                 class="text-sm text-gray-400 italic hover:text-primary-500 transition-colors px-2 py-1.5"
                 @click="startEdit(lang)"
               >
@@ -294,7 +298,7 @@
             </div>
           </template>
           <template v-else>
-            <p v-if="keyData.description" class="text-sm text-gray-700 dark:text-gray-300 cursor-pointer hover:text-primary-500 transition-colors" @click="startEditDescription">
+            <p data-cy="key-description" v-if="keyData.description" class="text-sm text-gray-700 dark:text-gray-300 cursor-pointer hover:text-primary-500 transition-colors" @click="startEditDescription">
               {{ keyData.description }}
             </p>
             <button v-else class="text-sm text-gray-400 italic hover:text-primary-500 transition-colors" @click="startEditDescription">
@@ -329,12 +333,12 @@
           <template #header>
             <div class="flex items-center gap-2">
               <UIcon name="i-heroicons-code-bracket" class="text-gray-400 shrink-0" />
-              <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">
+              <p data-cy="history-section" class="text-xs font-semibold text-gray-400 uppercase tracking-wide">
                 {{ keyData.usages.length }} {{ keyData.usages.length > 1 ? t('translations.references_plural', 'references') : t('translations.references', 'reference') }}
               </p>
             </div>
           </template>
-          <div class="space-y-3">
+          <div data-cy="key-usages" class="space-y-3">
             <div v-for="(usage, i) in keyData.usages" :key="i" class="text-xs">
               <p class="font-mono text-gray-600 dark:text-gray-400 truncate" :title="usage.file_path">{{ usage.file_path }}</p>
               <div class="flex items-center gap-2 text-gray-400 mt-0.5">

package/pages/projects/[id]/translations/index.vue

@@ -3,7 +3,7 @@
     <!-- Header -->
     <div class="flex items-center justify-between mb-5">
       <div>
-        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ t('translations.title', 'Translations') }}</h1>
+        <h1 data-cy="translations-title" class="text-2xl font-bold text-gray-900 dark:text-white">{{ t('translations.title', 'Translations') }}</h1>
         <p class="text-gray-500 dark:text-gray-400 mt-0.5 text-sm">
           {{ data?.total || 0 }} {{ t('translations.keys_count', 'keys') }} · {{ languages.length }} {{ t('translations.langs_count', 'languages') }}
         </p>
@@ -19,7 +19,7 @@
         >
           {{ t('translations.translate_all', 'Translate all') }} ({{ filterLangs[0].toUpperCase() }})
         </UButton>
-        <UButton v-if="userCanManage" icon="i-heroicons-plus" @click="showAddKey = true">{{ t('translations.add_key', 'New key') }}</UButton>
+        <UButton v-if="userCanManage" data-cy="new-key-btn" icon="i-heroicons-plus" @click="showAddKey = true">{{ t('translations.add_key', 'New key') }}</UButton>
       </div>
     </div>
 
@@ -27,6 +27,7 @@
     <div class="flex flex-col sm:flex-row gap-3 mb-5">
       <UInput
         v-model="search"
+        data-cy="translations-search"
         icon="i-heroicons-magnifying-glass"
         :placeholder="t('translations.search', 'Search for a key...')"
         class="flex-1"
@@ -48,6 +49,7 @@
       <button
         v-for="s in statusFilters"
         :key="s.value"
+        :data-cy="'filter-' + s.value"
         class="flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium border transition-all"
         :class="filterStatus === s.value
           ? `${s.activeBg} ${s.activeText} border-transparent`
@@ -129,7 +131,7 @@
     <!-- Add Key modal -->
     <UModal v-model:open="showAddKey" :title="t('translations.add_key_title', 'New translation key')">
       <template #body>
-        <div class="space-y-4">
+        <div data-cy="add-key-modal" class="space-y-4">
           <UFormField :label="t('translations.key_label', 'Key')" :hint="t('translations.key_hint', 'Example: home.title or nav.menu.about')" required>
             <UInput v-model="newKey.key" placeholder="home.title" class="w-full font-mono" />
           </UFormField>
@@ -140,8 +142,8 @@
       </template>
       <template #footer>
         <div class="flex justify-end gap-3">
-          <UButton variant="ghost" color="neutral" @click="showAddKey = false">{{ t('common.cancel', 'Cancel') }}</UButton>
-          <UButton :loading="addingKey" @click="addKey">{{ t('common.create', 'Create') }}</UButton>
+          <UButton data-cy="add-key-cancel-btn" variant="ghost" color="neutral" @click="showAddKey = false">{{ t('common.cancel', 'Cancel') }}</UButton>
+          <UButton data-cy="add-key-create-btn" :loading="addingKey" @click="addKey">{{ t('common.create', 'Create') }}</UButton>
         </div>
       </template>
     </UModal>