feat(editor): Add workflow evaluation edit and list views (no-changelog) (#11719)

2025-03-05 20:50:17 -08:00 · 2024-11-27 07:47:41 +01:00 · 2024-11-27 07:47:41 +01:00 · 132aa0b9f1
parent a535e88f1a
commit 132aa0b9f1
32 changed files with 2490 additions and 12 deletions
--- a/packages/design-system/src/components/N8nNavigationDropdown/NavigationDropdown.vue
+++ b/packages/design-system/src/components/N8nNavigationDropdown/NavigationDropdown.vue
@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ElMenu, ElSubMenu, ElMenuItem, type MenuItemRegistered } from 'element-plus';
-import { ref, defineProps, defineEmits, defineOptions } from 'vue';
+import { ref } from 'vue';
 import type { RouteLocationRaw } from 'vue-router';

 import ConditionalRouterLink from '../ConditionalRouterLink';
--- a/packages/editor-ui/src/api/testDefinition.ee.ts
+++ b/packages/editor-ui/src/api/testDefinition.ee.ts
@ -0,0 +1,73 @@
+import type { IRestApiContext } from '@/Interface';
+import { makeRestApiRequest } from '@/utils/apiUtils';
+export interface TestDefinitionRecord {
+	id: string;
+	name: string;
+	workflowId: string;
+	evaluationWorkflowId?: string | null;
+	annotationTagId?: string | null;
+	description?: string | null;
+	updatedAt?: string;
+	createdAt?: string;
+}
+interface CreateTestDefinitionParams {
+	name: string;
+	workflowId: string;
+	evaluationWorkflowId?: string | null;
+}
+
+export interface UpdateTestDefinitionParams {
+	name?: string;
+	evaluationWorkflowId?: string | null;
+	annotationTagId?: string | null;
+	description?: string | null;
+}
+export interface UpdateTestResponse {
+	createdAt: string;
+	updatedAt: string;
+	id: string;
+	name: string;
+	workflowId: string;
+	description: string | null;
+	annotationTag: string | null;
+	evaluationWorkflowId: string | null;
+	annotationTagId: string | null;
+}
+
+const endpoint = '/evaluation/test-definitions';
+
+export async function getTestDefinitions(context: IRestApiContext) {
+	return await makeRestApiRequest<{ count: number; testDefinitions: TestDefinitionRecord[] }>(
+		context,
+		'GET',
+		endpoint,
+	);
+}
+
+export async function getTestDefinition(context: IRestApiContext, id: string) {
+	return await makeRestApiRequest<{ id: string }>(context, 'GET', `${endpoint}/${id}`);
+}
+
+export async function createTestDefinition(
+	context: IRestApiContext,
+	params: CreateTestDefinitionParams,
+) {
+	return await makeRestApiRequest<TestDefinitionRecord>(context, 'POST', endpoint, params);
+}
+
+export async function updateTestDefinition(
+	context: IRestApiContext,
+	id: string,
+	params: UpdateTestDefinitionParams,
+) {
+	return await makeRestApiRequest<UpdateTestResponse>(
+		context,
+		'PATCH',
+		`${endpoint}/${id}`,
+		params,
+	);
+}
+
+export async function deleteTestDefinition(context: IRestApiContext, id: string) {
+	return await makeRestApiRequest<{ success: boolean }>(context, 'DELETE', `${endpoint}/${id}`);
+}
--- a/packages/editor-ui/src/components/MainHeader/MainHeader.vue
+++ b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
@ -10,6 +10,7 @@ import {
 	PLACEHOLDER_EMPTY_WORKFLOW_ID,
 	STICKY_NODE_TYPE,
 	VIEWS,
+	WORKFLOW_EVALUATION_EXPERIMENT,
 } from '@/constants';
 import { useI18n } from '@/composables/useI18n';
 import { useNDVStore } from '@/stores/ndv.store';
@ -19,6 +20,7 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useExecutionsStore } from '@/stores/executions.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { usePushConnection } from '@/composables/usePushConnection';
+import { usePostHog } from '@/stores/posthog.store';

 import GithubButton from 'vue-github-button';
 import { useLocalStorage } from '@vueuse/core';
@ -33,6 +35,7 @@ const sourceControlStore = useSourceControlStore();
 const workflowsStore = useWorkflowsStore();
 const executionsStore = useExecutionsStore();
 const settingsStore = useSettingsStore();
+const posthogStore = usePostHog();

 const activeHeaderTab = ref(MAIN_HEADER_TABS.WORKFLOW);
 const workflowToReturnTo = ref('');
@ -40,10 +43,20 @@ const executionToReturnTo = ref('');
 const dirtyState = ref(false);
 const githubButtonHidden = useLocalStorage(LOCAL_STORAGE_HIDE_GITHUB_STAR_BUTTON, false);

