@allurereport/web-awesome 3.0.0-beta.10 → 3.0.0-beta.12

package/src/components/TestResult/{TestResultInfo → TrInfo}/index.tsx

@@ -1,24 +1,26 @@
+import type { TestEnvGroup } from "@allurereport/core-api";
 import { formatDuration } from "@allurereport/core-api";
-import { Counter, Heading, Text, TooltipWrapper } from "@allurereport/web-components";
+import { Counter, Heading, Loadable, Text, TooltipWrapper } from "@allurereport/web-components";
 import clsx from "clsx";
 import type { FunctionalComponent } from "preact";
 import type { AwesomeTestResult } from "types";
-import { TestResultInfoStatuses } from "@/components/TestResult/TestResultInfo/TestResultInfoStatuses";
-import { TestResultNavigation } from "@/components/TestResult/TestResultNavigation";
-import { TestResultPrevStatuses } from "@/components/TestResult/TestResultPrevStatuses";
-import { TestResultSeverity } from "@/components/TestResult/TestResultSeverity";
-import { TestResultStatus } from "@/components/TestResult/TestResultStatus";
-import { TestResultTab, TestResultTabsList } from "@/components/TestResult/TestResultTabs";
+import { TrInfoStatuses } from "@/components/TestResult/TrInfo/TrInfoStatuses";
+import { TrNavigation } from "@/components/TestResult/TrNavigation";
+import { TrPrevStatuses } from "@/components/TestResult/TrPrevStatuses";
+import { TrSeverity } from "@/components/TestResult/TrSeverity";
+import { TrStatus } from "@/components/TestResult/TrStatus";
+import { TrTab, TrTabsList } from "@/components/TestResult/TrTabs";
+import { testEnvGroupsStore } from "@/stores/env";
 import { isSplitMode } from "@/stores/layout";
 import { useI18n } from "@/stores/locale";
 import { timestampToDate } from "@/utils/time";
 import * as styles from "./styles.scss";
 
