plum-e2e 2.4.13 → 2.5.1

package/frontend/src/lib/components/ui/CaseIdChip.svelte

@@ -0,0 +1,59 @@
+<!--
+ * This file is part of Plum.
+ *
+ * Plum is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Plum is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Plum. If not, see https://www.gnu.org/licenses/.
+ -->
+
+<!--
+ * This file is part of Plum.
+ *
+ * Plum is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Plum is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Plum. If not, see https://www.gnu.org/licenses/.
+-->
+
+<script>
+	export let id = '';
+	export let small = false;
+</script>
+
+<span class="id-chip" class:small>{id}</span>
+
+<style>
+	.id-chip {
+		font-family: 'JetBrains Mono', monospace;
+		font-weight: 600;
+		color: var(--accent);
+		background: var(--accent-soft);
+		border-radius: 4px;
+		letter-spacing: 0.02em;
+		font-size: 0.7rem;
+		padding: 0.1rem 0.4rem;
+		flex-shrink: 0;
+		white-space: nowrap;
+	}
+
+	.id-chip.small {
+		font-size: 0.63rem;
+	}
+</style>

package/frontend/src/lib/components/ui/ConfirmModal.svelte

@@ -67,7 +67,7 @@
 		border: 1px solid var(--fail);
 		border-radius: var(--radius-sm);
 		cursor: pointer;
-		color: #fff;
+		color: var(--white);
 		transition: opacity var(--duration-fast);
 	}
 

package/frontend/src/lib/components/ui/Pagination.svelte

@@ -89,7 +89,7 @@
 
 	button.active {
 		background: var(--accent);
-		color: #fff;
+		color: var(--white);
 		border-color: var(--accent);
 	}
 

package/frontend/src/lib/components/ui/PriorityBadge.svelte

@@ -0,0 +1,83 @@
+<!--
+ * This file is part of Plum.
+ *
+ * Plum is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Plum is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Plum. If not, see https://www.gnu.org/licenses/.
+ -->
+
+<!--
+ * This file is part of Plum.
+ *
+ * Plum is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Plum is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Plum. If not, see https://www.gnu.org/licenses/.
+-->
+
+<script>
+	export let priority = 'Medium';
+	export let small = false;
+
+	$: p = priority?.toLowerCase() ?? 'medium';
+</script>
+
+<span
+	class="priority-badge"
+	class:critical={p === 'critical'}
+	class:high={p === 'high'}
+	class:medium={p === 'medium'}
+	class:low={p === 'low'}
+	class:small
+>
+	{priority}
+</span>
+
+<style>
+	.priority-badge {
+		font-size: 0.65rem;
+		font-weight: 500;
+		border-radius: var(--radius-pill);
+		padding: 0.12rem 0.45rem;
+		flex-shrink: 0;
+		white-space: nowrap;
+	}
+
+	.priority-badge.small {
+		font-size: 0.6rem;
+	}
+
+	.critical {
+		background: var(--fail-soft);
+		color: var(--fail);
+	}
+	.high {
+		background: var(--warn-soft);
+		color: var(--warn);
+	}
+	.medium {
+		background: var(--node-soft);
+		color: var(--node);
+	}
+	.low {
+		background: var(--bg-subtle);
+		color: var(--text-muted);
+	}
+</style>

package/frontend/src/lib/components/ui/ResultChip.svelte

