PRO-13138 feat: group steps in HTML report

Author: uid11

autotests/packs/allTests.ts

@@ -80,7 +80,7 @@ export const pack: Pack = {
   skipTests,
   takeFullPageScreenshotOnError: false,
   takeViewportScreenshotOnError: true,
-  testFileGlobs: ['**/autotests/tests/**/exists.ts'],
+  testFileGlobs: ['**/autotests/tests/**/*.ts'],
   testIdleTimeout: 8_000,
   testTimeout: 15_000,
   userAgent,

autotests/pageObjects/pages/E2edReportExample/E2edReportExample.ts

@@ -65,7 +65,7 @@ export class E2edReportExample extends Page<CustomPageParams> {
    * List of test runs of retry.
    */
   get testRunsList(): Selector {
-    return locator('column-2');
+    return locator('column1');
   }
 
   /**

src/types/events.ts

@@ -19,6 +19,11 @@ export type LogEvent = Readonly<{
   type: LogEventType;
 }>;
 
+/**
+ * Log event with children (for groupping of `TestRun` steps).
+ */
+export type LogEventWithChildren = LogEvent & Readonly<{children: readonly LogEventWithChildren[]}>;
+
 /**
  * EndTestRun event (on closing test).
  * @internal

src/types/index.ts

@@ -16,7 +16,7 @@ export type {ConsoleMessage, ConsoleMessageType} from './console';
 export type {UtcTimeInMs} from './date';
 export type {DeepMutable, DeepPartial, DeepReadonly, DeepRequired} from './deep';
 export type {E2edPrintedFields, JsError} from './errors';
-export type {LogEvent, Onlog, TestRunEvent} from './events';
+export type {LogEvent, LogEventWithChildren, Onlog, TestRunEvent} from './events';
 export type {Fn, MergeFunctions} from './fn';
 export type {
   FullMocksConfig,

src/types/internal.ts

@@ -31,7 +31,7 @@ export type {E2edEnvironment} from './environment';
 export type {E2edPrintedFields, JsError} from './errors';
 /** @internal */
 export type {GlobalErrorType, MaybeWithIsTestRunBroken} from './errors';
-export type {LogEvent, Onlog, TestRunEvent} from './events';
+export type {LogEvent, LogEventWithChildren, Onlog, TestRunEvent} from './events';
 /** @internal */
 export type {EndTestRunEvent, FullEventsData} from './events';
 export type {Fn, MergeFunctions} from './fn';

src/utils/getDurationWithUnits.ts

@@ -4,7 +4,7 @@
  * Should be a pure function without dependencies in the form of a function declaration,
  * because it is used in the JS client code of HTML report.
  */
-export function getDurationWithUnits(durationInMs: number): string {
+export const getDurationWithUnits = (durationInMs: number): string => {
   const msInSecond = 1_000;
   const timeMultiplicator = 60;
 
@@ -37,4 +37,4 @@ export function getDurationWithUnits(durationInMs: number): string {
   }
 
   return parts.slice(0, 2).join(' ') || '0ms';
-}
+};

src/utils/report/client/addOnClickOnClass.ts

@@ -7,7 +7,10 @@ declare const reportClientState: ReportClientState;
  * This base client function should not use scope variables (except other base functions).
  * @internal
  */
-export function addOnClickOnClass(className: string, onclick: (event: HTMLElement) => void): void {
+export const addOnClickOnClass = (
+  className: string,
+  onclick: (element: HTMLElement) => void,
+): void => {
   let {clickListeners} = reportClientState;
 
   if (!clickListeners) {
@@ -34,4 +37,4 @@ export function addOnClickOnClass(className: string, onclick: (event: HTMLElemen
   }
 
   clickListeners[className] = onclick;
-}
+};

src/utils/report/client/chooseTestRun.tsx

@@ -50,7 +50,7 @@ export function chooseTestRun(runHash: RunHash): void {
 
   if (
     !(previousHash in testRunDetailsElementsByHash) &&
-    !previousTestRunDetailsElement.classList.contains('test-details-empty')
+    !previousTestRunDetailsElement.classList.contains('empty-state')
   ) {
     testRunDetailsElementsByHash[previousHash] = previousTestRunDetailsElement;
   }

src/utils/report/client/clickOnRetry.ts

@@ -3,8 +3,8 @@
  * This base client function should not use scope variables (except other base functions).
  * @internal
  */
-export function clickOnRetry(element: HTMLElement): void {
-  const chosenRetryId = element.getAttribute('aria-controls');
+export const clickOnRetry = (element: HTMLElement): void => {
+  const chosenRetryId = element.dataset['retry'];
   const retry = Number(chosenRetryId?.match(/\d+/)?.[0]);
   const allRetryElements: NodeListOf<HTMLElement> = document.querySelectorAll('.retry');
 
@@ -26,4 +26,4 @@ export function clickOnRetry(element: HTMLElement): void {
   if (leftSection) {
     leftSection.ariaLabel = `Retry ${retry}`;
   }
-}
+};

src/utils/report/client/clickOnScreenshot.ts

@@ -0,0 +1,32 @@
+/**
+ * Handler for click on screenshot in step details.
+ * This base client function should not use scope variables (except other base functions).
+ * @internal
+ */
+export const clickOnScreenshot = (element: HTMLElement): void => {
+  const image = element.firstElementChild as HTMLImageElement | null;
+
+  if (image === null || image.tagName !== 'IMG') {
+    // eslint-disable-next-line no-console
+    console.error('Cannot find element <image> in clicked button', element);
+
+    return;
+  }
+
+  const screenshotDialogImage = document.getElementById(
+    'screenshotDialogImage',
+  ) as HTMLImageElement | null;
+  const screenshotDialogTitle = document.getElementById('screenshotDialogTitle');
+
+  if (screenshotDialogImage) {
+    screenshotDialogImage.alt = image.title;
+    screenshotDialogImage.src = image.src;
+    screenshotDialogImage.title = image.title;
+  }
+
+  if (screenshotDialogTitle) {
+    screenshotDialogTitle.textContent = image.title;
+  }
+
+  (document.getElementById('screenshotDialog') as HTMLDialogElement | null)?.showModal();
+};