PRO-14812 fix: really skip skipped tests in Playwright

Author: uid11

src/types/checks.ts

@@ -1,15 +1,15 @@
 /**
  * This type checks that the type `true` is passed to it.
  */
-export type Expect<T extends true> = T;
+export type Expect<Type extends true> = Type;
 
 /**
  * Returns `true` if types are exactly equal and `false` otherwise.
  * IsEqual<{foo: string}, {foo: string}> = true.
  * IsEqual<{readonly foo: string}, {foo: string}> = false.
  */
 export type IsEqual<X, Y> =
-  (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2 ? true : false;
+  (<Type>() => Type extends X ? 1 : 2) extends <Type>() => Type extends Y ? 1 : 2 ? true : false;
 
 /**
  * Returns `true` if key is readonly in object and `false` otherwise.

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

@@ -82,7 +82,6 @@ body {
   margin: 0;
   padding: 0;
   width: 100%;
-  height: auto;
   min-height: 100vh;
   font-family: system-ui;
   font-size: var(--font-size);
@@ -121,6 +120,7 @@ a:visited {
 .errors,
 .warnings {
   padding: 2px var(--retry-padding);
+  overflow-wrap: break-word;
 }
 .errors__error {
   margin: 4px 0;
@@ -146,7 +146,6 @@ a:visited {
 .column-1 {
   grid-area: column-1;
   width: 100vw;
-  overflow: hidden;
 }
 .header,
 .column-1 {
@@ -176,6 +175,9 @@ a:visited {
   background: var(--item-bg-color);
 }
 .main {
+  overflow: hidden;
+  contain: layout;
+  container-type: inline-size;
   grid-area: main;
   min-width: 0;
   display: flex;
@@ -553,7 +555,7 @@ a:visited {
   color: var(--subtitle-color);
 }
 .test-description__term::after {
-  content: ':\00a0';
+  content: ':';
 }
 .test-description__definition {
   margin: 0;
@@ -1073,9 +1075,12 @@ a:visited {
 .test-link[aria-current='true'] {
   --box-shadow-width: 1px;
 
-  box-shadow: 0 0 0 var(--box-shadow-width) var(--drag-container-bg-color) inset;
+  box-shadow: 0 0 0 var(--box-shadow-width) var(--passed-color) inset;
   cursor: default;
 }
+.test-link[aria-current='true'][data-status='failed'] {
+  box-shadow: 0 0 0 var(--box-shadow-width) var(--failed-color) inset;
+}
 .test-link[data-status='failed'],
 .test-link[data-status='unknown'],
 .step[data-status='failed'] > .step__head,
@@ -1206,7 +1211,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 +1231,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);
@@ -1348,10 +1353,6 @@ button:focus-visible,
   outline-color: var(--accent-color);
   outline-offset: -2px;
 }
-.main {
-  contain: layout;
-  container-type: inline-size;
-}
 @container (min-width: 350px) {
   .test-link__name,
   .step__name {
@@ -1361,17 +1362,20 @@ button:focus-visible,
 }
 
 @media (min-width: 390px) {
+  body {
+    height: 100vh;
+  }
   .main {
     flex-direction: row;
   }
   .column-2 {
+    overflow-y: auto;
     width: calc(40% - var(--drag-container-width));
   }
   .column-3 {
-    max-height: 100vh;
+    overflow-y: auto;
     will-change: transform;
     flex: 1 0 180px;
-    overflow-y: scroll;
   }
   .drag-container {
     position: relative;