From b475e34f0915662e0ed46f9a5b31b79c00534143 Mon Sep 17 00:00:00 2001
From: Petr Gadorek <petr.gadorek@espressif.com>
Date: Wed, 18 Dec 2024 11:43:27 +0100
Subject: [PATCH] adding data id

---
 src/components/LoadConfig.vue                 | 55 ++++++------
 src/components/WizardStep.vue                 | 34 ++++----
 src/components/wizard_steps/Complete.vue      | 26 +++---
 .../wizard_steps/InstalationProgress.vue      | 87 ++++++++++---------
 .../wizard_steps/InstallationPathSelect.vue   | 34 ++++----
 src/components/wizard_steps/MirrorSelect.vue  | 58 +++++++------
 .../wizard_steps/PrerequisitiesCheck.vue      | 55 ++++++------
 .../wizard_steps/PythonSanitycheck.vue        | 43 +++++----
 src/components/wizard_steps/TargetSelect.vue  | 28 +++---
 src/components/wizard_steps/VersionSelect.vue | 48 +++++-----
 10 files changed, 241 insertions(+), 227 deletions(-)

diff --git a/src/components/LoadConfig.vue b/src/components/LoadConfig.vue
index 38427c3..f5b7526 100644
--- a/src/components/LoadConfig.vue
+++ b/src/components/LoadConfig.vue
@@ -1,64 +1,65 @@
 <template>
-  <div class="load-config">
-    <h1 class="title">Installation Setup</h1>
+  <div class="load-config" data-id="load-config">
+    <h1 class="title" data-id="main-title">Installation Setup</h1>
 
     <!-- Compact Config Loading Section -->
-    <div class="config-section" @dragover.prevent="handleDragOver" @dragleave.prevent="handleDragLeave"
-      @drop.prevent="handleDrop" :class="{ 'dragging': isDragging }">
-      <div class="config-content">
-        <div class="config-layout">
-          <div class="config-text">
-            <h2 class="section-title">Load Configuration</h2>
-            <p class="section-description">Drag & drop TOML file or click to load existing configuration</p>
+    <div class="config-section" data-id="config-section" @dragover.prevent="handleDragOver"
+      @dragleave.prevent="handleDragLeave" @drop.prevent="handleDrop" :class="{ 'dragging': isDragging }">
+      <div class="config-content" data-id="config-content">
+        <div class="config-layout" data-id="config-layout">
+          <div class="config-text" data-id="config-text">
+            <h2 class="section-title" data-id="config-section-title">Load Configuration</h2>
+            <p class="section-description" data-id="config-description">Drag & drop TOML file or click to load existing
+              configuration</p>
           </div>
-          <div v-if="config_loaded" class="config-status">
+          <div v-if="config_loaded" class="config-status" data-id="config-status">
             ✓ Config loaded
           </div>
-          <n-button @click="load_config" type="error" ghost class="action-button">
+          <n-button @click="load_config" type="error" ghost class="action-button" data-id="load-config-button">
             Load Config
           </n-button>
-
         </div>
       </div>
     </div>
 
     <!-- Installation Options -->
-    <div class="installation-options">
+    <div class="installation-options" data-id="installation-options">
       <!-- Simplified Installation -->
-      <div class="option-panel">
-        <div class="option-content">
-          <div class="icon-container">
-            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+      <div class="option-panel" data-id="simplified-installation-panel">
+        <div class="option-content" data-id="simplified-installation-content">
+          <div class="icon-container" data-id="simplified-icon-container">
+            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" data-id="simplified-icon">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
             </svg>
           </div>
-          <h2 class="option-title">Simplified Installation</h2>
-          <p class="option-description">
+          <h2 class="option-title" data-id="simplified-title">Simplified Installation</h2>
+          <p class="option-description" data-id="simplified-description">
             The installer will take care of all the necessary steps for you, including installing the required
             dependencies, configuring the device, and installing the software.
           </p>
-          <n-button @click="startSimplifiedSetup" type="error" ghost class="action-button">
+          <n-button @click="startSimplifiedSetup" type="error" ghost class="action-button"
+            data-id="start-simplified-button">
             Start Simplified Setup
           </n-button>
         </div>
       </div>
 
       <!-- Expert Installation -->
-      <div class="option-panel">
-        <div class="option-content">
-          <div class="icon-container">
-            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+      <div class="option-panel" data-id="expert-installation-panel">
+        <div class="option-content" data-id="expert-installation-content">
+          <div class="icon-container" data-id="expert-icon-container">
+            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" data-id="expert-icon">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                 d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                 d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
             </svg>
           </div>
-          <h2 class="option-title">Expert Installation</h2>
-          <p class="option-description">
+          <h2 class="option-title" data-id="expert-title">Expert Installation</h2>
+          <p class="option-description" data-id="expert-description">
             Let our wizard guide you through a streamlined installation process where you can configure every step.
           </p>
