Auto-scroll to the last failed test step (#10595)

Author: hbenl

packages/e2e-tests/tests/react_devtools-02-integrations.test.ts

@@ -140,7 +140,7 @@ test("react_devtools-02: RDT integrations (Chromium)", async ({
   await searchComponents(page, "Anonymous"); // Search and select 1st result
   await verifySearchResults(page, {
     currentNumber: 1,
-    totalNumber: 16,
+    totalNumber: 17,
   });
 
   await componentSearchInput.focus();
@@ -149,7 +149,7 @@ test("react_devtools-02: RDT integrations (Chromium)", async ({
   await componentSearchInput.press("Enter");
   await verifySearchResults(page, {
     currentNumber: 4,
-    totalNumber: 16,
+    totalNumber: 17,
   });
 
   await viewSourceButton.click();

src/ui/components/TestSuite/views/TestRecording/Panel.tsx

@@ -1,4 +1,5 @@
 import assert from "assert";
+import findLast from "lodash/findLast";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import {
   ImperativePanelHandle,
@@ -115,12 +116,8 @@ export default function Panel() {
     // Select first failed event by default
     if (testRecording.result === "failed") {
       chosenTestEvent =
-        main.find(testEvent => {
-          switch (testEvent.type) {
-            case "user-action":
-              return testEvent.data.error != null;
-          }
-        }) ?? null;
+        findLast(main, testEvent => testEvent.type === "user-action" && !!testEvent.data.error) ??
+        null;
     }
 
     // Or just select first event

src/ui/components/TestSuite/views/TestRecording/TestRecordingEvents/UserActionEventRow.tsx

@@ -1,6 +1,6 @@
 import assert from "assert";
 import { ExecutionPoint, Location, TimeStampedPoint } from "@replayio/protocol";
-import { Suspense, memo, useContext, useMemo, useState } from "react";
+import { Suspense, memo, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Cache, STATUS_PENDING, STATUS_RESOLVED, useImperativeCacheValue } from "suspense";
 
 import { getExecutionPoint } from "devtools/client/debugger/src/selectors";
@@ -47,12 +47,14 @@ const cypressStepTypesToEventTypes = {
 export default memo(function UserActionEventRow({
   groupedTestCases,
   isSelected,
+  scrollIntoView,
   testEvents,
   testSectionName,
   userActionEvent,
 }: {
   groupedTestCases: RecordingTestMetadataV3.GroupedTestCases;
   isSelected: boolean;
+  scrollIntoView?: boolean;
   testEvents: TestEvent[];
   testSectionName: TestSectionName;
   userActionEvent: UserActionEvent;
@@ -148,6 +150,16 @@ export default memo(function UserActionEventRow({
     return null;
   }, [parentId, testRecording, testSectionName, userActionEvent]);
 
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (scrollIntoView) {
+      // Chrome sometimes ignores scrollIntoView here if it is called immediately
+      setTimeout(() => {
+        ref.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+      });
+    }
+  }, [scrollIntoView]);
+
   return (
     <div
       className={styles.Row}
@@ -156,6 +168,7 @@ export default memo(function UserActionEventRow({
       onClick={jumpToTestSourceDisabled ? undefined : onClickJumpToTestSource}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
+      ref={ref}
     >
       <div className={styles.Text}>
         {eventNumber != null ? <div className={styles.Number}>{eventNumber}</div> : null}

src/ui/components/TestSuite/views/TestRecording/TestSection.tsx

@@ -1,3 +1,5 @@
+import findLast from "lodash/findLast";
+
 import {
   TestEvent,
   TestRunnerName,
@@ -22,6 +24,11 @@ export default function TestSection({
     return null;
   }
 
+  const scrollToEvent =
+    testSectionName === "main"
+      ? findLast(testEvents, evt => evt.type === "user-action" && !!evt.data.error)
+      : undefined;
+
   return (
     <>
       <div className={styles.Title} data-test-name="TestSection">
@@ -30,6 +37,7 @@ export default function TestSection({
       {testEvents.map((testEvent, index) => (
         <TestSectionRow
           key={index}
+          scrollIntoView={testEvent === scrollToEvent}
           testEvent={testEvent}
           testEvents={testEvents}
           testRunnerName={testRunnerName}

src/ui/components/TestSuite/views/TestRecording/TestSectionRow.tsx

@@ -36,11 +36,13 @@ import { Position } from "./types";
 import styles from "./TestSectionRow.module.css";
 
 export function TestSectionRow({
+  scrollIntoView,
   testEvent,
   testEvents,
   testRunnerName,
   testSectionName,
 }: {
+  scrollIntoView?: boolean;
   testEvent: TestEvent;
   testEvents: TestEvent[];
   testRunnerName: TestRunnerName | null;
@@ -118,6 +120,7 @@ export function TestSectionRow({
           testEvents={testEvents}
           testSectionName={testSectionName}
           userActionEvent={testEvent}
+          scrollIntoView={scrollIntoView}
         />
       );
       status = testEvent.data.error ? "error" : "success";