test: add data-test-id and aria-labels to improve the playwright tests

static/e2e/{samgis-be.spec.ts → samgis-be-driverjs.spec.ts}

@@ -37,12 +37,19 @@ test('test the driver.js tour on the localhost SamGIS-be page', async ({ page })
     await expect(navigationMapLock).toBeVisible()
     await expect(navigationMapLock).not.toBeChecked()
 
-    const mapLocator = page.locator("#map")
+    const mapLocator = page.getByTestId("map-container")
     await expect(mapLocator).toBeVisible()
     await expect(mapLocator).toMatchAriaSnapshot({ name: 'mapLocatorTestDriverJS.aria.yaml'})
 
     const sendButton = page.getByRole('button', { name: 'Empty prompt (disabled)' })
     await expect(sendButton).toBeVisible()
     await expect(sendButton).toBeDisabled()
+
+    const footerMsg = page.getByText('Trouble on scrolling this page? Open the direct URL space as a new tab. SamGIS')
+    await expect(footerMsg).toBeVisible();
+    await page.getByRole('button', { name: 'Close' }).click();
+    await expect(footerMsg).not.toBeVisible();
+
     await page.close();
 });
+

static/src/components/NavBar/MobileNavBar.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="bg-gray-200 items-center h-8">
+  <nav class="bg-gray-200 items-center h-8" data-testid="mobile-navbar" aria-label="Mobile navigation">
     <TabComponent description="About SamGIS" href="https://trinca.tornidor.com/projects/samgis-segment-anything-applied-to-GIS" />
     <TabComponent description="My blog" href="https://trinca.tornidor.com/" />
     <TabComponent description="SamGIS docs" href="https://docs.ml-trinca.tornidor.com/" />
-  </div>
+  </nav>
 </template>
 
 <script setup lang="ts">

static/src/components/NavBar/NavBar.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="fixed top-2 right-5 mr-2 items-center">
+  <nav class="fixed top-2 right-5 mr-2 items-center" data-testid="navbar" aria-label="Main navigation">
     <TabComponent description="About SamGIS" href="https://trinca.tornidor.com/projects/samgis-segment-anything-applied-to-GIS" />
     <TabComponent description="My blog" href="https://trinca.tornidor.com/" />
     <TabComponent description="SamGIS docs" href="https://docs.ml-trinca.tornidor.com/" />
-  </div>
+  </nav>
 </template>
 
 <script setup lang="ts">

static/src/components/NavBar/TabComponent.vue

@@ -3,6 +3,8 @@
     <a :href="props.href"
       class="bg-white border-2 no-underline pl-2 pr-2 p-1
       landscape:border-gray-300 landscape:font-semibold landscape:text-lg"
+      :data-testid="`tab-${props.description.toLowerCase().replace(/\s+/g, '-')}`"
+      :aria-label="props.description"
     >{{ props.description }}</a>
   </h2>
 </template>

static/src/components/PageFooter.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- style 'z-index: 1001' here is needed to avoid override from leafletjs css -->
-  <footer class="fixed bottom-0 w-full pl-4 font-light text-xs" style="z-index: 9999;" v-if="showFooterRef">
+  <footer class="fixed bottom-0 w-full pl-4 font-light text-xs" style="z-index: 9999;" v-if="showFooterRef" data-testid="page-footer">
     <div class="relative flex items-center bg-gray-200 h-6">
       <div class="pl-1 w-full">
         <p class="">
@@ -17,6 +17,7 @@
       <div class="pr-2">
         <button
           aria-label="Close"
+          data-testid="footer-close-button"
           class="shrink-0 rounded-lg bg-black/10 p-1 transition hover:bg-black/20"
           @click="showFooterRef = !showFooterRef"
         >Close</button>

static/src/components/PageFooterHyperlink.vue

@@ -4,6 +4,7 @@
     class="underline"
     target="_blank"
     rel="noopener noreferrer"
+    :data-testid="`footer-link-${props.path.replace(/https?:\/\//, '').replace(/[^a-z0-9]+/gi, '-').replace(/-$/, '').toLowerCase()}`"
   >
     <slot />
   </a>