-          <n-button @click="startWizard" type="error" ghost class="action-button">
+          <n-button @click="startWizard" type="error" ghost class="action-button" data-id="start-expert-button">
             Start Expert Setup
           </n-button>
         </div>
diff --git a/src/components/WizardStep.vue b/src/components/WizardStep.vue
index 97a99ed..d5b75b2 100644
--- a/src/components/WizardStep.vue
+++ b/src/components/WizardStep.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="wizard-layout">
-    <div class="wizard-sidebar">
-      <div class="steps-list">
+  <div class="wizard-layout" data-id="wizard-layout">
+    <div class="wizard-sidebar" data-id="wizard-sidebar">
+      <div class="steps-list" data-id="steps-list">
         <div v-for="(step, index) in steps" :key="index" class="step-item" :class="{
           'active': currentStep === index + 1,
           'completed': currentStep > index + 1,
           'disabled': currentStep === 7 || currentStep === 8,
           'clickable': currentStep > index + 1 && currentStep < 7
-        }" @click="handleStepClick(index + 1)">
-          <div class="step-number">
+        }" @click="handleStepClick(index + 1)" :data-id="`step-item-${index + 1}`">
+          <div class="step-number" :data-id="`step-number-${index + 1}`">
             <template v-if="currentStep > index + 1">
-              <svg class="checkmark" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <svg class="checkmark" viewBox="0 0 24 24" fill="none" stroke="currentColor" data-id="step-checkmark">
                 <path d="M20 6L9 17L4 12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
               </svg>
             </template>
@@ -18,22 +18,22 @@
               {{ index + 1 }}
             </template>
           </div>
-          <div class="step-title">{{ step.title }}</div>
+          <div class="step-title" :data-id="`step-title-${index + 1}`">{{ step.title }}</div>
         </div>
       </div>
     </div>
 
     <!-- Main content -->
-    <div class="wizard-container">
-      <div class="wizard-step-container">
-        <PrerequisitiesCheck :nextstep=nextStep v-if="currentStep === 1" />
-        <PythonSanitycheck :nextstep=nextStep v-if="currentStep === 2" />
-        <TargetSelect :nextstep=nextStep v-if="currentStep === 3" />
-        <VersionSelect :nextstep=nextStep v-if="currentStep === 4" />
-        <MirrorSelect :nextstep=nextStep v-if="currentStep === 5" />
-        <InstallationPathSelect :nextstep=nextStep v-if="currentStep === 6" />
-        <InstalationProgress :nextstep=nextStep v-if="currentStep === 7" />
-        <Complete v-if="currentStep === 8" />
+    <div class="wizard-container" data-id="wizard-container">
+      <div class="wizard-step-container" data-id="wizard-step-content">
+        <PrerequisitiesCheck :nextstep=nextStep v-if="currentStep === 1" data-id="prerequisites-check" />
+        <PythonSanitycheck :nextstep=nextStep v-if="currentStep === 2" data-id="python-sanity-check" />
+        <TargetSelect :nextstep=nextStep v-if="currentStep === 3" data-id="target-select" />
+        <VersionSelect :nextstep=nextStep v-if="currentStep === 4" data-id="version-select" />
+        <MirrorSelect :nextstep=nextStep v-if="currentStep === 5" data-id="mirror-select" />
+        <InstallationPathSelect :nextstep=nextStep v-if="currentStep === 6" data-id="installation-path-select" />
+        <InstalationProgress :nextstep=nextStep v-if="currentStep === 7" data-id="installation-progress" />
+        <Complete v-if="currentStep === 8" data-id="complete" />
       </div>
     </div>
   </div>
diff --git a/src/components/wizard_steps/Complete.vue b/src/components/wizard_steps/Complete.vue
index f3f151e..84ceec3 100644
--- a/src/components/wizard_steps/Complete.vue
+++ b/src/components/wizard_steps/Complete.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="complete-screen">
+  <div class="complete-screen" data-id="complete-screen">
     <n-result status="success" title="Installation Complete!"
-      description="ESP-IDF has been successfully installed on your system">
+      description="ESP-IDF has been successfully installed on your system" data-id="completion-result">
       <template #footer>
-        <div class="actions">
-          <div class="info-section">
-            <div v-if="os === 'windows'" class="windows-info">
-              <n-alert type="info">
+        <div class="actions" data-id="completion-actions">
+          <div class="info-section" data-id="info-section">
+            <div v-if="os === 'windows'" class="windows-info" data-id="windows-info">
+              <n-alert type="info" data-id="powershell-shortcut-alert">
                 <template #icon>
-                  <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                  <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" data-id="shortcut-icon">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                       d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                   </svg>
@@ -17,10 +17,10 @@
               </n-alert>
             </div>
 
-            <div class="config-save">
-              <n-alert type="info">
+            <div class="config-save" data-id="config-save-section">
+              <n-alert type="info" data-id="save-config-alert">
                 <template #icon>
