feat(html-reporter): hide annotations started with "_" (#31489)

Fixes: https://github.com/microsoft/playwright/issues/30179

docs/src/test-annotations-js.md

@@ -159,7 +159,7 @@ You can also filter tests in the configuration file via [`property: TestConfig.g
 
 ## Annotate tests
 
-If you would like to annotate your tests with something more substantial than a tag, you can do that when declaring a test. Annotations have a `type` and a `description` for more context, and will be visible in the test report.
+If you would like to annotate your tests with something more substantial than a tag, you can do that when declaring a test. Annotations have a `type` and a `description` for more context and available in reporter API. Playwright's built-in HTML reporter shows all annotations, except those where `type` starts with `_` symbol.
 
 For example, to annotate a test with an issue url:
 

packages/html-reporter/src/testCaseView.spec.tsx

@@ -54,6 +54,7 @@ const testCase: TestCase = {
   annotations: [
     { type: 'annotation', description: 'Annotation text' },
     { type: 'annotation', description: 'Another annotation text' },
+    { type: '_annotation', description: 'Hidden annotation' },
   ],
   tags: [],
   outcome: 'expected',
@@ -65,6 +66,7 @@ const testCase: TestCase = {
 test('should render test case', async ({ mount }) => {
   const component = await mount(<TestCaseView projectNames={['chromium', 'webkit']} test={testCase} run={0} anchor=''></TestCaseView>);
   await expect(component.getByText('Annotation text', { exact: false }).first()).toBeVisible();
+  await expect(component.getByText('Hidden annotation')).toBeHidden();
   await component.getByText('Annotations').click();
   await expect(component.getByText('Annotation text')).not.toBeVisible();
   await expect(component.getByText('Outer step')).toBeVisible();

packages/html-reporter/src/testCaseView.tsx

@@ -40,6 +40,10 @@ export const TestCaseView: React.FC<{
     return test.tags;
   }, [test]);
 
+  const visibleAnnotations = React.useMemo(() => {
+    return test?.annotations?.filter(annotation => !annotation.type.startsWith('_')) || [];
+  }, [test?.annotations]);
+
   return <div className='test-case-column vbox'>
     {test && <div className='test-case-path'>{test.path.join(' › ')}</div>}
     {test && <div className='test-case-title'>{test?.title}</div>}
@@ -52,8 +56,8 @@ export const TestCaseView: React.FC<{
       {test && !!test.projectName && <ProjectLink projectNames={projectNames} projectName={test.projectName}></ProjectLink>}
       {labels && <LabelsLinkView labels={labels} />}
     </div>}
-    {test && !!test.annotations.length && <AutoChip header='Annotations'>
-      {test?.annotations.map(annotation => <TestCaseAnnotationView annotation={annotation} />)}
+    {!!visibleAnnotations.length && <AutoChip header='Annotations'>
+      {visibleAnnotations.map(annotation => <TestCaseAnnotationView annotation={annotation} />)}
     </AutoChip>}
     {test && <TabbedPane tabs={
       test.results.map((result, index) => ({