feat(e2e): Add e2e tests for vertex attribute tests for meshes and models

app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue

@@ -112,6 +112,7 @@ const edge_attribute_color_map = computed({
 </script>
 <template>
   <ViewerContextMenuItem
+    data-testid="meshEdgesMenu"
     :itemProps="itemProps"
     :btn_image="EdgedCurveEdges"
     tooltip="Edges options"

app/components/Viewer/Generic/Model/ModelStyleOptions.vue

@@ -10,6 +10,7 @@ const { itemProps } = defineProps({
 
 <template>
   <ViewerContextMenuItem
+    data-testid="modelStyleMenu"
     :index="itemProps.index"
     :itemProps="itemProps"
     tooltip="Style options"

app/components/Viewer/Options/AttributeColorBar.vue

@@ -14,6 +14,7 @@ const colorMap = defineModel("colorMap", { type: String });
     <v-row dense align="center" class="mt-2" no-gutters>
       <v-col cols="5" class="pe-1">
         <v-text-field
+          data-testid="attributeMinInput"
           :model-value="minimum"
           @update:model-value="(value) => (minimum = Number(value))"
           label="Min"
@@ -35,6 +36,7 @@ const colorMap = defineModel("colorMap", { type: String });
       </v-col>
       <v-col cols="5" class="ps-1">
         <v-text-field
+          data-testid="attributeMaxInput"
           :model-value="maximum"
           @update:model-value="(value) => (maximum = Number(value))"
           label="Max"

app/components/Viewer/Options/AttributeSelector.vue

@@ -103,6 +103,7 @@ watch(name, (newName, oldName) => {
 
 <template>
   <v-select
+    data-testid="attributeSelector"
     v-model="name"
     :items="attributes.map((attribute) => attribute.attribute_name)"
     item-title="attribute_name"

app/components/Viewer/Options/ColorMapList.vue

@@ -102,6 +102,7 @@ watch(filteredPresets, drawAllCanvases);
     />
 
     <v-list
+      data-testid="colorMapList"
       density="compact"
       max-height="350"
       bg-color="transparent"

app/components/Viewer/Options/ColorMapPicker.vue

@@ -32,6 +32,7 @@ watch([lutCanvas, selectedPresetName, () => min, () => max], drawLutCanvas);
   <v-menu v-model="menuOpen" :close-on-content-click="false" location="bottom">
     <template #activator="{ props: menuProps }">
       <GlassCard
+        data-testid="colorMapPicker"
         v-bind="menuProps"
         variant="ui"
         padding="pa-2"

app/components/Viewer/Options/ColoringTypeSelector.vue

@@ -168,6 +168,7 @@ watch(
     </v-col>
     <v-col>
       <v-select
+        data-testid="coloringStyleSelector"
         v-model="coloring_style_label"
         :items="coloring_styles.labels"
         label="Select a coloring style"

app/components/Viewer/Solid/SpecificPolyhedraOptions.vue

@@ -104,9 +104,17 @@ const polyhedron_attribute_color_map = computed({
 });
 </script>
 <template>
-  <ViewerContextMenuItem :itemProps="itemProps" :tooltip="tooltip" :btn_image="SolidPolyhedra">
+  <ViewerContextMenuItem
+    data-testid="meshPolyhedraMenu"
+    :itemProps="itemProps"
+    :tooltip="tooltip"
+    :btn_image="SolidPolyhedra"
+  >
     <template #options>
-      <ViewerOptionsVisibilitySwitch v-model="visibility" />
+      <ViewerOptionsVisibilitySwitch
+        data-testid="meshPolyhedraVisibilitySwitch"
+        v-model="visibility"
+      />
       <template v-if="visibility">
         <ViewerOptionsColoringTypeSelector
           :id="id"

app/components/Viewer/Surface/PolygonsOptions.vue

@@ -113,12 +113,16 @@ const polygon_attribute_color_map = computed({
 
 <template>
   <ViewerContextMenuItem
+    data-testid="meshPolygonsMenu"
     :itemProps="itemProps"
     :tooltip="tooltip"
     :btn_image="PolygonalSurfacePolygons"
   >
     <template #options>
-      <ViewerOptionsVisibilitySwitch v-model="visibility" />
+      <ViewerOptionsVisibilitySwitch
+        data-testid="meshPolygonsVisibilitySwitch"
+        v-model="visibility"
+      />
       <template v-if="visibility">
         <ViewerOptionsColoringTypeSelector
           :id="id"

app/utils/local/scripts.js

@@ -27,7 +27,7 @@ async function waitNuxt(nuxtProcess) {
   for await (const [data] of on(nuxtProcess.stdout, "data")) {
     const output = data.toString();
     console.log("Nuxt:", output);
-    const portMatch = output.match(/Listening on http:\/\/\[::\]:(\d+)/u);
+    const portMatch = output.match(/Listening on http:\/\/\[::\]:(?<port>\d+)/u);
     if (portMatch) {
       const [, nuxtPort] = portMatch;