Refactor to use "data-e2e" attributes in code to make selecting fields/buttons easier in e2e tests

src/app/search-navbar/search-navbar.component.html

@@ -3,8 +3,8 @@
     <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" autocomplete="on">
       <input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query"
              formControlName="query" type="text" placeholder="{{searchExpanded ? ('nav.search' | translate) : ''}}"
-             class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-right p-1">
-      <a class="submit-icon" [routerLink]="" (click)="searchExpanded ? onSubmit(searchForm.value) : expand()">
+             class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-right p-1" data-e2e="header-search-box">
+      <a class="submit-icon" [routerLink]="" (click)="searchExpanded ? onSubmit(searchForm.value) : expand()" data-e2e="header-search-icon">
         <em class="fas fa-search fa-lg fa-fw"></em>
       </a>
     </form>

src/app/shared/auth-nav-menu/auth-nav-menu.component.html

@@ -1,7 +1,7 @@
 <ul class="navbar-nav" [ngClass]="{'mr-auto': (isXsOrSm$ | async)}">
   <li *ngIf="!(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item"
       (click)="$event.stopPropagation();">
-    <div ngbDropdown #loginDrop display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
+    <div ngbDropdown #loginDrop display="dynamic" placement="bottom-right" class="d-inline-block" data-e2e="login-menu" @fadeInOut>
       <a href="javascript:void(0);" class="dropdownLogin px-1 " [attr.aria-label]="'nav.login' |translate" (click)="$event.preventDefault()" ngbDropdownToggle>
         {{ 'nav.login' | translate }}
       </a>
@@ -17,7 +17,7 @@
       {{ 'nav.login' | translate }}<span class="sr-only">(current)</span>
     </a>
   </li>
-  <li *ngIf="(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item">
+  <li *ngIf="(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item" data-e2e="user-menu">
     <div ngbDropdown display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
       <a href="javascript:void(0);" role="button" [attr.aria-label]="'nav.logout' |translate" (click)="$event.preventDefault()" [title]="'nav.logout' | translate" class="px-1" ngbDropdownToggle>
         <i class="fas fa-user-circle fa-lg fa-fw"></i></a>

src/app/shared/log-in/log-in.component.html

@@ -8,6 +8,6 @@
   </ng-container>
 
   <div class="dropdown-divider"></div>
-  <a class="dropdown-item" *ngIf="canRegister$ | async" [routerLink]="[getRegisterRoute()]">{{"login.form.new-user" | translate}}</a>
-  <a class="dropdown-item" [routerLink]="[getForgotRoute()]">{{"login.form.forgot-password" | translate}}</a>
+  <a class="dropdown-item" *ngIf="canRegister$ | async" [routerLink]="[getRegisterRoute()]" data-e2e="register">{{"login.form.new-user" | translate}}</a>
+  <a class="dropdown-item" [routerLink]="[getForgotRoute()]" data-e2e="forgot">{{"login.form.forgot-password" | translate}}</a>
 </div>

src/app/shared/log-in/methods/password/log-in-password.component.html

@@ -9,7 +9,8 @@
          formControlName="email"
          placeholder="{{'login.form.email' | translate}}"
          required
-         type="email">
+         type="email"
+         data-e2e="email">
   <label class="sr-only">{{"login.form.password" | translate}}</label>
   <input [attr.aria-label]="'login.form.password' |translate"
          autocomplete="off"
@@ -17,12 +18,13 @@
          placeholder="{{'login.form.password' | translate}}"
          formControlName="password"
          required
-         type="password">
+         type="password"
+         data-e2e="password">
   <div *ngIf="(error | async) && hasError" class="alert alert-danger" role="alert"
        @fadeOut>{{ (error | async) | translate }}</div>
   <div *ngIf="(message | async) && hasMessage" class="alert alert-info" role="alert"
        @fadeOut>{{ (message | async) | translate }}</div>
 
-  <button class="btn btn-lg btn-primary btn-block mt-3" type="submit"
+  <button class="btn btn-lg btn-primary btn-block mt-3" type="submit" data-e2e="login-button"
           [disabled]="!form.valid"><i class="fas fa-sign-in-alt"></i> {{"login.form.submit" | translate}}</button>
 </form>

src/app/shared/log-out/log-out.component.html

@@ -2,5 +2,5 @@
 
   <div *ngIf="(error | async)" class="alert alert-danger" role="alert" @fadeOut>{{ error | async }}</div>
 
-  <button class="btn btn-lg btn-primary btn-block mt-3" (click)="logOut()"><i class="fas fa-sign-out-alt"></i> {{"logout.form.submit" | translate}}</button>
+  <button class="btn btn-lg btn-primary btn-block mt-3" (click)="logOut()" data-e2e="logout-button"><i class="fas fa-sign-out-alt"></i> {{"logout.form.submit" | translate}}</button>
 </div>

src/app/shared/search-form/search-form.component.html

@@ -4,10 +4,10 @@
             <div *ngIf="showScopeSelector === true" class="input-group-prepend">
                 <button class="scope-button btn btn-outline-secondary text-truncate" [ngbTooltip]="(selectedScope | async)?.name" type="button" (click)="openScopeModal()">{{(selectedScope | async)?.name || ('search.form.scope.all' | translate)}}</button>
             </div>
-            <input type="text" [(ngModel)]="query" name="query" class="form-control" attr.aria-label="{{ searchPlaceholder }}"
+            <input type="text" [(ngModel)]="query" name="query" class="form-control" attr.aria-label="{{ searchPlaceholder }}" data-e2e="search-box"
                    [placeholder]="searchPlaceholder">
             <span class="input-group-append">
-            <button type="submit" class="search-button btn btn-{{brandColor}}"><i class="fas fa-search"></i> {{ ('search.form.search' | translate) }}</button>
+            <button type="submit" class="search-button btn btn-{{brandColor}}" data-e2e="search-button"><i class="fas fa-search"></i> {{ ('search.form.search' | translate) }}</button>
         </span>
         </div>
     </div>

src/app/shared/view-mode-switch/view-mode-switch.component.html

@@ -6,7 +6,8 @@
        (click)="switchViewTo(viewModeEnum.ListElement)"
        routerLinkActive="active"
        [class.active]="currentMode === viewModeEnum.ListElement"
-       class="btn btn-secondary">
+       class="btn btn-secondary"
+       data-e2e="list-view">
           <i class="fas fa-list" title="{{'search.view-switch.show-list' | translate}}"></i>
     </a>
     <a *ngIf="isToShow(viewModeEnum.GridElement)"
@@ -16,7 +17,8 @@
        (click)="switchViewTo(viewModeEnum.GridElement)"
        routerLinkActive="active"
        [class.active]="currentMode === viewModeEnum.GridElement"
-       class="btn btn-secondary">
+       class="btn btn-secondary"
+       data-e2e="grid-view">
           <i class="fas fa-th-large" title="{{'search.view-switch.show-grid' | translate}}"></i>
     </a>
     <a *ngIf="isToShow(viewModeEnum.DetailedListElement)"
@@ -26,7 +28,8 @@
        (click)="switchViewTo(viewModeEnum.DetailedListElement)"
        routerLinkActive="active"
        [class.active]="currentMode === viewModeEnum.DetailedListElement"
-       class="btn btn-secondary">
+       class="btn btn-secondary"
+       data-e2e="detail-view">
       <i class="far fa-square" title="{{'search.view-switch.show-detail' | translate}}"></i>
     </a>
 </div>