@@ -0,0 +1,92 @@
+<!--
+ * This file is part of Plum.
+ *
+ * Plum is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Plum is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Plum. If not, see https://www.gnu.org/licenses/.
+ -->
+
+<!--
+ * This file is part of Plum.
+ *
+ * Plum is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Plum is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Plum. If not, see https://www.gnu.org/licenses/.
+-->
+
+<script>
+	export let status = 'pending';
+
+	$: v =
+		status === 'pass'
+			? 'pass'
+			: status === 'fail'
+				? 'fail'
+				: status === 'blocked'
+					? 'warn'
+					: status === 'skip'
+						? 'muted'
+						: 'pending';
+</script>
+
+<span
+	class="result-chip"
+	class:pass={v === 'pass'}
+	class:fail={v === 'fail'}
+	class:warn={v === 'warn'}
+	class:muted={v === 'muted'}
+	class:pending={v === 'pending'}
+>
+	{status}
+</span>
+
+<style>
+	.result-chip {
+		font-size: 0.7rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		padding: 0.2rem 0.6rem;
+		border-radius: var(--radius-pill);
+		white-space: nowrap;
+	}
+
+	.pass {
+		background: var(--pass-soft);
+		color: var(--pass);
+	}
+	.fail {
+		background: var(--fail-soft);
+		color: var(--fail);
+	}
+	.warn {
+		background: var(--warn-soft);
+		color: var(--warn);
+	}
+	.muted {
+		background: var(--bg-subtle);
+		color: var(--text-muted);
+	}
+	.pending {
+		background: var(--bg-subtle);
+		color: var(--text-muted);
+	}
+</style>

package/frontend/src/lib/components/ui/StatusDot.svelte

@@ -0,0 +1,64 @@
+<!--
+ * This file is part of Plum.
+ *
+ * Plum is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Plum is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Plum. If not, see https://www.gnu.org/licenses/.
+ -->
+
+<!--
+ * This file is part of Plum.
+ *
+ * Plum is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Plum is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Plum. If not, see https://www.gnu.org/licenses/.
+-->
+
+<script>
+	export let status = 'passed';
+</script>
+
+<span
+	class="status-dot"
+	class:pass={status === 'passed'}
+	class:fail={status === 'failed'}
+	class:skip={status !== 'passed' && status !== 'failed'}
+></span>
+
+<style>
+	.status-dot {
+		display: inline-block;
+		width: 8px;
+		height: 8px;
+		border-radius: 50%;
+		flex-shrink: 0;
+	}
+
+	.pass {
+		background: var(--pass);
+	}
+	.fail {
+		background: var(--fail);
+	}
+	.skip {
+		background: var(--text-muted);
+	}
+</style>

package/frontend/src/lib/components/ui/StepKeyword.svelte

@@ -0,0 +1,79 @@
+<!--
+ * This file is part of Plum.
+ *
+ * Plum is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Plum is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Plum. If not, see https://www.gnu.org/licenses/.
+ -->
+
+<!--
+ * This file is part of Plum.
+ *
+ * Plum is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Plum is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Plum. If not, see https://www.gnu.org/licenses/.
+-->
+
+<script>
+	import { keywordClass } from '$lib/utils/format';
+
+	export let keyword = '';
+
+	$: klass = keywordClass(keyword);
+</script>
+
+<span
+	class="kw"
+	class:kw-given={klass === 'kw-given'}
+	class:kw-when={klass === 'kw-when'}
+	class:kw-then={klass === 'kw-then'}
+	class:kw-and={klass === 'kw-and'}>{keyword}</span
+>
+
+<style>
+	.kw {
+		font-size: 0.72rem;
+		font-weight: 500;
+		letter-spacing: 0.04em;
+		flex-shrink: 0;
+		padding: 0.05rem 0.4rem;
+		border-radius: 3px;
+		font-family: 'JetBrains Mono', monospace;
+	}
+
+	.kw-given {
+		background: var(--accent-soft);
+		color: var(--accent);
+	}
+	.kw-when {
+		background: var(--warn-soft);
+		color: var(--warn);
+	}
+	.kw-then {
+		background: var(--pass-soft);
+		color: var(--pass);
+	}
+	.kw-and {
+		background: var(--bg-elevated);
+		color: var(--text-muted);
+		border: 1px solid var(--border);
+	}
+</style>

package/frontend/src/lib/components/ui/StepStatusIcon.svelte

