Added IDs for Playwright targeting

src/views/AccountViewView.vue

@@ -37,6 +37,7 @@
     <!-- ID notice -->
     <div
       v-if="!activeDid"
+      id="noticeBeforeShare"
       class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 mb-4"
     >
       <p class="mb-4">
@@ -52,7 +53,7 @@
     </div>
 
     <!-- Identity Details -->
-    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
+    <div id="sectionIdentityDetails" class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
       <div v-if="givenName">
         <h2 class="text-xl font-semibold mb-2">
           {{ givenName }}
@@ -161,6 +162,7 @@
     <!-- We won't show any loading indicator because it usually doesn't change anything. We'll just pop the message in only if we discover that they need it. -->
     <div
       v-if="!loadingLimits && !endorserLimits?.nextWeekBeginDateTime"
+      id="noticeBeforeAnnounce"
       class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 mb-4"
     >
       <p class="mb-4">
@@ -175,7 +177,7 @@
       </router-link>
     </div>
 
-    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8">
+    <div id="sectionNotifications" class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8">
       <!-- label -->
       <div class="mb-2 font-bold">Notifications</div>
       <div
@@ -211,7 +213,7 @@
       </router-link>
     </div>
 
-    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8">
+    <div id="sectionSearchLocation" class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8">
       <!-- label -->
       <div class="mb-2 font-bold">Location for Searches</div>
       <router-link
@@ -225,6 +227,7 @@
 
     <div
       v-if="activeDid"
+      id="sectionUsageLimits"
       class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
     >
       <div class="mb-2 font-bold">Usage Limits</div>
@@ -277,7 +280,7 @@
       </button>
     </div>
 
-    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8">
+    <div id="sectionDataExport" class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8">
       <div class="mb-2 font-bold">Data Export</div>
       <router-link
         :to="{ name: 'seed-backup' }"
@@ -330,7 +333,7 @@
     >
       Advanced
     </h3>
-    <div v-if="showAdvanced || showGeneralAdvanced">
+    <div id="sectionAdvanced" v-if="showAdvanced || showGeneralAdvanced">
       <p class="text-rose-600 mb-8">
         Beware: the features here can be confusing and even change data in ways
         you do not expect. But we support your freedom!
@@ -340,7 +343,7 @@
       <span class="text-slate-500 text-sm font-bold mb-2">
         Deep Identifier Details
       </span>
-      <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
+      <div id="sectionDeepIdentifier" class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
         <div class="text-slate-500 text-sm font-bold">Public Key (base 64)</div>
         <div
           class="text-sm text-slate-500 flex justify-start items-center mb-1"
@@ -409,7 +412,7 @@
         Switch Identifier
       </router-link>
 
-      <div class="mt-4">
+      <div id="sectionImportContactsSettings" class="mt-4">
         <h2 class="text-slate-500 text-sm font-bold">
           Import Contacts & Settings Database
         </h2>
@@ -463,7 +466,7 @@
         </div>
       </label>
 
-      <div>
+      <div id="sectionClaimServer">
         <h2 class="text-slate-500 text-sm font-bold mt-4">Claim Server</h2>
         <div class="px-4 py-4">
           <input
@@ -542,7 +545,7 @@
       <h2 class="text-slate-500 text-sm font-bold mb-2">
         Notification Push Server
       </h2>
-      <div class="px-3 py-4">
+      <div id="sectionNotificationPushServer" class="px-3 py-4">
         <input
           type="text"
           class="block w-full rounded border border-slate-400 px-3 py-2"
@@ -580,7 +583,7 @@
         {{ DEFAULT_PUSH_SERVER }}
       </span>
 
-      <div class="mt-2">
+      <div id="sectionImageServerURL" class="mt-2">
         <span class="text-slate-500 text-sm font-bold">Image Server URL</span>
         &nbsp;
         <span class="text-sm">{{ DEFAULT_IMAGE_API_SERVER }}</span>
@@ -645,7 +648,7 @@
         </button>
       </div>
 
-      <div class="flex justify-between">
+      <div id="sectionPasskeyExpiration" class="flex justify-between">
         <span>
           <span class="text-slate-500 text-sm font-bold mb-2">
             Passkey Expiration Minutes

src/views/ContactsView.vue

@@ -20,7 +20,7 @@
     </div>
 
     <!-- New Contact -->
-    <div class="mt-4 mb-4 flex items-stretch">
+    <div id="formAddNewContact" class="mt-4 mb-4 flex items-stretch">
       <router-link
         :to="{ name: 'contact-qr' }"
         class="flex items-center bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
@@ -79,7 +79,7 @@
     </div>
 
     <!-- Results List -->
-    <ul v-if="contacts.length > 0" class="border-t border-slate-300">
+    <ul id="listContacts" v-if="contacts.length > 0" class="border-t border-slate-300">
       <li
         class="border-b border-slate-300 pt-2.5 pb-4"
         v-for="contact in contacts"

src/views/DiscoverView.vue

@@ -92,7 +92,7 @@
 
     <!-- Results List -->
     <InfiniteScroll @reached-bottom="loadMoreData">
-      <ul>
+      <ul id="listDiscoverResults">
         <li
           class="border-b border-slate-300"
           v-for="project in projects"

src/views/HomeView.vue

@@ -81,6 +81,7 @@
         <div class="mb-4">
           <div
             v-if="!isRegistered"
+            id="noticeSomeoneMustRegisterYou"
             class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
           >
             <!-- activeDid && !isRegistered -->
@@ -188,7 +189,7 @@
         </button>
       </div>
       <InfiniteScroll @reached-bottom="loadMoreGives">
-        <ul class="border-t border-slate-300">
+        <ul id="listLatestActivity" class="border-t border-slate-300">
           <li
             class="border-b border-slate-300 py-2"
             v-for="record in feedData"

src/views/ProjectsView.vue

@@ -86,7 +86,7 @@
           Look for projects worth some of your time.
         </router-link>
       </div>
-      <ul class="border-t border-slate-300">
+      <ul id="listOffers" class="border-t border-slate-300">
         <li
           class="border-b border-slate-300"
           v-for="offer in offers"
@@ -194,7 +194,7 @@
         <fa icon="plus" class="bg-blue-600 text-white px-1 py-1 rounded-full" />
         button. You'll never know until you try.
       </div>
-      <ul class="border-t border-slate-300">
+      <ul id="listProjects" class="border-t border-slate-300">
         <li
           class="border-b border-slate-300"
           v-for="project in projects"