Add workbench interaction smoke anchors

frontend/src/components/datasets/DatasetPanel.tsx

@@ -62,7 +62,7 @@ export function DatasetPanel({
   onRefreshMetadata,
 }: DatasetPanelProps) {
   return (
-    <section>
+    <section data-testid="dataset-panel">
       <h2>Datasets</h2>
       <form onSubmit={onUploadDataset}>
         <select
@@ -111,7 +111,11 @@ export function DatasetPanel({
             <div>size: {formatBytes(dataset.size_bytes)}</div>
             <div>features: {dataset.feature_count ?? dataset.vector_summary?.feature_count ?? 'n/a'}</div>
             <div>bbox: {formatBounds(dataset.bounds_json ?? dataset.vector_summary?.bounds_json)}</div>
-            <button type="button" onClick={() => onLoadDatasetDetails(selectedProjectId ?? '', dataset)}>
+            <button
+              type="button"
+              onClick={() => onLoadDatasetDetails(selectedProjectId ?? '', dataset)}
+              data-testid={`dataset-select-${dataset.id}`}
+            >
               Select / details
             </button>
             <button

frontend/src/components/exports/ExportCenter.tsx

@@ -56,12 +56,17 @@ export function ExportCenter({
   const canExportDataset = Boolean(selectedDataset && isVectorDatasetType(selectedDataset.dataset_type))
 
   return (
-    <section>
+    <section data-testid="export-center">
       <h2>Export Center</h2>
-      <button type="button" onClick={onRefresh} disabled={!selectedProjectId || loadingExports}>
+      <button type="button" onClick={onRefresh} disabled={!selectedProjectId || loadingExports} data-testid="refresh-exports">
         Refresh exports
       </button>
-      <button type="button" onClick={onExportProjectMetadata} disabled={!selectedProjectId || exporting}>
+      <button
+        type="button"
+        onClick={onExportProjectMetadata}
+        disabled={!selectedProjectId || exporting}
+        data-testid="export-project-metadata"
+      >
         Export project metadata JSON
       </button>
       <button type="button" onClick={onExportProjectReport} disabled={!selectedProjectId || exporting}>

frontend/src/components/map/MapWorkspace.tsx

@@ -43,7 +43,7 @@ export function MapWorkspace({
   onSelectMapFeature,
 }: MapWorkspaceProps): JSX.Element {
   return (
-    <section>
+    <section data-testid="map-workspace">
       <h2>Map workspace</h2>
       <p>{mapLayerLabel}</p>
       <div className="map-controls">
@@ -53,6 +53,7 @@ export function MapWorkspace({
             value={selectedMapAreaId}
             onChange={(event) => onSelectMapArea(event.target.value)}
             disabled={areas.length === 0}
+            data-testid="map-area-select"
           >
             <option value="">No area</option>
             {areas.map((area) => (
@@ -68,6 +69,7 @@ export function MapWorkspace({
             disabled={!areaFeatureCollection}
             type="checkbox"
             onChange={(event) => onSetAreaLayerVisible(event.target.checked)}
+            data-testid="map-area-visible"
           />
           Area visible
         </label>
@@ -81,6 +83,7 @@ export function MapWorkspace({
             type="range"
             value={areaLayerOpacity}
             onChange={(event) => onSetAreaLayerOpacity(Number(event.target.value))}
+            data-testid="map-area-opacity"
           />
         </label>
         <label className="checkbox-row">
@@ -89,6 +92,7 @@ export function MapWorkspace({
             disabled={!mapFeatureCollection}
             type="checkbox"
             onChange={(event) => onSetMapLayerVisible(event.target.checked)}
+            data-testid="map-layer-visible"
           />
           Layer visible
         </label>
@@ -102,6 +106,7 @@ export function MapWorkspace({
             type="range"
             value={mapLayerOpacity}
             onChange={(event) => onSetMapLayerOpacity(Number(event.target.value))}
+            data-testid="map-layer-opacity"
           />
         </label>
         <div className="map-status">

frontend/src/components/project/AreaPanel.tsx

@@ -31,7 +31,7 @@ export function AreaPanel({
   onSelectMapArea,
 }: AreaPanelProps): JSX.Element {
   return (
-    <section>
+    <section data-testid="area-panel">
       <h2>Area manager</h2>
       <p>{selectedProject ? `Selected project: ${selectedProject.name}` : 'Select a project first'}</p>
 
@@ -63,7 +63,12 @@ export function AreaPanel({
           <li key={area.id}>
             <strong>{area.name}</strong> - {area.area_m2 ? `${area.area_m2.toFixed(2)} m2` : 'n/a'}
             <div>geometry: {area.geometry?.type ?? area.geometry_type ?? 'n/a'}</div>
-            <button type="button" onClick={() => onSelectMapArea(area.id)} disabled={!area.geometry}>
+            <button
+              type="button"
+              onClick={() => onSelectMapArea(area.id)}
+              disabled={!area.geometry}
+              data-testid={`area-show-${area.id}`}
+            >
               {selectedMapAreaId === area.id ? 'Shown on map' : 'Show on map'}
             </button>
           </li>

frontend/src/components/project/ProjectPanel.tsx

@@ -27,7 +27,7 @@ export function ProjectPanel({
   onLoadDemoWorkflow,
 }: ProjectPanelProps): JSX.Element {
   return (
-    <section>
+    <section data-testid="project-panel">
       <h2>Projects</h2>
       {loadingProjects ? <p>Loading projects...</p> : null}
 
@@ -51,7 +51,7 @@ export function ProjectPanel({
       </form>
 
       <div className="demo-actions">
-        <button type="button" onClick={onLoadDemoWorkflow} disabled={loadingDemoWorkflow}>
+        <button type="button" onClick={onLoadDemoWorkflow} disabled={loadingDemoWorkflow} data-testid="load-demo-workflow">
           {loadingDemoWorkflow ? 'Loading demo...' : 'Load demo workflow'}
         </button>
         {demoWorkflowMessage ? <p>{demoWorkflowMessage}</p> : null}
@@ -64,6 +64,7 @@ export function ProjectPanel({
               type="button"
               onClick={() => onSelectProject(project.id)}
               aria-pressed={project.id === selectedProjectId}
+              data-testid={`project-select-${project.id}`}
             >
               {project.name}
             </button>

frontend/src/components/quality/QualityResultsPanel.tsx

@@ -14,9 +14,9 @@ export function QualityResultsPanel({
   onRefresh,
 }: QualityResultsPanelProps): JSX.Element {
   return (
-    <section>
+    <section data-testid="quality-results-panel">
       <h2>QA/QC Results</h2>
-      <button type="button" onClick={onRefresh} disabled={!selectedProjectId}>
+      <button type="button" onClick={onRefresh} disabled={!selectedProjectId} data-testid="refresh-quality-results">
         Refresh QA/QC results
       </button>
       {qualityChecksError ? <p className="error">{qualityChecksError}</p> : null}