@@ -0,0 +1,66 @@
+<!--
+ * This file is part of Plum.
+ *
+ * Plum is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Plum is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Plum. If not, see https://www.gnu.org/licenses/.
+ -->
+
+<!--
+ * This file is part of Plum.
+ *
+ * Plum is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Plum is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Plum. If not, see https://www.gnu.org/licenses/.
+-->
+
+<script>
+	export let status = 'passed';
+</script>
+
+<span
+	class="step-status-icon"
+	class:icon-pass={status === 'passed'}
+	class:icon-fail={status === 'failed'}
+	class:icon-skip={status !== 'passed' && status !== 'failed'}
+>
+	{#if status === 'passed'}✓{:else if status === 'failed'}✗{:else}−{/if}
+</span>
+
+<style>
+	.step-status-icon {
+		font-size: 0.75rem;
+		font-weight: 600;
+		width: 14px;
+		flex-shrink: 0;
+		text-align: center;
+	}
+
+	.icon-pass {
+		color: var(--pass);
+	}
+	.icon-fail {
+		color: var(--fail);
+	}
+	.icon-skip {
+		color: var(--text-muted);
+	}
+</style>

package/frontend/src/lib/components/ui/TagChip.svelte

@@ -0,0 +1,51 @@
+<!--
+ * This file is part of Plum.
+ *
+ * Plum is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Plum is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Plum. If not, see https://www.gnu.org/licenses/.
+ -->
+
+<!--
+ * This file is part of Plum.
+ *
+ * Plum is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Plum is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Plum. If not, see https://www.gnu.org/licenses/.
+-->
+
+<script>
+	export let tag = '';
+</script>
+
+<span class="tag-chip">{tag}</span>
+
+<style>
+	.tag-chip {
+		font-size: 0.65rem;
+		font-family: 'JetBrains Mono', monospace;
+		background: var(--accent-soft);
+		color: var(--accent);
+		padding: 0.1rem 0.4rem;
+		border-radius: var(--radius-pill);
+		white-space: nowrap;
+	}
+</style>

package/frontend/src/lib/constants.js

@@ -34,3 +34,17 @@ export const SUITE_CASES_PER_PAGE = 20;
 
 export const COPY_TIMEOUT_MS = 1400;
 export const TOAST_TIMEOUT_MS = 4000;
+
+export const REPLAY_STEP_MS = 900;
+export const REDIRECT_DELAY_MS = 3000;
+export const RUN_REFRESH_MS = 15000;
+
+export const WORKERS_MIN = 1;
+export const WORKERS_MAX = 10;
+export const RUN_PICKER_LIMIT = 200;
+export const RUN_TAG_DISPLAY_LIMIT = 5;
+
+export const BUILTIN_RUNNER_ID = 'built-in';
+export const BUILTIN_RUNNER_LABEL = 'Built-in';
+export const ALL_TESTS_LABEL = 'all tests';
+export const AUTOMATED_LABEL = 'Automated';

package/frontend/src/lib/stores/runner.js

@@ -26,8 +26,9 @@ export const runnerState = writable({
 	latestReportId: null, // number | null — set after test finishes
 	status: 'idle', // 'idle' | 'running' | 'pass' | 'fail'
 	lastRunId: '',
-	lanes: [], // [{ id, name, testCount, status, logs }] multi-runner only
-	currentRun: null // { tag, workers, browser, runners } — set while running
+	lanes: [], // [{ id, name, testCount, status, logs, latestScreenshot }] multi-runner only
+	currentRun: null, // { tag, workers, browser, runners } — set while running
+	latestScreenshot: null // { stepName, data: base64 } for single built-in runner
 });
 
 export const runnerConfig = writable({
@@ -63,7 +64,8 @@ export function triggerRun(id, testRunId, notify = {}, runTitle = null) {
 		status: 'running',
 		lastRunId: runId,
 		lanes: [],
-		currentRun: { tag: runId, workers, browser, runners: selectedRunners, runTitle }
+		currentRun: { tag: runId, workers, browser, runners: selectedRunners, runTitle },
+		latestScreenshot: null
 	});
 	panelExpanded.set(true);
 

package/frontend/src/lib/styles/tokens.css

@@ -48,6 +48,32 @@
 	--radius-sm: 6px;
 	--radius-md: 10px;
 	--radius-lg: 16px;
+	--radius-pill: 100px;
+
+	--white: #ffffff;
+}
+
+@keyframes fadeUp {
+	from {
+		opacity: 0;
+		transform: translateY(6px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@keyframes dotPulse {
+	0%,
+	100% {
+		opacity: 1;
+		transform: scale(1);
+	}
+	50% {
+		opacity: 0.4;
+		transform: scale(0.65);
+	}
 }
 
 /* ── Design tokens (dark) ──────────────────────────────────────────────── */

package/frontend/src/lib/utils/format.js

@@ -64,3 +64,77 @@ export function featureFile(uri) {
 	if (idx !== -1) return normalized.slice(idx + 1);
 	return normalized.split('/').pop();
 }
+
+export function keywordClass(kw) {
+	const k = (kw ?? '').toLowerCase().replace(/:$/, '');
+	if (k === 'given') return 'kw-given';
+	if (k === 'when') return 'kw-when';
+	if (k === 'then') return 'kw-then';
+	return 'kw-and';
+}
+
+export function scenarioTestTag(scenario) {
+	return scenario.tags?.find((tag) => /^@test[\w-]*/i.test(tag)) ?? null;
+}
+
+export function featureSuiteTag(feature) {
+	for (const scenario of feature.scenarios ?? []) {
+		const suiteTag = scenario.tags?.find((tag) => /suite/i.test(tag));
+		if (suiteTag) return suiteTag;
+	}
+	return null;
+}
+
+export function visibleTags(scenario) {
+	const testTag = scenarioTestTag(scenario);
+	if (testTag) return [testTag];
+	return (scenario.tags ?? []).filter((tag) => !/suite/i.test(tag));
+}
+
+const STATUS_RANK = { failed: 3, pending: 2, skipped: 1, passed: 0 };
+
+export function worstStatus(scenarios) {
+	return scenarios.reduce(
+		(s, scenario) =>
+			(STATUS_RANK[scenario.status] ?? 0) > (STATUS_RANK[s] ?? 0) ? scenario.status : s,
+		'passed'
+	);
+}
+
+export function groupedScenarios(scenarios) {
+	const groups = new Map();
+	for (const scenario of scenarios) {
+		const testTag = scenarioTestTag(scenario);
+		const key = testTag ?? `${scenario.keyword}:${scenario.name}`;
+		if (!groups.has(key)) {
+			groups.set(key, {
+				key,
+				name: scenario.name,
+				tags: visibleTags(scenario),
+				scenarios: [],
+				duration: 0,
+				status: scenario.status
+			});
+		}
+		const group = groups.get(key);
+		group.scenarios.push(scenario);
+		group.duration += scenario.duration ?? 0;
+		group.status = worstStatus(group.scenarios);
+	}
+	return Array.from(groups.values());
+}
+
+export function parseRunnerLogs(logs) {
+	if (!logs) return [];
+	if (!/^=== .+ ===/m.test(logs)) return [{ name: 'Logs', content: logs }];
+	const sections = [];
+	for (const chunk of logs.split(/\n\n(?==== )/)) {
+		const m = chunk.match(/^=== (.+?) ===\n?([\s\S]*)/);
+		if (m) sections.push({ name: m[1].trim(), content: m[2].trim() });
+	}
+	return sections;
+}
+
+export function scenarioHasScreenshots(scenario) {
+	return scenario.steps?.some((step) => step.screenshot) ?? false;
+}

package/frontend/src/routes/+page.svelte

@@ -516,7 +516,7 @@
 
 	.run-icon-btn:hover {
 		background: var(--accent);
-		color: #fff;
+		color: var(--white);
 		border-color: var(--accent);
 	}
 
@@ -534,7 +534,7 @@
 		color: var(--accent);
 		background: var(--accent-soft);
 		border: none;
-		border-radius: 100px;
+		border-radius: var(--radius-pill);
 		padding: 0.15rem 0.55rem;
 		cursor: pointer;
 		font-family: 'JetBrains Mono', monospace;
@@ -589,7 +589,7 @@
 		background: var(--warn-soft);
 		color: var(--warn);
 		padding: 0.1rem 0.4rem;
-		border-radius: 100px;
+		border-radius: var(--radius-pill);
 		margin-left: 0.4rem;
 		vertical-align: middle;
 	}