feat: e2e playwright validation

frontend/assets/css/main.css

@@ -962,10 +962,6 @@
     width: 100%;
     overflow-x: hidden;
   }
-  body {
-    -webkit-user-select: none;
-    -webkit-touch-callout: none;
-  }
 }
 
 .text-no-transform {

frontend/components/Form/Checkbox.vue

@@ -1,15 +1,15 @@
 <template>
   <div v-if="!inline" class="flex w-full items-center gap-1.5">
-    <Checkbox :id="id" v-model="value" class="size-6" />
-    <Label :for="id" class="cursor-pointer">
+    <Checkbox :id="id" v-model="value" class="size-6" :aria-label="ariaLabel || undefined" />
+    <Label v-if="label" :for="id" class="cursor-pointer">
       {{ label }}
     </Label>
   </div>
   <div v-else class="sm:grid sm:grid-cols-4 sm:items-start sm:gap-4">
     <Label :for="id" class="flex w-full cursor-pointer px-1 py-2">
       {{ label }}
     </Label>
-    <Checkbox :id="id" v-model="value" class="size-6" />
+    <Checkbox :id="id" v-model="value" class="size-6" :aria-label="ariaLabel || undefined" />
   </div>
 </template>
 
@@ -30,6 +30,10 @@
       type: String,
       default: "",
     },
+    ariaLabel: {
+      type: String,
+      default: "",
+    },
   });
 
   const value = useVModel(props, "modelValue");

frontend/components/Item/CreateModal.vue

@@ -291,7 +291,12 @@
   import BaseModal from "@/components/App/CreateModal.vue";
   import { Label } from "@/components/ui/label";
   import { Input } from "@/components/ui/input";
-  import type { EntityCreate, EntityTemplateOut, EntityTemplateSummary, EntityOut } from "~~/lib/api/types/data-contracts";
+  import type {
+    EntityCreate,
+    EntityTemplateOut,
+    EntityTemplateSummary,
+    EntityOut,
+  } from "~~/lib/api/types/data-contracts";
   import { useTagStore } from "~/stores/tags";
   import { useLocationStore } from "~~/stores/locations";
   import MdiBarcode from "~icons/mdi/barcode";