-                  <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                  <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" data-id="save-icon">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                       d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
                   </svg>
@@ -30,11 +30,11 @@
             </div>
           </div>
 
-          <div class="buttons">
-            <n-button @click="save_config" type="info" class="save-button">
+          <div class="buttons" data-id="action-buttons">
+            <n-button @click="save_config" type="info" class="save-button" data-id="save-config-button">
               Save Configuration
             </n-button>
-            <n-button @click="quit" type="error">
+            <n-button @click="quit" type="error" data-id="exit-button">
               Exit Installer
             </n-button>
           </div>
diff --git a/src/components/wizard_steps/InstalationProgress.vue b/src/components/wizard_steps/InstalationProgress.vue
index 5b9c967..832e82b 100644
--- a/src/components/wizard_steps/InstalationProgress.vue
+++ b/src/components/wizard_steps/InstalationProgress.vue
@@ -1,51 +1,52 @@
 <template>
-  <div class="installation-progress">
-    <h1 class="title">Installation Progress</h1>
+  <div class="installation-progress" data-id="installation-progress">
+    <h1 class="title" data-id="installation-title">Installation Progress</h1>
 
-    <n-card class="progress-card">
-      <div class="summary-section">
-        <div class="versions-info" v-if="all_settings">
-          <h3>Installing ESP-IDF Versions:</h3>
-          <div class="version-chips">
-            <n-tag v-for="version in idf_versions" :key="version" type="info">
+    <n-card class="progress-card" data-id="progress-card">
+      <div class="summary-section" data-id="installation-summary">
+        <div class="versions-info" v-if="all_settings" data-id="versions-info">
+          <h3 data-id="versions-title">Installing ESP-IDF Versions:</h3>
+          <div class="version-chips" data-id="version-chips">
+            <n-tag v-for="version in idf_versions" :key="version" type="info" :data-id="`version-tag-${version}`">
               {{ version }}
             </n-tag>
           </div>
         </div>
-        <!-- todo replace with complete instalation button -->
-        <div v-if="instalation_finished">
-          <n-button @click="nextstep" type="error" size="large">
+        <div v-if="instalation_finished" data-id="complete-button-container">
+          <n-button @click="nextstep" type="error" size="large" data-id="complete-installation-button">
             Complete Installation
           </n-button>
         </div>
-        <div v-else>
+        <div v-else data-id="start-button-container">
           <n-button @click="startInstalation()" type="error" size="large" :loading="instalation_running"
-            :disabled="instalation_running">
+            :disabled="instalation_running" data-id="start-installation-button">
             {{ instalation_running ? 'Installing...' : 'Start Installation' }}
           </n-button>
         </div>
       </div>
 
-      <div v-if="instalation_running || instalation_finished" class="status-section">
-        <div class="status-grid">
-          <div class="status-item" v-if="curently_installing_version">
-            <span class="status-label">Currently Installing:</span>
-            <n-tag type="warning">{{ curently_installing_version }}</n-tag>
+      <div v-if="instalation_running || instalation_finished" class="status-section" data-id="status-section">
+        <div class="status-grid" data-id="status-grid">
+          <div class="status-item" v-if="curently_installing_version" data-id="current-version-status">
+            <span class="status-label" data-id="current-version-label">Currently Installing:</span>
+            <n-tag type="warning" data-id="current-version-tag">{{ curently_installing_version }}</n-tag>
           </div>
 
-          <div class="status-item" v-if="versions_finished.length > 0">
-            <span class="status-label">Completed:</span>
-            <div class="version-chips">
-              <n-tag v-for="version in versions_finished" :key="version" type="success">
+          <div class="status-item" v-if="versions_finished.length > 0" data-id="completed-versions-status">
+            <span class="status-label" data-id="completed-versions-label">Completed:</span>
+            <div class="version-chips" data-id="completed-version-chips">
+              <n-tag v-for="version in versions_finished" :key="version" type="success"
+                :data-id="`completed-version-${version}`">
                 {{ version }}
               </n-tag>
             </div>
           </div>
 
-          <div class="status-item" v-if="versions_failed.length > 0">
-            <span class="status-label">Failed:</span>
-            <div class="version-chips">
-              <n-tag v-for="version in versions_failed" :key="version" type="error">
+          <div class="status-item" v-if="versions_failed.length > 0" data-id="failed-versions-status">
+            <span class="status-label" data-id="failed-versions-label">Failed:</span>
+            <div class="version-chips" data-id="failed-version-chips">
+              <n-tag v-for="version in versions_failed" :key="version" type="error"
+                :data-id="`failed-version-${version}`">
                 {{ version }}
               </n-tag>
             </div>
@@ -53,12 +54,13 @@
         </div>
       </div>
 