static/src/components/PageLayout.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="relative min-h-screen lg:flex">
+  <div class="relative min-h-screen lg:flex" data-testid="page-layout">
     <!-- Menubar -->
     <NavBar class="hidden portrait:sd:hidden portrait:md:flex landscape:flex" style="z-index: 9999;"/>
     <MobileNavBar class="flex portrait:sd:flex portrait:md:hidden landscape:hidden" style="z-index: 9999;"/>
 
     <main id="content" class="flex-1 z-1 lg:ml-0 mr-4 overflow-y-auto md:pl-1 lg:h-screen">
-      <header class="hidden items-center justify-between h-10 ml-2 landscape:md:flex portrait:sd:flex portrait:md:h-12 bg-gray-200 border-b">
+      <header class="hidden items-center justify-between h-10 ml-2 landscape:md:flex portrait:sd:flex portrait:md:h-12 bg-gray-200 border-b" aria-label="Page header">
         <h2 class="hidden sd:text-sm ml-2 md:block md:text-2xl">{{  props.pageTitle }}</h2>
       </header>
 

static/src/components/PagePredictionMap.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="h-auto" id="id-prediction-map-container">
+  <div class="h-auto" id="id-prediction-map-container" data-testid="prediction-map-container">
 
     <div class="grid grid-cols-1 2xl:grid-cols-5 lg:gap-1 lg:border-r ml-2 mt-2 md:ml-4 md:mr-4">
 
       <div class="lg:border-r lg:col-span-3">
-        <div id="id-map-cont" class="">
+        <div id="id-map-cont" class="" data-testid="map-section">
           <p class="hidden lg:block">{{ description }}</p>
           <div class="w-full md:pt-1 md:pb-1">
             <ButtonMapSendRequest
@@ -18,19 +18,19 @@
               :waiting-string="waitingString"
             />
             <span class="ml-2">
-              <input type="checkbox" id="checkboxMapNavigationLocked" v-model="mapNavigationLocked" />
+              <input type="checkbox" id="checkboxMapNavigationLocked" v-model="mapNavigationLocked" data-testid="map-navigation-checkbox" />
               <span class="ml-2">
                   <label class="text-red-600" for="checkboxMapNavigationLocked" v-if="mapNavigationLocked">locked map navigation!</label>
                   <label class="text-blue-600" for="checkboxMapNavigationLocked" v-else>map navigation unlocked</label>
               </span>
             </span>
           </div>
-          <div id="map" class="map-predictions" />
+          <div id="map" class="map-predictions" data-testid="map-container" />
         </div>
       </div>
 
       <div class="lg:col-span-2">
-        <div class="lg:pl-2 lg:pr-2 lg:border-l lg:border-3" id="id-map-info">
+        <div class="lg:pl-2 lg:pr-2 lg:border-l lg:border-3" id="id-map-info" data-testid="map-info">
 
           <h1>Map Info</h1>
           <div class="grid grid-cols-1 md:grid-cols-3">
@@ -53,25 +53,27 @@
           </div>
         </div>
 
-        <h1 id="id-ml-request-prompt">ML request prompt</h1>
+        <h1 id="id-ml-request-prompt" data-testid="ml-request-prompt">ML request prompt</h1>
         <p>Exclude points: label 0, include points: label 1.</p>
-        <div v-if="promptsArrayRef.filter(el => {return el.type === 'point'}).length > 0">
-          <TableGenericComponent
-            :header="['id', 'data', 'label']"
-            :rows="applyFnToObjectWithinArray(promptsArrayRef.filter(el => {return el.type === 'point'}))"
-            title="Points"
-            row-key="id"
-          />
-        </div>
-        <br />
-        <div v-if="promptsArrayRef.filter(el => {return el.type === 'rectangle'}).length > 0">
-          <TableGenericComponent
-            :header="['id', 'data_ne', 'data_sw']"
-            :rows="applyFnToObjectWithinArray(promptsArrayRef.filter(el => {return el.type === 'rectangle'}))"
-            title="Rectangles"
-            row-key="id"
-            class="2md:min-h-[100px]"
-          />
+        <div aria-label="Table container for the positions of map markers and rectangles">
+          <div v-if="promptsArrayRef.filter(el => {return el.type === 'point'}).length > 0">
+            <TableGenericComponent
+              :header="['id', 'data', 'label']"
+              :rows="applyFnToObjectWithinArray(promptsArrayRef.filter(el => {return el.type === 'point'}))"
+              title="Table with the position for the map markers"
+              row-key="id"
+            />
+          </div>
+          <br />
+          <div v-if="promptsArrayRef.filter(el => {return el.type === 'rectangle'}).length > 0">
+            <TableGenericComponent
+              :header="['id', 'data_ne', 'data_sw']"
+              :rows="applyFnToObjectWithinArray(promptsArrayRef.filter(el => {return el.type === 'rectangle'}))"
+              title="Table with the position for the map rectangles"
+              row-key="id"
+              class="2md:min-h-[100px]"
+            />
+          </div>
         </div>
       </div>
 

