diff --git a/packages/html-reporter/src/reportView.tsx b/packages/html-reporter/src/reportView.tsx
index e48064201c26f..aa3a219a25877 100644
--- a/packages/html-reporter/src/reportView.tsx
+++ b/packages/html-reporter/src/reportView.tsx
@@ -97,7 +97,7 @@ const TestCaseViewLoader: React.FC<{
   testIdToFileIdMap: Map<string, string>,
 }> = ({ report, testIdToFileIdMap, tests }) => {
   const searchParams = React.useContext(SearchParamsContext);
-  const [test, setTest] = React.useState<TestCase | undefined>();
+  const [test, setTest] = React.useState<TestCase | 'loading' | 'not-found'>('loading');
   const testId = searchParams.get('testId');
   const run = +(searchParams.get('run') || '0');
 
@@ -110,28 +110,37 @@ const TestCaseViewLoader: React.FC<{
 
   React.useEffect(() => {
     (async () => {
-      if (!testId || testId === test?.testId)
+      if (!testId || (typeof test === 'object' && testId === test.testId))
         return;
       const fileId = testIdToFileIdMap.get(testId);
-      if (!fileId)
+      if (!fileId) {
+        setTest('not-found');
         return;
-      const file = await report.entry(`${fileId}.json`) as TestFile;
-      for (const t of file.tests) {
-        if (t.testId === testId) {
-          setTest(t);
-          break;
-        }
       }
+      const file = await report.entry(`${fileId}.json`) as TestFile;
+      setTest(file?.tests.find(t => t.testId === testId) || 'not-found');
     })();
   }, [test, report, testId, testIdToFileIdMap]);
 
-  return <TestCaseView
-    projectNames={report.json().projectNames}
-    next={next}
-    prev={prev}
-    test={test}
-    run={run}
-  />;
+  if (test === 'loading')
+    return <div className='test-case-column vbox'></div>;
+
+  if (test === 'not-found') {
+    return <div className='test-case-column vbox'>
+      <div className='test-case-title'>Test not found</div>
+      <div className='test-case-location'>Test ID: {testId}</div>
+    </div>;
+  }
+
+  return <div className='test-case-column vbox'>
+    <TestCaseView
+      projectNames={report.json().projectNames}
+      next={next}
+      prev={prev}
+      test={test}
+      run={run}
+    />;
+  </div>;
 };
 
 function computeStats(files: TestFileSummary[], filter: Filter): FilteredStats {
diff --git a/packages/html-reporter/src/testCaseView.tsx b/packages/html-reporter/src/testCaseView.tsx
index 0ccbb8b6f6bd4..16d4900725a11 100644
--- a/packages/html-reporter/src/testCaseView.tsx
+++ b/packages/html-reporter/src/testCaseView.tsx
@@ -30,49 +30,44 @@ import { CopyToClipboardContainer } from './copyToClipboard';
 
 export const TestCaseView: React.FC<{
   projectNames: string[],
-  test: TestCase | undefined,
+  test: TestCase,
   next: TestCaseSummary | undefined,
   prev: TestCaseSummary | undefined,
   run: number,
 }> = ({ projectNames, test, run, next, prev }) => {
   const [selectedResultIndex, setSelectedResultIndex] = React.useState(run);
   const searchParams = React.useContext(SearchParamsContext);
-  const filterParam = searchParams.has('q') ? '&q=' + searchParams.get('q') : '';
-
-  const labels = React.useMemo(() => {
-    if (!test)
-      return undefined;
-    return test.tags;
-  }, [test]);
 
-  const visibleTestAnnotations = test?.annotations.filter(a => !a.type.startsWith('_')) ?? [];
+  const filterParam = searchParams.has('q') ? '&q=' + searchParams.get('q') : '';
+  const labels = React.useMemo(() => test.tags, [test]);
+  const visibleTestAnnotations = test.annotations.filter(a => !a.type.startsWith('_')) ?? [];
 
-  return <div className='test-case-column vbox'>
-    {test && <div className='hbox'>
+  return <>
+    <div className='hbox'>
       <div className='test-case-path'>{test.path.join(' › ')}</div>
       <div style={{ flex: 'auto' }}></div>
       <div className={clsx(!prev && 'hidden')}><Link href={testResultHref({ test: prev }) + filterParam}>« previous</Link></div>
       <div style={{ width: 10 }}></div>
       <div className={clsx(!next && 'hidden')}><Link href={testResultHref({ test: next }) + filterParam}>next »</Link></div>
-    </div>}
-    {test && <div className='test-case-title'>{test?.title}</div>}
-    {test && <div className='hbox'>
+    </div>
+    <div className='test-case-title'>{test.title}</div>
+    <div className='hbox'>
       <div className='test-case-location'>
-        <CopyToClipboardContainer value={`${test?.location.file}:${test?.location.line}`}>
+        <CopyToClipboardContainer value={`${test.location.file}:${test.location.line}`}>
           {test.location.file}:{test.location.line}
         </CopyToClipboardContainer>
       </div>
       <div style={{ flex: 'auto' }}></div>
       <div className='test-case-duration'>{msToString(test.duration)}</div>
-    </div>}
-    {test && (!!test.projectName || labels) && <div className='test-case-project-labels-row'>
-      {test && !!test.projectName && <ProjectLink projectNames={projectNames} projectName={test.projectName}></ProjectLink>}
+    </div>
+    {(!!test.projectName || labels) && <div className='test-case-project-labels-row'>
+      {!!test.projectName && <ProjectLink projectNames={projectNames} projectName={test.projectName}></ProjectLink>}
       {labels && <LabelsLinkView labels={labels} />}
     </div>}
-    {test?.results.length === 0 && visibleTestAnnotations.length !== 0 && <AutoChip header='Annotations' dataTestId='test-case-annotations'>
+    {test.results.length === 0 && visibleTestAnnotations.length !== 0 && <AutoChip header='Annotations' dataTestId='test-case-annotations'>
       {visibleTestAnnotations.map((annotation, index) => <TestCaseAnnotationView key={index} annotation={annotation} />)}
     </AutoChip>}
-    {test && <TabbedPane tabs={
+    <TabbedPane tabs={
       test.results.map((result, index) => ({
         id: String(index),
         title: <div style={{ display: 'flex', alignItems: 'center' }}>
@@ -88,8 +83,8 @@ export const TestCaseView: React.FC<{
             <TestResultView test={test!} result={result} />
           </>;
         },
-      })) || []} selectedTab={String(selectedResultIndex)} setSelectedTab={id => setSelectedResultIndex(+id)} />}
-  </div>;
+      })) || []} selectedTab={String(selectedResultIndex)} setSelectedTab={id => setSelectedResultIndex(+id)} />
+  </>;
 };
 
 function TestCaseAnnotationView({ annotation: { type, description } }: { annotation: TestAnnotation }) {