-      <div v-if="tools_tabs.length > 0" class="tools-section">
-        <n-tabs type="card" class="tools-tabs">
-          <n-tab-pane v-for="version in tools_tabs" :key="version" :tab="version" :name="version">
-            <n-table striped>
+      <div v-if="tools_tabs.length > 0" class="tools-section" data-id="tools-section">
+        <n-tabs type="card" class="tools-tabs" data-id="tools-tabs">
+          <n-tab-pane v-for="version in tools_tabs" :key="version" :tab="version" :name="version"
+            :data-id="`tools-tab-${version}`">
+            <n-table striped data-id="tools-table">
               <thead>
-                <tr>
+                <tr data-id="tools-table-header">
                   <th>Tool</th>
                   <th>Downloaded</th>
                   <th>Extracted</th>
@@ -67,15 +69,16 @@
                 </tr>
               </thead>
               <tbody>
-                <tr v-for="(tool, name) in tools[version]" :key="name">
-                  <td>{{ tool.name }}</td>
-                  <td><n-tag :type="tool.downloaded ? 'success' : 'default'">{{ tool.downloaded ? 'Yes' : 'No'
-                      }}</n-tag></td>
-                  <td><n-tag :type="tool.extracted ? 'success' : 'default'">{{ tool.extracted ? 'Yes' : 'No' }}</n-tag>
-                  </td>
-                  <td><n-tag :type="tool.finished ? 'success' : 'default'">{{ tool.finished ? 'Yes' : 'No' }}</n-tag>
-                  </td>
-                  <td><n-tag :type="tool.error ? 'error' : 'default'">{{ tool.error ? 'Yes' : 'No' }}</n-tag></td>
+                <tr v-for="(tool, name) in tools[version]" :key="name" :data-id="`tool-row-${version}-${name}`">
+                  <td data-id="tool-name">{{ tool.name }}</td>
+                  <td><n-tag :type="tool.downloaded ? 'success' : 'default'"
+                      :data-id="`tool-downloaded-${version}-${name}`">{{ tool.downloaded ? 'Yes' : 'No' }}</n-tag></td>
+                  <td><n-tag :type="tool.extracted ? 'success' : 'default'"
+                      :data-id="`tool-extracted-${version}-${name}`">{{ tool.extracted ? 'Yes' : 'No' }}</n-tag></td>
+                  <td><n-tag :type="tool.finished ? 'success' : 'default'"
+                      :data-id="`tool-finished-${version}-${name}`">{{ tool.finished ? 'Yes' : 'No' }}</n-tag></td>
+                  <td><n-tag :type="tool.error ? 'error' : 'default'" :data-id="`tool-error-${version}-${name}`">{{
+                    tool.error ? 'Yes' : 'No' }}</n-tag></td>
                 </tr>
               </tbody>
             </n-table>
@@ -83,8 +86,8 @@
         </n-tabs>
       </div>
 
-      <div class="action-footer" v-if="instalation_finished">
-        <n-button @click="nextstep" type="error" size="large">
+      <div class="action-footer" v-if="instalation_finished" data-id="action-footer">
+        <n-button @click="nextstep" type="error" size="large" data-id="complete-installation-button-footer">
           Complete Installation
         </n-button>
       </div>
diff --git a/src/components/wizard_steps/InstallationPathSelect.vue b/src/components/wizard_steps/InstallationPathSelect.vue
index f3641a8..9eb2cef 100644
--- a/src/components/wizard_steps/InstallationPathSelect.vue
+++ b/src/components/wizard_steps/InstallationPathSelect.vue
@@ -1,30 +1,32 @@
 <template>
-  <div class="install-path">
-    <h1 class="title">Select Installation Location</h1>
-
-    <n-card class="path-card">
-      <div class="card-content">
-        <div class="path-info">
-          <h3 class="info-title">ESP-IDF Installation Directory</h3>
-          <p class="info-desc">Choose where to install ESP-IDF and its tools. Ensure you have sufficient disk space.</p>
+  <div class="install-path" data-id="install-path">
+    <h1 class="title" data-id="install-path-title">Select Installation Location</h1>
+
+    <n-card class="path-card" data-id="path-selection-card">
+      <div class="card-content" data-id="path-card-content">
+        <div class="path-info" data-id="path-info-section">
+          <h3 class="info-title" data-id="path-info-title">ESP-IDF Installation Directory</h3>
+          <p class="info-desc" data-id="path-info-description">Choose where to install ESP-IDF and its tools. Ensure you
+            have sufficient disk space.</p>
         </div>
 
-        <div class="path-input">
-          <n-input-group>
-            <n-input v-model:value="installPath" placeholder="Choose installation directory" class="path-field" />
-            <n-button @click="openFolderDialog" type="error">
+        <div class="path-input" data-id="path-input-section">
+          <n-input-group data-id="path-input-group">
+            <n-input v-model:value="installPath" placeholder="Choose installation directory" class="path-field"
+              data-id="installation-path-input" />
+            <n-button @click="openFolderDialog" type="error" data-id="browse-button">
               Browse
             </n-button>
           </n-input-group>
         </div>
 