-export type TestResultInfoProps = {
+export type TrInfoProps = {
   testResult?: AwesomeTestResult;
 };
 
-export const TestResultInfo: FunctionalComponent<TestResultInfoProps> = ({ testResult }) => {
+export const TrInfo: FunctionalComponent<TrInfoProps> = ({ testResult }) => {
   const { name, status, muted, flaky, known, duration, labels, history, retries, attachments, stop } = testResult ?? {};
   const formattedDuration = formatDuration(duration as number);
   const fullDate = stop && timestampToDate(stop);
@@ -35,10 +37,10 @@ export const TestResultInfo: FunctionalComponent<TestResultInfoProps> = ({ testR
           </Heading>
         )}
         <div className={styles["test-result-info-data"]}>
-          {Boolean(status) && <TestResultStatus status={status} />}
-          {Boolean(history?.length) && <TestResultPrevStatuses history={history} />}
-          <TestResultSeverity severity={severity} />
-          {Boolean(statuses.length) && <TestResultInfoStatuses statuses={statuses} />}
+          {Boolean(status) && <TrStatus status={status} />}
+          {Boolean(history?.length) && <TrPrevStatuses history={history} />}
+          <TrSeverity severity={severity} />
+          {Boolean(statuses.length) && <TrInfoStatuses statuses={statuses} />}
           <TooltipWrapper tooltipText={fullDate}>
             <Text tag={"div"} size={"s"} bold className={styles["test-result-duration"]}>
               {formattedDuration}
@@ -46,27 +48,39 @@ export const TestResultInfo: FunctionalComponent<TestResultInfoProps> = ({ testR
           </TooltipWrapper>
         </div>
         <div className={styles["test-result-tabs"]}>
-          <TestResultTabsList>
-            <TestResultTab id="overview">{t("overview")}</TestResultTab>
-            <TestResultTab id="history" disabled={!history?.length}>
+          <TrTabsList>
+            <TrTab id="overview">{t("overview")}</TrTab>
+            <TrTab id="history" disabled={!history?.length}>
               <div className={styles["test-result-tab"]}>
                 {t("history")}
                 {Boolean(history?.length) && <Counter size={"s"} count={history?.length} />}
               </div>
-            </TestResultTab>
-            <TestResultTab id="retries" disabled={!retries?.length}>
+            </TrTab>
+            <TrTab id="retries" disabled={!retries?.length}>
               <div className={styles["test-result-tab"]}>
                 {t("retries")}
                 {Boolean(retries?.length) && <Counter size={"s"} count={retries?.length} />}
               </div>
-            </TestResultTab>
-            <TestResultTab id="attachments" disabled={!attachments?.length}>
+            </TrTab>
+            <TrTab id="attachments" disabled={!attachments?.length}>
               <div className={styles["test-result-tab"]}>
                 {t("attachments")}
                 {Boolean(attachments?.length) && <Counter size={"s"} count={attachments?.length} />}
               </div>
-            </TestResultTab>
-          </TestResultTabsList>
+            </TrTab>
+            <Loadable<Record<string, TestEnvGroup>, TestEnvGroup | undefined>
+              source={testEnvGroupsStore}
+              transformData={(groups) => groups[testResult.testCase.id]}
+              renderData={(group) => (
+                <TrTab id="environments" disabled={!group}>
+                  <div className={styles["test-result-tab"]}>
+                    {t("environments")}
+                    {Boolean(group) && <Counter size={"s"} count={Object.keys(group.testResultsByEnv).length} />}
+                  </div>
+                </TrTab>
+              )}
+            />
+          </TrTabsList>
         </div>
       </>
     );
@@ -74,7 +88,7 @@ export const TestResultInfo: FunctionalComponent<TestResultInfoProps> = ({ testR
 
   return (
     <div className={clsx(styles["test-result-info"], isSplitMode.value && styles.sticky)}>
-      <TestResultNavigation testResult={testResult} />
+      <TrNavigation testResult={testResult} />
       {testResult && <Content />}
     </div>
   );

package/src/components/TestResult/{TestResultLinks → TrLinks}/index.tsx

@@ -6,7 +6,7 @@ import { MetadataButton } from "@/components/MetadataButton";
 import { useI18n } from "@/stores/locale";
 import * as styles from "./styles.scss";
 
-interface TestResultLinkProps {
+interface TrLinkProps {
   name: string;
   url: string;
   type: string;
@@ -19,8 +19,8 @@ const linksIconMap: Record<string, string> = {
   github: allureIcons.github,
 };
 
-const TestResultLink: FunctionalComponent<{
-  link: TestResultLinkProps;
+const TrLink: FunctionalComponent<{
+  link: TrLinkProps;
 }> = ({ link }) => {
   const { url, type } = link;
 
@@ -34,15 +34,15 @@ const TestResultLink: FunctionalComponent<{
   );
 };
 
-export type TestResultLinksProps = {
+export type TrLinksProps = {
   links: AwesomeTestResult["links"];
 };
 
-export const TestResultLinks: FunctionalComponent<TestResultLinksProps> = ({ links }) => {
+export const TrLinks: FunctionalComponent<TrLinksProps> = ({ links }) => {
   const [isOpened, setIsOpen] = useState(true);
   const { t } = useI18n("ui");
   const linkMap = links.map((link, index) => {
-    return <TestResultLink link={link as TestResultLinkProps} key={index} />;
+    return <TrLink link={link as TrLinkProps} key={index} />;
   });
 
   return (

package/src/components/TestResult/{TestResultMetadata → TrMetadata}/index.tsx

@@ -1,16 +1,16 @@
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import type { AwesomeTestResult } from "types";
-import { TestResultMetadataList } from "@/components/Metadata";
+import { TrMetadataList } from "@/components/Metadata";
 import { MetadataButton } from "@/components/MetadataButton";
 import { useI18n } from "@/stores/locale";
 import * as styles from "./styles.scss";
 
-export type TestResultMetadataProps = {
+export type TrMetadataProps = {
   testResult?: AwesomeTestResult;
 };
 
-export const TestResultMetadata: FunctionalComponent<TestResultMetadataProps> = ({ testResult }) => {
+export const TrMetadata: FunctionalComponent<TrMetadataProps> = ({ testResult }) => {
   const { t } = useI18n("ui");
   const { labels, groupedLabels } = testResult ?? {};
   const [isOpened, setIsOpened] = useState(true);
@@ -20,7 +20,7 @@ export const TestResultMetadata: FunctionalComponent<TestResultMetadataProps> =
       <MetadataButton isOpened={isOpened} setIsOpen={setIsOpened} counter={labels?.length} title={t("labels")} />
 
       <div className={styles["test-result-metadata-wrapper"]}>
-        {isOpened && <TestResultMetadataList groupedLabels={groupedLabels} />}
+        {isOpened && <TrMetadataList groupedLabels={groupedLabels} />}
       </div>
     </div>
   );

package/src/components/TestResult/{TestResultNavigation → TrNavigation}/index.tsx

@@ -7,11 +7,11 @@ import { testResultNavStore } from "@/stores/testResults";
 import { copyToClipboard } from "@/utils/copyToClipboard";
 import * as styles from "./styles.scss";
 
-export type TestResultNavigationProps = {
+export type TrNavigationProps = {
   testResult?: AwesomeTestResult;
 };
 
-export const TestResultNavigation: FunctionalComponent<TestResultNavigationProps> = ({ testResult }) => {
+export const TrNavigation: FunctionalComponent<TrNavigationProps> = ({ testResult }) => {
   const { fullName, id: testResultId } = testResult ?? {};
   const id = testResultId || "";
   const { t: tooltip } = useI18n("controls");
@@ -39,6 +39,7 @@ export const TestResultNavigation: FunctionalComponent<TestResultNavigationProps
       source={testResultNavStore}
       renderData={(data) => {
         const currentIndex = data.indexOf(id) + 1;
+
         return (
           <div className={styles["test-result-nav"]}>
             {fullName && <FullName />}

package/src/components/TestResult/TrOverview.tsx

@@ -0,0 +1,47 @@
+import type { TestStatus } from "@allurereport/core-api";
+import type { FunctionalComponent } from "preact";
+import type { AwesomeTestResult } from "types";
+import * as styles from "@/components/BaseLayout/styles.scss";
+import TestStepsEmpty from "@/components/TestResult/TestStepsEmpty";
+import { TrDescription } from "@/components/TestResult/TrDescription";
+import { TrError } from "@/components/TestResult/TrError";
+import { TrLinks } from "@/components/TestResult/TrLinks";
+import { TrMetadata } from "@/components/TestResult/TrMetadata";
+import { TrParameters } from "@/components/TestResult/TrParameters";
+import { TrPwTraces } from "@/components/TestResult/TrPwTraces";
+import { TrSetup } from "@/components/TestResult/TrSetup";
+import { TrSteps } from "@/components/TestResult/TrSteps";
+import { TrTeardown } from "@/components/TestResult/TrTeardown";
+
+export type TrOverviewProps = {
+  testResult?: AwesomeTestResult;
+};
+
+export const TrOverview: FunctionalComponent<TrOverviewProps> = ({ testResult }) => {
+  const { error, parameters, groupedLabels, links, description, setup, steps, teardown, id, status } = testResult || {};
+  const isNoSteps = !setup?.length && !steps.length && !teardown.length;
+  const pwTraces = testResult?.attachments?.filter(
+    (attachment) => attachment.link.contentType === "application/vnd.allure.playwright-trace",
+  );
+
+  return (
+    <>
+      {Boolean(error?.message) && (
+        <div className={styles["test-result-errors"]}>
+          <TrError {...error} status={status} />
+        </div>
+      )}
+      {Boolean(pwTraces.length) && <TrPwTraces pwTraces={pwTraces} />}
+      {Boolean(parameters?.length) && <TrParameters parameters={parameters} />}
+      {Boolean(groupedLabels && Object.keys(groupedLabels || {})?.length) && <TrMetadata testResult={testResult} />}
+      {Boolean(links?.length) && <TrLinks links={links} />}
+      {Boolean(description) && <TrDescription description={description} />}
+      <div className={styles["test-results"]}>
+        {isNoSteps && <TestStepsEmpty />}
+        {Boolean(setup?.length) && <TrSetup id={id} setup={setup} />}
+        {Boolean(steps?.length) && <TrSteps id={id} steps={steps} />}
+        {Boolean(teardown?.length) && <TrTeardown id={id} teardown={teardown} />}
+      </div>
+    </>
+  );
+};

package/src/components/TestResult/{TestResultParameters → TrParameters}/index.tsx

@@ -6,11 +6,11 @@ import { MetadataButton } from "@/components/MetadataButton";
 import { useI18n } from "@/stores/locale";
 import * as styles from "./styles.scss";
 
-export type TestResultParametersProps = {
+export type TrParametersProps = {
   parameters: AwesomeTestResult["parameters"];
 };
 
-export const TestResultParameters: FunctionalComponent<TestResultParametersProps> = ({ parameters }) => {
+export const TrParameters: FunctionalComponent<TrParametersProps> = ({ parameters }) => {
   const [isOpened, setIsOpened] = useState(true);
   const { t } = useI18n("ui");
 

package/src/components/TestResult/{TestResultPrevStatuses → TrPrevStatuses}/index.tsx

@@ -8,14 +8,14 @@ import { capitalize } from "@/utils/capitalize";
 import { timestampToDate } from "@/utils/time";
 import * as styles from "./styles.scss";
 
-const TestResultPrevStatus: FunctionalComponent<{ item: HistoryTestResult }> = ({ item }) => {
+const TrPrevStatus: FunctionalComponent<{ item: HistoryTestResult }> = ({ item }) => {
   return (
     <div className={styles["test-result-prev-status"]} onClick={() => navigateTo(`${item.id}`)}>
       <SvgIcon id={allureIcons.lineShapesDotCircle} className={styles[`status-${item?.status}`]} />
     </div>
   );
 };
-const TestResultPrevStatusTooltip: FunctionalComponent<{ item: HistoryTestResult }> = ({ item }) => {
+const TrPrevStatusTooltip: FunctionalComponent<{ item: HistoryTestResult }> = ({ item }) => {
   const convertedStop = item.stop && timestampToDate(item.stop);
   const { t } = useI18n("statuses");
   const status = t(item.status);
@@ -30,17 +30,17 @@ const TestResultPrevStatusTooltip: FunctionalComponent<{ item: HistoryTestResult
   );
 };
 
-export type TestResultPrevStatusesProps = {
+export type TrPrevStatusesProps = {
   history: AwesomeTestResult["history"];
 };
 
-export const TestResultPrevStatuses: FunctionalComponent<TestResultPrevStatusesProps> = ({ history }) => {
+export const TrPrevStatuses: FunctionalComponent<TrPrevStatusesProps> = ({ history }) => {
   return (
     <div className={styles["test-result-prev-statuses"]}>
       {history?.slice(0, 6).map((item, key) => (
         <div key={key} className={styles["test-result-prev-status"]}>
-          <TooltipWrapper key={key} tooltipComponent={<TestResultPrevStatusTooltip item={item} />}>
-            <TestResultPrevStatus item={item} />
+          <TooltipWrapper key={key} tooltipComponent={<TrPrevStatusTooltip item={item} />}>
+            <TrPrevStatus item={item} />
           </TooltipWrapper>
         </div>
       ))}

package/src/components/TestResult/TrPwTraces/PwTrace.tsx

@@ -0,0 +1,34 @@
+import clsx from "clsx";
+import { useEffect, useRef } from "preact/hooks";
+import * as styles from "./styles.scss";
+
+interface PwTraceProps {
+  blob: Blob;
+  isFullScreen?: boolean;
+}
+export const PwTrace = ({ blob, isFullScreen }: PwTraceProps) => {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  const handleLoad = () => {
+    iframeRef.current?.contentWindow?.postMessage(
+      { method: "load", params: { trace: blob } },
+      "https://trace.playwright.dev",
+    );
+  };
+
+  useEffect(() => {
+    if (iframeRef.current) {
+      iframeRef.current.onload = handleLoad;
+    }
+  }, [blob]);
+
+  return (
+    <iframe
+      className={clsx(styles["pw-trace"], { [styles["pw-trace-fullscreen"]]: isFullScreen })}
+      ref={iframeRef}
+      width={"100%"}
+      height={"100%"}
+      src={"https://trace.playwright.dev/next/"}
+    />
+  );
+};

package/src/components/TestResult/TrPwTraces/PwTraceButton.tsx

@@ -0,0 +1,33 @@
+import type { AttachmentTestStepResult } from "@allurereport/core-api";
+import type { Attachments } from "@allurereport/web-commons";
+import { fetchReportAttachment } from "@allurereport/web-commons";
+import { IconButton, TooltipWrapper, allureIcons } from "@allurereport/web-components";
+import { PwTrace } from "@/components/TestResult/TrPwTraces/PwTrace";
+import { useI18n } from "@/stores";
+import { openModal } from "@/stores/modal";
+import * as styles from "./styles.scss";
+
+export const fetchFromUrl = async ({ id, ext, contentType }: Attachments) => {
+  const fileName = `${id || "-"}${ext || ""}`;
+
+  return fetchReportAttachment(`data/attachments/${fileName}?attachment`, contentType);
+};
+
+export const PwTraceButton = ({ link }: Pick<AttachmentTestStepResult, "link">) => {
+  const { t } = useI18n("ui");
+  const openPw = async () => {
+    const hasPw = await fetchFromUrl(link);
+    const blob = await hasPw.blob();
+
+    openModal({
+      component: <PwTrace blob={blob} />,
+      title: `Playwright Trace Viewer | ${link.name}${link.ext}`,
+    });
+  };
+
+  return (
+    <TooltipWrapper tooltipText={t("openPwTrace")}>
+      <IconButton icon={allureIcons.lineArrowsExpand3} size={"s"} style={"ghost"} onClick={openPw} />
+    </TooltipWrapper>
+  );
+};

package/src/components/TestResult/TrPwTraces/index.tsx

@@ -0,0 +1,29 @@
+import type { AttachmentTestStepResult } from "@allurereport/core-api";
+import type { FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import type { AwesomeTestResult } from "types";
+import { MetadataButton } from "@/components/MetadataButton";
+import { TrAttachment } from "@/components/TestResult/TrSteps/TrAttachment";
+import { useI18n } from "@/stores/locale";
+import * as styles from "./styles.scss";
+
+export type TrMetadataProps = {
+  testResult?: AwesomeTestResult;
+  pwTraces?: AttachmentTestStepResult[];
+};
+
+export const TrPwTraces: FunctionalComponent<TrMetadataProps> = ({ pwTraces }) => {
+  const { t } = useI18n("ui");
+  const [isOpened, setIsOpened] = useState(true);
+
+  return (
+    <div className={styles["tr-metadata"]}>
+      <MetadataButton isOpened={isOpened} setIsOpen={setIsOpened} counter={pwTraces?.length} title={t("pwTrace")} />
+      {isOpened && (
+        <div className={styles["tr-metadata-wrapper"]}>
+          {pwTraces?.map((pw, index) => <TrAttachment stepIndex={index + 1} item={pw} key={pw.link.id} />)}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/TestResult/TrPwTraces/styles.scss

@@ -0,0 +1,20 @@
+.tr-metadata {
+  padding: 12px 24px 0;
+}
+
+.tr-metadata-wrapper {
+  border-bottom: 1px solid var(--on-border-primary);
+  padding-top: 8px;
+  padding-bottom: 12px;
+}
+
+.pw-trace {
+  --modal-paddings: 60px;
+  overflow: hidden;
+  height: calc(80vh - var(--modal-paddings));
+}
+
+.pw-trace-fullscreen {
+  --modal-fs-paddings: 75px;
+  height: calc(100vh - var(--modal-fs-paddings));
+}

package/src/components/TestResult/{TestResultRetriesView/TestResultRetriesItem.tsx → TrRetriesView/TrRetriesItem.tsx}

@@ -4,12 +4,12 @@ import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import type { AwesomeTestResult } from "types";
 import { ArrowButton } from "@/components/ArrowButton";
-import * as styles from "@/components/TestResult/TestResultRetriesView/styles.scss";
 import { TrError } from "@/components/TestResult/TrError";
+import * as styles from "@/components/TestResult/TrRetriesView/styles.scss";
 import { navigateTo } from "@/stores/router";
 import { timestampToDate } from "@/utils/time";
 
-export const TestResultRetriesItem: FunctionalComponent<{
+export const TrRetriesItem: FunctionalComponent<{
   testResultItem: AwesomeTestResult;
 }> = ({ testResultItem }) => {
   const { id, status, error, stop, duration } = testResultItem;
@@ -43,7 +43,7 @@ export const TestResultRetriesItem: FunctionalComponent<{
       </div>
       {isOpened && error && (
         <div className={styles["test-result-retries-item-content"]}>
-          <TrError {...error} />
+          <TrError {...error} status={status} />
         </div>
       )}
     </div>

package/src/components/TestResult/{TestResultRetriesView → TrRetriesView}/index.tsx

@@ -1,10 +1,10 @@
 import type { FunctionalComponent } from "preact";
 import type { AwesomeTestResult } from "types";
-import * as styles from "@/components/TestResult/TestResultHistory/styles.scss";
-import { TestResultRetriesItem } from "@/components/TestResult/TestResultRetriesView/TestResultRetriesItem";
+import * as styles from "@/components/TestResult/TrHistory/styles.scss";
+import { TrRetriesItem } from "@/components/TestResult/TrRetriesView/TrRetriesItem";
 import { useI18n } from "@/stores";
 
-export const TestResultRetriesView: FunctionalComponent<{
+export const TrRetriesView: FunctionalComponent<{
   testResult: AwesomeTestResult;
 }> = ({ testResult }) => {
   const { retries } = testResult ?? {};
@@ -13,9 +13,7 @@ export const TestResultRetriesView: FunctionalComponent<{
   return (
     <div className={styles["test-result-history"]}>
       {retries.length ? (
-        retries?.map((item, key) => (
-          <TestResultRetriesItem testResultItem={item as unknown as AwesomeTestResult} key={key} />
-        ))
+        retries?.map((item, key) => <TrRetriesItem testResultItem={item as unknown as AwesomeTestResult} key={key} />)
       ) : (
         <div className={styles["test-result-empty"]}>{t("no-retries-results")}</div>
       )}

package/src/components/TestResult/{TestResultSetup → TrSetup}/index.tsx

@@ -2,26 +2,26 @@ import { allureIcons } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import type { AwesomeTestResult } from "types";
-import { TestResultDropdown } from "@/components/TestResult/TestResultDropdown";
-import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
-import { TestResultAttachment } from "@/components/TestResult/TestResultSteps/testResultAttachment";
-import { TestResultStep } from "@/components/TestResult/TestResultSteps/testResultStep";
+import { TrDropdown } from "@/components/TestResult/TrDropdown";
+import { TrAttachment } from "@/components/TestResult/TrSteps/TrAttachment";
+import { TrStep } from "@/components/TestResult/TrSteps/TrStep";
+import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 import { useI18n } from "@/stores/locale";
 import { collapsedTrees, toggleTree } from "@/stores/tree";
 
 const typeMap = {
-  before: TestResultStep,
-  after: TestResultStep,
-  step: TestResultStep,
-  attachment: TestResultAttachment,
+  before: TrStep,
+  after: TrStep,
+  step: TrStep,
+  attachment: TrAttachment,
 };
 
-export type TestResultSetupProps = {
+export type TrSetupProps = {
   setup: AwesomeTestResult["setup"];
   id?: string;
 };
 
-export const TestResultSetup: FunctionalComponent<TestResultSetupProps> = ({ setup, id }) => {
+export const TrSetup: FunctionalComponent<TrSetupProps> = ({ setup, id }) => {
   const teardownId = `${id}-setup`;
   const isEarlyCollapsed = Boolean(!collapsedTrees.value.has(teardownId));
   const [isOpened, setIsOpen] = useState<boolean>(isEarlyCollapsed);
@@ -34,7 +34,7 @@ export const TestResultSetup: FunctionalComponent<TestResultSetupProps> = ({ set
 
   return (
     <div className={styles["test-result-steps"]}>
-      <TestResultDropdown
+      <TrDropdown
         icon={allureIcons.lineTimeClockStopwatch}
         isOpened={isOpened}
         setIsOpen={handleClick}

package/src/components/TestResult/{TestResultSeverity → TrSeverity}/index.tsx

@@ -12,7 +12,7 @@ const icons: Record<string, string> = {
   trivial: allureIcons.lineArrowsChevronDownDouble,
 };
 
-export const TestResultSeverity = ({ severity = "normal" }: { severity?: string }) => {
+export const TrSeverity = ({ severity = "normal" }: { severity?: string }) => {
   const { t } = useI18n("severity");
   const statusClass = clsx(styles[`severity-${severity}`]);
 

package/src/components/TestResult/{TestResultStatus → TrStatus}/index.tsx

@@ -5,8 +5,9 @@ import { useI18n } from "@/stores";
 import { capitalize } from "@/utils/capitalize";
 import * as styles from "./styles.scss";
 
-export const TestResultStatus = ({ status }: { status: TestStatus }) => {
+export const TrStatus = ({ status }: { status: TestStatus }) => {
   const { t } = useI18n("statuses");
+
   return (
     <div
       data-testid={`test-result-status-${status}`}
@@ -17,7 +18,7 @@ export const TestResultStatus = ({ status }: { status: TestStatus }) => {
         className={styles["test-result-status-icon"]}
         classNameIcon={styles["test-result-status-icon"]}
       />
-      <Text type={"ui"} size={"s"} bold className={styles["test-result-status-text"]}>
+      <Text type={"ui"} size={"s"} className={styles["test-result-status-text"]}>
         {capitalize(t(status) ?? status)}
       </Text>
     </div>

package/src/components/TestResult/{TestResultSteps/testResultAttachment.tsx → TrSteps/TrAttachment.tsx}

@@ -4,10 +4,11 @@ import { Attachment, Code, SvgIcon, Text, allureIcons } from "@allurereport/web-
 import type { FunctionComponent } from "preact";
 import { useState } from "preact/hooks";
 import { ArrowButton } from "@/components/ArrowButton";
-import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
-import { TestResultAttachmentInfo } from "@/components/TestResult/TestResultSteps/testResultAttachmentInfo";
+import { PwTraceButton } from "@/components/TestResult/TrPwTraces/PwTraceButton";
+import { TrAttachmentInfo } from "@/components/TestResult/TrSteps/TrAttachmentInfo";
+import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 
-const { lineImagesImage, lineFilesFileAttachment2 } = allureIcons;
+const { lineImagesImage, lineFilesFileAttachment2, playwrightLogo } = allureIcons;
 
 const iconMap: Record<string, string> = {
   "text/plain": lineFilesFileAttachment2,
@@ -25,9 +26,10 @@ const iconMap: Record<string, string> = {
   "image/jpeg": lineImagesImage,
   "video/mp4": lineImagesImage,
   "application/vnd.allure.image.diff": lineImagesImage,
+  "application/vnd.allure.playwright-trace": playwrightLogo,
 };
 
-export const TestResultAttachment: FunctionComponent<{
+export const TrAttachment: FunctionComponent<{
   item: AttachmentTestStepResult;
   stepIndex?: number;
   className?: string;
@@ -47,7 +49,7 @@ export const TestResultAttachment: FunctionComponent<{
           setIsOpen((prev) => !prev);
         }}
       >
-        <ArrowButton isOpened={isOpened} />
+        {isValidComponentType ? <ArrowButton isOpened={isOpened} /> : <div className={styles["test-result-strut"]} />}
         <div className={styles["test-result-attachment-icon"]}>
           <SvgIcon size="s" id={iconMap[link.contentType] ?? lineFilesFileAttachment2} />
         </div>
@@ -55,14 +57,15 @@ export const TestResultAttachment: FunctionComponent<{
         <Code size="s" className={styles["test-result-step-number"]}>
           {stepIndex}
         </Code>
-
         <Text className={styles["test-result-attachment-text"]}>{link.name || link.originalFileName}</Text>
         {missed && (
           <Text size={"s"} className={styles["test-result-attachment-missed"]}>
             missed
           </Text>
         )}
-        <TestResultAttachmentInfo item={item} shouldExpand={isValidComponentType} />
+        <div>
+          <TrAttachmentInfo item={item} shouldExpand={isValidComponentType} />
+        </div>
       </div>
       {isOpened && isValidComponentType && (
         <div className={styles["test-result-attachment-content-wrapper"]}>

package/src/components/TestResult/{TestResultSteps/testResultAttachmentInfo.tsx → TrSteps/TrAttachmentInfo.tsx}

@@ -4,21 +4,20 @@ import { Attachment, IconButton, Text, TooltipWrapper, allureIcons } from "@allu
 import { filesize } from "filesize";
 import type { FunctionalComponent } from "preact";
 import { useEffect } from "preact/hooks";
-import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
+import { PwTraceButton } from "@/components/TestResult/TrPwTraces/PwTraceButton";
+import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 import { useI18n } from "@/stores";
-import { isModalOpen, modalData, openModal } from "@/stores/modal";
+import { isModalOpen, openModal } from "@/stores/modal";
 
-interface TestResultAttachmentInfoProps {
+interface TrAttachmentInfo {
   item?: AttachmentTestStepResult;
   shouldExpand?: boolean;
 }
 
-export const TestResultAttachmentInfo: FunctionalComponent<TestResultAttachmentInfoProps> = ({
-  item,
-  shouldExpand,
-}) => {
-  const { id, ext, contentType } = item.link;
+export const TrAttachmentInfo: FunctionalComponent<TrAttachmentInfo> = ({ item, shouldExpand }) => {
   const { t: tooltip } = useI18n("controls");
+  const { id, ext, contentType } = item.link;
+  const isPwTrace = contentType === "application/vnd.allure.playwright-trace";
   const contentLength = item.link.missed === false ? item.link.contentLength : undefined;
   const contentSize = contentLength
     ? filesize(contentLength, {
@@ -55,6 +54,7 @@ export const TestResultAttachmentInfo: FunctionalComponent<TestResultAttachmentI
       {Boolean(contentType) && <Text size={"s"}>{contentType}</Text>}
       {Boolean(contentSize) && <Text size={"s"}>{contentSize}</Text>}
       <div className={styles["item-buttons"]}>
+        {isPwTrace && <PwTraceButton link={item.link} />}
         {shouldExpand && (
           <TooltipWrapper tooltipText={tooltip("expand")}>
             <IconButton