chore: render annotations in html report (#10774)

packages/playwright-core/src/web/htmlReport/htmlReport.css

@@ -121,7 +121,6 @@ svg {
   flex: auto;
   display: flex;
   flex-direction: column;
-  padding: 0 16px;
   margin-bottom: 20px;
 }
 
@@ -197,6 +196,13 @@ svg {
   padding: 0 10px;
 }
 
+.test-case-annotation {
+  flex: none;
+  align-items: center;
+  padding: 0 10px;
+  line-height: 24px;
+}
+
 .test-details-column {
   overflow-y: auto;
 }
@@ -234,6 +240,7 @@ video, img {
   max-width: 1024px;
   margin: 0 auto;
   width: 100%;
+  padding: 0 16px;
 }
 
 .file-summary-list {
@@ -385,7 +392,7 @@ a.no-decorations {
   border-radius: 2em;
   background-color: var(--color-scale-gray-4);
   color: white;
-  margin-left: 10px;
+  margin: 0 10px;
   flex: none;
   font-weight: 600;
 }
@@ -573,6 +580,10 @@ article, aside, details, figcaption, figure, footer, header, main, menu, nav, se
 }
 
 @media only screen and (max-width: 600px) {
+  .flow-container {
+    padding: 0;
+  }
+
   .chip-header {
     border-radius: 0 !important;
     border-right: none !important;

packages/playwright-core/src/web/htmlReport/htmlReport.tsx

@@ -152,13 +152,13 @@ const TestFileSummaryView: React.FC<{
     {file.tests.filter(t => filter.matches(t)).map(test =>
       <div key={`test-${test.testId}`} className={'test-summary outcome-' + test.outcome}>
         <span style={{ float: 'right' }}>{msToString(test.duration)}</span>
+        {report.projectNames.length > 1 && !!test.projectName &&
+          <span style={{ float: 'right' }}><ProjectLink report={report} projectName={test.projectName}></ProjectLink></span>}
         {statusIcon(test.outcome)}
         <Link href={`#?testId=${test.testId}`} title={[...test.path, test.title].join(' › ')}>
           {[...test.path, test.title].join(' › ')}
           <span className='test-summary-path'>— {test.location.file}:{test.location.line}</span>
         </Link>
-        {report.projectNames.length > 1 && !!test.projectName &&
-          <ProjectLink report={report} projectName={test.projectName}></ProjectLink>}
       </div>
     )}
   </Chip>;
@@ -196,6 +196,12 @@ const TestCaseView: React.FC<{
     {test && <div className='test-case-title'>{test?.title}</div>}
     {test && <div className='test-case-location'>{test.location.file}:{test.location.line}</div>}
     {test && !!test.projectName && <ProjectLink report={report} projectName={test.projectName}></ProjectLink>}
+    {test && !!test.annotations.length && <Chip header='Annotations'>
+      {test.annotations.map(a => <div className='test-case-annotation'>
+        <span style={{ fontWeight: 'bold' }}>{a.type}</span>
+        {a.description && <span>: {a.description}</span>}
+      </div>)}
+    </Chip>}
     {test && <TabbedPane tabs={
       test.results.map((result, index) => ({
         id: String(index),

packages/playwright-test/src/reporters/html.ts

@@ -68,6 +68,7 @@ export type TestCaseSummary = {
   path: string[];
   projectName: string;
   location: Location;
+  annotations: { type: string, description?: string }[];
   outcome: 'skipped' | 'expected' | 'unexpected' | 'flaky';
   duration: number;
   ok: boolean;
@@ -348,6 +349,7 @@ class HtmlBuilder {
         projectName,
         location,
         duration,
+        annotations: test.annotations,
         outcome: test.outcome,
         path,
         results: test.results.map(r => this._createTestResult(r)),
@@ -359,6 +361,7 @@ class HtmlBuilder {
         projectName,
         location,
         duration,
+        annotations: test.annotations,
         outcome: test.outcome,
         path,
         ok: test.outcome === 'expected' || test.outcome === 'flaky',

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

@@ -274,3 +274,23 @@ test('should show timed out steps', async ({ runInlineTest, page, showReport })
   await expect(page.locator('.tree-item:has-text("outer step") svg.color-text-danger')).toHaveCount(2);
   await expect(page.locator('.tree-item:has-text("inner step") svg.color-text-danger')).toHaveCount(2);
 });
+
+test('should render annotations', async ({ runInlineTest, page, showReport }) => {
+  const result = await runInlineTest({
+    'playwright.config.js': `
+      module.exports = { timeout: 1500 };
+    `,
+    'a.test.js': `
+      const { test } = pwt;
+      test('skipped test', async ({ page }) => {
+        test.skip(true, 'I am not interested in this test');
+      });
+    `,
+  }, { reporter: 'dot,html' });
+  expect(result.exitCode).toBe(0);
+  expect(result.skipped).toBe(1);
+
+  await showReport();
+  await page.click('text=skipped test');
+  await expect(page.locator('.test-case-annotation')).toHaveText('skip: I am not interested in this test');
+});