-        <div class="path-validation" v-if="pathError">
-          <p class="error-message">{{ pathError }}</p>
+        <div class="path-validation" v-if="pathError" data-id="path-validation-section">
+          <p class="error-message" data-id="path-error-message">{{ pathError }}</p>
         </div>
       </div>
 
-      <div class="action-footer">
-        <n-button @click="processInstallPath" type="error" size="large">
+      <div class="action-footer" data-id="path-action-footer">
+        <n-button @click="processInstallPath" type="error" size="large" data-id="continue-path-button">
           Continue
         </n-button>
       </div>
diff --git a/src/components/wizard_steps/MirrorSelect.vue b/src/components/wizard_steps/MirrorSelect.vue
index 2d1008e..c401fb5 100644
--- a/src/components/wizard_steps/MirrorSelect.vue
+++ b/src/components/wizard_steps/MirrorSelect.vue
@@ -1,22 +1,24 @@
 <template>
-  <div class="mirror-select">
-    <h1 class="title">Select Download Mirrors</h1>
-    <p class="description">Choose mirrors for downloading ESP-IDF and tools. Default mirrors are recommended for users
-      outside mainland China.</p>
-
-    <n-card class="mirrors-card">
-      <n-spin :show="loading_idfs || loading_tools">
-        <div class="mirrors-grid">
+  <div class="mirror-select" data-id="mirror-select">
+    <h1 class="title" data-id="mirror-select-title">Select Download Mirrors</h1>
+    <p class="description" data-id="mirror-select-description">Choose mirrors for downloading ESP-IDF and tools. Default
+      mirrors are recommended for users outside mainland China.</p>
+
+    <n-card class="mirrors-card" data-id="mirrors-card">
+      <n-spin :show="loading_idfs || loading_tools" data-id="mirrors-loading-spinner">
+        <div class="mirrors-grid" data-id="mirrors-grid">
           <!-- IDF Mirror Selection -->
-          <div class="mirror-section">
-            <h3 class="section-title">ESP-IDF Repository Mirror</h3>
-            <n-radio-group v-model:value="selected_idf_mirror" class="mirror-options">
+          <div class="mirror-section" data-id="idf-mirror-section">
+            <h3 class="section-title" data-id="idf-section-title">ESP-IDF Repository Mirror</h3>
+            <n-radio-group v-model:value="selected_idf_mirror" class="mirror-options" data-id="idf-mirror-radio-group">
               <div v-for="mirror in idf_mirrors" :key="mirror.value" class="mirror-option"
-                :class="{ 'selected': selected_idf_mirror === mirror.value }">
-                <n-radio :value="mirror.value">
-                  <div class="mirror-content">
-                    <span class="mirror-url">{{ mirror.label }}</span>
-                    <span v-if="isDefaultMirror(mirror.value, 'idf')" class="mirror-tag">Default</span>
+                :class="{ 'selected': selected_idf_mirror === mirror.value }"
+                :data-id="`idf-mirror-option-${mirror.value}`">
+                <n-radio :value="mirror.value" :data-id="`idf-mirror-radio-${mirror.value}`">
+                  <div class="mirror-content" :data-id="`idf-mirror-content-${mirror.value}`">
+                    <span class="mirror-url" :data-id="`idf-mirror-url-${mirror.value}`">{{ mirror.label }}</span>
+                    <span v-if="isDefaultMirror(mirror.value, 'idf')" class="mirror-tag"
+                      :data-id="`idf-mirror-default-tag-${mirror.value}`">Default</span>
                   </div>
                 </n-radio>
               </div>
@@ -24,15 +26,18 @@
           </div>
 
           <!-- Tools Mirror Selection -->
-          <div class="mirror-section">
-            <h3 class="section-title">ESP-IDF Tools Mirror</h3>
-            <n-radio-group v-model:value="selected_tools_mirror" class="mirror-options">
+          <div class="mirror-section" data-id="tools-mirror-section">
+            <h3 class="section-title" data-id="tools-section-title">ESP-IDF Tools Mirror</h3>
+            <n-radio-group v-model:value="selected_tools_mirror" class="mirror-options"
+              data-id="tools-mirror-radio-group">
               <div v-for="mirror in tools_mirrors" :key="mirror.value" class="mirror-option"
-                :class="{ 'selected': selected_tools_mirror === mirror.value }">
-                <n-radio :value="mirror.value">
-                  <div class="mirror-content">
-                    <span class="mirror-url">{{ mirror.label }}</span>
-                    <span v-if="isDefaultMirror(mirror.value, 'tools')" class="mirror-tag">Default</span>
+                :class="{ 'selected': selected_tools_mirror === mirror.value }"
+                :data-id="`tools-mirror-option-${mirror.value}`">
+                <n-radio :value="mirror.value" :data-id="`tools-mirror-radio-${mirror.value}`">
+                  <div class="mirror-content" :data-id="`tools-mirror-content-${mirror.value}`">
+                    <span class="mirror-url" :data-id="`tools-mirror-url-${mirror.value}`">{{ mirror.label }}</span>
+                    <span v-if="isDefaultMirror(mirror.value, 'tools')" class="mirror-tag"
+                      :data-id="`tools-mirror-default-tag-${mirror.value}`">Default</span>
                   </div>
                 </n-radio>
               </div>
