Refactor users page

frontend/pages/users.vue

 <template>
   <div class=".wrapper" style="display: flex; width: 100%; align-items: stretch">
-    <div style="min-height: 100vh; min-width: 200px; max-width: 200px" class="border-right d-none d-md-block">
+    <div id="roleSidebar" style="min-height: 100vh; min-width: 200px; max-width: 200px" class="border-right d-none d-md-block">
     <b-list-group flush>
-        <b-list-group-item button v-bind:active="'all'==selectedRole" class="d-flex justify-content-between align-items-center" @click="selectRole('all')">
+        <b-list-group-item id="allRoles" button v-bind:active="'all'==selectedRole" class="d-flex justify-content-between align-items-center" @click="selectRole('all')">
          All
          <b-badge pill variant="primary">{{ users.length }}</b-badge>
         </b-list-group-item>
@@ -20,8 +20,9 @@
                 v-on:save="saveUser"
                 v-on:delete="deleteUser">
     </edit-users>
-    <b-form inline @submit="toggleAddUser" class="mt-5">
-      <b-button variant="outline-success"
+    <b-form id="addUserForm" inline @submit="toggleAddUser" class="mt-5">
+      <b-button id="addUserButton"
+                variant="outline-success"
                 align-h="end"
                 v-show="addUserButtonVisibility"
                 v-on:click="toggleAddUser">
@@ -36,7 +37,7 @@
           placeholder="Enter username"
           trim>
         </b-form-input>
-        <b-button type="submit" variant="success">Submit</b-button>
+        <b-button id="submitNewUsername" type="submit" variant="success">Submit</b-button>
         <b-form-invalid-feedback id="input-live-feedback">
           {{ newUsernameFeedback }}
         </b-form-invalid-feedback>

frontend/test/pages/users.js

@@ -5,25 +5,24 @@ module.exports = {
   elements: {},
   sections: {
     addUser: {
-      selector: 'form.mt-5.form-inline',
+      selector: '#addUserForm',
       elements:{
         addUserButton: {
-            selector: 'button[align-h="end"].btn-outline-success'
+            selector: '#addUserButton'
         },
         inputUsername: {
           selector: '#input-new-username'
         },
         submitUsername: {
-          selector: 'button[type="submit"].btn-success'
+          selector: '#submitNewUsername'
         }
       }
     },
     leftSidebar: {
-        selector: 'div.border-right.d-none.d-md-block',
+        selector: '#roleSidebar',
         elements: {
           all: {
-            selector: "button.list-group-item",
-            index: 0
+            selector: "#allRoles",
             }
           }
         }