-const tabBarItems = computed(() => [
-	{ value: MAIN_HEADER_TABS.WORKFLOW, label: locale.baseText('generic.editor') },
-	{ value: MAIN_HEADER_TABS.EXECUTIONS, label: locale.baseText('generic.executions') },
-]);
+const tabBarItems = computed(() => {
+	const items = [
+		{ value: MAIN_HEADER_TABS.WORKFLOW, label: locale.baseText('generic.editor') },
+		{ value: MAIN_HEADER_TABS.EXECUTIONS, label: locale.baseText('generic.executions') },
+	];
+
+	if (posthogStore.isFeatureEnabled(WORKFLOW_EVALUATION_EXPERIMENT)) {
+		items.push({
+			value: MAIN_HEADER_TABS.TEST_DEFINITION,
+			label: locale.baseText('generic.tests'),
+		});
+	}
+	return items;
+});

 const activeNode = computed(() => ndvStore.activeNode);
 const hideMenuBar = computed(() =>
@ -80,6 +93,9 @@ onMounted(async () => {
 });

 function syncTabsWithRoute(to: RouteLocation, from?: RouteLocation): void {
+	if (to.matched.some((record) => record.name === VIEWS.TEST_DEFINITION)) {
+		activeHeaderTab.value = MAIN_HEADER_TABS.TEST_DEFINITION;
+	}
 	if (
 		to.name === VIEWS.EXECUTION_HOME ||
 		to.name === VIEWS.WORKFLOW_EXECUTIONS ||
@ -119,6 +135,11 @@ function onTabSelected(tab: MAIN_HEADER_TABS, event: MouseEvent) {
 			void navigateToExecutionsView(openInNewTab);
 			break;

+		case MAIN_HEADER_TABS.TEST_DEFINITION:
+			activeHeaderTab.value = MAIN_HEADER_TABS.TEST_DEFINITION;
+			void router.push({ name: VIEWS.TEST_DEFINITION });
+			break;
+
 		default:
 			break;
 	}
--- a/packages/editor-ui/src/components/TagsDropdown.vue
+++ b/packages/editor-ui/src/components/TagsDropdown.vue
@ -12,11 +12,11 @@ import { useToast } from '@/composables/useToast';
 interface TagsDropdownProps {
 	placeholder: string;
 	modelValue: string[];
-	createTag: (name: string) => Promise<ITag>;
 	eventBus: EventBus | null;
 	allTags: ITag[];
 	isLoading: boolean;
 	tagsById: Record<string, ITag>;
+	createTag?: (name: string) => Promise<ITag>;
 }

 const i18n = useI18n();
@ -109,6 +109,8 @@ function filterOptions(value = '') {
 }

 async function onCreate() {
+	if (!props.createTag) return;
+
 	const name = filter.value;
 	try {
 		const newTag = await props.createTag(name);
--- a/packages/editor-ui/src/components/TestDefinition/EditDefinition/BlockArrow.vue
+++ b/packages/editor-ui/src/components/TestDefinition/EditDefinition/BlockArrow.vue
@ -0,0 +1,40 @@
+<template>
+	<div :class="$style.arrowConnector"></div>
+</template>
+
+<style module lang="scss">
+.arrowConnector {
+	$arrow-width: 12px;
+	$arrow-height: 8px;
+	$stalk-width: 2px;
+	$color: var(--color-text-dark);
+
+	position: relative;
+	height: var(--arrow-height, 3rem);
+	margin: 0.5rem 0;
+
+	&::before,
+	&::after {
+		content: '';
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+
+	&::before {
+		top: 0;
+		width: $stalk-width;
+		height: calc(100% - #{$arrow-height});
+		background-color: $color;
+	}
+
+	&::after {
+		bottom: 0;
+		width: 0;
+		height: 0;
+		border-left: calc($arrow-width / 2) solid transparent;
+		border-right: calc($arrow-width / 2) solid transparent;
+		border-top: $arrow-height solid $color;
+	}
+}
+</style>
--- a/packages/editor-ui/src/components/TestDefinition/EditDefinition/DescriptionInput.vue
+++ b/packages/editor-ui/src/components/TestDefinition/EditDefinition/DescriptionInput.vue
@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useI18n } from '@/composables/useI18n';
+
+interface Props {
+	modelValue: string;
+}
+
+withDefaults(defineProps<Props>(), {
+	modelValue: '',
+});
+
+defineEmits<{ 'update:modelValue': [value: string] }>();
+
+const locale = useI18n();
+</script>
+
+<template>
+	<div :class="[$style.description]">
+		<n8n-input-label
+			:label="locale.baseText('testDefinition.edit.description')"
+			:bold="false"
+			size="small"
+			:class="$style.field"
+		>
+			<N8nInput
+				:model-value="modelValue"
+				type="textarea"
+				:placeholder="locale.baseText('testDefinition.edit.descriptionPlaceholder')"
+				@update:model-value="$emit('update:modelValue', $event)"
+			/>
+		</n8n-input-label>
+	</div>
+</template>
+
+<style module lang="scss">
+.field {
+	width: 100%;
+	margin-top: var(--spacing-xs);
+}
+</style>
--- a/packages/editor-ui/src/components/TestDefinition/EditDefinition/EvaluationHeader.vue
+++ b/packages/editor-ui/src/components/TestDefinition/EditDefinition/EvaluationHeader.vue
@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { useI18n } from '@/composables/useI18n';
+
+export interface EvaluationHeaderProps {
+	modelValue: {
+		value: string;
+		isEditing: boolean;
+		tempValue: string;
+	};
+	startEditing: (field: string) => void;
+	saveChanges: (field: string) => void;
+	handleKeydown: (e: KeyboardEvent, field: string) => void;
+}
+
+defineEmits<{ 'update:modelValue': [value: EvaluationHeaderProps['modelValue']] }>();
+defineProps<EvaluationHeaderProps>();
+
+const locale = useI18n();
+</script>
+
+<template>
+	<div :class="$style.header">
+		<n8n-icon-button
+			icon="arrow-left"
+			:class="$style.backButton"
+			type="tertiary"
+			:title="locale.baseText('testDefinition.edit.backButtonTitle')"
+			@click="$router.back()"
+		/>
+		<h2 :class="$style.title">
+			<template v-if="!modelValue.isEditing">
+				<span :class="$style.titleText">
+					{{ modelValue.value }}
+				</span>
+				<n8n-icon-button
+					:class="$style.editInputButton"
+					icon="pen"
+					type="tertiary"
+					@click="startEditing('name')"
+				/>
+			</template>
+			<N8nInput
+				v-else
+				ref="nameInput"
+				data-test-id="evaluation-name-input"
+				:model-value="modelValue.tempValue"
+				type="text"
+				:placeholder="locale.baseText('testDefinition.edit.namePlaceholder')"
+				@update:model-value="$emit('update:modelValue', { ...modelValue, tempValue: $event })"
+				@blur="() => saveChanges('name')"
+				@keydown="(e: KeyboardEvent) => handleKeydown(e, 'name')"
+			/>
+		</h2>
+	</div>
+</template>
+
+<style module lang="scss">
+.header {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2xs);
+	margin-bottom: var(--spacing-l);
+
+	&:hover {
+		.editInputButton {
+			opacity: 1;
+		}
+	}
+}
+
+.title {
+	margin: 0;
+	flex-grow: 1;
+	font-size: var(--font-size-xl);
+	font-weight: var(--font-weight-bold);
+	color: var(--color-text-dark);
+	display: flex;
+	align-items: center;
+	max-width: 100%;
+	overflow: hidden;
+
+	.titleText {
+		display: block;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}
+
+.editInputButton {
+	--button-font-color: var(--prim-gray-490);
+	opacity: 0;
+	border: none;
+}
+
+.backButton {
+	--button-font-color: var(--color-text-light);
+	border: none;
+}
+</style>
--- a/packages/editor-ui/src/components/TestDefinition/EditDefinition/EvaluationStep.vue
+++ b/packages/editor-ui/src/components/TestDefinition/EditDefinition/EvaluationStep.vue
@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { useI18n } from '@/composables/useI18n';
+import { ElCollapseTransition } from 'element-plus';
+import { ref, nextTick } from 'vue';
+
+interface EvaluationStep {
+	title: string;
+	warning?: boolean;
+	small?: boolean;
+	expanded?: boolean;
+}
+
+const props = withDefaults(defineProps<EvaluationStep>(), {
+	description: '',
+	warning: false,
+	small: false,
+	expanded: true,
+});
+
+const locale = useI18n();
+const isExpanded = ref(props.expanded);
+const contentRef = ref<HTMLElement | null>(null);
+const containerRef = ref<HTMLElement | null>(null);
+
+const toggleExpand = async () => {
+	isExpanded.value = !isExpanded.value;
+	if (isExpanded.value) {
+		await nextTick();
+		if (containerRef.value) {
+			containerRef.value.style.height = 'auto';
+		}
+	}
+};
+</script>
+
+<template>
+	<div ref="containerRef" :class="[$style.evaluationStep, small && $style.small]">
+		<div :class="$style.content">
+			<div :class="$style.header">
+				<div :class="[$style.icon, warning && $style.warning]">
+					<slot name="icon" />
+				</div>
+				<h3 :class="$style.title">{{ title }}</h3>
+				<span v-if="warning" :class="$style.warningIcon">⚠</span>
+				<button
+					v-if="$slots.cardContent"
+					:class="$style.collapseButton"
+					:aria-expanded="isExpanded"
+					:aria-controls="'content-' + title.replace(/\s+/g, '-')"
+					@click="toggleExpand"
+				>
+					{{
+						isExpanded
+							? locale.baseText('testDefinition.edit.step.collapse')
+							: locale.baseText('testDefinition.edit.step.expand')
+					}}
+					<font-awesome-icon :icon="isExpanded ? 'angle-down' : 'angle-right'" size="lg" />
+				</button>
+			</div>
+			<ElCollapseTransition v-if="$slots.cardContent">
+				<div v-show="isExpanded" :class="$style.cardContentWrapper">
+					<div ref="contentRef" :class="$style.cardContent">
+						<slot name="cardContent" />
+					</div>
+				</div>
+			</ElCollapseTransition>
+		</div>
+	</div>
+</template>
+
+<style module lang="scss">
+.evaluationStep {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: var(--spacing-m);
+	background: var(--color-background-light);
+	padding: var(--spacing-s);
+	border-radius: var(--border-radius-xlarge);
+	box-shadow: var(--box-shadow-base);
+	border: var(--border-base);
+	width: 100%;
+	color: var(--color-text-dark);
+
+	&.small {
+		width: 80%;
+	}
+}
+.icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: var(--border-radius-base);
+	overflow: hidden;
+	width: 2rem;
+	height: 2rem;
+
+	&.warning {
+		background-color: var(--color-warning-tint-2);
+	}
+}
+
+.content {
+	display: grid;
+	gap: var(--spacing-2xs);
+}
+
+.header {
+	display: flex;
+	gap: var(--spacing-2xs);
+	align-items: center;
+}
+
+.title {
+	font-weight: var(--font-weight-bold);
+	font-size: var(--font-size-s);
+	line-height: 1.125rem;
+}
+
+.warningIcon {
+	color: var(--color-warning);
+}
+
+.cardContent {
+	font-size: var(--font-size-s);
+	margin-top: var(--spacing-xs);
+}
+.collapseButton {
+	cursor: pointer;
+	border: none;
+	background: none;
+	padding: 0;
+	font-size: var(--font-size-3xs);
+	color: var(--color-text-base);
+	margin-left: auto;
+	text-wrap: none;
+	overflow: hidden;
+	min-width: fit-content;
+}
+.cardContentWrapper {
+	height: max-content;
+}
+</style>
--- a/packages/editor-ui/src/components/TestDefinition/EditDefinition/MetricsInput.vue
+++ b/packages/editor-ui/src/components/TestDefinition/EditDefinition/MetricsInput.vue
@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { useI18n } from '@/composables/useI18n';
+
+export interface MetricsInputProps {
+	modelValue: string[];
+}
+const props = defineProps<MetricsInputProps>();
+const emit = defineEmits<{ 'update:modelValue': [value: MetricsInputProps['modelValue']] }>();
+const locale = useI18n();
+
+function addNewMetric() {
+	emit('update:modelValue', [...props.modelValue, '']);
+}
+
+function updateMetric(index: number, value: string) {
+	const newMetrics = [...props.modelValue];
+	newMetrics[index] = value;
+	emit('update:modelValue', newMetrics);
+}
+</script>
+
+<template>
+	<div :class="[$style.metrics]">
+		<n8n-input-label
+			:label="locale.baseText('testDefinition.edit.metricsFields')"
+			:bold="false"
+			:class="$style.metricField"
+		>
+			<div :class="$style.metricsContainer">
+				<div v-for="(metric, index) in modelValue" :key="index">
+					<N8nInput
+						:ref="`metric_${index}`"
+						data-test-id="evaluation-metric-item"
+						:model-value="metric"
+						:placeholder="locale.baseText('testDefinition.edit.metricsPlaceholder')"
+						@update:model-value="(value: string) => updateMetric(index, value)"
+					/>
+				</div>
+				<n8n-button
+					type="tertiary"
+					:label="locale.baseText('testDefinition.edit.metricsNew')"
+					:class="$style.newMetricButton"
+					@click="addNewMetric"
+				/>
+			</div>
+		</n8n-input-label>
+	</div>
+</template>
+
+<style module lang="scss">
+.metricsContainer {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-xs);
+}
+
+.metricField {
+	width: 100%;
+	margin-top: var(--spacing-xs);
+}
+
+.metricsDivider {
+	margin-top: var(--spacing-4xs);
+	margin-bottom: var(--spacing-3xs);
+}
+
+.newMetricButton {
+	align-self: flex-start;
+	margin-top: var(--spacing-2xs);
+	width: 100%;
+	background-color: var(--color-sticky-code-background);
+	border-color: var(--color-button-secondary-focus-outline);
+	color: var(--color-button-secondary-font);
+}
+</style>
--- a/packages/editor-ui/src/components/TestDefinition/EditDefinition/TagsInput.vue
+++ b/packages/editor-ui/src/components/TestDefinition/EditDefinition/TagsInput.vue
@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { useI18n } from '@/composables/useI18n';
+import type { ITag } from '@/Interface';
+import { createEventBus } from 'n8n-design-system';
+import { computed } from 'vue';
+
+export interface TagsInputProps {
+	modelValue?: {
+		isEditing: boolean;
+		appliedTagIds: string[];
+	};
+	allTags: ITag[];
+	tagsById: Record<string, ITag>;
+	isLoading: boolean;
+	startEditing: (field: string) => void;
+	saveChanges: (field: string) => void;
+	cancelEditing: (field: string) => void;
+}
+
+const props = withDefaults(defineProps<TagsInputProps>(), {
+	modelValue: () => ({
+		isEditing: false,
+		appliedTagIds: [],
+	}),
+});
+
+const emit = defineEmits<{ 'update:modelValue': [value: TagsInputProps['modelValue']] }>();
+
+const locale = useI18n();
+const tagsEventBus = createEventBus();
+const getTagName = computed(() => (tagId: string) => {
+	return props.tagsById[tagId]?.name ?? '';
+});
+
+function updateTags(tags: string[]) {
+	const newTags = tags[0] ? [tags[0]] : [];
+	emit('update:modelValue', {
+		...props.modelValue,
+		appliedTagIds: newTags,
+	});
+}
+</script>
+
+<template>
+	<div data-test-id="workflow-tags-field">
+		<n8n-input-label
+			:label="locale.baseText('testDefinition.edit.tagName')"
+			:bold="false"
+			size="small"
+		>
+			<div v-if="!modelValue.isEditing" :class="$style.tagsRead" @click="startEditing('tags')">
+				<n8n-text v-if="modelValue.appliedTagIds.length === 0" size="small">
+					{{ locale.baseText('testDefinition.edit.selectTag') }}
+				</n8n-text>
+				<n8n-tag
+					v-for="tagId in modelValue.appliedTagIds"
+					:key="tagId"
+					:text="getTagName(tagId)"
+					data-test-id="evaluation-tag-field"
+				/>
+				<n8n-icon-button
+					:class="$style.editInputButton"
+					icon="pen"
+					type="tertiary"
+					size="small"
+					transparent
+				/>
+			</div>
+			<TagsDropdown
+				v-else
+				:model-value="modelValue.appliedTagIds"
+				:placeholder="locale.baseText('executionAnnotationView.chooseOrCreateATag')"
+				:create-enabled="false"
+				:all-tags="allTags"
+				:is-loading="isLoading"
+				:tags-by-id="tagsById"
+				data-test-id="workflow-tags-dropdown"
+				:event-bus="tagsEventBus"
+				@update:model-value="updateTags"
+				@esc="cancelEditing('tags')"
+				@blur="saveChanges('tags')"
+			/>
+		</n8n-input-label>
+		<n8n-text size="small" color="text-light">{{
+			locale.baseText('testDefinition.edit.tagsHelpText')
+		}}</n8n-text>
+	</div>
+</template>
+
+<style module lang="scss">
+.tagsRead {
+	&:hover .editInputButton {
+		opacity: 1;
+	}
+}
+
+.editInputButton {
+	opacity: 0;
+	border: none;
+	--button-font-color: var(--prim-gray-490);
+}
+</style>
--- a/packages/editor-ui/src/components/TestDefinition/EditDefinition/WorkflowSelector.vue
+++ b/packages/editor-ui/src/components/TestDefinition/EditDefinition/WorkflowSelector.vue
@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { useI18n } from '@/composables/useI18n';
+import type { INodeParameterResourceLocator } from 'n8n-workflow';
+interface WorkflowSelectorProps {
+	modelValue: INodeParameterResourceLocator;
+}
+
+withDefaults(defineProps<WorkflowSelectorProps>(), {
+	modelValue: () => ({
+		mode: 'id',
+		value: '',
+		__rl: true,
+	}),
+});
+
+defineEmits<{ 'update:modelValue': [value: WorkflowSelectorProps['modelValue']] }>();
+const locale = useI18n();
+</script>
+<template>
+	<div>
+		<n8n-input-label
+			:label="locale.baseText('testDefinition.edit.workflowSelectorLabel')"
+			:bold="false"
+		>
+			<WorkflowSelectorParameterInput
+				ref="workflowInput"
+				:parameter="{
+					displayName: locale.baseText('testDefinition.edit.workflowSelectorDisplayName'),
+					name: 'workflowId',
+					type: 'workflowSelector',
+					default: '',
+				}"
+				:model-value="modelValue"
+				:display-title="locale.baseText('testDefinition.edit.workflowSelectorTitle')"
+				:is-value-expression="false"
+				:expression-edit-dialog-visible="false"
+				:path="'workflows'"
+				allow-new
+				@update:model-value="$emit('update:modelValue', $event)"
+			/>
+		</n8n-input-label>
+	</div>
+</template>
--- a/packages/editor-ui/src/components/TestDefinition/ListDefinition/EmptyState.vue
+++ b/packages/editor-ui/src/components/TestDefinition/ListDefinition/EmptyState.vue
@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useI18n } from '@/composables/useI18n';
+
+defineEmits<{ 'create-test': [] }>();
+
+const locale = useI18n();
+</script>
+
+<template>
+	<div :class="$style.container">
+		<div :class="$style.header">
+			<h1>{{ locale.baseText('testDefinition.list.tests') }}</h1>
+		</div>
+		<n8n-action-box
+			:description="locale.baseText('testDefinition.list.actionDescription')"
+			:button-text="locale.baseText('testDefinition.list.actionButton')"
+			@click:button="$emit('create-test')"
+		/>
+	</div>
+</template>
+
+<style module lang="scss">
+.container {
+	max-width: 44rem;
+	margin: var(--spacing-4xl) auto 0;
+	gap: var(--spacing-l);
+}
+.header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	color: var(--color-text-dark);
+	font-size: var(--font-size-l);
+	margin-bottom: var(--spacing-xl);
+
+	h1 {
+		margin: 0;
+	}
+}
+</style>
--- a/packages/editor-ui/src/components/TestDefinition/ListDefinition/TestItem.vue
+++ b/packages/editor-ui/src/components/TestDefinition/ListDefinition/TestItem.vue
@ -0,0 +1,147 @@
+<script setup lang="ts">
+import type { TestListItem } from '@/components/TestDefinition/types';
+import { useI18n } from '@/composables/useI18n';
+import n8nIconButton from 'n8n-design-system/components/N8nIconButton';
+
+export interface TestItemProps {
+	test: TestListItem;
+}
+
+const props = defineProps<TestItemProps>();
+const locale = useI18n();
+
+const emit = defineEmits<{
+	'run-test': [testId: string];
+	'view-details': [testId: string];
+	'edit-test': [testId: string];
+	'delete-test': [testId: string];
+}>();
+
+const actions = [
+	{
+		icon: 'play',
+		event: () => emit('run-test', props.test.id),
+		tooltip: locale.baseText('testDefinition.runTest'),
+	},
+	{
+		icon: 'list',
+		event: () => emit('view-details', props.test.id),
+		tooltip: locale.baseText('testDefinition.viewDetails'),
+	},
+	{
+		icon: 'pen',
+		event: () => emit('edit-test', props.test.id),
+		tooltip: locale.baseText('testDefinition.editTest'),
+	},
+	{
+		icon: 'trash',
+		event: () => emit('delete-test', props.test.id),
+		tooltip: locale.baseText('testDefinition.deleteTest'),
+	},
+];
+</script>
+
+<template>
+	<div :class="$style.testItem" @click="$emit('view-details', test.id)">
+		<div :class="$style.testInfo">
+			<div :class="$style.testName">
+				{{ test.name }}
+				<n8n-tag v-if="test.tagName" :text="test.tagName" />
+			</div>
+			<div :class="$style.testCases">
+				{{ locale.baseText('testDefinition.list.testCases', { adjustToNumber: test.testCases }) }}
+				<n8n-loading v-if="!test.execution.lastRun" :loading="true" :rows="1" />
+				<span v-else>{{
+					locale.baseText('testDefinition.list.lastRun', {
+						interpolate: { lastRun: test.execution.lastRun },
+					})
+				}}</span>
+			</div>
+		</div>
+
+		<div :class="$style.metrics">
+			<div :class="$style.metric">
+				{{
+					locale.baseText('testDefinition.list.errorRate', {
+						interpolate: { errorRate: test.execution.errorRate ?? '-' },
+					})
+				}}
+			</div>
+			<div v-for="(value, key) in test.execution.metrics" :key="key" :class="$style.metric">
+				{{ key }}: {{ value ?? '-' }}
+			</div>
+		</div>
+
+		<div :class="$style.actions">
+			<n8n-tooltip v-for="action in actions" :key="action.icon" placement="top" :show-after="1000">
+				<template #content>
+					{{ action.tooltip }}
+				</template>
+				<component
+					:is="n8nIconButton"
+					:icon="action.icon"
+					type="tertiary"
+					size="mini"
+					@click.stop="action.event"
+				/>
+			</n8n-tooltip>
+		</div>
+	</div>
+</template>
+
+<style module lang="scss">
+.testItem {
+	display: flex;
+	align-items: center;
+	padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) var(--spacing-xl);
+	border: 1px solid var(--color-foreground-base);
+	border-radius: var(--border-radius-base);
+	background-color: var(--color-background-light);
+	cursor: pointer;
+
+	&:hover {
+		background-color: var(--color-background-base);
+	}
+}
+
+.testInfo {
+	display: flex;
+	flex: 1;
+	gap: var(--spacing-2xs);
+}
+
+.testName {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2xs);
+	font-weight: var(--font-weight-bold);
+	margin-bottom: var(--spacing-4xs);
+	font-size: var(--font-size-s);
+}
+
+.testCases {
+	color: var(--color-text-base);
+	font-size: var(--font-size-2xs);
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2xs);
+}
+
+.metrics {
+	display: flex;
+	gap: var(--spacing-l);
+	margin: 0 var(--spacing-l);
+}
+
+.metric {
+	font-size: var(--font-size-2xs);
+	color: var(--color-text-dark);
+	white-space: nowrap;
+}
+
+.actions {
+	display: flex;
+	gap: var(--spacing-xs);
+	--color-button-secondary-font: var(--color-callout-info-icon);
+}
+</style>
--- a/packages/editor-ui/src/components/TestDefinition/ListDefinition/TestsList.vue
+++ b/packages/editor-ui/src/components/TestDefinition/ListDefinition/TestsList.vue
@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { useI18n } from '@/composables/useI18n';
+import TestItem from './TestItem.vue';
+import type { TestListItem } from '@/components/TestDefinition/types';
+export interface TestListProps {
+	tests: TestListItem[];
+}
+
+defineEmits<{ 'create-test': [] }>();
+defineProps<TestListProps>();
+const locale = useI18n();
+</script>
+
+<template>
+	<div :class="$style.testsList">
+		<div :class="$style.testsHeader">
+			<n8n-button
+				:label="locale.baseText('testDefinition.list.createNew')"
+				@click="$emit('create-test')"
+			/>
+		</div>
+		<TestItem v-for="test in tests" :key="test.id" :test="test" v-bind="$attrs" />
+	</div>
+</template>
+
+<style module lang="scss">
+.testsList {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-s);
+}
+
+.testsHeader {
+	margin-bottom: var(--spacing-m);
+}
+</style>
--- a/packages/editor-ui/src/components/TestDefinition/composables/useTestDefinitionForm.ts
+++ b/packages/editor-ui/src/components/TestDefinition/composables/useTestDefinitionForm.ts
@ -0,0 +1,200 @@
+import { ref, computed } from 'vue';
+import type { ComponentPublicInstance } from 'vue';
+import type { INodeParameterResourceLocator } from 'n8n-workflow';
+import { useTestDefinitionStore } from '@/stores/testDefinition.store.ee';
+import type AnnotationTagsDropdownEe from '@/components/AnnotationTagsDropdown.ee.vue';
+import type { N8nInput } from 'n8n-design-system';
+import type { UpdateTestDefinitionParams } from '@/api/testDefinition.ee';
+
+interface EditableField {
+	value: string;
+	isEditing: boolean;
+	tempValue: string;
+}
+
+export interface IEvaluationFormState {
+	name: EditableField;
+	description: string;
+	tags: {
+		isEditing: boolean;
+		appliedTagIds: string[];
+	};
+	evaluationWorkflow: INodeParameterResourceLocator;
+	metrics: string[];
+}
+
+type FormRefs = {
+	nameInput: ComponentPublicInstance<typeof N8nInput>;
+	tagsInput: ComponentPublicInstance<typeof AnnotationTagsDropdownEe>;
+};
+
+export function useTestDefinitionForm() {
+	// Stores
+	const evaluationsStore = useTestDefinitionStore();
+
+	// Form state
+	const state = ref<IEvaluationFormState>({
+		description: '',
+		name: {
+			value: `My Test [${new Date().toLocaleString(undefined, { month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' })}]`,
+			isEditing: false,
+			tempValue: '',
+		},
+		tags: {
+			isEditing: false,
+			appliedTagIds: [],
+		},
+		evaluationWorkflow: {
+			mode: 'list',
+			value: '',
+			__rl: true,
+		},
+		metrics: [''],
+	});
+
+	// Loading states
+	const isSaving = ref(false);
+	const fieldsIssues = ref<Array<{ field: string; message: string }>>([]);
+
+	// Field refs
+	const fields = ref<FormRefs>({} as FormRefs);
+
+	// Methods
+	const loadTestData = async (testId: string) => {
+		try {
+			await evaluationsStore.fetchAll({ force: true });
+			const testDefinition = evaluationsStore.testDefinitionsById[testId];
+
+			if (testDefinition) {
+				state.value = {
+					description: testDefinition.description ?? '',
+					name: {
+						value: testDefinition.name ?? '',
+						isEditing: false,
+						tempValue: '',
+					},
+					tags: {
+						isEditing: false,
+						appliedTagIds: testDefinition.annotationTagId ? [testDefinition.annotationTagId] : [],
+					},
+					evaluationWorkflow: {
+						mode: 'list',
+						value: testDefinition.evaluationWorkflowId ?? '',
+						__rl: true,
+					},
+					metrics: [''],
+				};
+			}
+		} catch (error) {
+			// TODO: Throw better errors
+			console.error('Failed to load test data', error);
+		}
+	};
+
+	const createTest = async (workflowId: string) => {
+		if (isSaving.value) return;
+
+		isSaving.value = true;
+		fieldsIssues.value = [];
+
+		try {
+			// Prepare parameters for creating a new test
+			const params = {
+				name: state.value.name.value,
+				workflowId,
+				description: state.value.description,
+			};
+
+			const newTest = await evaluationsStore.create(params);
+			return newTest;
+		} catch (error) {
+			throw error;
+		} finally {
+			isSaving.value = false;
+		}
+	};
+
+	const updateTest = async (testId: string) => {
+		if (isSaving.value) return;
+
+		isSaving.value = true;
+		fieldsIssues.value = [];
+
+		try {
+			// Check if the test ID is provided
+			if (!testId) {
+				throw new Error('Test ID is required for updating a test');
+			}
+
+			// Prepare parameters for updating the existing test
+			const params: UpdateTestDefinitionParams = {
+				name: state.value.name.value,
+				description: state.value.description,
+			};
+			if (state.value.evaluationWorkflow.value) {
+				params.evaluationWorkflowId = state.value.evaluationWorkflow.value.toString();
+			}
+
+			const annotationTagId = state.value.tags.appliedTagIds[0];
+			if (annotationTagId) {
+				params.annotationTagId = annotationTagId;
+			}
+			// Update the existing test
+			return await evaluationsStore.update({ ...params, id: testId });
+		} catch (error) {
+			throw error;
+		} finally {
+			isSaving.value = false;
+		}
+	};
+
+	const startEditing = async (field: string) => {
+		if (field === 'name') {
+			state.value.name.tempValue = state.value.name.value;
+			state.value.name.isEditing = true;
+		} else {
+			state.value.tags.isEditing = true;
+		}
+	};
+
+	const saveChanges = (field: string) => {
+		if (field === 'name') {
+			state.value.name.value = state.value.name.tempValue;
+			state.value.name.isEditing = false;
+		} else {
+			state.value.tags.isEditing = false;
+		}
+	};
+
+	const cancelEditing = (field: string) => {
+		if (field === 'name') {
+			state.value.name.isEditing = false;
+			state.value.name.tempValue = '';
+		} else {
+			state.value.tags.isEditing = false;
+		}
+	};
+
+	const handleKeydown = (event: KeyboardEvent, field: string) => {
+		if (event.key === 'Escape') {
+			cancelEditing(field);
+		} else if (event.key === 'Enter' && !event.shiftKey) {
+			event.preventDefault();
+			saveChanges(field);
+		}
+	};
+
+	return {
+		state,
+		fields,
+		isSaving: computed(() => isSaving.value),
+		fieldsIssues: computed(() => fieldsIssues.value),
+		loadTestData,
+		createTest,
+		updateTest,
+		startEditing,
+		saveChanges,
+		cancelEditing,
+		handleKeydown,
+	};
+}
--- a/packages/editor-ui/src/components/TestDefinition/tests/MetricsInput.test.ts
+++ b/packages/editor-ui/src/components/TestDefinition/tests/MetricsInput.test.ts
@ -0,0 +1,56 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { createComponentRenderer } from '@/__tests__/render';
+import MetricsInput from '../EditDefinition/MetricsInput.vue';
+import userEvent from '@testing-library/user-event';
+
+const renderComponent = createComponentRenderer(MetricsInput);
+
+describe('MetricsInput', () => {
+	let props: { modelValue: string[] };
+
+	beforeEach(() => {
+		props = {
+			modelValue: ['Metric 1', 'Metric 2'],
+		};
+	});
+
+	it('should render correctly with initial metrics', () => {
+		const { getAllByPlaceholderText } = renderComponent({ props });
+		const inputs = getAllByPlaceholderText('Enter metric name');
+		expect(inputs).toHaveLength(2);
+		expect(inputs[0]).toHaveValue('Metric 1');
+		expect(inputs[1]).toHaveValue('Metric 2');
+	});
+
+	it('should update a metric when typing in the input', async () => {
+		const { getAllByPlaceholderText, emitted } = renderComponent({
+			props: {
+				modelValue: [''],
+			},
+		});
+		const inputs = getAllByPlaceholderText('Enter metric name');
+		await userEvent.type(inputs[0], 'Updated Metric 1');
+
+		expect(emitted('update:modelValue')).toBeTruthy();
+		expect(emitted('update:modelValue')).toEqual('Updated Metric 1'.split('').map((c) => [[c]]));
+	});
+
+	it('should render correctly with no initial metrics', () => {
+		props.modelValue = [];
+		const { queryAllByRole, getByText } = renderComponent({ props });
+		const inputs = queryAllByRole('textbox');
+		expect(inputs).toHaveLength(0);
+		expect(getByText('New metric')).toBeInTheDocument();
+	});
+
+	it('should handle adding multiple metrics', async () => {
+		const { getByText, emitted } = renderComponent({ props });
+		const addButton = getByText('New metric');
+
+		addButton.click();
+		addButton.click();
+		addButton.click();
+
+		expect(emitted('update:modelValue')).toHaveProperty('length', 3);
+	});
+});
--- a/packages/editor-ui/src/components/TestDefinition/tests/useTestDefinitionForm.test.ts
+++ b/packages/editor-ui/src/components/TestDefinition/tests/useTestDefinitionForm.test.ts
@ -0,0 +1,176 @@
+import { setActivePinia } from 'pinia';
+import { createTestingPinia } from '@pinia/testing';
+import { useTestDefinitionForm } from '../composables/useTestDefinitionForm';
+import { useTestDefinitionStore } from '@/stores/testDefinition.store.ee';
+import { mockedStore } from '@/__tests__/utils';
+import type { TestDefinitionRecord } from '@/api/testDefinition.ee';
+
+const TEST_DEF_A: TestDefinitionRecord = {
+	id: '1',
+	name: 'Test Definition A',
+	description: 'Description A',
+	evaluationWorkflowId: '456',
+	workflowId: '123',
+	annotationTagId: '789',
+};
+const TEST_DEF_B: TestDefinitionRecord = {
+	id: '2',
+	name: 'Test Definition B',
+	workflowId: '123',
+	description: 'Description B',
+};
+const TEST_DEF_NEW: TestDefinitionRecord = {
+	id: '3',
+	workflowId: '123',
+	name: 'New Test Definition',
+	description: 'New Description',
+};
+
+beforeEach(() => {
+	const pinia = createTestingPinia();
+	setActivePinia(pinia);
+});
+
+afterEach(() => {
+	vi.clearAllMocks();
+});
+
+describe('useTestDefinitionForm', async () => {
+	it('should initialize with default props', async () => {
+		const { state } = useTestDefinitionForm();
+
+		expect(state.value.description).toEqual('');
+		expect(state.value.name.value).toContain('My Test');
+		expect(state.value.tags.appliedTagIds).toEqual([]);
+		expect(state.value.metrics).toEqual(['']);
+		expect(state.value.evaluationWorkflow.value).toEqual('');
+	});
+
+	it('should load test data', async () => {
+		const { loadTestData, state } = useTestDefinitionForm();
+		const fetchSpy = vi.fn();
+		const evaluationsStore = mockedStore(useTestDefinitionStore);
+
+		expect(state.value.description).toEqual('');
+		expect(state.value.name.value).toContain('My Test');
+		evaluationsStore.testDefinitionsById = {
+			[TEST_DEF_A.id]: TEST_DEF_A,
+			[TEST_DEF_B.id]: TEST_DEF_B,
+		};
+		evaluationsStore.fetchAll = fetchSpy;
+
+		await loadTestData(TEST_DEF_A.id);
+		expect(fetchSpy).toBeCalled();
+		expect(state.value.name.value).toEqual(TEST_DEF_A.name);
+		expect(state.value.description).toEqual(TEST_DEF_A.description);
+		expect(state.value.tags.appliedTagIds).toEqual([TEST_DEF_A.annotationTagId]);
+		expect(state.value.evaluationWorkflow.value).toEqual(TEST_DEF_A.evaluationWorkflowId);
+	});
+
+	it('should save a new test', async () => {
+		const { createTest, state } = useTestDefinitionForm();
+		const createSpy = vi.fn().mockResolvedValue(TEST_DEF_NEW);
+		const evaluationsStore = mockedStore(useTestDefinitionStore);
+
+		evaluationsStore.create = createSpy;
+
+		state.value.name.value = TEST_DEF_NEW.name;
+		state.value.description = TEST_DEF_NEW.description ?? '';
+
+		const newTest = await createTest('123');
+		expect(createSpy).toBeCalledWith({
+			name: TEST_DEF_NEW.name,
+			description: TEST_DEF_NEW.description,
+			workflowId: '123',
+		});
+		expect(newTest).toEqual(TEST_DEF_NEW);
+	});
+
+	it('should update an existing test', async () => {
+		const { updateTest, state } = useTestDefinitionForm();
+		const updateSpy = vi.fn().mockResolvedValue(TEST_DEF_B);
+		const evaluationsStore = mockedStore(useTestDefinitionStore);
+
+		evaluationsStore.update = updateSpy;
+
+		state.value.name.value = TEST_DEF_B.name;
+		state.value.description = TEST_DEF_B.description ?? '';
+
+		const updatedTest = await updateTest(TEST_DEF_A.id);
+		expect(updateSpy).toBeCalledWith({
+			id: TEST_DEF_A.id,
+			name: TEST_DEF_B.name,
+			description: TEST_DEF_B.description,
+		});
+		expect(updatedTest).toEqual(TEST_DEF_B);
+	});
+
+	it('should start editing a field', async () => {
+		const { state, startEditing } = useTestDefinitionForm();
+
+		await startEditing('name');
+		expect(state.value.name.isEditing).toBe(true);
+		expect(state.value.name.tempValue).toBe(state.value.name.value);
+
+		await startEditing('tags');
+		expect(state.value.tags.isEditing).toBe(true);
+	});
+
+	it('should save changes to a field', async () => {
+		const { state, startEditing, saveChanges } = useTestDefinitionForm();
+
+		await startEditing('name');
+		state.value.name.tempValue = 'New Name';
+		saveChanges('name');
+		expect(state.value.name.isEditing).toBe(false);
+		expect(state.value.name.value).toBe('New Name');
+
+		await startEditing('tags');
+		state.value.tags.appliedTagIds = ['123'];
+		saveChanges('tags');
+		expect(state.value.tags.isEditing).toBe(false);
+		expect(state.value.tags.appliedTagIds).toEqual(['123']);
+	});
+
+	it('should cancel editing a field', async () => {
+		const { state, startEditing, cancelEditing } = useTestDefinitionForm();
+
+		await startEditing('name');
+		state.value.name.tempValue = 'New Name';
+		cancelEditing('name');
+		expect(state.value.name.isEditing).toBe(false);
+		expect(state.value.name.tempValue).toBe('');
+
+		await startEditing('tags');
+		state.value.tags.appliedTagIds = ['123'];
+		cancelEditing('tags');
+		expect(state.value.tags.isEditing).toBe(false);
+	});
+
+	it('should handle keydown - Escape', async () => {
+		const { state, startEditing, handleKeydown } = useTestDefinitionForm();
+
+		await startEditing('name');
+		handleKeydown(new KeyboardEvent('keydown', { key: 'Escape' }), 'name');
+		expect(state.value.name.isEditing).toBe(false);
+
+		await startEditing('tags');
+		handleKeydown(new KeyboardEvent('keydown', { key: 'Escape' }), 'tags');
+		expect(state.value.tags.isEditing).toBe(false);
+	});
+
+	it('should handle keydown - Enter', async () => {
+		const { state, startEditing, handleKeydown } = useTestDefinitionForm();
+
+		await startEditing('name');
+		state.value.name.tempValue = 'New Name';
+		handleKeydown(new KeyboardEvent('keydown', { key: 'Enter' }), 'name');
+		expect(state.value.name.isEditing).toBe(false);
+		expect(state.value.name.value).toBe('New Name');
+
+		await startEditing('tags');
+		state.value.tags.appliedTagIds = ['123'];
+		handleKeydown(new KeyboardEvent('keydown', { key: 'Enter' }), 'tags');
+		expect(state.value.tags.isEditing).toBe(false);
+	});
+});
--- a/packages/editor-ui/src/components/TestDefinition/types.ts
+++ b/packages/editor-ui/src/components/TestDefinition/types.ts
@ -0,0 +1,13 @@
+export interface TestExecution {
+	lastRun: string | null;
+	errorRate: number | null;
+	metrics: Record<string, number>;
+}
+
+export interface TestListItem {
+	id: string;
+	name: string;
+	tagName: string;
+	testCases: number;
+	execution: TestExecution;
+}
--- a/packages/editor-ui/src/components/executions/global/GlobalExecutionsList.vue
+++ b/packages/editor-ui/src/components/executions/global/GlobalExecutionsList.vue
@ -459,8 +459,8 @@ async function onAutoRefreshToggle(value: boolean) {
 	position: relative;
 	height: 100%;
 	width: 100%;
-	max-width: 1280px;
 	padding: var(--spacing-l) var(--spacing-2xl) 0;
+	max-width: var(--content-container-width);
 }

 .execList {
--- a/packages/editor-ui/src/components/layouts/PageViewLayout.vue
+++ b/packages/editor-ui/src/components/layouts/PageViewLayout.vue
@ -13,7 +13,7 @@
 	flex-direction: column;
 	height: 100%;
 	width: 100%;
-	max-width: 1280px;
+	max-width: var(--content-container-width);
 	box-sizing: border-box;
 	align-content: start;
 	padding: var(--spacing-l) var(--spacing-2xl) 0;
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@ -495,6 +495,9 @@ export const enum VIEWS {
 	COMMUNITY_NODES = 'CommunityNodes',
 	WORKFLOWS = 'WorkflowsView',
 	WORKFLOW_EXECUTIONS = 'WorkflowExecutions',
+	TEST_DEFINITION = 'TestDefinition',
+	TEST_DEFINITION_EDIT = 'TestDefinitionEdit',
+	NEW_TEST_DEFINITION = 'NewTestDefinition',
 	USAGE = 'Usage',
 	LOG_STREAMING_SETTINGS = 'LogStreamingSettingsView',
 	SSO_SETTINGS = 'SSoSettings',
@ -591,6 +594,7 @@ export const enum MAIN_HEADER_TABS {
 	WORKFLOW = 'workflow',
 	EXECUTIONS = 'executions',
 	SETTINGS = 'settings',
+	TEST_DEFINITION = 'testDefinition',
 }
 export const CURL_IMPORT_NOT_SUPPORTED_PROTOCOLS = [
 	'ftp',
@ -652,6 +656,7 @@ export const enum STORES {
 	ASSISTANT = 'assistant',
 	BECOME_TEMPLATE_CREATOR = 'becomeTemplateCreator',
 	PROJECTS = 'projects',
+	TEST_DEFINITION = 'testDefinition',
 }

 export const enum SignInType {
@ -709,6 +714,8 @@ export const EXPERIMENTS_TO_TRACK = [
 	CREDENTIAL_DOCS_EXPERIMENT.name,
 ];

+export const WORKFLOW_EVALUATION_EXPERIMENT = '025_workflow_evaluation';
+
 export const MFA_FORM = {
 	MFA_TOKEN: 'MFA_TOKEN',
 	MFA_RECOVERY_CODE: 'MFA_RECOVERY_CODE',
--- a/packages/editor-ui/src/n8n-theme.scss
+++ b/packages/editor-ui/src/n8n-theme.scss
@ -4,6 +4,7 @@
 :root {
 	// Using native css variable enables us to use this value in JS
 	--header-height: 65;
+	--content-container-width: 1280px;
 }

 .clickable {
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@ -47,6 +47,7 @@
 	"generic.delete": "Delete",
 	"generic.dontShowAgain": "Don't show again",
 	"generic.executions": "Executions",
+	"generic.tests": "Tests",
 	"generic.or": "or",
 	"generic.clickToCopy": "Click to copy",
 	"generic.copiedToClipboard": "Copied to clipboard",
@ -2716,5 +2717,47 @@
 	"communityPlusModal.button.skip": "Skip",
 	"communityPlusModal.button.confirm": "Send me a free license key",
 	"executeWorkflowTrigger.createNewSubworkflow": "Create a sub-workflow in {projectName}",
-	"executeWorkflowTrigger.createNewSubworkflow.noProject": "Create a new sub-workflow"
+	"executeWorkflowTrigger.createNewSubworkflow.noProject": "Create a new sub-workflow",
+	"testDefinition.edit.descriptionPlaceholder": "",
+	"testDefinition.edit.backButtonTitle": "Back to Workflow Evaluation",
+	"testDefinition.edit.namePlaceholder": "Enter test name",
+	"testDefinition.edit.metricsTitle": "Metrics",
+	"testDefinition.edit.metricsHelpText": "The output field of the last node in the evaluation workflow. Metrics will be averaged across all test cases.",
+	"testDefinition.edit.metricsFields": "Output field(s)",
+	"testDefinition.edit.metricsPlaceholder": "Enter metric name",
+	"testDefinition.edit.metricsNew": "New metric",
+	"testDefinition.edit.selectTag": "Select tag...",
+	"testDefinition.edit.tagsHelpText": "Executions with this tag will be added as test cases to this test.",
+	"testDefinition.edit.workflowSelectorLabel": "Workflow to make comparisons",
+	"testDefinition.edit.workflowSelectorDisplayName": "Workflow",
+	"testDefinition.edit.workflowSelectorTitle": "Workflow to make comparisons",
+	"testDefinition.edit.workflowSelectorHelpText": "This workflow will be called once for each test case.",
+	"testDefinition.edit.updateTest": "Update test",
+	"testDefinition.edit.saveTest": "Run test",
+	"testDefinition.edit.testSaved": "Test saved",
+	"testDefinition.edit.testSaveFailed": "Failed to save test",
+	"testDefinition.edit.description": "Description",
+	"testDefinition.edit.tagName": "Tag name",
+	"testDefinition.edit.step.intro": "When running a test",
+	"testDefinition.edit.step.executions": "Fetch 5 past executions",
+	"testDefinition.edit.step.nodes": "Mock nodes",
+	"testDefinition.edit.step.mockedNodes": "No nodes mocked | {count} node mocked | {count} nodes mocked",
+	"testDefinition.edit.step.reRunExecutions": "Re-run executions",
+	"testDefinition.edit.step.compareExecutions": "Compare each past and new execution",
+	"testDefinition.edit.step.metrics": "Summarise metrics",
+	"testDefinition.edit.step.collapse": "Collapse",
+	"testDefinition.edit.step.expand": "Expand",
+	"testDefinition.list.testDeleted": "Test deleted",
+	"testDefinition.list.tests": "Tests",
+	"testDefinition.list.createNew": "Create new test",
+	"testDefinition.list.actionDescription": "Replay past executions to check whether performance has changed",
+	"testDefinition.list.actionButton": "Create Test",
+	"testDefinition.list.testCases": "No test cases | {count} test case | {count} test cases",
+	"testDefinition.list.lastRun": "Ran {lastRun}",
+	"testDefinition.list.errorRate": "Error rate: {errorRate}",
+	"testDefinition.runTest": "Run Test",
+	"testDefinition.notImplemented": "This feature is not implemented yet!",
+	"testDefinition.viewDetails": "View Details",
+	"testDefinition.editTest": "Edit Test",
+	"testDefinition.deleteTest": "Delete Test"
 }
--- a/packages/editor-ui/src/plugins/icons/index.ts
+++ b/packages/editor-ui/src/plugins/icons/index.ts
@ -51,6 +51,7 @@ import {
 	faEllipsisH,
 	faEllipsisV,
 	faEnvelope,
+	faEquals,
 	faEye,
 	faExclamationTriangle,
 	faExpand,
@ -223,6 +224,7 @@ export const FontAwesomePlugin: Plugin = {
 		addIcon(faEllipsisH);
 		addIcon(faEllipsisV);
 		addIcon(faEnvelope);
+		addIcon(faEquals);
 		addIcon(faEye);
 		addIcon(faExclamationTriangle);
 		addIcon(faExpand);
--- a/packages/editor-ui/src/router.ts
+++ b/packages/editor-ui/src/router.ts
@ -57,6 +57,10 @@ const SettingsExternalSecrets = async () => await import('./views/SettingsExtern
 const WorkerView = async () => await import('./views/WorkerView.vue');
 const WorkflowHistory = async () => await import('@/views/WorkflowHistory.vue');
 const WorkflowOnboardingView = async () => await import('@/views/WorkflowOnboardingView.vue');
+const TestDefinitionListView = async () =>
+	await import('./views/TestDefinition/TestDefinitionListView.vue');
+const TestDefinitionEditView = async () =>
+	await import('./views/TestDefinition/TestDefinitionEditView.vue');

 function getTemplatesRedirect(defaultRedirect: VIEWS[keyof VIEWS]): { name: string } | false {
 	const settingsStore = useSettingsStore();
@ -249,6 +253,55 @@ export const routes: RouteRecordRaw[] = [
 			},
 		],
 	},
+	{
+		path: '/workflow/:name/evaluation',
+		name: VIEWS.TEST_DEFINITION,
+		meta: {
+			keepWorkflowAlive: true,
+			middleware: ['authenticated'],
+		},
+		children: [
+			{
+				path: '',
+				name: VIEWS.TEST_DEFINITION,
+				components: {
+					default: TestDefinitionListView,
+					header: MainHeader,
+					sidebar: MainSidebar,
+				},
+				meta: {
+					keepWorkflowAlive: true,
+					middleware: ['authenticated'],
+				},
+			},
+			{
+				path: 'new',
+				name: VIEWS.NEW_TEST_DEFINITION,
+				components: {
+					default: TestDefinitionEditView,
+					header: MainHeader,
+					sidebar: MainSidebar,
+				},
+				meta: {
+					keepWorkflowAlive: true,
+					middleware: ['authenticated'],
+				},
+			},
+			{
+				path: ':testId',
+				name: VIEWS.TEST_DEFINITION_EDIT,
+				components: {
+					default: TestDefinitionEditView,
+					header: MainHeader,
+					sidebar: MainSidebar,
+				},
+				meta: {
+					keepWorkflowAlive: true,
+					middleware: ['authenticated'],
+				},
+			},
+		],
+	},
 	{
 		path: '/workflow/:workflowId/history/:versionId?',
 		name: VIEWS.WORKFLOW_HISTORY,
--- a/packages/editor-ui/src/stores/testDefinition.store.ee.test.ts
+++ b/packages/editor-ui/src/stores/testDefinition.store.ee.test.ts
@ -0,0 +1,264 @@
+import { createPinia, setActivePinia } from 'pinia';
+import { useTestDefinitionStore } from '@/stores/testDefinition.store.ee'; // Adjust the import path as necessary
+import { useRootStore } from '@/stores/root.store';
+import { usePostHog } from '@/stores/posthog.store';
+import type { TestDefinitionRecord } from '@/api/testDefinition.ee';
+
+const { createTestDefinition, deleteTestDefinition, getTestDefinitions, updateTestDefinition } =
+	vi.hoisted(() => ({
+		getTestDefinitions: vi.fn(),
+		createTestDefinition: vi.fn(),
+		updateTestDefinition: vi.fn(),
+		deleteTestDefinition: vi.fn(),
+	}));
+
+vi.mock('@/api/testDefinition.ee', () => ({
+	createTestDefinition,
+	deleteTestDefinition,
+	getTestDefinitions,
+	updateTestDefinition,
+}));
+
+vi.mock('@/stores/root.store', () => ({
+	useRootStore: vi.fn(() => ({
+		restApiContext: { instanceId: 'test-instance-id' },
+	})),
+}));
+
+const TEST_DEF_A: TestDefinitionRecord = {
+	id: '1',
+	name: 'Test Definition A',
+	workflowId: '123',
+	description: 'Description A',
+};
+const TEST_DEF_B: TestDefinitionRecord = {
+	id: '2',
+	name: 'Test Definition B',
+	workflowId: '123',
+	description: 'Description B',
+};
+const TEST_DEF_NEW: TestDefinitionRecord = {
+	id: '3',
+	name: 'New Test Definition',
+	workflowId: '123',
+	description: 'New Description',
+};
+
+describe('testDefinition.store.ee', () => {
+	let store: ReturnType<typeof useTestDefinitionStore>;
+	let rootStoreMock: ReturnType<typeof useRootStore>;
+	let posthogStoreMock: ReturnType<typeof usePostHog>;
+
+	beforeEach(() => {
+		vi.restoreAllMocks();
+		setActivePinia(createPinia());
+		store = useTestDefinitionStore();
+		rootStoreMock = useRootStore();
+		posthogStoreMock = usePostHog();
+
+		getTestDefinitions.mockResolvedValue({
+			count: 2,
+			testDefinitions: [TEST_DEF_A, TEST_DEF_B],
+		});
+
+		createTestDefinition.mockResolvedValue(TEST_DEF_NEW);
+
+		deleteTestDefinition.mockResolvedValue({ success: true });
+	});
+
+	test('Initialization', () => {
+		expect(store.testDefinitionsById).toEqual({});
+		expect(store.isLoading).toBe(false);
+		expect(store.hasTestDefinitions).toBe(false);
+	});
+
+	test('Fetching Test Definitions', async () => {
+		expect(store.isLoading).toBe(false);
+
+		const result = await store.fetchAll();
+
+		expect(getTestDefinitions).toHaveBeenCalledWith(rootStoreMock.restApiContext);
+		expect(store.testDefinitionsById).toEqual({
+			'1': TEST_DEF_A,
+			'2': TEST_DEF_B,
+		});
+		expect(store.isLoading).toBe(false);
+		expect(result).toEqual({
+			count: 2,
+			testDefinitions: [TEST_DEF_A, TEST_DEF_B],
+		});
+	});
+
+	test('Fetching Test Definitions with force flag', async () => {
+		expect(store.isLoading).toBe(false);
+
+		const result = await store.fetchAll({ force: true });
+
+		expect(getTestDefinitions).toHaveBeenCalledWith(rootStoreMock.restApiContext);
+		expect(store.testDefinitionsById).toEqual({
+			'1': TEST_DEF_A,
+			'2': TEST_DEF_B,
+		});
+		expect(store.isLoading).toBe(false);
+		expect(result).toEqual({
+			count: 2,
+			testDefinitions: [TEST_DEF_A, TEST_DEF_B],
+		});
+	});
+
+	test('Fetching Test Definitions when already fetched', async () => {
+		store.fetchedAll = true;
+
+		const result = await store.fetchAll();
+
+		expect(getTestDefinitions).not.toHaveBeenCalled();
+		expect(store.testDefinitionsById).toEqual({});
+		expect(result).toEqual({
+			count: 0,
+			testDefinitions: [],
+		});
+	});
+
+	test('Upserting Test Definitions - New Definition', () => {
+		const newDefinition = TEST_DEF_NEW;
+
+		store.upsertTestDefinitions([newDefinition]);
+
+		expect(store.testDefinitionsById).toEqual({
+			'3': TEST_DEF_NEW,
+		});
+	});
+
+	test('Upserting Test Definitions - Existing Definition', () => {
+		store.testDefinitionsById = {
+			'1': TEST_DEF_A,
+		};
+
+		const updatedDefinition = {
+			id: '1',
+			name: 'Updated Test Definition A',
+			description: 'Updated Description A',
+			workflowId: '123',
+		};
+
+		store.upsertTestDefinitions([updatedDefinition]);
+
+		expect(store.testDefinitionsById).toEqual({
+			1: updatedDefinition,
+		});
+	});
+
+	test('Deleting Test Definitions', () => {
+		store.testDefinitionsById = {
+			'1': TEST_DEF_A,
+			'2': TEST_DEF_B,
+		};
+
+		store.deleteTestDefinition('1');
+
+		expect(store.testDefinitionsById).toEqual({
+			'2': TEST_DEF_B,
+		});
+	});
+
+	test('Creating a Test Definition', async () => {
+		const params = {
+			name: 'New Test Definition',
+			workflowId: 'test-workflow-id',
+			evaluationWorkflowId: 'test-evaluation-workflow-id',
+			description: 'New Description',
+		};
+
+		const result = await store.create(params);
+
+		expect(createTestDefinition).toHaveBeenCalledWith(rootStoreMock.restApiContext, params);
+		expect(store.testDefinitionsById).toEqual({
+			'3': TEST_DEF_NEW,
+		});
+		expect(result).toEqual(TEST_DEF_NEW);
+	});
+
+	test('Updating a Test Definition', async () => {
+		store.testDefinitionsById = {
+			'1': TEST_DEF_A,
+			'2': TEST_DEF_B,
+		};
+
+		const params = {
+			id: '1',
+			name: 'Updated Test Definition A',
+			description: 'Updated Description A',
+			workflowId: '123',
+		};
+		updateTestDefinition.mockResolvedValue(params);
+
+		const result = await store.update(params);
+
+		expect(updateTestDefinition).toHaveBeenCalledWith(rootStoreMock.restApiContext, '1', {
+			name: 'Updated Test Definition A',
+			description: 'Updated Description A',
+			workflowId: '123',
+		});
+		expect(store.testDefinitionsById).toEqual({
+			'1': params,
+			'2': TEST_DEF_B,
+		});
+		expect(result).toEqual(params);
+	});
+
+	test('Deleting a Test Definition by ID', async () => {
+		store.testDefinitionsById = {
+			'1': TEST_DEF_A,
+		};
+
+		const result = await store.deleteById('1');
+
+		expect(deleteTestDefinition).toHaveBeenCalledWith(rootStoreMock.restApiContext, '1');
+		expect(store.testDefinitionsById).toEqual({});
+		expect(result).toBe(true);
+	});
+
+	test('Computed Properties - hasTestDefinitions', () => {
+		store.testDefinitionsById = {};
+
+		expect(store.hasTestDefinitions).toBe(false);
+		store.testDefinitionsById = {
+			'1': TEST_DEF_A,
+		};
+
+		expect(store.hasTestDefinitions).toBe(true);
+	});
+
+	test('Computed Properties - isFeatureEnabled', () => {
+		posthogStoreMock.isFeatureEnabled = vi.fn().mockReturnValue(false);
+
+		expect(store.isFeatureEnabled).toBe(false);
+		posthogStoreMock.isFeatureEnabled = vi.fn().mockReturnValue(true);
+
+		expect(store.isFeatureEnabled).toBe(true);
+	});
+
+	test('Error Handling - create', async () => {
+		createTestDefinition.mockRejectedValue(new Error('Create failed'));
+
+		await expect(
+			store.create({ name: 'New Test Definition', workflowId: 'test-workflow-id' }),
+		).rejects.toThrow('Create failed');
+	});
+
+	test('Error Handling - update', async () => {
+		updateTestDefinition.mockRejectedValue(new Error('Update failed'));
+
+		await expect(store.update({ id: '1', name: 'Updated Test Definition A' })).rejects.toThrow(
+			'Update failed',
+		);
+	});
+
+	test('Error Handling - deleteById', async () => {
+		deleteTestDefinition.mockResolvedValue({ success: false });
+
+		const result = await store.deleteById('1');
+
+		expect(result).toBe(false);
+	});
+});
--- a/packages/editor-ui/src/stores/testDefinition.store.ee.ts
+++ b/packages/editor-ui/src/stores/testDefinition.store.ee.ts
@ -0,0 +1,171 @@
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+import { useRootStore } from './root.store';
+import * as testDefinitionsApi from '@/api/testDefinition.ee';
+import type { TestDefinitionRecord } from '@/api/testDefinition.ee';
+import { usePostHog } from './posthog.store';
+import { STORES, WORKFLOW_EVALUATION_EXPERIMENT } from '@/constants';
+
+export const useTestDefinitionStore = defineStore(
+	STORES.TEST_DEFINITION,
+	() => {
+		// State
+		const testDefinitionsById = ref<Record<string, TestDefinitionRecord>>({});
+		const loading = ref(false);
+		const fetchedAll = ref(false);
+
+		// Store instances
+		const posthogStore = usePostHog();
+		const rootStore = useRootStore();
+
+		// Computed
+		const allTestDefinitions = computed(() => {
+			return Object.values(testDefinitionsById.value).sort((a, b) =>
+				(a.name ?? '').localeCompare(b.name ?? ''),
+			);
+		});
+
+		// Enable with `window.featureFlags.override('025_workflow_evaluation', true)`
+		const isFeatureEnabled = computed(() =>
+			posthogStore.isFeatureEnabled(WORKFLOW_EVALUATION_EXPERIMENT),
+		);
+
+		const isLoading = computed(() => loading.value);
+
+		const hasTestDefinitions = computed(() => Object.keys(testDefinitionsById.value).length > 0);
+
+		// Methods
+		const setAllTestDefinitions = (definitions: TestDefinitionRecord[]) => {
+			testDefinitionsById.value = definitions.reduce(
+				(acc: Record<string, TestDefinitionRecord>, def: TestDefinitionRecord) => {
+					acc[def.id] = def;
+					return acc;
+				},
+				{},
+			);
+		};
+
+		/**
+		 * Upserts test definitions in the store.
+		 * @param toUpsertDefinitions - An array of test definitions to upsert.
+		 */
+		const upsertTestDefinitions = (toUpsertDefinitions: TestDefinitionRecord[]) => {
+			toUpsertDefinitions.forEach((toUpsertDef) => {
+				const defId = toUpsertDef.id;
+				if (!defId) throw Error('ID is required for upserting');
+				const currentDef = testDefinitionsById.value[defId];
+				testDefinitionsById.value = {
+					...testDefinitionsById.value,
+					[defId]: {
+						...currentDef,
+						...toUpsertDef,
+					},
+				};
+			});
+		};
+
+		const deleteTestDefinition = (id: string) => {
+			const { [id]: deleted, ...rest } = testDefinitionsById.value;
+			testDefinitionsById.value = rest;
+		};
+
+		/**
+		 * Fetches all test definitions from the API.
+		 * @param {boolean} force - If true, fetches the definitions from the API even if they were already fetched before.
+		 */
+		const fetchAll = async (params?: { force?: boolean }) => {
+			const { force = false } = params ?? {};
+			if (!force && fetchedAll.value) {
+				const testDefinitions = Object.values(testDefinitionsById.value);
+				return {
+					count: testDefinitions.length,
+					testDefinitions,
+				};
+			}
+
+			loading.value = true;
+			try {
+				const retrievedDefinitions = await testDefinitionsApi.getTestDefinitions(
+					rootStore.restApiContext,
+				);
+
+				setAllTestDefinitions(retrievedDefinitions.testDefinitions);
+				fetchedAll.value = true;
+				return retrievedDefinitions;
+			} finally {
+				loading.value = false;
+			}
+		};
+
+		/**
+		 * Creates a new test definition using the provided parameters.
+		 *
+		 * @param {Object} params - An object containing the necessary parameters to create a test definition.
+		 * @param {string} params.name - The name of the new test definition.
+		 * @param {string} params.workflowId - The ID of the workflow associated with the test definition.
+		 * @returns {Promise<TestDefinitionRecord>} A promise that resolves to the newly created test definition.
+		 * @throws {Error} Throws an error if there is a problem creating the test definition.
+		 */
+		const create = async (params: {
+			name: string;
+			workflowId: string;
+		}) => {
+			const createdDefinition = await testDefinitionsApi.createTestDefinition(
+				rootStore.restApiContext,
+				params,
+			);
+			upsertTestDefinitions([createdDefinition]);
+			return createdDefinition;
+		};
+
+		const update = async (params: Partial<TestDefinitionRecord>) => {
+			if (!params.id) throw new Error('ID is required to update a test definition');
+
+			const { id, ...updateParams } = params;
+			const updatedDefinition = await testDefinitionsApi.updateTestDefinition(
+				rootStore.restApiContext,
+				id,
+				updateParams,
+			);
+			upsertTestDefinitions([updatedDefinition]);
+			return updatedDefinition;
+		};
+
+		/**
+		 * Deletes a test definition by its ID.
+		 *
+		 * @param {number} id - The ID of the test definition to delete.
+		 * @returns {Promise<boolean>} A promise that resolves to true if the test definition was successfully deleted, false otherwise.
+		 */
+		const deleteById = async (id: string) => {
+			const result = await testDefinitionsApi.deleteTestDefinition(rootStore.restApiContext, id);
+
+			if (result.success) {
+				deleteTestDefinition(id);
+			}
+
+			return result.success;
+		};
+
+		return {
+			// State
+			fetchedAll,
+			testDefinitionsById,
+
+			// Computed
+			allTestDefinitions,
+			isLoading,
+			hasTestDefinitions,
+			isFeatureEnabled,
+
+			// Methods
+			fetchAll,
+			create,
+			update,
+			deleteById,
+			upsertTestDefinitions,
+			deleteTestDefinition,
+		};
+	},
+	{},
+);
--- a/packages/editor-ui/src/views/ProjectSettings.vue
+++ b/packages/editor-ui/src/views/ProjectSettings.vue
@ -399,7 +399,7 @@ onMounted(() => {

 	form {
 		width: 100%;
-		max-width: 1280px;
+		max-width: var(--content-container-width);
 		padding: 0 var(--spacing-2xl);

 		fieldset {
@ -416,7 +416,7 @@ onMounted(() => {

 .header {
 	width: 100%;
-	max-width: 1280px;
+	max-width: var(--content-container-width);
 	padding: var(--spacing-l) var(--spacing-2xl) 0;
 }

--- a/packages/editor-ui/src/views/TemplatesView.vue
+++ b/packages/editor-ui/src/views/TemplatesView.vue
@ -30,7 +30,7 @@ withDefaults(defineProps<Props>(), {
 .template {
 	display: flex;
 	width: 100%;
-	max-width: 1280px;
+	max-width: var(--content-container-width);
 	padding: var(--spacing-l) var(--spacing-l) 0;
 	justify-content: center;
 	@media (min-width: 1200px) {
--- a/packages/editor-ui/src/views/TestDefinition/TestDefinitionEditView.vue
+++ b/packages/editor-ui/src/views/TestDefinition/TestDefinitionEditView.vue
@ -0,0 +1,270 @@
+<script setup lang="ts">
+import { computed, onMounted, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { VIEWS } from '@/constants';
+import { useToast } from '@/composables/useToast';
+import { useI18n } from '@/composables/useI18n';
+import { useAnnotationTagsStore } from '@/stores/tags.store';
+import { useDebounce } from '@/composables/useDebounce';
+import { useTestDefinitionForm } from '@/components/TestDefinition/composables/useTestDefinitionForm';
+
+import EvaluationHeader from '@/components/TestDefinition/EditDefinition/EvaluationHeader.vue';
+import DescriptionInput from '@/components/TestDefinition/EditDefinition/DescriptionInput.vue';
+import EvaluationStep from '@/components/TestDefinition/EditDefinition/EvaluationStep.vue';
+import TagsInput from '@/components/TestDefinition/EditDefinition/TagsInput.vue';
+import WorkflowSelector from '@/components/TestDefinition/EditDefinition/WorkflowSelector.vue';
+import MetricsInput from '@/components/TestDefinition/EditDefinition/MetricsInput.vue';
+
+const props = defineProps<{
+	testId?: string;
+}>();
+
+const router = useRouter();
+const route = useRoute();
+const locale = useI18n();
+const { debounce } = useDebounce();
+const toast = useToast();
+const { isLoading, allTags, tagsById, fetchAll } = useAnnotationTagsStore();
+
+const testId = computed(() => props.testId ?? (route.params.testId as string));
+const currentWorkflowId = computed(() => route.params.name as string);
+const buttonLabel = computed(() =>
+	testId.value
+		? locale.baseText('testDefinition.edit.updateTest')
+		: locale.baseText('testDefinition.edit.saveTest'),
+);
+
+const {
+	state,
+	fieldsIssues,
+	isSaving,
+	loadTestData,
+	createTest,
+	updateTest,
+	startEditing,
+	saveChanges,
+	cancelEditing,
+	handleKeydown,
+} = useTestDefinitionForm();
+
+onMounted(async () => {
+	await fetchAll();
+	if (testId.value) {
+		await loadTestData(testId.value);
+	} else {
+		await onSaveTest();
+	}
+});
+
+async function onSaveTest() {
+	try {
+		let savedTest;
+		if (testId.value) {
+			savedTest = await updateTest(testId.value);
+		} else {
+			savedTest = await createTest(currentWorkflowId.value);
+		}
+		if (savedTest && route.name === VIEWS.TEST_DEFINITION_EDIT) {
+			await router.replace({
+				name: VIEWS.TEST_DEFINITION_EDIT,
+				params: { testId: savedTest.id },
+			});
+		}
+		toast.showMessage({
+			title: locale.baseText('testDefinition.edit.testSaved'),
+			type: 'success',
+		});
+	} catch (e: unknown) {
+		toast.showError(e, locale.baseText('testDefinition.edit.testSaveFailed'));
+	}
+}
+
+function hasIssues(key: string) {
+	return fieldsIssues.value.some((issue) => issue.field === key);
+}
+
+watch(() => state.value, debounce(onSaveTest, { debounceTime: 400 }), { deep: true });
+</script>
+
+<template>
+	<div :class="$style.container">
+		<div :class="$style.content">
+			<EvaluationHeader
+				v-model="state.name"
+				:class="{ 'has-issues': hasIssues('name') }"
+				:start-editing="startEditing"
+				:save-changes="saveChanges"
+				:handle-keydown="handleKeydown"
+			/>
+
+			<EvaluationStep
+				:class="$style.step"
+				:title="locale.baseText('testDefinition.edit.description')"
+				:expanded="false"
+			>
+				<template #icon><font-awesome-icon icon="thumbtack" size="lg" /></template>
+				<template #cardContent>
+					<DescriptionInput v-model="state.description" />
+				</template>
+			</EvaluationStep>
+
+			<div :class="$style.panelIntro">{{ locale.baseText('testDefinition.edit.step.intro') }}</div>
+			<BlockArrow :class="$style.introArrow" />
+			<div :class="$style.panelBlock">
+				<EvaluationStep
+					:class="$style.step"
+					:title="locale.baseText('testDefinition.edit.step.executions')"
+				>
+					<template #icon><font-awesome-icon icon="history" size="lg" /></template>
+					<template #cardContent>
+						<TagsInput
+							v-model="state.tags"
+							:class="{ 'has-issues': hasIssues('tags') }"
+							:all-tags="allTags"
+							:tags-by-id="tagsById"
+							:is-loading="isLoading"
+							:start-editing="startEditing"
+							:save-changes="saveChanges"
+							:cancel-editing="cancelEditing"
+						/>
+					</template>
+				</EvaluationStep>
+				<div :class="$style.evaluationArrows">
+					<BlockArrow />
+					<BlockArrow />
+				</div>
+				<EvaluationStep
+					:class="$style.step"
+					:title="locale.baseText('testDefinition.edit.step.nodes')"
+					:small="true"
+					:expanded="false"
+				>
+					<template #icon><font-awesome-icon icon="thumbtack" size="lg" /></template>
+					<template #cardContent>{{
+						locale.baseText('testDefinition.edit.step.mockedNodes', { adjustToNumber: 0 })
+					}}</template>
+				</EvaluationStep>
+
+				<EvaluationStep
+					:class="$style.step"
+					:title="locale.baseText('testDefinition.edit.step.reRunExecutions')"
+					:small="true"
+				>
+					<template #icon><font-awesome-icon icon="redo" size="lg" /></template>
+				</EvaluationStep>
+
+				<EvaluationStep
+					:class="$style.step"
+					:title="locale.baseText('testDefinition.edit.step.compareExecutions')"
+				>
+					<template #icon><font-awesome-icon icon="equals" size="lg" /></template>
+					<template #cardContent>
+						<WorkflowSelector
+							v-model="state.evaluationWorkflow"
+							:class="{ 'has-issues': hasIssues('evaluationWorkflow') }"
+						/>
+					</template>
+				</EvaluationStep>
+
+				<EvaluationStep
+					:class="$style.step"
+					:title="locale.baseText('testDefinition.edit.step.metrics')"
+				>
+					<template #icon><font-awesome-icon icon="chart-bar" size="lg" /></template>
+					<template #cardContent>
+						<MetricsInput v-model="state.metrics" :class="{ 'has-issues': hasIssues('metrics') }" />
+					</template>
+				</EvaluationStep>
+			</div>
+
+			<div :class="$style.footer">
+				<n8n-button
+					type="primary"
+					data-test-id="run-test-button"
+					:label="buttonLabel"
+					:loading="isSaving"
+					@click="onSaveTest"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style module lang="scss">
+.container {
+	width: 100%;
+	height: 100%;
+	padding: var(--spacing-s);
+	display: grid;
+	grid-template-columns: minmax(auto, 24rem) 1fr;
+	gap: var(--spacing-2xl);
+}
+
+.content {
+	min-width: 0;
+	width: 100%;
+}
+
+.panelBlock {
+	max-width: var(--evaluation-edit-panel-width, 24rem);
+	display: grid;
+
+	justify-items: end;
+}
+.panelIntro {
+	font-size: var(--font-size-m);
+	color: var(--color-text-dark);
+	margin-top: var(--spacing-s);
+	justify-self: center;
+	position: relative;
+	display: block;
+}
+.step {
+	position: relative;
+
+	&:not(:first-child) {
+		margin-top: var(--spacing-m);
+	}
+}
+.introArrow {
+	--arrow-height: 1.5rem;
+	justify-self: center;
+}
+.evaluationArrows {
+	--arrow-height: 11rem;
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+	max-width: 80%;
+	margin: 0 auto;
+	margin-bottom: -100%;
+	z-index: 0;
+}
+.footer {
+	margin-top: var(--spacing-xl);
+	display: flex;
+	justify-content: flex-start;
+}
+
+.workflow {
+	padding: var(--spacing-l);
+	background-color: var(--color-background-light);
+	border-radius: var(--border-radius-large);
+	border: var(--border-base);
+}
+
+.workflowSteps {
+	display: grid;
+	gap: var(--spacing-2xs);
+	max-width: 42rem;
+	margin: 0 auto;
+}
+
+.sideBySide {
+	display: grid;
+	grid-template-columns: 1fr auto 1fr;
+	gap: var(--spacing-2xs);
+	justify-items: end;
+	align-items: start;
+}
+</style>
--- a/packages/editor-ui/src/views/TestDefinition/TestDefinitionListView.vue
+++ b/packages/editor-ui/src/views/TestDefinition/TestDefinitionListView.vue
@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { VIEWS } from '@/constants';
+import { useTestDefinitionStore } from '@/stores/testDefinition.store.ee';
+import { useToast } from '@/composables/useToast';
+import { useI18n } from '@/composables/useI18n';
+import EmptyState from '@/components/TestDefinition/ListDefinition/EmptyState.vue';
+import TestsList from '@/components/TestDefinition/ListDefinition/TestsList.vue';
+import type { TestExecution, TestListItem } from '@/components/TestDefinition/types';
+import { useAnnotationTagsStore } from '@/stores/tags.store';
+import type { TestDefinitionRecord } from '@/api/testDefinition.ee';
+
+const router = useRouter();
+const tagsStore = useAnnotationTagsStore();
+const testDefinitionStore = useTestDefinitionStore();
+const isLoading = ref(false);
+const toast = useToast();
+const locale = useI18n();
+
+const tests = computed<TestListItem[]>(() => {
+	return testDefinitionStore.allTestDefinitions
+		.filter((test): test is TestDefinitionRecord => test.id !== undefined)
+		.sort((a, b) => new Date(b?.updatedAt ?? '').getTime() - new Date(a?.updatedAt ?? '').getTime())
+		.map((test) => ({
+			id: test.id,
+			name: test.name ?? '',
+			tagName: test.annotationTagId ? getTagName(test.annotationTagId) : '',
+			testCases: 0, // TODO: This should come from the API
+			execution: getTestExecution(test.id),
+		}));
+});
+const hasTests = computed(() => tests.value.length > 0);
+const allTags = computed(() => tagsStore.allTags);
+
+function getTagName(tagId: string) {
+	const matchingTag = allTags.value.find((t) => t.id === tagId);
+
+	return matchingTag?.name ?? '';
+}
+
+// TODO: Replace with actual API call once implemented
+function getTestExecution(_testId: string): TestExecution {
+	const mockExecutions = {
+		lastRun: 'an hour ago',
+		errorRate: 0,
+		metrics: { metric1: 0.12, metric2: 0.99, metric3: 0.87 },
+	};
+
+	return (
+		mockExecutions || {
+			lastRun: null,
+			errorRate: null,
+			metrics: { metric1: null, metric2: null, metric3: null },
+		}
+	);
+}
+
+// Action handlers
+function onCreateTest() {
+	void router.push({ name: VIEWS.NEW_TEST_DEFINITION });
+}
+
+function onRunTest(_testId: string) {
+	// TODO: Implement test run logic
+	toast.showMessage({
+		title: locale.baseText('testDefinition.notImplemented'),
+		type: 'warning',
+	});
+}
+
+function onViewDetails(_testId: string) {
+	// TODO: Implement test details view
+	toast.showMessage({
+		title: locale.baseText('testDefinition.notImplemented'),
+		type: 'warning',
+	});
+}
+
+function onEditTest(testId: number) {
+	void router.push({ name: VIEWS.TEST_DEFINITION_EDIT, params: { testId } });
+}
+
+async function onDeleteTest(testId: string) {
+	await testDefinitionStore.deleteById(testId);
+
+	toast.showMessage({
+		title: locale.baseText('testDefinition.list.testDeleted'),
+		type: 'success',
+	});
+}
+
+// Load initial data
+async function loadInitialData() {
+	isLoading.value = true;
+	try {
+		await tagsStore.fetchAll();
+		await testDefinitionStore.fetchAll();
+	} finally {
+		isLoading.value = false;
+	}
+}
+
+onMounted(() => {
+	if (!testDefinitionStore.isFeatureEnabled) {
+		toast.showMessage({
+			title: locale.baseText('testDefinition.notImplemented'),
+			type: 'warning',
+		});
+
+		void router.push({
+			name: VIEWS.WORKFLOW,
+			params: { name: router.currentRoute.value.params.name },
+		});
+	}
+	void loadInitialData();
+});
+</script>
+
+<template>
+	<div :class="$style.container">
+		<div v-if="isLoading" :class="$style.loading">
+			<n8n-loading :loading="true" :rows="3" />
+		</div>
+
+		<template v-else>
+			<EmptyState v-if="!hasTests" @create-test="onCreateTest" />
+			<TestsList
+				v-else
+				:tests="tests"
+				@create-test="onCreateTest"
+				@run-test="onRunTest"
+				@view-details="onViewDetails"
+				@edit-test="onEditTest"
+				@delete-test="onDeleteTest"
+			/>
+		</template>
+	</div>
+</template>
+<style module lang="scss">
+.container {
+	padding: var(--spacing-xl) var(--spacing-l);
+	height: 100%;
+	width: 100%;
+	max-width: var(--content-container-width);
+}
+.loading {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 200px;
+}
+</style>
--- a/packages/editor-ui/src/views/TestDefinition/tests/TestDefinitionEditView.test.ts
+++ b/packages/editor-ui/src/views/TestDefinition/tests/TestDefinitionEditView.test.ts
@ -0,0 +1,208 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { createTestingPinia } from '@pinia/testing';
+import { createComponentRenderer } from '@/__tests__/render';
+import TestDefinitionEditView from '@/views/TestDefinition/TestDefinitionEditView.vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useToast } from '@/composables/useToast';
+import { useTestDefinitionForm } from '@/components/TestDefinition/composables/useTestDefinitionForm';
+import { useAnnotationTagsStore } from '@/stores/tags.store';
+import { ref, nextTick } from 'vue';
+
+vi.mock('vue-router');
+vi.mock('@/composables/useToast');
+vi.mock('@/components/TestDefinition/composables/useTestDefinitionForm');
+vi.mock('@/stores/tags.store');
+vi.mock('@/stores/projects.store');
+
+describe('TestDefinitionEditView', () => {
+	const renderComponent = createComponentRenderer(TestDefinitionEditView);
+
+	beforeEach(() => {
+		setActivePinia(createPinia());
+
+		vi.mocked(useRoute).mockReturnValue({
+			params: {},
+			path: '/test-path',
+			name: 'test-route',
+		} as ReturnType<typeof useRoute>);
+
+		vi.mocked(useRouter).mockReturnValue({
+			push: vi.fn(),
+			resolve: vi.fn().mockReturnValue({ href: '/test-href' }),
+		} as unknown as ReturnType<typeof useRouter>);
+
+		vi.mocked(useToast).mockReturnValue({
+			showMessage: vi.fn(),
+			showError: vi.fn(),
+		} as unknown as ReturnType<typeof useToast>);
+		vi.mocked(useTestDefinitionForm).mockReturnValue({
+			state: ref({
+				name: { value: '', isEditing: false, tempValue: '' },
+				description: '',
+				tags: { appliedTagIds: [], isEditing: false },
+				evaluationWorkflow: { id: '1', name: 'Test Workflow' },
+				metrics: [],
+			}),
+			fieldsIssues: ref([]),
+			isSaving: ref(false),
+			loadTestData: vi.fn(),
+			saveTest: vi.fn(),
+			startEditing: vi.fn(),
+			saveChanges: vi.fn(),
+			cancelEditing: vi.fn(),
+			handleKeydown: vi.fn(),
+		} as unknown as ReturnType<typeof useTestDefinitionForm>);
+		vi.mocked(useAnnotationTagsStore).mockReturnValue({
+			isLoading: ref(false),
+			allTags: ref([]),
+			tagsById: ref({}),
+			fetchAll: vi.fn(),
+		} as unknown as ReturnType<typeof useAnnotationTagsStore>);
+
+		vi.mock('@/stores/projects.store', () => ({
+			useProjectsStore: vi.fn().mockReturnValue({
+				isTeamProjectFeatureEnabled: false,
+				currentProject: null,
+				currentProjectId: null,
+			}),
+		}));
+	});
+
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('should load test data when testId is provided', async () => {
+		vi.mocked(useRoute).mockReturnValue({
+			params: { testId: '1' },
+			path: '/test-path',
+			name: 'test-route',
+		} as unknown as ReturnType<typeof useRoute>);
+		const loadTestDataMock = vi.fn();
+		vi.mocked(useTestDefinitionForm).mockReturnValue({
+			...vi.mocked(useTestDefinitionForm)(),
+			loadTestData: loadTestDataMock,
+		} as unknown as ReturnType<typeof useTestDefinitionForm>);
+
+		renderComponent({
+			pinia: createTestingPinia(),
+		});
+
+		await nextTick();
+		expect(loadTestDataMock).toHaveBeenCalledWith('1');
+	});
+
+	it('should not load test data when testId is not provided', async () => {
+		const loadTestDataMock = vi.fn();
+		vi.mocked(useTestDefinitionForm).mockReturnValue({
+			...vi.mocked(useTestDefinitionForm)(),
+			loadTestData: loadTestDataMock,
+		} as unknown as ReturnType<typeof useTestDefinitionForm>);
+
+		renderComponent({
+			pinia: createTestingPinia(),
+		});
+
+		await nextTick();
+		expect(loadTestDataMock).not.toHaveBeenCalled();
+	});
+
+	it('should save test and show success message on successful save', async () => {
+		const saveTestMock = vi.fn().mockResolvedValue({});
+		const routerPushMock = vi.fn();
+		const routerResolveMock = vi.fn().mockReturnValue({ href: '/test-href' });
+		vi.mocked(useTestDefinitionForm).mockReturnValue({
+			...vi.mocked(useTestDefinitionForm)(),
+			createTest: saveTestMock,
+		} as unknown as ReturnType<typeof useTestDefinitionForm>);
+
+		vi.mocked(useRouter).mockReturnValue({
+			push: routerPushMock,
+			resolve: routerResolveMock,
+		} as unknown as ReturnType<typeof useRouter>);
+
+		const { getByTestId } = renderComponent({
+			pinia: createTestingPinia(),
+		});
+		await nextTick();
+		const saveButton = getByTestId('run-test-button');
+		saveButton.click();
+		await nextTick();
+
+		expect(saveTestMock).toHaveBeenCalled();
+	});
+
+	it('should show error message on failed save', async () => {
+		const saveTestMock = vi.fn().mockRejectedValue(new Error('Save failed'));
+		const showErrorMock = vi.fn();
+		vi.mocked(useTestDefinitionForm).mockReturnValue({
+			...vi.mocked(useTestDefinitionForm)(),
+			createTest: saveTestMock,
+		} as unknown as ReturnType<typeof useTestDefinitionForm>);
+		vi.mocked(useToast).mockReturnValue({ showError: showErrorMock } as unknown as ReturnType<
+			typeof useToast
+		>);
+
+		const { getByTestId } = renderComponent({
+			pinia: createTestingPinia(),
+		});
+		await nextTick();
+		const saveButton = getByTestId('run-test-button');
+		saveButton.click();
+		await nextTick();
+		expect(saveTestMock).toHaveBeenCalled();
+		expect(showErrorMock).toHaveBeenCalled();
+	});
+
+	it('should display "Update Test" button when editing existing test', async () => {
+		vi.mocked(useRoute).mockReturnValue({
+			params: { testId: '1' },
+			path: '/test-path',
+			name: 'test-route',
+		} as unknown as ReturnType<typeof useRoute>);
+		const { getByTestId } = renderComponent({
+			pinia: createTestingPinia(),
+		});
+		await nextTick();
+		const updateButton = getByTestId('run-test-button');
+		expect(updateButton.textContent).toContain('Update test');
+	});
+
+	it('should display "Run Test" button when creating new test', async () => {
+		const { getByTestId } = renderComponent({
+			pinia: createTestingPinia(),
+		});
+		await nextTick();
+		const saveButton = getByTestId('run-test-button');
+		expect(saveButton).toBeTruthy();
+	});
+
+	it('should apply "has-issues" class to inputs with issues', async () => {
+		vi.mocked(useTestDefinitionForm).mockReturnValue({
+			...vi.mocked(useTestDefinitionForm)(),
+			fieldsIssues: ref([{ field: 'name' }, { field: 'tags' }]),
+		} as unknown as ReturnType<typeof useTestDefinitionForm>);
+
+		const { container } = renderComponent({
+			pinia: createTestingPinia(),
+		});
+		await nextTick();
+		expect(container.querySelector('.has-issues')).toBeTruthy();
+	});
+
+	it('should fetch all tags on mount', async () => {
+		const fetchAllMock = vi.fn();
+		vi.mocked(useAnnotationTagsStore).mockReturnValue({
+			...vi.mocked(useAnnotationTagsStore)(),
+			fetchAll: fetchAllMock,
+		} as unknown as ReturnType<typeof useAnnotationTagsStore>);
+
+		renderComponent({
+			pinia: createTestingPinia(),
+		});
+
+		await nextTick();
+		expect(fetchAllMock).toHaveBeenCalled();
+	});
+});