@@ -40,8 +45,9 @@
           </div>
         </div>
 
-        <div class="action-footer">
-          <n-button @click="processChoices" type="error" size="large" :disabled="!canProceed">
+        <div class="action-footer" data-id="mirror-action-footer">
+          <n-button @click="processChoices" type="error" size="large" :disabled="!canProceed"
+            data-id="continue-mirrors-button">
             Continue with Selected Mirrors
           </n-button>
         </div>
diff --git a/src/components/wizard_steps/PrerequisitiesCheck.vue b/src/components/wizard_steps/PrerequisitiesCheck.vue
index 817700e..9df4b00 100644
--- a/src/components/wizard_steps/PrerequisitiesCheck.vue
+++ b/src/components/wizard_steps/PrerequisitiesCheck.vue
@@ -1,56 +1,59 @@
 <template>
-  <div class="prerequisites">
-    <h1 class="title">Prerequisites Check</h1>
-    <p class="description">The installer will now verify required components for ESP-IDF...</p>
+  <div class="prerequisites" data-id="prerequisites-check">
+    <h1 class="title" data-id="prerequisites-title">Prerequisites Check</h1>
+    <p class="description" data-id="prerequisites-description">The installer will now verify required components for
+      ESP-IDF...</p>
 
-    <div class="check-section">
-      <n-card class="prerequisites-list">
+    <div class="check-section" data-id="check-section">
+      <n-card class="prerequisites-list" data-id="prerequisites-card">
         <template #header>
-          <div class="card-header">
-            <span class="header-title">Prerequisites</span>
-
+          <div class="card-header" data-id="prerequisites-card-header">
+            <span class="header-title" data-id="prerequisites-header-title">Prerequisites</span>
           </div>
         </template>
 
-        <n-spin :show="loading">
-          <ul class="items-list">
+        <n-spin :show="loading" data-id="prerequisites-spinner">
+          <ul class="items-list" data-id="prerequisites-items-list">
             <li v-for="p in display_prerequisities" :key="p.name"
-              :class="{ 'item': true, 'missing': p.icon === '❌', 'installed': p.icon === '✔' }">
-              <span class="item-icon">{{ p.icon }}</span>
-              <span class="item-name">{{ p.name }}</span>
+              :class="{ 'item': true, 'missing': p.icon === '❌', 'installed': p.icon === '✔' }"
+              :data-id="`prerequisite-item-${p.name}`">
+              <span class="item-icon" :data-id="`prerequisite-icon-${p.name}`">{{ p.icon }}</span>
+              <span class="item-name" :data-id="`prerequisite-name-${p.name}`">{{ p.name }}</span>
             </li>
           </ul>
         </n-spin>
-
       </n-card>
-      <n-button @click="check_prerequisites" type="error" :loading="loading">
+      <n-button @click="check_prerequisites" type="error" :loading="loading" data-id="check-prerequisites-button">
         {{ loading ? 'Checking...' : 'Check Prerequisites' }}
       </n-button>
 
       <!-- Results Section -->
-      <div v-if="did_the_check_run" class="results-section">
+      <div v-if="did_the_check_run" class="results-section" data-id="prerequisites-results">
         <n-result v-if="missing_prerequisities.length === 0" status="success" title="All Prerequisites Installed"
-          description="Your system is ready for ESP-IDF installation">
+          description="Your system is ready for ESP-IDF installation" data-id="prerequisites-success-result">
           <template #footer>
-            <n-button @click="nextstep" type="error">
+            <n-button @click="nextstep" type="error" data-id="continue-button">
               Continue to Next Step
             </n-button>
           </template>
         </n-result>
 
         <n-result v-else status="warning" title="Missing Prerequisites"
-          :description="os === 'windows' ? 'Click below to automatically install missing components' : 'Please install the following components manually'">
+          :description="os === 'windows' ? 'Click below to automatically install missing components' : 'Please install the following components manually'"
+          data-id="prerequisites-warning-result">
           <template #footer>
-            <div class="missing-items">
-              <div v-if="os === 'windows'" class="windows-install">
-                <n-button @click="install_prerequisites" type="warning" :loading="installing_prerequisities">
+            <div class="missing-items" data-id="missing-prerequisites">
+              <div v-if="os === 'windows'" class="windows-install" data-id="windows-install-section">
+                <n-button @click="install_prerequisites" type="warning" :loading="installing_prerequisities"
+                  data-id="install-prerequisites-button">
                   Install Missing Prerequisites
                 </n-button>
               </div>
