feat(reporting): Add hyperlink rendering for URL fields in HTML reports

docs/src/test-annotations-js.md

@@ -192,6 +192,7 @@ test.describe('report tests', {
  annotation: [
  { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/23180' },
  { type: 'performance', description: 'very slow test!' },
+ { type: 'performance', url: 'https://github.com/microsoft/playwright/issues/23180' },
  ],
  }, async ({ page }) => {
  // ...

packages/html-reporter/src/filter.ts

@@ -176,7 +176,10 @@ function cacheSearchValues(test: TestCaseSummary): SearchValues {
  line: String(test.location.line),
  column: String(test.location.column),
  labels: test.tags.map(tag => tag.toLowerCase()),
- annotations: test.annotations.map(a => a.type.toLowerCase() + '=' + a.description?.toLocaleLowerCase())
+ annotations: test.annotations.map(a => {
+ const value = a.description?.toLocaleLowerCase() || a.url?.toLocaleLowerCase() || '';
+ return a.type.toLowerCase() + '=' + value;
+ }),
  };
  (test as any)[searchValuesSymbol] = searchValues;
  return searchValues;

packages/html-reporter/src/testCaseView.tsx

@@ -72,11 +72,20 @@ function renderAnnotationDescription(description: string) {
  return description;
 }
 
-function TestCaseAnnotationView({ annotation: { type, description } }: { annotation: TestCaseAnnotation }) {
+function renderAnnotationLink(url: string) {
+ try {
+ if (['http:', 'https:'].includes(new URL(url).protocol))
+ return <a href={url} target='_blank' rel='noopener noreferrer'>{url}</a>;
+ } catch {}
+ return url;
+}
+
+function TestCaseAnnotationView({ annotation: { type, description, url } }: { annotation: TestCaseAnnotation }) {
  return (
  <div className='test-case-annotation'>
  <span style={{ fontWeight: 'bold' }}>{type}</span>
  {description && <span>: {renderAnnotationDescription(description)}</span>}
+ {url && <span>: {renderAnnotationLink(url)}</span>}
  </div>
  );
 }

packages/playwright/src/common/ipc.ts

@@ -80,7 +80,7 @@ export type TestEndPayload = {
  errors: TestInfoError[];
  hasNonRetriableError: boolean;
  expectedStatus: TestStatus;
- annotations: { type: string, description?: string }[];
+ annotations: { type: string, description?: string, url?: string }[];
  timeout: number;
 };
 

packages/playwright/src/isomorphic/teleReceiver.ts

@@ -69,14 +69,14 @@ export type JsonTestCase = {
  retries: number;
  tags?: string[];
  repeatEachIndex: number;
- annotations?: { type: string, description?: string }[];
+ annotations?: { type: string, description?: string, url?: string }[];
 };
 
 export type JsonTestEnd = {
  testId: string;
  expectedStatus: reporterTypes.TestStatus;
  timeout: number;
- annotations: { type: string, description?: string }[];
+ annotations: { type: string, description?: string, url?: string }[];
 };
 
 export type JsonTestResultStart = {

packages/playwright/src/reporters/html.ts

@@ -380,7 +380,10 @@ class HtmlBuilder {
  location,
  duration,
  // Annotations can be pushed directly, with a wrong type.
- annotations: test.annotations.map(a => ({ type: a.type, description: a.description ? String(a.description) : a.description })),
+ annotations: test.annotations.map(a => ({
+ type: a.type,
+ description: a.description ? String(a.description) : a.description
+ })),
  tags: test.tags,
  outcome: test.outcome(),
  path,
@@ -394,7 +397,10 @@ class HtmlBuilder {
  location,
  duration,
  // Annotations can be pushed directly, with a wrong type.
- annotations: test.annotations.map(a => ({ type: a.type, description: a.description ? String(a.description) : a.description })),
+ annotations: test.annotations.map(a => ({
+ type: a.type,
+ description: a.description ? String(a.description) : a.description
+ })),
  tags: test.tags,
  outcome: test.outcome(),
  path,

packages/playwright/src/reporters/versions/blobV1.ts

@@ -71,7 +71,7 @@ export type JsonTestEnd = {
  testId: string;
  expectedStatus: reporterTypes.TestStatus;
  timeout: number;
- annotations: { type: string, description?: string }[];
+ annotations: { type: string, description?: string, url?: string }[];
 };
 
 export type JsonTestResultStart = {

packages/playwright/src/worker/testInfo.ts

@@ -198,7 +198,7 @@ export class TestInfoImpl implements TestInfo {
  this._tracing = new TestTracing(this, workerParams.artifactsDir);
  }
 
- private _modifier(type: 'skip' | 'fail' | 'fixme' | 'slow', modifierArgs: [arg?: any, description?: string]) {
+ private _modifier(type: 'skip' | 'fail' | 'fixme' | 'slow', modifierArgs: [arg?: any, description?: string, url?: string]) {
  if (typeof modifierArgs[1] === 'function') {
  throw new Error([
  'It looks like you are calling test.skip() inside the test and pass a callback.',
@@ -473,19 +473,19 @@ export class TestInfoImpl implements TestInfo {
  return path.normalize(path.resolve(this._configInternal.configDir, snapshotPath));
  }
 
- skip(...args: [arg?: any, description?: string]) {
+ skip(...args: [arg?: any, description?: string, url?: string]) {
  this._modifier('skip', args);
  }
 
- fixme(...args: [arg?: any, description?: string]) {
+ fixme(...args: [arg?: any, description?: string, url?: string]) {
  this._modifier('fixme', args);
  }
 
- fail(...args: [arg?: any, description?: string]) {
+ fail(...args: [arg?: any, description?: string, url?: string]) {
  this._modifier('fail', args);
  }
 
- slow(...args: [arg?: any, description?: string]) {
+ slow(...args: [arg?: any, description?: string, url?: string]) {
  this._modifier('slow', args);
  }
 

packages/playwright/types/test.d.ts

@@ -1845,6 +1845,7 @@ export type TestStatus = 'passed' | 'failed' | 'timedOut' | 'skipped' | 'interru
 type TestDetailsAnnotation = {
  type: string;
  description?: string;
+ url?: string;
 };
 
 export type TestDetails = {

packages/playwright/types/testReporter.d.ts

@@ -273,7 +273,7 @@ export interface JSONReportSpec {
 
 export interface JSONReportTest {
  timeout: number;
- annotations: { type: string, description?: string }[],
+ annotations: { type: string, description?: string, url?: string }[],
  expectedStatus: TestStatus;
  projectName: string;
  projectId: string;

tests/playwright-test/reporter-html.spec.ts

@@ -724,7 +724,7 @@ for (const useIntermediateMergeReport of [false] as const) {
  'a.test.js': `
  import { test, expect } from '@playwright/test';
  test('annotated test', async ({ page }) => {
- test.info().annotations.push({ type: 'issue', description: 'I am not interested in this test' });
+test.info().annotations.push({ type: 'issue', description: 'I am not interested in this test' });
  });
  `,
  }, { reporter: 'dot,html' }, { PLAYWRIGHT_HTML_OPEN: 'never' });
@@ -736,6 +736,25 @@ for (const useIntermediateMergeReport of [false] as const) {
  await expect(page.locator('.test-case-annotation')).toHaveText('issue: I am not interested in this test');
  });
 
+ test('should render annotations with url', async ({ runInlineTest, page, showReport }) => {
+ const result = await runInlineTest({
+ 'playwright.config.js': `
+ module.exports = { timeout: 1500 };
+ `,
+ 'a.test.js': `
+ import { test, expect } from '@playwright/test';
+ test('annotated test', async ({ page }) => {
+ test.info().annotations.push({ type: 'url', url: 'https://github.com/microsoft/playwright/pull/31014' });
+ });
+ `,
+ }, { reporter: 'dot,html' }, { PLAYWRIGHT_HTML_OPEN: 'never' });
+ expect(result.exitCode).toBe(0);
+ expect(result.passed).toBe(1);
+ await showReport();
+ await page.click('text=annotated test');
+ await expect(page.locator('.test-case-annotation')).toHaveText(`url: https://github.com/microsoft/playwright/pull/31014`);
+ });
+
  test('should render annotations as link if needed', async ({ runInlineTest, page, showReport, server }) => {
  const result = await runInlineTest({
  'playwright.config.js': `

utils/generate_types/overrides-test.d.ts

@@ -68,6 +68,7 @@ export type TestStatus = 'passed' | 'failed' | 'timedOut' | 'skipped' | 'interru
 type TestDetailsAnnotation = {
  type: string;
  description?: string;
+ url?: string;
 };
 
 export type TestDetails = {

utils/generate_types/overrides-testReporter.d.ts

@@ -94,7 +94,7 @@ export interface JSONReportSpec {
 
 export interface JSONReportTest {
  timeout: number;
- annotations: { type: string, description?: string }[],
+ annotations: { type: string, description?: string, url?: string }[],
  expectedStatus: TestStatus;
  projectName: string;
  projectId: string;