static/src/components/StatsGrid.vue

@@ -1,5 +1,5 @@
 <template>
-  <dl class="grid md:pt-1 md:pb-1" v-for="item in props.statsArray" v-bind:key="item.statName">
+  <dl class="grid md:pt-1 md:pb-1" v-for="item in props.statsArray" v-bind:key="item.statName" data-testid="stats-grid">
     <div class="flex flex-col bg-blue-100 text-center p-1 md:p-2">
       <dt class="order-last font-medium">{{ item.statName }}</dt>
       <dd class="text-lg font-extrabold text-blue-600">{{ item.statValue }}</dd>

static/src/components/TableGenericComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <table class="min-w-full divide-y-2 divide-gray-200 border border-gray-200 bg-white text-left p-4">
+  <table class="min-w-full divide-y-2 divide-gray-200 border border-gray-200 bg-white text-left p-4" data-testid="table-component" :aria-label="props.title">
     <caption class="text-2xl bg-blue-100">{{ props.title }}</caption>
     <thead class="text-left">
     <tr class="text-left">

static/src/components/buttons/ButtonMapSendRequest.vue

@@ -3,12 +3,16 @@
     :class="`${props.class} bg-gray-200 bg-opacity-50`"
     :disabled="promptsArray.length === 0 || responseMessage === waitingString"
     v-if="promptsArray.length === 0 || responseMessage === waitingString"
+    data-testid="submit-button-disabled"
+    aria-disabled="true"
   >{{ responseMessage === waitingString ? responseMessage : '🚫 Empty prompt (disabled)' }}
   </button>
   <button
     :class="`${props.class} bg-blue-300 whitespace-no-wrap overflow-hidden truncate`"
     @click="sendMLRequest(map, promptsArray, currentBaseMapName)"
     v-else
+    data-testid="submit-button"
+    aria-label="Send ML request"
   >
     <span v-if="responseMessage && responseMessage !== '-'">{{ responseMessage }}</span>
     <span v-else>🔍 send ML request</span>

static/tests/MobileNavBar.test.ts

@@ -3,9 +3,12 @@ import { shallowMount } from '@vue/test-utils'
 import MobileNavBar from '@/components/NavBar/MobileNavBar.vue'
 
 describe('MobileNavBar', () => {
-  it('renders a container div with bg-gray-200 class', () => {
+  it('renders a container nav with bg-gray-200 class', () => {
     const wrapper = shallowMount(MobileNavBar)
-    expect(wrapper.find('div.bg-gray-200').exists()).toBe(true)
+    const nav = wrapper.find('nav.bg-gray-200')
+    expect(nav.exists()).toBe(true)
+    expect(nav.attributes('data-testid')).toBe('mobile-navbar')
+    expect(nav.attributes('aria-label')).toBe('Mobile navigation')
   })
 
   it('renders exactly three TabComponent instances', () => {

static/tests/NavBar.test.ts

@@ -3,12 +3,14 @@ import { shallowMount } from '@vue/test-utils'
 import NavBar from '@/components/NavBar/NavBar.vue'
 
 describe('NavBar', () => {
-  it('renders a fixed-position container div', () => {
+  it('renders a fixed-position container nav', () => {
     const wrapper = shallowMount(NavBar)
-    const div = wrapper.find('div.fixed')
-    expect(div.exists()).toBe(true)
-    expect(div.classes()).toContain('top-2')
-    expect(div.classes()).toContain('right-5')
+    const nav = wrapper.find('nav.fixed')
+    expect(nav.exists()).toBe(true)
+    expect(nav.classes()).toContain('top-2')
+    expect(nav.classes()).toContain('right-5')
+    expect(nav.attributes('data-testid')).toBe('navbar')
+    expect(nav.attributes('aria-label')).toBe('Main navigation')
   })
 
   it('renders exactly three TabComponent instances', () => {