diff --git a/frontend/e2e/history.spec.ts b/frontend/e2e/history.spec.ts
new file mode 100644
index 00000000..8e70b702
--- /dev/null
+++ b/frontend/e2e/history.spec.ts
@@ -0,0 +1,89 @@
+import { test, expect } from '@playwright/test';
+
+/**
+ * Document edit history E2E tests.
+ * Relies on the 'Document creation' and 'Document editing' tests in documents.spec.ts
+ * having run first (they create and edit "E2E Testbrief (überarbeitet)").
+ * Assumes auth setup has run.
+ */
+test.describe('Document history panel', () => {
+	test('history section appears after creating and editing a document', async ({ page }) => {
+		// Find the document edited in the documents.spec.ts editing test
+		await page.goto('/?q=E2E+Testbrief');
+		await page.waitForSelector('[data-hydrated]');
+		const docLink = page.getByRole('link', { name: /E2E Testbrief/ }).first();
+		const href = await docLink.getAttribute('href');
+		await page.goto(href!);
+
+		// History section should be present (collapsed by default)
+		const historyToggle = page.getByRole('button', { name: /Verlauf/i });
+		await expect(historyToggle).toBeVisible();
+
+		// Expand the history section
+		await historyToggle.click();
+
+		// Should show at least two version entries (created + edited)
+		const versionItems = page.locator('[data-testid="history-version"]');
+		await expect(versionItems).toHaveCount(2, { timeout: 5000 });
+
+		await page.screenshot({ path: 'test-results/e2e/history-versions-list.png' });
+	});
+
+	test('diff view highlights changed field after title edit', async ({ page }) => {
+		await page.goto('/?q=E2E+Testbrief');
+		await page.waitForSelector('[data-hydrated]');
+		const docLink = page.getByRole('link', { name: /E2E Testbrief/ }).first();
+		const href = await docLink.getAttribute('href');
+		await page.goto(href!);
+
+		// Expand history
+		const historyToggle = page.getByRole('button', { name: /Verlauf/i });
+		await historyToggle.click();
+
+		// Click the second version (the edit) to see its diff
+		const versionItems = page.locator('[data-testid="history-version"]');
+		await versionItems.nth(1).click();
+
+		// The diff panel should show the "Titel" field as changed
+		const diffPanel = page.locator('[data-testid="history-diff"]');
+		await expect(diffPanel).toBeVisible();
+		await expect(diffPanel.getByText(/Titel/i)).toBeVisible();
+
+		await page.screenshot({ path: 'test-results/e2e/history-diff-title.png' });
+	});
+
+	test('compare mode lets user compare any two versions', async ({ page }) => {
+		await page.goto('/?q=E2E+Testbrief');
+		await page.waitForSelector('[data-hydrated]');
+		const docLink = page.getByRole('link', { name: /E2E Testbrief/ }).first();
+		const href = await docLink.getAttribute('href');
+		await page.goto(href!);
+
+		// Expand history
+		const historyToggle = page.getByRole('button', { name: /Verlauf/i });
+		await historyToggle.click();
+
+		// Switch to compare mode
+		const compareBtn = page.getByRole('button', { name: /Vergleichen/i });
+		await expect(compareBtn).toBeVisible();
+		await compareBtn.click();
+
+		// Two version selects should appear
+		const selectA = page.getByLabel(/Version A/i);
+		const selectB = page.getByLabel(/Version B/i);
+		await expect(selectA).toBeVisible();
+		await expect(selectB).toBeVisible();
+
+		// Apply the comparison
+		await page
+			.getByRole('button', { name: /Vergleichen/i })
+			.last()
+			.click();
+
+		// Diff panel should be visible
+		const diffPanel = page.locator('[data-testid="history-diff"]');
+		await expect(diffPanel).toBeVisible();
+
+		await page.screenshot({ path: 'test-results/e2e/history-compare-mode.png' });
+	});
+});
diff --git a/frontend/src/routes/documents/[id]/+page.svelte b/frontend/src/routes/documents/[id]/+page.svelte
index 1f65532a..facb83a2 100644
--- a/frontend/src/routes/documents/[id]/+page.svelte
+++ b/frontend/src/routes/documents/[id]/+page.svelte
@@ -681,6 +681,7 @@ function versionLabel(v: VersionSummary, index: number): string {
 											<li>
 												<button
 													onclick={() => selectVersion(v.id)}
+													data-testid="history-version"
 													class="w-full py-2 text-left transition hover:bg-brand-sand/30 {selectedVersionId ===
 													v.id
 														? 'border-l-2 border-brand-mint pl-2'
@@ -717,12 +718,16 @@ function versionLabel(v: VersionSummary, index: number): string {
 									<p class="font-sans text-xs text-gray-400">{m.history_loading()}</p>
 								{:else if noDiff}
 									<div
+										data-testid="history-diff"
 										class="rounded-sm border border-brand-sand bg-white p-4 font-serif text-sm text-gray-400 italic"
 									>
 										{m.history_diff_no_changes()}
 									</div>
 								{:else if diffEntries.length > 0}
-									<div class="space-y-4 rounded-sm border border-brand-sand bg-white p-4">
+									<div
+										data-testid="history-diff"
+										class="space-y-4 rounded-sm border border-brand-sand bg-white p-4"
+									>
 										{#each diffEntries as entry (entry.field)}
 											<div>
 												<span