-              <div v-else class="manual-install">
-                <p class="hint">Please install these components and run the check again:</p>
-                <ul class="missing-list">
-                  <li v-for="p in missing_prerequisities" :key="p">{{ p }}</li>
+              <div v-else class="manual-install" data-id="manual-install-section">
+                <p class="hint" data-id="manual-install-hint">Please install these components and run the check again:
+                </p>
+                <ul class="missing-list" data-id="missing-prerequisites-list">
+                  <li v-for="p in missing_prerequisities" :key="p" :data-id="`missing-prerequisite-${p}`">{{ p }}</li>
                 </ul>
               </div>
             </div>
diff --git a/src/components/wizard_steps/PythonSanitycheck.vue b/src/components/wizard_steps/PythonSanitycheck.vue
index f0d1324..2be52af 100644
--- a/src/components/wizard_steps/PythonSanitycheck.vue
+++ b/src/components/wizard_steps/PythonSanitycheck.vue
@@ -1,37 +1,42 @@
 <template>
-  <div class="python-check">
-    <h1 class="title">Python Environment Check</h1>
+  <div class="python-check" data-id="python-check">
+    <h1 class="title" data-id="python-check-title">Python Environment Check</h1>
 
-    <n-card class="status-card">
-      <n-spin :show="loading">
-        <div v-if="!loading" class="status-content">
+    <n-card class="status-card" data-id="python-status-card">
+      <n-spin :show="loading" data-id="python-check-spinner">
+        <div v-if="!loading" class="status-content" data-id="python-status-content">
           <n-result :status="python_sane ? 'success' : 'warning'"
             :title="python_sane ? 'Python Environment Ready' : 'Python Setup Required'"
-            :description="python_sane ? 'Your Python installation meets all requirements' : 'Python 3.10+ with pip, virtualenv, and SSL support is required'">
+            :description="python_sane ? 'Your Python installation meets all requirements' : 'Python 3.10+ with pip, virtualenv, and SSL support is required'"
+            data-id="python-check-result">
             <template #footer>
-              <div class="action-buttons">
-                <div v-if="!python_sane && os === 'windows'" class="install-section">
-                  <n-button @click="install_python" type="warning" :loading="installing_python" :disabled="loading">
+              <div class="action-buttons" data-id="python-action-buttons">
+                <div v-if="!python_sane && os === 'windows'" class="install-section" data-id="python-install-section">
+                  <n-button @click="install_python" type="warning" :loading="installing_python" :disabled="loading"
+                    data-id="install-python-button">
                     {{ installing_python ? 'Installing Python...' : 'Install Python' }}
                   </n-button>
-                  <p class="install-note">This will install Python with all required components</p>
+                  <p class="install-note" data-id="install-python-note">This will install Python with all required
+                    components</p>
                 </div>
 
-                <n-button v-if="python_sane" @click="nextstep" type="error" :disabled="loading">
+                <n-button v-if="python_sane" @click="nextstep" type="error" :disabled="loading"
+                  data-id="continue-button">
                   Continue to Next Step
                 </n-button>
               </div>
             </template>
           </n-result>
 
-          <div v-if="!python_sane && os !== 'windows'" class="manual-instructions">
-            <h3>Manual Installation Required</h3>
-            <p>Please install:</p>
-            <ul>
-              <li>Python 3.10 or later</li>
-              <li>pip package manager</li>
-              <li>virtualenv module</li>
-              <li>SSL support</li>
+          <div v-if="!python_sane && os !== 'windows'" class="manual-instructions"
+            data-id="manual-install-instructions">
+            <h3 data-id="manual-install-title">Manual Installation Required</h3>
+            <p data-id="manual-install-intro">Please install:</p>
+            <ul data-id="manual-install-requirements">
+              <li data-id="python-requirement">Python 3.10 or later</li>
+              <li data-id="pip-requirement">pip package manager</li>
+              <li data-id="virtualenv-requirement">virtualenv module</li>
+              <li data-id="ssl-requirement">SSL support</li>
             </ul>
           </div>
         </div>
diff --git a/src/components/wizard_steps/TargetSelect.vue b/src/components/wizard_steps/TargetSelect.vue
index 35a8251..768be3f 100644
--- a/src/components/wizard_steps/TargetSelect.vue
+++ b/src/components/wizard_steps/TargetSelect.vue
@@ -1,17 +1,18 @@
 <template>
-  <div class="target-select">
-    <h1 class="title">Select Target Chips</h1>
-    <p class="description">Choose the ESP chips you'll be developing for:</p>
+  <div class="target-select" data-id="target-select">
+    <h1 class="title" data-id="target-select-title">Select Target Chips</h1>
+    <p class="description" data-id="target-select-description">Choose the ESP chips you'll be developing for:</p>
 
