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

package/src/components/TestResult/{TestResultSteps/testResultStep.tsx → TrSteps/TrStep.tsx}

@@ -1,16 +1,16 @@
-import type { DefaultTestStepResult } from "@allurereport/core-api";
+import type { DefaultTestStepResult, TestStepResult } from "@allurereport/core-api";
 import { Code, Text, TreeItemIcon, allureIcons } from "@allurereport/web-components";
 import type { FunctionComponent } from "preact";
 import { useState } from "preact/hooks";
 import { ArrowButton } from "@/components/ArrowButton";
 import { MetadataList } from "@/components/Metadata";
 import { type MetadataItem } from "@/components/ReportMetadata";
-import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
-import { TestResultAttachment } from "@/components/TestResult/TestResultSteps/testResultAttachment";
-import { TestResultStepInfo } from "@/components/TestResult/TestResultSteps/testResultStepInfo";
+import { TrAttachment } from "@/components/TestResult/TrSteps/TrAttachment";
+import { TrStepInfo } from "@/components/TestResult/TrSteps/TrStepInfo";
+import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 import { collapsedTrees, toggleTree } from "@/stores/tree";
 
-export const TestResultStepParameters = (props: { parameters: DefaultTestStepResult["parameters"] }) => {
+export const TrStepParameters = (props: { parameters: DefaultTestStepResult["parameters"] }) => {
   const { parameters } = props;
 
   return (
@@ -19,21 +19,21 @@ export const TestResultStepParameters = (props: { parameters: DefaultTestStepRes
     </div>
   );
 };
-export const TestResultStepsContent = (props: { item: DefaultTestStepResult }) => {
+export const TrStepsContent = (props: { item: DefaultTestStepResult }) => {
   const { item } = props;
 
   return (
     <div className={styles["test-result-step-content"]}>
-      {Boolean(item?.parameters?.length) && <TestResultStepParameters parameters={item.parameters} />}
+      {Boolean(item?.parameters?.length) && <TrStepParameters parameters={item.parameters} />}
       {Boolean(item?.steps?.length) && (
         <>
           {item.steps?.map((subItem, key) => {
             if (subItem.type === "step") {
-              return <TestResultStep stepIndex={key + 1} key={key} item={subItem} />;
+              return <TrStep stepIndex={key + 1} key={key} item={subItem} />;
             }
 
             if (subItem.type === "attachment") {
-              return <TestResultAttachment stepIndex={key + 1} key={key} item={subItem} />;
+              return <TrAttachment stepIndex={key + 1} key={key} item={subItem} />;
             }
 
             return null;
@@ -44,12 +44,21 @@ export const TestResultStepsContent = (props: { item: DefaultTestStepResult }) =
   );
 };
 
-export const TestResultStep: FunctionComponent<{
+const hasFailedStep = (step: TestStepResult): boolean => {
+  if (step.type !== "step") {
+    return false;
+  }
+
+  return step.status !== "passed" || step.steps.some(hasFailedStep);
+};
+
+export const TrStep: FunctionComponent<{
   item: DefaultTestStepResult;
   stepIndex?: number;
   className?: string;
 }> = ({ item, stepIndex }) => {
-  const isEarlyOpened = collapsedTrees.value.has(item.stepId);
+  const haveFailedSteps = hasFailedStep(item);
+  const isEarlyOpened = collapsedTrees.value.has(item.stepId) ? false : Boolean(haveFailedSteps);
   const [isOpened, setIsOpen] = useState(isEarlyOpened || false);
   const hasContent = Boolean(item?.steps?.length || item?.parameters?.length);
 
@@ -76,9 +85,9 @@ export const TestResultStep: FunctionComponent<{
           {stepIndex}
         </Code>
         <Text className={styles["test-result-header-text"]}>{item.name}</Text>
-        <TestResultStepInfo item={item} />
+        <TrStepInfo item={item} />
       </div>
-      {hasContent && isOpened && <TestResultStepsContent item={item} />}
+      {hasContent && isOpened && <TrStepsContent item={item} />}
     </div>
   );
 };

package/src/components/TestResult/{TestResultSteps/testResultStepInfo.tsx → TrSteps/TrStepInfo.tsx}

@@ -1,8 +1,8 @@
 import { type DefaultTestStepResult, formatDuration } from "@allurereport/core-api";
 import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
-import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
+import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 
-export const TestResultStepInfo = (props: { item: DefaultTestStepResult }) => {
+export const TrStepInfo = (props: { item: DefaultTestStepResult }) => {
   const { item } = props;
   const formattedDuration = formatDuration(item?.duration as number);
   const stepLength = item.steps?.length;

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

@@ -2,19 +2,19 @@ import { allureIcons } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import type { AwesomeTestResult, AwesomeTestStepResult } from "types";
-import { TestResultDropdown } from "@/components/TestResult/TestResultDropdown";
-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 { useI18n } from "@/stores/locale";
 import { collapsedTrees, toggleTree } from "@/stores/tree";
 import * as styles from "./styles.scss";
 
 const typeMap = {
-  step: TestResultStep,
-  attachment: TestResultAttachment,
+  step: TrStep,
+  attachment: TrAttachment,
 } as const;
 
-export type TestResultStepsProps = {
+export type TrStepsProps = {
   steps: AwesomeTestResult["steps"];
   id?: string;
 };
@@ -24,7 +24,7 @@ type StepComponentProps = FunctionalComponent<{
   stepIndex?: number;
 }>;
 
-export const TestResultSteps: FunctionalComponent<TestResultStepsProps> = ({ steps, id }) => {
+export const TrSteps: FunctionalComponent<TrStepsProps> = ({ steps, id }) => {
   const stepsId = `${id}-steps`;
   const isEarlyCollapsed = Boolean(!collapsedTrees.value.has(stepsId));
   const [isOpened, setIsOpen] = useState<boolean>(isEarlyCollapsed);
@@ -37,7 +37,7 @@ export const TestResultSteps: FunctionalComponent<TestResultStepsProps> = ({ ste
   const { t } = useI18n("execution");
   return (
     <div className={styles["test-result-steps"]}>
-      <TestResultDropdown
+      <TrDropdown
         icon={allureIcons.lineHelpersPlayCircle}
         isOpened={isOpened}
         setIsOpen={handleClick}

package/src/components/TestResult/{TestResultSteps → TrSteps}/styles.scss

@@ -56,6 +56,7 @@
 .test-result-header-text {
   padding-left: 4px;
   word-break: break-word;
+  margin-right: auto;
 }
 
 .test-result-step-button {
@@ -82,7 +83,6 @@
 }
 
 .item-info {
-  margin-left: auto;
   display: flex;
   gap: 8px;
   color: var(--on-text-secondary);
@@ -151,6 +151,7 @@
 .test-result-attachment-text {
   padding-left: 4px;
   word-break: break-word;
+  margin-right: auto;
 }
 
 .test-result-attachment-image {

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

@@ -1,4 +1,4 @@
-import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
+import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 import { useI18n } from "@/stores";
 
 export const EmptyComponent = () => {

package/src/components/TestResult/{TestResultTabs → TrTabs}/index.tsx

@@ -4,18 +4,18 @@ import { useContext, useEffect, useState } from "preact/hooks";
 import { activeTab, navigateTo, route } from "@/stores/router";
 import * as styles from "./styles.scss";
 
-type TestResultTabsContextT = {
+type TrTabsContextT = {
   currentTab: string | undefined;
   setCurrentTab: (id: string) => void;
 };
 
-const TestResultTabsContext = createContext<TestResultTabsContextT | null>(null);
+const TestResultTabsContext = createContext<TrTabsContextT | null>(null);
 
 export const useTestResultTabsContext = () => {
   const context = useContext(TestResultTabsContext);
 
   if (!context) {
-    throw new Error("TestResultTabs components must be used within a TestResultTabs component");
+    throw new Error("TestResultTabs components must be used within a TrTabs component");
   }
 
   return context;
@@ -30,15 +30,15 @@ export const TestResultTabsProvider = (props: { initialTab?: string; children: C
   );
 };
 
-export const TestResultTabs = (props: { children: ComponentChildren; initialTab?: string }) => {
+export const TrTabs = (props: { children: ComponentChildren; initialTab?: string }) => {
   return <TestResultTabsProvider {...props} />;
 };
 
-export const TestResultTabsList = (props: { children: ComponentChildren }) => {
+export const TrTabsList = (props: { children: ComponentChildren }) => {
   return <div className={styles.tabsList}>{props.children}</div>;
 };
 
-export const TestResultTab = (props: { id: string; children: ComponentChildren; disabled?: boolean }) => {
+export const TrTab = (props: { id: string; children: ComponentChildren; disabled?: boolean }) => {
   const { currentTab, setCurrentTab } = useTestResultTabsContext();
   const { id, children } = props;
   const isActiveFromUrl = activeTab.value === id;

package/src/components/TestResult/{TestResultTeardown → TrTeardown}/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 TestResultTeardownProps = {
+export type TrTeardownProps = {
   teardown: AwesomeTestResult["teardown"];
   id: string;
 };
 
-export const TestResultTeardown: FunctionalComponent<TestResultTeardownProps> = ({ teardown, id }) => {
+export const TrTeardown: FunctionalComponent<TrTeardownProps> = ({ teardown, id }) => {
   const teardownId = `${id}-teardown`;
   const isEarlyCollapsed = !collapsedTrees.value.has(teardownId);
   const [isOpened, setIsOpen] = useState<boolean>(isEarlyCollapsed);
@@ -35,7 +35,7 @@ export const TestResultTeardown: FunctionalComponent<TestResultTeardownProps> =
 
   return (
     <div className={styles["test-result-steps"]}>
-      <TestResultDropdown
+      <TrDropdown
         icon={allureIcons.lineHelpersFlag}
         isOpened={isOpened}
         setIsOpen={handleClick}

package/src/components/TestResult/index.tsx

@@ -1,59 +1,71 @@
 import clsx from "clsx";
 import type { FunctionComponent, FunctionalComponent } from "preact";
+import { useEffect } from "preact/hooks";
 import type { AwesomeTestResult } from "types";
-import { TestResultAttachmentView } from "@/components/TestResult/TestResultAttachmentsView";
-import TestResultEmpty from "@/components/TestResult/TestResultEmpty";
-import { TestResultHeader } from "@/components/TestResult/TestResultHeader";
-import TestResultHistoryView from "@/components/TestResult/TestResultHistory";
-import { TestResultInfo } from "@/components/TestResult/TestResultInfo";
-import { TestResultOverview } from "@/components/TestResult/TestResultOverview";
-import { TestResultRetriesView } from "@/components/TestResult/TestResultRetriesView";
-import { TestResultTabs, useTestResultTabsContext } from "@/components/TestResult/TestResultTabs";
+import { TrAttachmentView } from "@/components/TestResult/TrAttachmentsView";
+import TrEmpty from "@/components/TestResult/TrEmpty";
+import { TrEnvironmentsView } from "@/components/TestResult/TrEnvironmentsView";
+import { TrHeader } from "@/components/TestResult/TrHeader";
+import TrHistoryView from "@/components/TestResult/TrHistory";
+import { TrInfo } from "@/components/TestResult/TrInfo";
+import { TrOverview } from "@/components/TestResult/TrOverview";
+import { TrRetriesView } from "@/components/TestResult/TrRetriesView";
+import { TrTabs, useTestResultTabsContext } from "@/components/TestResult/TrTabs";
+import { fetchTestEnvGroup } from "@/stores/env";
 import { isSplitMode } from "@/stores/layout";
 import * as styles from "./styles.scss";
 
-export type TestResultViewProps = {
+export type TrViewProps = {
   testResult?: AwesomeTestResult;
 };
 
-const TestResultView: FunctionalComponent<TestResultViewProps> = ({ testResult }) => {
+export type TrContentProps = {
+  testResult?: AwesomeTestResult;
+};
+
+export type TrProps = {
+  testResult?: AwesomeTestResult;
+};
+
+const TrView: FunctionalComponent<TrViewProps> = ({ testResult }) => {
   const { currentTab } = useTestResultTabsContext();
   const viewMap: Record<string, any> = {
-    overview: TestResultOverview,
-    history: TestResultHistoryView,
-    attachments: TestResultAttachmentView,
-    retries: TestResultRetriesView,
+    overview: TrOverview,
+    history: TrHistoryView,
+    attachments: TrAttachmentView,
+    retries: TrRetriesView,
+    environments: TrEnvironmentsView,
   };
   const ViewComponent = viewMap[currentTab];
 
   return <ViewComponent testResult={testResult} />;
 };
 
-export type TestResultContentProps = {
-  testResult?: AwesomeTestResult;
-};
-
-const TestResultContent: FunctionalComponent<TestResultContentProps> = ({ testResult }) => {
+const TrContent: FunctionalComponent<TrContentProps> = ({ testResult }) => {
   return (
-    <TestResultTabs initialTab="overview">
-      <TestResultInfo testResult={testResult} />
-      <TestResultView testResult={testResult} />
-    </TestResultTabs>
+    <TrTabs initialTab="overview">
+      <TrInfo testResult={testResult} />
+      <TrView testResult={testResult} />
+    </TrTabs>
   );
 };
 
-export type TestResultProps = {
-  testResult?: AwesomeTestResult;
-};
-
-const TestResult: FunctionComponent<TestResultProps> = ({ testResult }) => {
+const TestResult: FunctionComponent<TrProps> = ({ testResult }) => {
   const splitModeClass = isSplitMode.value ? styles["scroll-inside"] : "";
 
+  useEffect(() => {
+    const testCaseId = testResult?.testCase?.id;
+
+    if (testCaseId) {
+      fetchTestEnvGroup(testCaseId);
+    }
+  }, [testResult]);
+
   return (
     <>
-      {!isSplitMode.value && <TestResultHeader testResult={testResult} />}
+      {!isSplitMode.value && <TrHeader testResult={testResult} />}
       <div className={clsx(styles.content, splitModeClass)}>
-        {testResult ? <TestResultContent testResult={testResult} /> : <TestResultEmpty />}
+        {testResult ? <TrContent testResult={testResult} /> : <TrEmpty />}
       </div>
     </>
   );

package/src/components/TestResult/styles.scss

@@ -7,5 +7,6 @@
 
 .scroll-inside {
   overflow: auto;
-  height: calc(100vh - var(--footer-header-sizes));
+  height: 100%;
+  border-radius: 0;
 }

package/src/components/Tree/index.tsx

@@ -1,7 +1,9 @@
-import { Button, Loadable, PageLoader, Text, Tree } from "@allurereport/web-components";
+import { Button, Loadable, PageLoader, Text, Tree, TreeStatusBar } from "@allurereport/web-components";
 import type { AwesomeStatus } from "types";
+import { MetadataButton } from "@/components/MetadataButton";
 import { useTabsContext } from "@/components/Tabs";
-import { statsStore } from "@/stores";
+import { reportStatsStore, statsByEnvStore } from "@/stores";
+import { collapsedEnvironments, currentEnvironment, environmentsStore } from "@/stores/env";
 import { useI18n } from "@/stores/locale";
 import { navigateTo } from "@/stores/router";
 import {
@@ -11,13 +13,13 @@ import {
   noTests,
   noTestsFound,
   toggleTree,
-  treeFiltersStore,
   treeStore,
 } from "@/stores/tree";
 import * as styles from "./styles.scss";
 
 export const TreeList = () => {
   const { t } = useI18n("empty");
+  const { t: tEnvironments } = useI18n("environments");
   const { currentTab } = useTabsContext();
 
   return (
@@ -25,6 +27,7 @@ export const TreeList = () => {
       source={treeStore}
       renderLoader={() => <PageLoader />}
       renderData={() => {
+        // TODO: use function instead of computed
         if (noTests.value) {
           return (
             <div className={styles["tree-list"]}>
@@ -55,19 +58,95 @@ export const TreeList = () => {
           );
         }
 
+        // render single tree for single environment
+        if (environmentsStore.value.data.length === 1) {
+          return (
+            <div className={styles["tree-list"]}>
+              <Tree
+                reportStatistic={reportStatsStore.value.data}
+                statistic={statsByEnvStore.value.data[currentEnvironment.value]}
+                collapsedTrees={collapsedTrees.value}
+                toggleTree={toggleTree}
+                navigateTo={navigateTo}
+                tree={filteredTree.value.default}
+                statusFilter={currentTab as AwesomeStatus}
+                root
+              />
+            </div>
+          );
+        }
+
+        const currentTree = currentEnvironment.value ? filteredTree.value[currentEnvironment.value] : undefined;
+
+        if (currentTree) {
+          return (
+            <div className={styles["tree-list"]}>
+              <Tree
+                reportStatistic={reportStatsStore.value.data}
+                statistic={statsByEnvStore.value.data[currentEnvironment.value]}
+                collapsedTrees={collapsedTrees.value}
+                toggleTree={toggleTree}
+                navigateTo={navigateTo}
+                tree={currentTree}
+                statusFilter={currentTab as AwesomeStatus}
+                root
+              />
+            </div>
+          );
+        }
+
+        // render tree section for every environment
         return (
-          <div className={styles["tree-list"]}>
-            <Tree
-              collapsedTrees={collapsedTrees.value}
-              toggleTree={toggleTree}
-              treeFiltersStore={treeFiltersStore}
-              navigateTo={navigateTo}
-              statsStore={statsStore}
-              tree={filteredTree.value}
-              statusFilter={currentTab as AwesomeStatus}
-              root
-            />
-          </div>
+          <>
+            {Object.entries(filteredTree.value).map(([key, value]) => {
+              const { total } = value.statistic;
+
+              if (total === 0) {
+                return null;
+              }
+
+              const isOpened = !collapsedEnvironments.value.includes(key);
+              const toggleEnv = () => {
+                collapsedEnvironments.value = isOpened
+                  ? collapsedEnvironments.value.concat(key)
+                  : collapsedEnvironments.value.filter((env) => env !== key);
+              };
+              const stats = statsByEnvStore.value.data[key];
+
+              return (
+                <div key={key} className={styles["tree-section"]} data-testid={"tree-section"}>
+                  <div className={styles["tree-env-button"]}>
+                    <MetadataButton
+                      isOpened={isOpened}
+                      setIsOpen={toggleEnv}
+                      title={`${tEnvironments("environment", { count: 1 })}: "${key}"`}
+                      counter={total}
+                      data-testid={"tree-section-env-button"}
+                    />
+                    <TreeStatusBar
+                      statistic={stats}
+                      reportStatistic={reportStatsStore.value.data}
+                      statusFilter={currentTab}
+                    />
+                  </div>
+                  {isOpened && (
+                    <div className={styles["tree-list"]} data-testid={"tree-section-env-content"}>
+                      <Tree
+                        statistic={statsByEnvStore.value.data[key]}
+                        reportStatistic={reportStatsStore.value.data}
+                        collapsedTrees={collapsedTrees.value}
+                        toggleTree={toggleTree}
+                        statusFilter={currentTab}
+                        navigateTo={navigateTo}
+                        tree={value}
+                        root
+                      />
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </>
         );
       }}
     />

package/src/components/Tree/styles.scss

@@ -7,7 +7,7 @@
 }
 
 .tree-list {
-  min-height: 128px;
+  min-height: 320px;
 }
 
 .tree-header {
@@ -187,3 +187,18 @@
 .tree-item-marked {
   background: var(--bg-base-secondary);
 }
+
+.tree-section {
+  &:not(:last-child) {
+    padding-bottom: 8px;
+    margin-bottom: 14px;
+    border-bottom: 1px solid var(--on-border-muted);
+  }
+}
+
+.tree-env-button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 8px 0 6px;
+}

package/src/i18n/constants.ts

@@ -5,7 +5,7 @@ export const AVAILABLE_LOCALES = [
   "es",
   "pt",
   "de",
-  "am",
+  "hy",
   "az",
   "fr",
   "it",
@@ -61,8 +61,8 @@ export const LANG_LOCALE: Record<
     full: "Deutsch",
     iso: "de-DE",
   },
-  am: {
-    short: "Am",
+  hy: {
+    short: "Hy",
     full: "Հայերեն",
     iso: "hy-AM",
   },

package/src/i18n/locales/az.json

@@ -67,7 +67,8 @@
     "no-history-results": "Tarixçə məlumatı mövcud deyil",
     "no-retries-results": "Təkrar məlumatı mövcud deyil",
     "no-test-steps-results": "Test addımları haqqında məlumat mövcud deyil",
-    "no-test-case-results": "Test halları haqqında nəticələr yoxdur"
+    "no-test-case-results": "Test halları haqqında nəticələr yoxdur",
+    "no-environments-results": "Mühitlər haqqında məlumat mövcud deyil"
   },
   "severity": {
     "blocker": "bloklayıcı",
@@ -82,6 +83,11 @@
     "setup": "Hazırlıq",
     "teardown": "Yekunlaşma"
   },
+  "environments": {
+    "environment_one": "Mühit",
+    "environment_other": "Mühitlər",
+    "all": "Hamısı"
+  },
   "ui": {
     "labels": "Etiketlər",
     "metadata": "Metaməlumat",
@@ -92,12 +98,16 @@
     "history": "Tarixçə",
     "attachments": "Əlavələr",
     "retries": "Təkrarlar",
+    "environment_one": "Mühit",
+    "environment_other": "Mühitlər",
     "error": "Səhv",
     "goToStep": "Addıma keç",
     "showLess": "Daha az göstər",
     "showMore": "Daha çox göstər",
     "copy": "Kopyala",
-    "at": "üçün"
+    "at": "üçün",
+    "openPwTrace": "Playwright Trace aç",
+    "variables": "Dəyişənlər"
   },
   "controls": {
     "newTabAttachment": "Yeni sekmede aç",

package/src/i18n/locales/de.json

@@ -67,7 +67,8 @@
     "no-history-results": "Keine Verlaufsinformationen verfügbar",
     "no-retries-results": "Keine Wiederholungsinformationen verfügbar",
     "no-test-steps-results": "Keine Informationen zu Testschritten verfügbar",
-    "no-test-case-results": "Keine Testergebnisse verfügbar"
+    "no-test-case-results": "Keine Testergebnisse verfügbar",
+    "no-environments-results": "Keine Umgebungsinformationen verfügbar"
   },
   "severity": {
     "blocker": "Blocker",
@@ -82,6 +83,11 @@
     "setup": "Vorbereitung",
     "teardown": "Abbau"
   },
+  "environments": {
+    "environment_one": "Umgebung",
+    "environment_other": "Umgebungen",
+    "all": "Alle"
+  },
   "ui": {
     "labels": "Labels",
     "metadata": "Metadaten",
@@ -92,12 +98,15 @@
     "history": "Verlauf",
     "attachments": "Anhänge",
     "retries": "Wiederholungen",
+    "environments": "Umgebungen",
     "error": "Fehler",
     "goToStep": "Zum Schritt gehen",
     "showLess": "Weniger anzeigen",
     "showMore": "Mehr anzeigen",
     "copy": "Kopieren",
-    "at": "bei"
+    "at": "bei",
+    "variables": "Variablen",
+    "openPwTrace": "Playwright Trace öffnen"
   },
   "controls": {
     "newTabAttachment": "Anhang in neuem Tab öffnen",