@@ -390,7 +395,11 @@
     if (et?.defaultTemplateId && et.defaultTemplate) {
       const { data, error } = await api.templates.get(et.defaultTemplateId);
       if (!error && data) {
-        selectedTemplate.value = { id: data.id, name: data.name, description: data.description } as EntityTemplateSummary;
+        selectedTemplate.value = {
+          id: data.id,
+          name: data.name,
+          description: data.description,
+        } as EntityTemplateSummary;
         templateData.value = data;
         form.quantity = data.defaultQuantity;
         if (data.defaultName) form.name = data.defaultName;
@@ -657,7 +666,7 @@
     } else {
       // Normal item creation without template
       const out: EntityCreate = {
-        parentId: form.parentId || form.location.id as string,
+        parentId: form.parentId || (form.location.id as string),
         name: form.name,
         quantity: form.quantity,
         description: form.description,

frontend/components/Location/CreateModal.vue

@@ -67,11 +67,7 @@
 
       <template v-if="showAdvanced">
         <TagSelector v-model="form.tags" :tags="tags ?? []" />
-        <FormTextArea
-          v-model="form.notes"
-          label="Notes"
-          :max-length="1000"
-        />
+        <FormTextArea v-model="form.notes" label="Notes" :max-length="1000" />
       </template>
 
       <div class="mt-4 flex flex-row-reverse">
@@ -142,8 +138,7 @@
   import { Label } from "@/components/ui/label";
   import { Input } from "@/components/ui/input";
   import BaseModal from "@/components/App/CreateModal.vue";
-  import type { EntityTypeSummary } from "~~/lib/api/types/data-contracts";
-  import type { EntitySummary } from "~~/lib/api/types/data-contracts";
+  import type { EntityTypeSummary, EntitySummary } from "~~/lib/api/types/data-contracts";
   import { AttachmentTypes } from "~~/lib/api/types/non-generated";
   import { useDialog, useDialogHotkey } from "~/components/ui/dialog-provider";
   import { useTagStore } from "~/stores/tags";

frontend/components/Location/Tree/Node.vue

@@ -55,12 +55,13 @@
 </script>
 
 <template>
-  <div>
+  <div :data-testid="`location-tree-node-${item.name}`">
     <div
       class="flex items-center gap-1 rounded p-1"
       :class="{
         'cursor-pointer hover:bg-accent hover:text-accent-foreground': hasChildren,
       }"
+      :data-testid="`location-tree-toggle-${item.name}`"
       @click="openRef = !openRef"
     >
       <div
@@ -80,7 +81,9 @@
       </div>
       <MdiMapMarker v-if="item.type === 'location'" class="size-4" />
       <MdiPackageVariant v-else class="size-4" />
-      <NuxtLink class="text-lg hover:underline" :to="link" @click.stop>{{ item.name }} </NuxtLink>
+      <NuxtLink class="text-lg hover:underline" :to="link" :data-testid="`location-tree-link-${item.name}`" @click.stop
+        >{{ item.name }}
+      </NuxtLink>
     </div>
     <div v-if="openRef" class="ml-4">
       <LocationTreeNode

frontend/components/Scanner/ARControls.vue

@@ -2,7 +2,13 @@
   <div class="pointer-events-none absolute inset-0 z-20 flex flex-col justify-between">
     <!-- Top bar -->
     <div class="pointer-events-auto flex items-center gap-3 bg-background/60 p-3 backdrop-blur-sm">
-      <Button variant="ghost" size="icon" :aria-label="t('scanner_ar.back')" :title="t('scanner_ar.back')" @click="$emit('back')">
+      <Button
+        variant="ghost"
+        size="icon"
+        :aria-label="t('scanner_ar.back')"
+        :title="t('scanner_ar.back')"
+        @click="$emit('back')"
+      >
         <MdiArrowLeft class="size-5" />
       </Button>
       <span class="text-sm font-semibold text-foreground">{{ t("scanner_ar.title") }}</span>

frontend/components/Scanner/AROverlayCard.vue

@@ -53,7 +53,8 @@
       <span class="truncate text-sm font-semibold text-foreground">{{ entity.location.name }}</span>
       <div class="flex flex-wrap items-center gap-1.5">
         <span v-if="entity.location.children.length > 0" class="text-xs text-muted-foreground">
-          {{ entity.location.children.length }} {{ t("scanner_ar.children", { count: entity.location.children.length }) }}
+          {{ entity.location.children.length }}
+          {{ t("scanner_ar.children", { count: entity.location.children.length }) }}
         </span>
       </div>
       <span v-if="entity.location.totalPrice" class="text-xs text-muted-foreground">

frontend/components/Template/Card.vue

@@ -83,15 +83,22 @@
 </script>
 
 <template>
-  <Card>
+  <Card :data-testid="`template-card-${template.name}`">
     <CardHeader>
       <CardTitle class="truncate">{{ template.name }}</CardTitle>
       <CardDescription v-if="template.description" class="line-clamp-2">
         {{ template.description }}
       </CardDescription>
     </CardHeader>
     <CardFooter class="flex justify-end gap-1">
-      <Button size="icon" variant="outline" class="size-8" as-child :title="$t('components.template.card.edit')">
+      <Button
+        size="icon"
+        variant="outline"
+        class="size-8"
+        as-child
+        :title="$t('components.template.card.edit')"
+        data-testid="template-card-edit"
+      >
         <NuxtLink :to="`/template/${template.id}`">
           <MdiPencil class="size-4" />
         </NuxtLink>
@@ -101,6 +108,7 @@
         variant="outline"
         class="size-8"
         :title="$t('components.template.card.duplicate')"
+        data-testid="template-card-duplicate"
         @click="handleDuplicate"
       >
         <MdiContentCopy class="size-4" />
@@ -110,6 +118,7 @@
         variant="destructive"
         class="size-8"
         :title="$t('components.template.card.delete')"
+        data-testid="template-card-delete"
         @click="handleDelete"
       >
         <MdiDelete class="size-4" />

frontend/components/Template/CreateModal.vue

@@ -90,7 +90,7 @@
       <p v-else class="text-sm text-muted-foreground">{{ $t("components.template.form.no_custom_fields") }}</p>
 
       <div class="mt-4 flex justify-end">
-        <Button type="submit" :loading="loading">{{ $t("global.create") }}</Button>
+        <Button data-testid="template-create-submit" type="submit" :loading="loading">{{ $t("global.create") }}</Button>
       </div>
     </form>
   </BaseModal>

frontend/components/Template/Selector.vue

@@ -4,6 +4,7 @@
     <PopoverTrigger as-child>
       <Button
         :id="id"
+        data-testid="template-selector-compact"
         variant="outline"
         size="icon"
         role="combobox"

frontend/components/global/StatCard/StatCard.vue

@@ -1,9 +1,9 @@
 <template>
-  <Card class="flex flex-col items-center bg-secondary p-3 text-secondary-foreground shadow">
+  <Card data-testid="stat-card" class="flex flex-col items-center bg-secondary p-3 text-secondary-foreground shadow">
     <CardHeader class="p-0">
       <CardTitle class="text-sm font-medium">{{ title }}</CardTitle>
     </CardHeader>
-    <CardContent class="p-0 text-2xl font-bold">
+    <CardContent data-testid="stat-card-value" class="p-0 text-2xl font-bold">
       <Currency v-if="type === 'currency'" :amount="value" />
       <template v-if="type === 'number'">{{ value }}</template>
     </CardContent>

frontend/lib/api/classes/items.ts

@@ -208,7 +208,9 @@ export class ItemsApi extends BaseAPI {
   // =========================================================================
 
   async getLocations(q: LocationsQuery = { filterChildren: false }) {
-    const resp = await this.http.get<{ items: EntitySummary[] }>({ url: route("/entities", { ...q, isLocation: true }) });
+    const resp = await this.http.get<{ items: EntitySummary[] }>({
+      url: route("/entities", { ...q, isLocation: true }),
+    });
     // Unwrap paginated response to flat array for backward compat
     return {
       ...resp,

frontend/pages/collection/index/entity-types.vue

@@ -16,13 +16,7 @@
   import { Badge } from "@/components/ui/badge";
   import { Card } from "@/components/ui/card";
   import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-  import {
-    Dialog,
-    DialogContent,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-  } from "@/components/ui/dialog";
+  import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
   import { useDialog } from "@/components/ui/dialog-provider";
   import { DialogID } from "~/components/ui/dialog-provider/utils";
   import FormTextField from "~/components/Form/TextField.vue";
@@ -98,7 +92,11 @@
     updateForm.icon = et.icon;
     updateForm.isLocation = et.isLocation;
     updateTemplate.value = et.defaultTemplate
-      ? { id: et.defaultTemplate.id, name: et.defaultTemplate.name, description: et.defaultTemplate.description } as EntityTemplateSummary
+      ? ({
+          id: et.defaultTemplate.id,
+          name: et.defaultTemplate.name,
+          description: et.defaultTemplate.description,
+        } as EntityTemplateSummary)
       : null;
     openDialog(DialogID.UpdateEntityType);
   }
@@ -154,13 +152,7 @@
           <DialogTitle>Create Entity Type</DialogTitle>
         </DialogHeader>
         <form class="flex flex-col gap-3" @submit.prevent="create">
-          <FormTextField
-            v-model="createForm.name"
-            :autofocus="true"
-            label="Name"
-            :max-length="255"
-            :min-length="1"
-          />
+          <FormTextField v-model="createForm.name" :autofocus="true" label="Name" :max-length="255" :min-length="1" />
           <FormCheckbox v-model="createForm.isLocation" label="Is a container / location type" />
           <TemplateSelector v-model="createTemplate" />
 
@@ -178,13 +170,7 @@
           <DialogTitle>Update Entity Type</DialogTitle>
         </DialogHeader>
         <form class="flex flex-col gap-3" @submit.prevent="update">
-          <FormTextField
-            v-model="updateForm.name"
-            :autofocus="true"
-            label="Name"
-            :max-length="255"
-            :min-length="1"
-          />
+          <FormTextField v-model="updateForm.name" :autofocus="true" label="Name" :max-length="255" :min-length="1" />
           <FormCheckbox v-model="updateForm.isLocation" label="Is a container / location type" />
           <TemplateSelector v-model="updateTemplate" />
 
@@ -196,7 +182,7 @@
     </Dialog>
 
     <!-- Page Content -->
-    <div class="flex items-center justify-between mb-4">
+    <div class="mb-4 flex items-center justify-between">
       <h3 class="text-lg font-medium">Entity Types</h3>
       <Button size="sm" @click="openDialog(DialogID.CreateEntityType)">
         <MdiPlus class="mr-1 size-4" />
@@ -207,7 +193,9 @@
     <div v-if="entityTypes && entityTypes.length > 0" class="space-y-2">
       <Card v-for="et in entityTypes" :key="et.id" class="p-4">
         <div class="flex items-center gap-3">
-          <div class="flex size-10 shrink-0 items-center justify-center rounded-full bg-secondary text-secondary-foreground">
+          <div
+            class="flex size-10 shrink-0 items-center justify-center rounded-full bg-secondary text-secondary-foreground"
+          >
             <MdiMapMarkerOutline v-if="et.isLocation" class="size-5" />
             <MdiPackageVariantClosed v-else class="size-5" />
           </div>

frontend/pages/item/[id]/index/edit.vue

@@ -692,25 +692,33 @@
             </div>
             <button
               v-else
+              data-testid="attachment-upload-button"
               class="grid h-24 w-full place-content-center border-2 border-dashed border-primary"
               @click="clickUpload"
             >
-              <input ref="refAttachmentInput" hidden type="file" @change="uploadImage" />
+              <input
+                ref="refAttachmentInput"
+                data-testid="attachment-file-input"
+                hidden
+                type="file"
+                @change="uploadImage"
+              />
               <p>{{ $t("items.drag_and_drop") }}</p>
             </button>
           </div>
 
           <div class="border-t p-4">
-            <ul role="list" class="divide-y rounded-md border">
+            <ul role="list" data-testid="attachments-list" class="divide-y rounded-md border">
               <li
                 v-for="attachment in item.attachments"
                 :key="attachment.id"
+                :data-testid="`attachment-row-${attachment.title}`"
                 class="grid grid-cols-6 justify-between py-3 pl-3 pr-4 text-sm"
               >
                 <p class="col-span-4 my-auto">
                   {{ attachment.title }}
                 </p>
-                <p class="my-auto">
+                <p data-testid="attachment-type" class="my-auto">
                   {{ $t(`items.${attachment.type}`) }}
                 </p>
                 <div class="flex justify-end gap-2">
@@ -719,6 +727,7 @@
                       <Button
                         variant="outline"
                         size="icon"
+                        data-testid="attachment-view"
                         @click="
                           openDialog(DialogID.ItemImage, {
                             params: {
@@ -743,15 +752,20 @@
                   </Tooltip>
                   <Tooltip>
                     <TooltipTrigger as-child>
-                      <Button variant="destructive" size="icon" @click="deleteAttachment(attachment.id)">
+                      <Button
+                        variant="destructive"
+                        size="icon"
+                        data-testid="attachment-delete"
+                        @click="deleteAttachment(attachment.id)"
+                      >
                         <MdiDelete />
                       </Button>
                     </TooltipTrigger>
                     <TooltipContent>{{ $t("global.delete") }}</TooltipContent>
                   </Tooltip>
                   <Tooltip>
                     <TooltipTrigger as-child>
-                      <Button size="icon" @click="openAttachmentEditDialog(attachment)">
+                      <Button size="icon" data-testid="attachment-edit" @click="openAttachmentEditDialog(attachment)">
                         <MdiPencil />
                       </Button>
                     </TooltipTrigger>

frontend/pages/location/[id]/index.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+  import BaseContainer from "@/components/Base/Container.vue";
+
   definePageMeta({
     middleware: ["auth"],
   });
@@ -9,7 +11,3 @@
     <NuxtPage />
   </BaseContainer>
 </template>
-
-<script lang="ts">
-  import BaseContainer from "@/components/Base/Container.vue";
-</script>