Stabilize Image Library E2E Tests

eink/frontend/src/app-root.ts

@@ -232,7 +232,7 @@ export class AppRoot extends LitElement {
         @delete="${(e: CustomEvent) => this._onDeleteLayoutItem(e)}"
       ></item-settings-dialog>
       <image-dialog 
-        @image-saved="${() => this.state.refreshImages()}"
+        @image-saved="${() => { this.state.refreshImages(); this.state.showMessage('Image saved', 'success'); }}"
         @delete="${(e: CustomEvent) => this._onDeleteImage(e)}"
       ></image-dialog>
       <confirm-dialog></confirm-dialog>

eink/frontend/src/components/dialogs/image-dialog.ts

@@ -747,6 +747,7 @@ export class ImageDialog extends LitElement {
                     <div class="form-group" style="margin-bottom: 0;">
                       <label>Name</label>
                       <input 
+                        id="image-name-input"
                         type="text" 
                         placeholder="Optional - defaults to filename"
                         .value="${this._imageName}"
@@ -757,6 +758,7 @@ export class ImageDialog extends LitElement {
                     <div class="form-group" style="margin-bottom: 0;">
                       <label>Artist</label>
                       <input 
+                        id="image-artist-input"
                         type="text" 
                         placeholder="Who created this?"
                         .value="${this._artist}"
@@ -767,6 +769,7 @@ export class ImageDialog extends LitElement {
                     <div class="form-group" style="margin-bottom: 0;">
                       <label>Collection</label>
                       <input 
+                        id="image-collection-input"
                         type="text" 
                         placeholder="e.g. Landscapes, Personal"
                         .value="${this._collection}"
@@ -785,6 +788,7 @@ export class ImageDialog extends LitElement {
                     <div class="form-group" style="margin-bottom: 0;">
                       <label>Description</label>
                       <textarea 
+                        id="image-description-textarea"
                         placeholder="Describe the image..."
                         .value="${this._description}"
                         @input="${(e: InputEvent) => this._description = (e.target as HTMLTextAreaElement).value}"
@@ -819,7 +823,7 @@ export class ImageDialog extends LitElement {
                       </select>
                     </div>
 
-                    <button class="suggest-button" @click="${this._handleSuggestSettings}">
+                    <button id="btn-suggest" class="primary suggest-button" @click="${this._handleSuggestSettings}">
                       <span class="material-icons">auto_awesome</span>
                       Suggest Settings
                     </button>
@@ -1017,6 +1021,7 @@ export class ImageDialog extends LitElement {
         <div slot="footer" class="footer-actions">
           ${this._editingImage ? html`
             <button 
+              id="btn-delete-confirm"
               class="danger" 
               style="margin-right: auto;" 
               @click="${this._handleDelete}"
@@ -1026,12 +1031,15 @@ export class ImageDialog extends LitElement {
             </button>
           ` : ''}
           <button 
+            id="btn-cancel"
             class="secondary" 
             @click="${this._handleCancel}"
           >
             Cancel
           </button>
           <button 
+            id="btn-image-save"
+            class="primary"
             ?disabled="${this._isUploading || !this._uploadedImage || !this._imageName.trim()}"
             @click="${this._handleSave}"
           >

eink/frontend/src/components/shell/app-header.ts

@@ -134,19 +134,19 @@ export class AppHeader extends LitElement {
       <header>
         <div class="header-title">
           <div class="nav-group">
-            <button class="nav-item ${this.activeSection === 'display-types' ? 'active' : ''}" 
+            <button id="nav-display-types" class="nav-item ${this.activeSection === 'display-types' ? 'active' : ''}" 
               @click="${() => this._dispatchSection('display-types')}" title="Display Types">
               <span class="material-icons">settings_input_component</span>
             </button>
-            <button class="nav-item ${this.activeSection === 'layouts' ? 'active' : ''}" 
+            <button id="nav-layouts" class="nav-item ${this.activeSection === 'layouts' ? 'active' : ''}" 
               @click="${() => this._dispatchSection('layouts')}" title="Layouts">
               <span class="material-icons">dashboard</span>
             </button>
-            <button class="nav-item ${this.activeSection === 'images' ? 'active' : ''}" 
+            <button id="nav-images" class="nav-item ${this.activeSection === 'images' ? 'active' : ''}" 
               @click="${() => this._dispatchSection('images')}" title="Images">
               <span class="material-icons">image</span>
             </button>
-            <button class="nav-item ${this.activeSection === 'scenes' ? 'active' : ''}" 
+            <button id="nav-scenes" class="nav-item ${this.activeSection === 'scenes' ? 'active' : ''}" 
               @click="${() => this._dispatchSection('scenes')}" title="Scenes">
               <span class="material-icons">landscape</span>
             </button>
@@ -158,27 +158,27 @@ export class AppHeader extends LitElement {
           ${this.message ? html`<span class="message-badge">${this.message}</span>` : ''}
 
           ${this.activeSection !== 'images' ? html`
-          <button class="secondary icon-button" @click="${() => this._dispatch('toggle-view-mode')}" title="Switch to ${this.viewMode === 'graphical' ? 'YAML' : 'Graphical'} Mode">
+          <button id="btn-toggle-view" class="secondary icon-button" @click="${() => this._dispatch('toggle-view-mode')}" title="Switch to ${this.viewMode === 'graphical' ? 'YAML' : 'Graphical'} Mode">
             <span class="material-icons">${this.viewMode === 'graphical' ? 'code' : 'dashboard'}</span>
           </button>
           ` : ''}
 
-          <button class="secondary icon-button" @click="${() => this._dispatch('add-item')}" title="Add New Item">
+          <button id="btn-header-add" class="secondary icon-button" @click="${() => this._dispatch('add-item')}" title="Add New Item">
             <span class="material-icons">add</span>
           </button>
 
           ${this.activeSection !== 'images' ? html`
-          <button class="secondary icon-button" @click="${() => this._dispatch('discard-changes')}" ?disabled="${!this.isDirty || this.isSaving}" title="Discard Changes">
+          <button id="btn-discard" class="secondary icon-button" @click="${() => this._dispatch('discard-changes')}" ?disabled="${!this.isDirty || this.isSaving}" title="Discard Changes">
             <span class="material-icons">history</span>
           </button>
           ` : ''}
 
-          <button class="secondary icon-button" @click="${() => this._dispatch('delete-item')}" ?disabled="${!this.canDelete || this.isSaving}" title="Delete Current Item">
+          <button id="btn-header-delete" class="secondary icon-button" @click="${() => this._dispatch('delete-item')}" ?disabled="${!this.canDelete || this.isSaving}" title="Delete Current Item">
             <span class="material-icons" style="color: var(--danger-colour);">delete</span>
           </button>
 
           ${this.activeSection !== 'images' ? html`
-          <button class="secondary icon-button" @click="${() => this._dispatch('save-changes')}" ?disabled="${this.isSaving}" title="${this.isSaving ? 'Saving...' : 'Save Changes'}">
+          <button id="btn-header-save" class="secondary icon-button" @click="${() => this._dispatch('save-changes')}" ?disabled="${this.isSaving}" title="${this.isSaving ? 'Saving...' : 'Save Changes'}">
             <span class="material-icons">${this.isSaving ? 'sync' : 'save'}</span>
           </button>
           ` : ''}

eink/frontend/src/components/views/images-view.ts

@@ -386,6 +386,7 @@ export class ImagesView extends BaseResourceView {
             <div class="form-group">
               <label>Title / Name</label>
               <input 
+                id="filter-title"
                 type="text" 
                 placeholder="Search by title..."
                 .value="${this._filterTitle}"
@@ -398,6 +399,7 @@ export class ImagesView extends BaseResourceView {
             <div class="form-group">
               <label>Description</label>
               <input 
+                id="filter-description"
                 type="text" 
                 placeholder="Search description..."
                 .value="${this._filterDescription}"
@@ -410,6 +412,7 @@ export class ImagesView extends BaseResourceView {
             <div class="form-group">
               <label>Artist</label>
               <input 
+                id="filter-artist"
                 type="text" 
                 placeholder="Artist"
                 .value="${this._filterArtist}"
@@ -422,6 +425,7 @@ export class ImagesView extends BaseResourceView {
             <div class="form-group">
               <label>Collection</label>
               <input 
+                id="filter-collection"
                 type="text" 
                 placeholder="Collection"
                 .value="${this._filterCollection}"