feat: add data-testid attributes to key UI elements for automated testing

src/components/AudioSpeedControl.tsx

@@ -107,6 +107,7 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
         </div>
         <input
           id="speed-control"
+          data-testid="speed-slider"
           type="range"
           min={0}
           max={SPEED_STEPS.length - 1}

src/components/DownloadResult.tsx

@@ -138,6 +138,7 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
         <a
           href={isValid ? result.blobUrl : undefined}
           download={isValid ? filename : undefined}
+          data-testid="download-button"
           className={cn(
             "flex-1 min-w-[10rem] flex items-center justify-center gap-2 py-3 text-sm font-heading font-bold uppercase tracking-wide rounded-lg transition-all",
             isValid 
@@ -167,6 +168,7 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
         </a>
         <button
           type="button"
+          data-testid="reset-button"
           title="Reset and upload a new video"
           aria-label="Upload a new video"
           onClick={handleReset}

src/components/ExportOverlay.tsx

@@ -133,6 +133,7 @@ export default function ExportOverlay({ status, progress, exportStartedAt, onCan
             <div className="w-full space-y-2">
               <div className="h-1 w-full bg-film-100 rounded-full overflow-hidden">
                 <div
+                  data-testid="export-progress"
                   role="progressbar"
                   aria-valuenow={progress}
                   aria-valuemin={0}

src/components/ExportSettings.tsx

@@ -72,6 +72,7 @@ export default function ExportSettings({
 
         <input
           id="quality-control"
+          data-testid="quality-slider"
           type="range"
           min={18}
           max={30}

src/components/FileUpload.tsx

@@ -188,6 +188,7 @@ export default function FileUpload({
   const DropZone = () => (
     <div
       id="upload-zone"
+      data-testid="file-upload-zone"
       role="button"
       tabIndex={0}
       aria-label="Video upload area. Drag and drop a video file or press Enter to browse."

src/components/VideoEditor.tsx

@@ -763,6 +763,7 @@ export default function VideoEditor() {
 
             <button
               id="export-button"
+              data-testid="export-button"
               type="button"
               onClick={handleExport}
                 disabled={!file || isProcessing}