-    <n-card class="selection-card">
-      <n-spin :show="loading">
-        <div class="targets-grid">
+    <n-card class="selection-card" data-id="target-selection-card">
+      <n-spin :show="loading" data-id="target-loading-spinner">
+        <div class="targets-grid" data-id="targets-grid">
           <div v-for="target in targets" :key="target.name" class="target-item" :class="{ 'selected': target.selected }"
-            @click="clickOnTarget">
-            <n-checkbox v-model:checked="target.selected">
-              <div class="target-content">
-                <span class="target-name">{{ target.name }}</span>
-                <span class="target-description" v-if="target.description">
+            :data-id="`target-item-${target.name}`" @click="clickOnTarget">
+            <n-checkbox v-model:checked="target.selected" :data-id="`target-checkbox-${target.name}`">
+              <div class="target-content" :data-id="`target-content-${target.name}`">
+                <span class="target-name" :data-id="`target-name-${target.name}`">{{ target.name }}</span>
+                <span class="target-description" v-if="target.description"
+                  :data-id="`target-description-${target.name}`">
                   {{ target.description }}
                 </span>
               </div>
@@ -19,8 +20,9 @@
           </div>
         </div>
 
-        <div class="action-footer">
-          <n-button @click="processTargets" type="error" size="large" :disabled="!hasSelectedTargets">
+        <div class="action-footer" data-id="target-action-footer">
+          <n-button @click="processTargets" type="error" size="large" :disabled="!hasSelectedTargets"
+            data-id="continue-targets-button">
             Continue with Selected Targets
           </n-button>
         </div>
diff --git a/src/components/wizard_steps/VersionSelect.vue b/src/components/wizard_steps/VersionSelect.vue
index 9a48387..45ffdb3 100644
--- a/src/components/wizard_steps/VersionSelect.vue
+++ b/src/components/wizard_steps/VersionSelect.vue
@@ -1,21 +1,24 @@
 <template>
-  <div class="version-select">
-    <h1 class="title">Select ESP-IDF Versions</h1>
-    <p class="description">Choose which ESP-IDF SDK versions to install:</p>
+  <div class="version-select" data-id="version-select">
+    <h1 class="title" data-id="version-select-title">Select ESP-IDF Versions</h1>
+    <p class="description" data-id="version-select-description">Choose which ESP-IDF SDK versions to install:</p>
 
-    <n-card class="selection-card">
-      <n-spin :show="loading">
-        <div class="versions-grid">
+    <n-card class="selection-card" data-id="version-selection-card">
+      <n-spin :show="loading" data-id="version-loading-spinner">
+        <div class="versions-grid" data-id="versions-grid">
           <div v-for="version in versions" :key="version.name" class="version-item"
-            :class="{ 'selected': version.selected }">
-            <n-checkbox v-model:checked="version.selected">
-              <div class="version-content">
-                <div class="version-header">
-                  <span class="version-name">{{ version.name }}</span>
-                  <n-tag v-if="version.latest" type="error" size="small">Latest</n-tag>
-                  <n-tag v-if="version.lts" type="success" size="small">LTS</n-tag>
+            :class="{ 'selected': version.selected }" :data-id="`version-item-${version.name}`">
+            <n-checkbox v-model:checked="version.selected" :data-id="`version-checkbox-${version.name}`">
+              <div class="version-content" :data-id="`version-content-${version.name}`">
+                <div class="version-header" :data-id="`version-header-${version.name}`">
+                  <span class="version-name" :data-id="`version-name-${version.name}`">{{ version.name }}</span>
+                  <n-tag v-if="version.latest" type="error" size="small"
+                    :data-id="`version-latest-tag-${version.name}`">Latest</n-tag>
+                  <n-tag v-if="version.lts" type="success" size="small"
+                    :data-id="`version-lts-tag-${version.name}`">LTS</n-tag>
                 </div>
-                <span v-if="version.description" class="version-description">
+                <span v-if="version.description" class="version-description"
+                  :data-id="`version-description-${version.name}`">
                   {{ version.description }}
                 </span>
               </div>
@@ -23,20 +26,9 @@
           </div>
         </div>
 
-        <!-- <div class="summary-section" v-if="selectedVersions.length > 0">
-          <div class="summary-content">
-            <span class="summary-label">Selected versions:</span>
-            <div class="selected-tags">
-              <n-tag v-for="version in selectedVersions" :key="version" type="error" closable
-                @close="deselectVersion(version)">
-                {{ version }}
-              </n-tag>
-            </div>
-          </div>
-        </div> -->
-
-        <div class="action-footer">
-          <n-button @click="processVersions" type="error" size="large" :disabled="!hasSelectedVersions">
+        <div class="action-footer" data-id="version-action-footer">
+          <n-button @click="processVersions" type="error" size="large" :disabled="!hasSelectedVersions"
+            data-id="continue-installation-button">
             Continue Installation
           </n-button>
         </div>