feat(replay-ui): add data-testid hooks the dogfood spec drives

replay-ui/src/components/Tabs.tsx

@@ -65,6 +65,7 @@ export default function Tabs({ tabs, defaultTabId, ariaLabel }: TabsProps) {
     <div className="tabs">
       <div
         className="tabs-header"
+        data-testid="tab-strip"
         role="tablist"
         aria-label={ariaLabel}
         onKeyDown={handleKeyDown}
@@ -82,6 +83,8 @@ export default function Tabs({ tabs, defaultTabId, ariaLabel }: TabsProps) {
                 }
               }}
               type="button"
+              data-testid="tab"
+              data-tab-id={tab.id}
               role="tab"
               id={`${panelId}-tab-${tab.id}`}
               className="tabs-tab"

replay-ui/src/panels/ActionList.tsx

@@ -170,6 +170,8 @@ export default function ActionList({
               }
             }}
             className="action-list-item"
+            data-testid="step-row"
+            data-step={step.index}
             role="option"
             tabIndex={isActive ? 0 : -1}
             aria-selected={isActive}

replay-ui/src/panels/Screenshot.tsx

@@ -9,6 +9,12 @@ export interface ScreenshotProps {
   deviceHeight?: number;
 }
 
+// stepOfSource reads the step out of the screenshot URL the panel is rendering,
+// so a spec can compare what this panel shows against what the toolbar claims.
+function stepOfSource(src: string): string | undefined {
+  return /step-0*(\d+)\.png/.exec(src)?.[1];
+}
+
 const DEFAULT_WIDTH = 1080;
 const DEFAULT_HEIGHT = 1920;
 
@@ -58,6 +64,8 @@ export default function Screenshot({ src, action, deviceWidth, deviceHeight }: S
     >
       <img
         className="screenshot-image"
+        data-testid="screenshot"
+        data-step={stepOfSource(src)}
         src={src}
         alt="device screenshot"
         onLoad={(event) => {

replay-ui/src/panels/ViolationsPanel.tsx

@@ -130,13 +130,18 @@ export default function ViolationsPanel({
   }
 
   return (
-    <section className="violations-panel">
+    <section
+      className="violations-panel"
+      data-testid="violations-panel"
+      data-violation-count={rows.filter((row) => row.status === "violated").length}
+    >
       {violationsOnly ? null : (
         <header className="violations-panel-header">
           <h2 className="violations-panel-title">properties</h2>
           <button
             type="button"
             className="violations-panel-jump"
+            data-testid="jump-to-first-violation"
             onClick={onJumpToFirstViolation}
             disabled={!hasFirstViolation}
           >
@@ -149,7 +154,12 @@ export default function ViolationsPanel({
           const residual = residuals?.[name];
           const witness = status === "violated" ? witnesses?.[name] : undefined;
           return (
-            <li key={name} className="violations-panel-row" data-status={status}>
+            <li
+              key={name}
+              className="violations-panel-row"
+              data-testid="property-row"
+              data-status={status}
+            >
               <div className="violations-panel-row-head">
                 <span
                   className="violations-panel-badge"

replay-ui/src/routes/RunDetail.tsx

@@ -267,7 +267,11 @@ export default function RunDetail() {
           <span>
             <strong title={run.spec_path}>{basename(run.spec_path)}</strong> seed={run.seed}
           </span>
-          <span>
+          <span
+            data-testid="step-indicator"
+            data-step={stepIndex}
+            data-step-count={stepCount ?? 0}
+          >
             step {stepIndex} / {stepCount ?? 0}
           </span>
         </div>