PRO-14812 fix: really skip skipped tests in Playwright

Author: uid11

src/utils/report/client/groupLogEvents.ts

@@ -1,4 +1,4 @@
-import {LogEventType} from '../../../constants/internal';
+import {LogEventStatus, LogEventType} from '../../../constants/internal';
 
 import type {LogEvent, LogEventWithChildren} from '../../../types/internal';
 
@@ -16,14 +16,18 @@ export const groupLogEvents = (logEvents: readonly LogEvent[]): readonly LogEven
     LogEventType.InternalAssert,
   ];
 
+  const isTopLevelEvent = (logEvent: LogEvent): boolean =>
+    topLevelTypes.includes(logEvent.type) ||
+    logEvent.payload?.logEventStatus === LogEventStatus.Failed;
+
   const result: LogEventWithChildren[] = [];
 
   for (const logEvent of logEvents) {
     const last = result.at(-1);
     const newEvent: LogEventWithChildren = {children: [], ...logEvent};
 
-    if (topLevelTypes.includes(logEvent.type)) {
-      if (last && !topLevelTypes.includes(last.type)) {
+    if (isTopLevelEvent(logEvent)) {
+      if (last && !isTopLevelEvent(last)) {
         const firstTopLevel: LogEventWithChildren = {
           children: [...result],
           message: 'Initialization',
@@ -38,7 +42,7 @@ export const groupLogEvents = (logEvents: readonly LogEvent[]): readonly LogEven
       }
 
       result.push(newEvent);
-    } else if (last && topLevelTypes.includes(last.type)) {
+    } else if (last && isTopLevelEvent(last)) {
       (last.children as LogEventWithChildren[]).push(newEvent);
     } else {
       result.push(newEvent);

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

@@ -31,7 +31,7 @@ export const TestRunDescription: JSX.Component<Props> = ({fullTestRun}) => {
     const valueWithLinks = parseMarkdownLinks`${value}`;
     const metaHtml = (
       <>
-        <dt class="test-description__term">{key}</dt>
+        <dt class="test-description__term">{key}</dt>{' '}
         <dd class="test-description__definition">{valueWithLinks}</dd>
       </>
     );
@@ -49,7 +49,7 @@ export const TestRunDescription: JSX.Component<Props> = ({fullTestRun}) => {
 
     traceHtml = (
       <>
-        <dt class="test-description__term">{traceLabel}</dt>
+        <dt class="test-description__term">{traceLabel}</dt>{' '}
         <dd class="test-description__definition">
           <a href={traceUrl} download={traceName} aria-label={traceLabel}>
             {traceName}
@@ -63,11 +63,11 @@ export const TestRunDescription: JSX.Component<Props> = ({fullTestRun}) => {
     <dl class="test-description" aria-label="Test meta data">
       <List elements={metaHtmls} />
       {traceHtml}
-      <dt class="test-description__term">Date</dt>
+      <dt class="test-description__term">Date</dt>{' '}
       <dd class="test-description__definition">
         <DatesInterval endTimeInMs={endTimeInMs} startTimeInMs={startTimeInMs} />
       </dd>
-      <dt class="test-description__term">Duration</dt>
+      <dt class="test-description__term">Duration</dt>{' '}
       <dd class="test-description__definition">
         <Duration durationInMs={endTimeInMs - startTimeInMs} />
       </dd>

src/utils/test/beforeTest.ts

@@ -21,7 +21,7 @@ import {getTestFnAndReject} from './getTestFnAndReject';
 
 import type {TestRunEvent, TestUnit, UtcTimeInMs} from '../../types/internal';
 
-import {test} from '@playwright/test';
+import {test as playwrightTest} from '@playwright/test';
 
 const additionToPlaywrightTestTimeout = 500;
 
@@ -59,7 +59,9 @@ export const beforeTest = ({
   const testTimeout =
     IS_DEBUG || isUiMode ? MAX_TIMEOUT_IN_MS : (options.testTimeout ?? testTimeoutFromConfig);
 
-  test.setTimeout(testTimeout + additionToPlaywrightTestTimeout + (Date.now() - startTimeInMs));
+  playwrightTest.setTimeout(
+    testTimeout + additionToPlaywrightTestTimeout + (Date.now() - startTimeInMs),
+  );
 
   setTestIdleTimeout(testIdleTimeout);
   setTestTimeout(testTimeout);
@@ -75,6 +77,7 @@ export const beforeTest = ({
   const {onlog, reject, testFnWithReject} = getTestFnAndReject({
     isSkipped,
     runId,
+    skipReason,
     testFn,
     testIdleTimeout,
     testTimeout,

src/utils/test/getTestFnAndReject.ts

@@ -8,22 +8,19 @@ import {getPromiseWithResolveAndReject} from '../promise';
 
 import type {Onlog, RejectTestRun, RunId, TestFn, Void} from '../../types/internal';
 
+import {test as playwrightTest} from '@playwright/test';
+
 type Options = Readonly<{
   isSkipped: boolean;
   runId: RunId;
+  skipReason: string | undefined;
   testFn: TestFn;
   testIdleTimeout: number;
   testTimeout: number;
 }>;
 
 type Return = Readonly<{onlog: Onlog; reject: RejectTestRun; testFnWithReject: TestFn}>;
 
-const skippedTestFnAndReject: Return = {
-  onlog: () => undefined,
-  reject: () => undefined,
-  testFnWithReject: () => RESOLVED_PROMISE,
-};
-
 /**
  * Get test function with execution timeout, idle timeout, reject and onlog functions,
  * by isSkipped flag, test function, runId, test execution timeout and test idle timeouts.
@@ -32,12 +29,23 @@ const skippedTestFnAndReject: Return = {
 export const getTestFnAndReject = ({
   isSkipped,
   runId,
+  skipReason,
   testFn,
   testIdleTimeout,
   testTimeout,
 }: Options): Return => {
   if (isSkipped) {
-    return skippedTestFnAndReject;
+    return {
+      onlog: () => undefined,
+      reject: () => undefined,
+      testFnWithReject: () => {
+        try {
+          playwrightTest.skip(true, skipReason);
+        } catch {}
+
+        return RESOLVED_PROMISE;
+      },
+    };
   }
 
   const {

src/utils/test/waitBeforeRetry.ts

@@ -7,7 +7,7 @@ import {getPreviousRunId} from './getPreviousRunId';
 
 import type {FullTestRun, RunId, TestStaticOptions} from '../../types/internal';
 
-import {test} from '@playwright/test';
+import {test as playwrightTest} from '@playwright/test';
 
 const additionToTimeout = 10_000;
 
@@ -57,7 +57,7 @@ export const waitBeforeRetry = async (
       return;
     }
 
-    test.setTimeout(timeoutInMs + additionToTimeout);
+    playwrightTest.setTimeout(timeoutInMs + additionToTimeout);
 
     const timeoutObject = setInterval(() => {
       void writeLogEventTime();

styles/report.css

@@ -553,7 +553,7 @@ a:visited {
   color: var(--subtitle-color);
 }
 .test-description__term::after {
-  content: ':\00a0';
+  content: ':';
 }
 .test-description__definition {
   margin: 0;
@@ -1206,7 +1206,7 @@ a:visited {
   overflow: hidden;
   border-radius: var(--main-radius);
   background: var(--secondary-bg-color);
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 10px rgb(0, 0, 0, 0.3);
 }
 .screenshot-dialog[open] {
   display: flex;
@@ -1226,7 +1226,7 @@ a:visited {
   text-overflow: ellipsis;
 }
 .screenshot-dialog::backdrop {
-  background: rgba(0, 0, 0, 0.5);
+  background: rgb(0, 0, 0, 0.5);
 }
 .screenshot-dialog__main {
   padding: var(--padding);