feat(html report): show metadata (#34517)

docs/src/test-api/class-testconfig.md

@@ -234,15 +234,17 @@ export default defineConfig({
 * since: v1.10
 - type: ?<[Metadata]>
 
-Metadata that will be put directly to the test report serialized as JSON.
+Metadata contains key-value pairs to be included in the report. For example, HTML report will display it as key-value pairs, and JSON report will include metadata serialized as json.
+
+See also [`property: TestConfig.populateGitInfo`] that populates metadata.
 
 **Usage**
 
 ```js title="playwright.config.ts"
 import { defineConfig } from '@playwright/test';
 
 export default defineConfig({
-  metadata: 'acceptance tests',
+  metadata: { title: 'acceptance tests' },
 });
 ```
 
@@ -325,7 +327,9 @@ This path will serve as the base directory for each test file snapshot directory
 * since: v1.51
 - type: ?<[boolean]>
 
-Whether to populate [`property: TestConfig.metadata`] with Git info. The metadata will automatically appear in the HTML report and is available in Reporter API.
+Whether to populate `'git.commit.info'` field of the [`property: TestConfig.metadata`] with Git commit info and CI/CD information.
+
+This information will appear in the HTML and JSON reports and is available in the Reporter API.
 
 **Usage**
 
@@ -647,7 +651,7 @@ export default defineConfig({
   - `timeout` ?<[int]> How long to wait for the process to start up and be available in milliseconds. Defaults to 60000.
   - `gracefulShutdown` ?<[Object]> How to shut down the process. If unspecified, the process group is forcefully `SIGKILL`ed. If set to `{ signal: 'SIGTERM', timeout: 500 }`, the process group is sent a `SIGTERM` signal, followed by `SIGKILL` if it doesn't exit within 500ms. You can also use `SIGINT` as the signal instead. A `0` timeout means no `SIGKILL` will be sent. Windows doesn't support `SIGTERM` and `SIGINT` signals, so this option is ignored on Windows. Note that shutting down a Docker container requires `SIGTERM`.
     - `signal` <["SIGINT"|"SIGTERM"]>
-    - `timeout` <[int]> 
+    - `timeout` <[int]>
   - `url` ?<[string]> The url on your http server that is expected to return a 2xx, 3xx, 400, 401, 402, or 403 status code when the server is ready to accept connections. Redirects (3xx status codes) are being followed and the new location is checked. Either `port` or `url` should be specified.
 
 Launch a development web server (or multiple) during the tests.

packages/html-reporter/src/icons.tsx

@@ -69,22 +69,6 @@ export const blank = () => {
   return <svg className='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'></svg>;
 };
 
-export const externalLink = () => {
-  return <svg className='octicon' viewBox='0 0 16 16' width='16' height='16'><path fillRule='evenodd' d='M10.604 1h4.146a.25.25 0 01.25.25v4.146a.25.25 0 01-.427.177L13.03 4.03 9.28 7.78a.75.75 0 01-1.06-1.06l3.75-3.75-1.543-1.543A.25.25 0 0110.604 1zM3.75 2A1.75 1.75 0 002 3.75v8.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 12.25v-3.5a.75.75 0 00-1.5 0v3.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-8.5a.25.25 0 01.25-.25h3.5a.75.75 0 000-1.5h-3.5z'></path></svg>;
-};
-
-export const calendar = () => {
-  return <svg className='octicon' viewBox='0 0 16 16' width='16' height='16'><path fillRule='evenodd' d='M4.75 0a.75.75 0 01.75.75V2h5V.75a.75.75 0 011.5 0V2h1.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 16H2.75A1.75 1.75 0 011 14.25V3.75C1 2.784 1.784 2 2.75 2H4V.75A.75.75 0 014.75 0zm0 3.5h8.5a.25.25 0 01.25.25V6h-11V3.75a.25.25 0 01.25-.25h2zm-2.25 4v6.75c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V7.5h-11z'></path></svg>;
-};
-
-export const person = () => {
-  return <svg className='octicon' viewBox='0 0 16 16' width='16' height='16'><path fillRule='evenodd' d='M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z'></path></svg>;
-};
-
-export const commit = () => {
-  return <svg className='octicon' viewBox='0 0 16 16' width='16' height='16'><path fillRule='evenodd' d='M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z'></path></svg>;
-};
-
 export const image = () => {
   return <svg className='octicon' viewBox='0 0 48 48' version='1.1' width='20' height='20' aria-hidden='true'>
     <path xmlns='http://www.w3.org/2000/svg' d='M11.85 32H36.2l-7.35-9.95-6.55 8.7-4.6-6.45ZM7 40q-1.2 0-2.1-.9Q4 38.2 4 37V11q0-1.2.9-2.1Q5.8 8 7 8h34q1.2 0 2.1.9.9.9.9 2.1v26q0 1.2-.9 2.1-.9.9-2.1.9Zm0-29v26-26Zm34 26V11H7v26Z'/>

packages/html-reporter/src/metadataView.css

@@ -0,0 +1,41 @@
+/*
+  Copyright (c) Microsoft Corporation.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+.metadata-toggle {
+  cursor: pointer;
+  user-select: none;
+  margin-left: 5px;
+}
+
+.metadata-view {
+  border: 1px solid var(--color-border-default);
+  border-radius: 6px;
+  margin-top: 8px;
+}
+
+.metadata-separator {
+  height: 1px;
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.metadata-view .copy-value-container {
+  margin-top: -2px;
+}
+
+.git-commit-info a {
+  color: var(--color-fg-default);
+  font-weight: 600;
+}

packages/html-reporter/src/metadataView.tsx

@@ -17,21 +17,19 @@
 import * as React from 'react';
 import './colors.css';
 import './common.css';
-import * as icons from './icons';
-import { AutoChip } from './chip';
-import './reportView.css';
 import './theme.css';
+import './metadataView.css';
+import type { Metadata } from '@playwright/test';
+import type { GitCommitInfo } from '@testIsomorphic/types';
+import { CopyToClipboardContainer } from './copyToClipboard';
+import { linkifyText } from '@web/renderUtils';
 
-export type Metainfo = {
-  'revision.id'?: string;
-  'revision.author'?: string;
-  'revision.email'?: string;
-  'revision.subject'?: string;
-  'revision.timestamp'?: number | Date;
-  'revision.link'?: string;
-  'ci.link'?: string;
-  'timestamp'?: number
-};
+type MetadataEntries = [string, unknown][];
+
+export function filterMetadata(metadata: Metadata): MetadataEntries {
+  // TODO: do not plumb actualWorkers through metadata.
+  return Object.entries(metadata).filter(([key]) => key !== 'actualWorkers');
+}
 
 class ErrorBoundary extends React.Component<React.PropsWithChildren<{}>, { error: Error | null, errorInfo: React.ErrorInfo | null }> {
   override state: { error: Error | null, errorInfo: React.ErrorInfo | null } = {
@@ -46,92 +44,63 @@ class ErrorBoundary extends React.Component<React.PropsWithChildren<{}>, { error
   override render() {
     if (this.state.error || this.state.errorInfo) {
       return (
-        <AutoChip header={'Commit Metainfo Error'} dataTestId='metadata-error'>
-          <p>An error was encountered when trying to render Commit Metainfo. Please file a GitHub issue to report this error.</p>
+        <div className='metadata-view p-3'>
+          <p>An error was encountered when trying to render metadata.</p>
           <p>
             <pre style={{ overflow: 'scroll' }}>{this.state.error?.message}<br/>{this.state.error?.stack}<br/>{this.state.errorInfo?.componentStack}</pre>
           </p>
-        </AutoChip>
+        </div>
       );
     }
 
     return this.props.children;
   }
 }
 
-export const MetadataView: React.FC<Metainfo> = metadata => <ErrorBoundary><InnerMetadataView {...metadata} /></ErrorBoundary>;
+export const MetadataView: React.FC<{ metadataEntries: MetadataEntries }> = ({ metadataEntries }) => {
+  return <ErrorBoundary><InnerMetadataView metadataEntries={metadataEntries}/></ErrorBoundary>;
+};
 
-const InnerMetadataView: React.FC<Metainfo> = metadata => {
-  if (!Object.keys(metadata).find(k => k.startsWith('revision.') || k.startsWith('ci.')))
+const InnerMetadataView: React.FC<{ metadataEntries: MetadataEntries }> = ({ metadataEntries }) => {
+  const gitCommitInfo = metadataEntries.find(([key]) => key === 'git.commit.info')?.[1] as GitCommitInfo | undefined;
+  const entries = metadataEntries.filter(([key]) => key !== 'git.commit.info');
+  if (!gitCommitInfo && !entries.length)
     return null;
-
-  return (
-    <AutoChip header={
-      <span>
-        {metadata['revision.id'] && <span style={{ float: 'right' }}>
-          {metadata['revision.id'].slice(0, 7)}
-        </span>}
-        {metadata['revision.subject'] || 'Commit Metainfo'}
-      </span>} initialExpanded={false} dataTestId='metadata-chip'>
-      {metadata['revision.subject'] &&
-        <MetadataViewItem
-          testId='revision.subject'
-          content={<span>{metadata['revision.subject']}</span>}
-        />
-      }
-      {metadata['revision.id'] &&
-        <MetadataViewItem
-          testId='revision.id'
-          content={<span>{metadata['revision.id']}</span>}
-          href={metadata['revision.link']}
-          icon='commit'
-        />
-      }
-      {(metadata['revision.author'] || metadata['revision.email']) &&
-        <MetadataViewItem
-          content={`${metadata['revision.author']} ${metadata['revision.email']}`}
-          icon='person'
-        />
-      }
-      {metadata['revision.timestamp'] &&
-        <MetadataViewItem
-          testId='revision.timestamp'
-          content={
-            <>
-              {Intl.DateTimeFormat(undefined, { dateStyle: 'full' }).format(metadata['revision.timestamp'])}
-              {' '}
-              {Intl.DateTimeFormat(undefined, { timeStyle: 'long' }).format(metadata['revision.timestamp'])}
-            </>
-          }
-          icon='calendar'
-        />
-      }
-      {metadata['ci.link'] &&
-        <MetadataViewItem
-          content='CI/CD Logs'
-          href={metadata['ci.link']}
-          icon='externalLink'
-        />
-      }
-      {metadata['timestamp'] &&
-        <MetadataViewItem
-          content={<span style={{ color: 'var(--color-fg-subtle)' }}>
-            Report generated on {Intl.DateTimeFormat(undefined, { dateStyle: 'full', timeStyle: 'long' }).format(metadata['timestamp'])}
-          </span>}></MetadataViewItem>
-      }
-    </AutoChip>
-  );
+  return <div className='metadata-view'>
+    {gitCommitInfo && <>
+      <GitCommitInfoView info={gitCommitInfo}/>
+      {entries.length > 0 && <div className='metadata-separator' />}
+    </>}
+    {entries.map(([key, value]) => {
+      const valueString = typeof value !== 'object' || value === null || value === undefined ? String(value) : JSON.stringify(value);
+      const trimmedValue = valueString.length > 1000 ? valueString.slice(0, 1000) + '\u2026' : valueString;
+      return <div className='m-1 ml-5' key={key}>
+        <span style={{ fontWeight: 'bold' }} title={key}>{key}</span>
+        {valueString && <CopyToClipboardContainer value={valueString}>: <span title={trimmedValue}>{linkifyText(trimmedValue)}</span></CopyToClipboardContainer>}
+      </div>;
+    })}
+  </div>;
 };
 
-const MetadataViewItem: React.FC<{ content: JSX.Element | string; icon?: keyof typeof icons, href?: string, testId?: string }> = ({ content, icon, href, testId }) => {
-  return (
-    <div className='my-1 hbox' data-testid={testId} >
-      <div className='mr-2'>
-        {icons[icon || 'blank']()}
-      </div>
-      <div style={{ flex: 1 }}>
-        {href ? <a href={href} target='_blank' rel='noopener noreferrer'>{content}</a> : content}
+const GitCommitInfoView: React.FC<{ info: GitCommitInfo }> = ({ info }) => {
+  const email = info['revision.email'] ? ` <${info['revision.email']}>` : '';
+  const author = `${info['revision.author'] || ''}${email}`;
+  const shortTimestamp = Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).format(info['revision.timestamp']);
+  const longTimestamp = Intl.DateTimeFormat(undefined, { dateStyle: 'full', timeStyle: 'long' }).format(info['revision.timestamp']);
+  return <div className='hbox pl-4 pr-2 git-commit-info' style={{ alignItems: 'center' }}>
+    <div className='vbox'>
+      <a className='m-2' href={info['revision.link']} target='_blank' rel='noopener noreferrer'>
+        <span title={info['revision.subject'] || ''}>{info['revision.subject'] || ''}</span>
+      </a>
+      <div className='hbox m-2 mt-1'>
+        <div className='mr-1'>{author}</div>
+        <div title={longTimestamp}> on {shortTimestamp}</div>
+        {info['ci.link'] && <><span className='mx-2'>·</span><a href={info['ci.link']} target='_blank' rel='noopener noreferrer' title='CI/CD logs'>logs</a></>}
       </div>
     </div>
-  );
+    {!!info['revision.link'] && <a href={info['revision.link']} target='_blank' rel='noopener noreferrer'>
+      <span title='View commit details'>{info['revision.id']?.slice(0, 7) || 'unknown'}</span>
+    </a>}
+    {!info['revision.link'] && !!info['revision.id'] && <span>{info['revision.id'].slice(0, 7)}</span>}
+  </div>;
 };

packages/html-reporter/src/reportView.tsx

@@ -23,8 +23,6 @@ import { HeaderView } from './headerView';
 import { Route, SearchParamsContext } from './links';
 import type { LoadedReport } from './loadedReport';
 import './reportView.css';
-import type { Metainfo } from './metadataView';
-import { MetadataView } from './metadataView';
 import { TestCaseView } from './testCaseView';
 import { TestFilesHeader, TestFilesView } from './testFilesView';
 import './theme.css';
@@ -50,6 +48,7 @@ export const ReportView: React.FC<{
   const searchParams = React.useContext(SearchParamsContext);
   const [expandedFiles, setExpandedFiles] = React.useState<Map<string, boolean>>(new Map());
   const [filterText, setFilterText] = React.useState(searchParams.get('q') || '');
+  const [metadataVisible, setMetadataVisible] = React.useState(false);
 
   const testIdToFileIdMap = React.useMemo(() => {
     const map = new Map<string, string>();
@@ -76,9 +75,8 @@ export const ReportView: React.FC<{
   return <div className='htmlreport vbox px-4 pb-4'>
     <main>
       {report?.json() && <HeaderView stats={report.json().stats} filterText={filterText} setFilterText={setFilterText}></HeaderView>}
-      {report?.json().metadata && <MetadataView {...report?.json().metadata as Metainfo} />}
       <Route predicate={testFilesRoutePredicate}>
-        <TestFilesHeader report={report?.json()} filteredStats={filteredStats} />
+        <TestFilesHeader report={report?.json()} filteredStats={filteredStats} metadataVisible={metadataVisible} toggleMetadataVisible={() => setMetadataVisible(visible => !visible)}/>
         <TestFilesView
           tests={filteredTests.files}
           expandedFiles={expandedFiles}

packages/html-reporter/src/testFilesView.tsx

@@ -21,6 +21,8 @@ import './testFileView.css';
 import { msToString } from './utils';
 import { AutoChip } from './chip';
 import { TestErrorView } from './testErrorView';
+import * as icons from './icons';
+import { filterMetadata, MetadataView } from './metadataView';
 
 export const TestFilesView: React.FC<{
   tests: TestFileSummary[],
@@ -62,17 +64,24 @@ export const TestFilesView: React.FC<{
 export const TestFilesHeader: React.FC<{
   report: HTMLReport | undefined,
   filteredStats?: FilteredStats,
-}> = ({ report, filteredStats }) => {
+  metadataVisible: boolean,
+  toggleMetadataVisible: () => void,
+}> = ({ report, filteredStats, metadataVisible, toggleMetadataVisible }) => {
   if (!report)
     return;
+  const metadataEntries = filterMetadata(report.metadata || {});
   return <>
-    <div className='mt-2 mx-1' style={{ display: 'flex' }}>
+    <div className='mx-1' style={{ display: 'flex', marginTop: 10 }}>
+      {metadataEntries.length > 0 && <div className='metadata-toggle' role='button' onClick={toggleMetadataVisible} title={metadataVisible ? 'Hide metadata' : 'Show metadata'}>
+        {metadataVisible ? icons.downArrow() : icons.rightArrow()}Metadata
+      </div>}
       {report.projectNames.length === 1 && !!report.projectNames[0] && <div data-testid='project-name' style={{ color: 'var(--color-fg-subtle)' }}>Project: {report.projectNames[0]}</div>}
       {filteredStats && <div data-testid='filtered-tests-count' style={{ color: 'var(--color-fg-subtle)', padding: '0 10px' }}>Filtered: {filteredStats.total} {!!filteredStats.total && ('(' + msToString(filteredStats.duration) + ')')}</div>}
       <div style={{ flex: 'auto' }}></div>
       <div data-testid='overall-time' style={{ color: 'var(--color-fg-subtle)', marginRight: '10px' }}>{report ? new Date(report.startTime).toLocaleString() : ''}</div>
       <div data-testid='overall-duration' style={{ color: 'var(--color-fg-subtle)' }}>Total time: {msToString(report.duration ?? 0)}</div>
     </div>
+    {metadataVisible && <MetadataView metadataEntries={metadataEntries}/>}
     {!!report.errors.length && <AutoChip header='Errors' dataTestId='report-errors'>
       {report.errors.map((error, index) => <TestErrorView key={'test-report-error-message-' + index} error={error}></TestErrorView>)}
     </AutoChip>}

packages/html-reporter/tsconfig.json

@@ -20,6 +20,7 @@
       "@protocol/*": ["../protocol/src/*"],
       "@web/*": ["../web/src/*"],
       "@playwright/*": ["../playwright/src/*"],
+      "@testIsomorphic/*": ["../playwright/src/isomorphic/*"],
       "playwright-core/lib/*": ["../playwright-core/src/*"],
       "playwright/lib/*": ["../playwright/src/*"],
     }

packages/playwright/src/isomorphic/types.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface GitCommitInfo {
+  'revision.id'?: string;
+  'revision.author'?: string;
+  'revision.email'?: string;
+  'revision.subject'?: string;
+  'revision.timestamp'?: number | Date;
+  'revision.link'?: string;
+  'ci.link'?: string;
+}