PRO-14710 fix: layout of tests in HTML report for Safari

fix: autoopen first failed test
fix: autoopen end screenshot of failed test

Author: uid11

src/utils/expect/additionalMatchers.ts

@@ -12,17 +12,15 @@ import {expect} from '@playwright/test';
  * @internal
  */
 export const additionalMatchers: NonSelectorAdditionalMatchers<unknown> & SelectorMatchers = {
-  contains(this: Expect, expected) {
+  async contains(this: Expect, expected) {
     const {actualValue, description} = this;
 
     if (typeof actualValue === 'string' || Array.isArray(actualValue)) {
-      return Promise.resolve(expect(actualValue, description).toContain(expected));
+      return expect(actualValue, description).toContain(expected);
     }
 
-    return Promise.resolve(
-      expect(actualValue, description).toEqual(
-        expect.objectContaining(expected as Record<string, unknown>),
-      ),
+    return expect(actualValue, description).toEqual(
+      expect.objectContaining(expected as Record<string, unknown>),
     );
   },
   async eql(this: Expect, expected) {

src/utils/report/client/addDomContentLoadedHandler.ts

@@ -4,12 +4,12 @@
  * This client function should not use scope variables (except global functions).
  * @internal
  */
-export function addDomContentLoadedHandler(handler: () => void): void {
+export const addDomContentLoadedHandler = (handler: () => void): void => {
   if (document.readyState !== 'loading') {
     handler();
 
     return;
   }
 
   document.addEventListener('DOMContentLoaded', handler);
-}
+};

src/utils/report/client/chooseTestRun.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable no-console */
+
 import {assertValueIsDefined as clientAssertValueIsDefined} from './assertValueIsDefined';
 import {
   MaybeApiStatistics as clientMaybeApiStatistics,
@@ -19,11 +21,10 @@ declare const reportClientState: ReportClientState;
  * @internal
  */
 // eslint-disable-next-line max-statements
-export function chooseTestRun(runHash: RunHash): void {
+export const chooseTestRun = (runHash: RunHash): void => {
   const {e2edRightColumnContainer} = reportClientState;
 
-  if (e2edRightColumnContainer === undefined) {
-    // eslint-disable-next-line no-console
+  if (!e2edRightColumnContainer) {
     console.error(
       'Cannot find right column container (id="e2edRightColumnContainer"). Probably page not yet completely loaded. Please try click again later',
     );
@@ -45,6 +46,10 @@ export function chooseTestRun(runHash: RunHash): void {
     e2edRightColumnContainer.firstElementChild as HTMLElement | null;
 
   if (!previousTestRunDetailsElement) {
+    console.error(
+      'Cannot find first child element in right column container (id="e2edRightColumnContainer"). Probably page not yet completely loaded. Please try click again later',
+    );
+
     return;
   }
 
@@ -72,7 +77,6 @@ export function chooseTestRun(runHash: RunHash): void {
     const fullTestRun = fullTestRuns.find((testRun) => testRun.runHash === runHash);
 
     if (fullTestRun === undefined) {
-      // eslint-disable-next-line no-console
       console.error(
         `Cannot find test run with hash ${runHash} in JSON report data. Probably JSON report data for this test run not yet loaded. Please try click again later`,
       );
@@ -88,4 +92,4 @@ export function chooseTestRun(runHash: RunHash): void {
   const nextTestRunDetailsElement = e2edRightColumnContainer.firstElementChild as HTMLElement;
 
   testRunDetailsElementsByHash[runHash] = nextTestRunDetailsElement;
-}
+};

src/utils/report/client/createJsxRuntime.ts

@@ -15,7 +15,7 @@ const sanitizeHtml = clientSanitizeHtml;
  * This client function should not use scope variables (except global functions).
  * @internal
  */
-export function createJsxRuntime(): JSX.Runtime {
+export const createJsxRuntime = (): JSX.Runtime => {
   const maxDepth = 8;
 
   const createElement: JSX.CreateElement = (type, properties, ...children) => {
@@ -104,4 +104,4 @@ export function createJsxRuntime(): JSX.Runtime {
   };
 
   return {Fragment, createElement};
-}
+};

src/utils/report/client/onDomContentLoad.ts

@@ -11,10 +11,10 @@ const readJsonReportData = clientReadJsonReportData;
  * This client function should not use scope variables (except global functions).
  * @internal
  */
-export function onDomContentLoad(): void {
+export const onDomContentLoad = (): void => {
   const e2edRightColumnContainer = document.getElementById('e2edRightColumnContainer') ?? undefined;
 
-  if (e2edRightColumnContainer === undefined) {
+  if (!e2edRightColumnContainer) {
     // eslint-disable-next-line no-console
     console.error(
       'Cannot find right column container (id="e2edRightColumnContainer") after DOMContentLoaded.',
@@ -32,4 +32,4 @@ export function onDomContentLoad(): void {
   }
 
   reportClientState.readJsonReportDataObservers.length = 0;
-}
+};

src/utils/report/client/parseMarkdownLinks.ts

@@ -13,10 +13,10 @@ const sanitizeHtml = clientSanitizeHtml;
  * This client function should not use scope variables (except global functions).
  * @internal
  */
-export function parseMarkdownLinks(
+export const parseMarkdownLinks = (
   stringParts: readonly string[],
   ...values: readonly unknown[]
-): SafeHtml {
+): SafeHtml => {
   const sanitizedHtml = sanitizeHtml(stringParts, ...values);
 
   const htmlWithLinks = sanitizedHtml.replace(
@@ -25,4 +25,4 @@ export function parseMarkdownLinks(
   );
 
   return createSafeHtmlWithoutSanitize`${htmlWithLinks}`;
-}
+};

src/utils/report/client/readJsonReportData.ts

@@ -15,7 +15,7 @@ declare const reportClientState: ReportClientState;
  * This client function should not use scope variables (except global functions).
  * @internal
  */
-export function readJsonReportData(areAllScriptsLoaded = false): void {
+export const readJsonReportData = (areAllScriptsLoaded = false): void => {
   const {lengthOfReadedJsonReportDataParts} = reportClientState;
   const scripts = document.querySelectorAll('body > script.e2edJsonReportData');
   const {length} = scripts;
@@ -40,4 +40,4 @@ export function readJsonReportData(areAllScriptsLoaded = false): void {
   }
 
   reportClientState.lengthOfReadedJsonReportDataParts = newLength;
-}
+};

src/utils/report/client/readPartOfJsonReportData.ts

@@ -13,7 +13,7 @@ type Options = Readonly<{
  * This client function should not use scope variables (except global functions).
  * @internal
  */
-export function readPartOfJsonReportData({scriptToRead, shouldLogError}: Options): boolean {
+export const readPartOfJsonReportData = ({scriptToRead, shouldLogError}: Options): boolean => {
   try {
     const data = JSON.parse(scriptToRead?.textContent ?? '') as ScriptJsonData;
 
@@ -32,4 +32,4 @@ export function readPartOfJsonReportData({scriptToRead, shouldLogError}: Options
   }
 
   return true;
-}
+};

src/utils/report/client/render/Step.tsx

@@ -21,14 +21,15 @@ type Props = Readonly<{
   isEnd?: boolean;
   logEvent: LogEventWithChildren;
   nextLogEventTime: UtcTimeInMs;
+  open?: boolean;
 }>;
 
 /**
  * Renders single step of test run.
  * This base client function should not use scope variables (except other base functions).
  * @internal
  */
-export const Step: JSX.Component<Props> = ({isEnd = false, logEvent, nextLogEventTime}) => {
+export const Step: JSX.Component<Props> = ({isEnd = false, logEvent, nextLogEventTime, open}) => {
   const {children, message, payload, time, type} = logEvent;
   const date = new Date(time).toISOString();
   const isPayloadEmpty = !payload || Object.keys(payload).length === 0;
@@ -49,6 +50,7 @@ export const Step: JSX.Component<Props> = ({isEnd = false, logEvent, nextLogEven
   }
 
   let content = <></>;
+  const isErrorScreenshot = pathToScreenshotOfPage !== undefined;
 
   if (!isEnd) {
     content =
@@ -60,7 +62,7 @@ export const Step: JSX.Component<Props> = ({isEnd = false, logEvent, nextLogEven
           </span>
         </div>
       ) : (
-        <details class="step__details">
+        <details class="step__details" open={open ?? isErrorScreenshot}>
           <summary class="step__head">
             <span class="step__name">{message}</span>
             <span class="step__duration">

src/utils/report/client/sanitizeHtml.ts

@@ -70,10 +70,10 @@ export function sanitizeValue(value: unknown): string {
  * This base client function should not use scope variables (except other base functions).
  * @internal
  */
-export function sanitizeHtml(
+export const sanitizeHtml = (
   stringParts: readonly string[],
   ...values: readonly unknown[]
-): SafeHtml {
+): SafeHtml => {
   const parts: string[] = [];
 
   for (let index = 0; index < values.length; index += 1) {
@@ -96,13 +96,11 @@ export function sanitizeHtml(
   const html = parts.join('');
 
   return createSafeHtmlWithoutSanitize`${html}`;
-}
+};
 
 /**
  * Sanitizes JSON string (simple protection against XSS attacks).
  * This base client function should not use scope variables (except other base functions).
  * @internal
  */
-export function sanitizeJson(json: string): string {
-  return json.replace(/</g, '\\u003c');
-}
+export const sanitizeJson = (json: string): string => json.replace(/</g, '\\u003c');