diff --git a/web/src/lib/components/comment/Comment.svelte b/web/src/lib/components/comment/Comment.svelte
index 18c8fa2a7..119e281d1 100644
--- a/web/src/lib/components/comment/Comment.svelte
+++ b/web/src/lib/components/comment/Comment.svelte
@@ -81,7 +81,7 @@
 </script>
 
 {#if deleted}
-	<div class={classes.root()}>This comment was deleted.</div>
+	<div data-testid="deletedCommentNotice" class={classes.root()}>This comment was deleted.</div>
 {:else}
 	<div class={classes.root()}>
 		<div class={classes.avatar()}>
@@ -104,6 +104,7 @@
 				<div class={classes.editor()}>{@render editor()}</div>
 			{:else if bodyHtml}
 				<article
+					data-testid="commentBody"
 					class={classes.markup()}
 					use:enhanceCodeblocks={bodyHtml}
 					use:codeblockToolbars={bodyHtml}
@@ -112,7 +113,7 @@
 					{@html bodyHtml}
 				</article>
 			{:else if body}
-				<article class={classes.plain()}>{body}</article>
+				<article data-testid="commentBody" class={classes.plain()}>{body}</article>
 			{/if}
 			{#if !editor}
 				<Reactions
diff --git a/web/src/lib/components/comment/CommentCard.svelte b/web/src/lib/components/comment/CommentCard.svelte
index e67ed79ee..12d3e6a59 100644
--- a/web/src/lib/components/comment/CommentCard.svelte
+++ b/web/src/lib/components/comment/CommentCard.svelte
@@ -199,7 +199,12 @@
 {/snippet}
 
 <Card padding="none" class="overflow-visible bg-background-subtle dark:bg-background-default">
-	<div class="group overflow-clip rounded-t-md">
+	<div
+		data-testid="commentCard"
+		data-uri={thread.self.uri}
+		data-handle={thread.self.authorHandle}
+		class="group overflow-clip rounded-t-md"
+	>
 		<Comment
 			authorHandle={thread.self.authorHandle}
 			authorDid={thread.self.authorDid}
@@ -221,7 +226,7 @@
 	</div>
 
 	{#if thread.replies.length}
-		<div class="ml-2xl">
+		<div data-testid="replies" class="ml-2xl">
 			{#each thread.replies as reply, i (reply.uri)}
 				{#snippet replyEditor()}
 					{@render commentEditor(reply, thread.self.uri, thread.self.cid)}
diff --git a/web/src/lib/components/comment/CommentEditor.svelte b/web/src/lib/components/comment/CommentEditor.svelte
index 4366def3c..b2a1d05e7 100644
--- a/web/src/lib/components/comment/CommentEditor.svelte
+++ b/web/src/lib/components/comment/CommentEditor.svelte
@@ -71,6 +71,7 @@
 	}: Props = $props();
 
 	const rkey = $derived(uri && rkeyFromUri(uri));
+	const mode = $derived(uri ? "edit" : replyToUri ? "reply" : "new");
 
 	const auth = getAuth();
 	const accounts = $derived(auth?.accounts ?? []);
@@ -158,7 +159,12 @@
 	</Button>
 {/snippet}
 
-<form onsubmit={publish.run} class="flex flex-col gap-xs">
+<form
+	data-testid="commentEditor"
+	data-mode={mode}
+	onsubmit={publish.run}
+	class="flex flex-col gap-xs"
+>
 	<MarkdownEditor
 		name="body"
 		{rows}
diff --git a/web/src/lib/components/import/ConnectAccount.svelte b/web/src/lib/components/import/ConnectAccount.svelte
index 76bf7193b..775777ec8 100644
--- a/web/src/lib/components/import/ConnectAccount.svelte
+++ b/web/src/lib/components/import/ConnectAccount.svelte
@@ -18,6 +18,7 @@
 <div class="flex flex-wrap items-center gap-md">
 	<div class="flex items-center gap-md">
 		<Button
+			data-testid="connectGithub"
 			href={connected ? undefined : (connectHref as `/${string}`)}
 			icon={Github}
 			disabled={connected || pending}
@@ -33,6 +34,7 @@
 			</span>
 		{:else if connected}
 			<span
+				data-testid="githubConnectedStatus"
 				class="flex items-center gap-2xs typography-paragraph-small text-foreground-success"
 			>
 				<Check class="size-4" aria-hidden="true" />Connected
diff --git a/web/src/lib/components/import/MethodPicker.svelte b/web/src/lib/components/import/MethodPicker.svelte
index 4243ef1e1..89febf3c5 100644
--- a/web/src/lib/components/import/MethodPicker.svelte
+++ b/web/src/lib/components/import/MethodPicker.svelte
@@ -33,6 +33,7 @@
 		{@const selected = value === method.value}
 		<button
 			type="button"
+			data-value={method.value}
 			aria-pressed={selected}
 			onclick={() => onSelect(method.value)}
 			class="cursor-pointer rounded-md border border-border-default p-md text-left transition-colors {selected
diff --git a/web/src/lib/components/import/RepoConfig.svelte b/web/src/lib/components/import/RepoConfig.svelte
index 1a9986a7c..06ee7786c 100644
--- a/web/src/lib/components/import/RepoConfig.svelte
+++ b/web/src/lib/components/import/RepoConfig.svelte
@@ -43,6 +43,7 @@
 	<Field label="Name">
 		{#snippet children({ id })}
 			<Input
+				data-testid="repoConfigName"
 				{id}
 				value={name}
 				maxlength={100}
diff --git a/web/src/lib/components/import/RepoRow.svelte b/web/src/lib/components/import/RepoRow.svelte
index 152589acd..206859c28 100644
--- a/web/src/lib/components/import/RepoRow.svelte
+++ b/web/src/lib/components/import/RepoRow.svelte
@@ -96,6 +96,8 @@
 	onclick={onRowClick}
 >
 	<Checkbox
+		data-testid="repoRowCheckbox"
+		data-repo={repo.fullName}
 		class="hit-area-3"
 		checked={selected}
 		onchange={onToggle}
diff --git a/web/src/lib/components/import/StartedBanner.svelte b/web/src/lib/components/import/StartedBanner.svelte
index e461f7498..d01dbf8bc 100644
--- a/web/src/lib/components/import/StartedBanner.svelte
+++ b/web/src/lib/components/import/StartedBanner.svelte
@@ -16,7 +16,9 @@
 	class="flex items-start justify-between gap-sm rounded-md bg-background-inset p-sm typography-paragraph-small"
 >
 	<div class="flex flex-col gap-3xs">
-		<p>Repository migration has successfully started. You can now close this page.</p>
+		<p data-testid="migrationStartedText">
+			Repository migration has successfully started. You can now close this page.
+		</p>
 		<p class="text-foreground-muted">{note}</p>
 	</div>
 	<button type="button" class="shrink-0 cursor-pointer" aria-label="Dismiss" onclick={onDismiss}>
diff --git a/web/src/lib/components/import/UrlRepoImporter.svelte b/web/src/lib/components/import/UrlRepoImporter.svelte
index af44c4673..f80b3a923 100644
--- a/web/src/lib/components/import/UrlRepoImporter.svelte
+++ b/web/src/lib/components/import/UrlRepoImporter.svelte
@@ -306,8 +306,10 @@
 <p class="mt-xs typography-paragraph-small text-foreground-muted">
 	Use a publicly reachable HTTPS clone URL without credentials.
 	{#if fetched && defaultBranch}
-		Default branch on the remote: <span class="text-foreground font-medium"
-			>{defaultBranch}</span
+		Default branch on the remote: <span
+			data-testid="remoteBranchNotice"
+			data-branch={defaultBranch}
+			class="text-foreground font-medium">{defaultBranch}</span
 		>
 	{/if}
 </p>
diff --git a/web/src/lib/components/notifications/NotificationBell.svelte b/web/src/lib/components/notifications/NotificationBell.svelte
index 6f424d98b..bce07059a 100644
--- a/web/src/lib/components/notifications/NotificationBell.svelte
+++ b/web/src/lib/components/notifications/NotificationBell.svelte
@@ -72,6 +72,8 @@
 {#snippet count()}
 	{#if shared.unread > 0}
 		<span
+			data-testid="unreadCount"
+			data-count={shared.unread}
 			class="pointer-events-none absolute top-0.5 right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-background-info-emphasis px-2xs typography-paragraph-mini text-foreground-on-emphasis"
 			aria-hidden="true"
 		>
diff --git a/web/src/lib/components/notifications/NotificationItem.svelte b/web/src/lib/components/notifications/NotificationItem.svelte
index 0e0e83ff6..c6f9f0b6f 100644
--- a/web/src/lib/components/notifications/NotificationItem.svelte
+++ b/web/src/lib/components/notifications/NotificationItem.svelte
@@ -70,7 +70,12 @@
 	};
 </script>
 
-<div data-notification class={style.root()}>
+<div
+	data-testid="notificationRow"
+	data-uri={notification.uri}
+	data-notification
+	class={style.root()}
+>
 	<Icon class={style.icon({ class: notificationTone(notification.type) })} aria-hidden="true" />
 
 	<div class={style.header()}>
@@ -85,7 +90,7 @@
 		/>
 		<!-- the href embeds an at:// subject uri whose // resolve() would collapse -->
 		<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
-		<a {href} class={style.phrase()} onclick={open}>
+		<a data-testid="notificationPhraseLink" {href} class={style.phrase()} onclick={open}>
 			{notificationPhrase(notification)}
 			{#if target}
 				<span>{target}</span>
diff --git a/web/src/lib/components/profile/FollowButton.svelte b/web/src/lib/components/profile/FollowButton.svelte
index 97f7db768..b18e08d44 100644
--- a/web/src/lib/components/profile/FollowButton.svelte
+++ b/web/src/lib/components/profile/FollowButton.svelte
@@ -96,6 +96,8 @@
 {#if !isSelf}
 	{#if !signedIn}
 		<Button
+			data-testid="follow"
+			data-following={following}
 			href={resolve("/login")}
 			variant="default"
 			class="w-full gap-xs"
@@ -106,6 +108,8 @@
 	{:else}
 		<Tooltip content="Something went wrong. Try again." disabled={!failed} class="w-full">
 			<Button
+				data-testid="follow"
+				data-following={following}
 				variant={failed ? "danger" : "default"}
 				class="w-full min-w-28 gap-xs"
 				disabled={!relation.known || relation.loading}
diff --git a/web/src/lib/components/profile/ProfileBio.svelte b/web/src/lib/components/profile/ProfileBio.svelte
index deb9b1d7f..96e00881d 100644
--- a/web/src/lib/components/profile/ProfileBio.svelte
+++ b/web/src/lib/components/profile/ProfileBio.svelte
@@ -13,7 +13,7 @@
 	const segments = $derived(bioSegments(text));
 </script>
 
-<div class={className}>
+<div data-testid="profileBio" class={className}>
 	{#each segments as segment, i (i)}
 		{#if segment.kind === "mention"}
 			<ProfilePopover identifier={segment.handle}>
diff --git a/web/src/lib/components/profile/ProfileEditForm.svelte b/web/src/lib/components/profile/ProfileEditForm.svelte
index 860d56051..068360b87 100644
--- a/web/src/lib/components/profile/ProfileEditForm.svelte
+++ b/web/src/lib/components/profile/ProfileEditForm.svelte
@@ -78,6 +78,8 @@
 		<span>Social links</span>
 		{#each links as link, index (index)}
 			<Input
+				data-testid="socialLink"
+				data-index={index}
 				iconLeft={Link}
 				placeholder={`Social link ${index + 1}`}
 				bind:value={link.value}
diff --git a/web/src/lib/components/profile/ProfileSocialLinks.svelte b/web/src/lib/components/profile/ProfileSocialLinks.svelte
index 916bb128f..512ffe31b 100644
--- a/web/src/lib/components/profile/ProfileSocialLinks.svelte
+++ b/web/src/lib/components/profile/ProfileSocialLinks.svelte
@@ -47,6 +47,8 @@
 	<div class="flex items-center gap-xs px-xs py-2xs">
 		<UsersRound class="size-3.5 shrink-0" aria-hidden="true" />
 		<Link
+			data-testid="followersCount"
+			data-count={followers}
 			href={resolve((followersHref ?? `/${identity.handle}?tab=followers`) as "/")}
 			variant="inherit"
 			size="small"
@@ -56,6 +58,8 @@
 		{#if following !== undefined}
 			<span class="text-foreground-muted">·</span>
 			<Link
+				data-testid="followingCount"
+				data-count={following}
 				href={resolve((followingHref ?? `/${identity.handle}?tab=following`) as "/")}
 				variant="inherit"
 				size="small"
diff --git a/web/src/lib/components/profile/UserProfileChrome.svelte b/web/src/lib/components/profile/UserProfileChrome.svelte
index 0693f16f9..8342d14c9 100644
--- a/web/src/lib/components/profile/UserProfileChrome.svelte
+++ b/web/src/lib/components/profile/UserProfileChrome.svelte
@@ -114,6 +114,8 @@
 				{identity.handle}
 				{#if shown?.pronouns}
 					<span
+						data-testid="profilePronouns"
+						data-pronouns={shown.pronouns}
 						class="ml-xs typography-paragraph-regular font-normal text-foreground-muted"
 					>
 						{shown.pronouns}
diff --git a/web/src/lib/components/profile/VouchButton.svelte b/web/src/lib/components/profile/VouchButton.svelte
index 03e7ffbfa..328baf87f 100644
--- a/web/src/lib/components/profile/VouchButton.svelte
+++ b/web/src/lib/components/profile/VouchButton.svelte
@@ -171,6 +171,8 @@
 
 {#if !isSelf}
 	<Button
+		data-testid="vouchTrigger"
+		data-standing={current?.kind ?? "none"}
 		variant={trigger.variant}
 		class="w-full gap-xs {trigger.colorClass}"
 		icon={trigger.icon}
@@ -180,7 +182,7 @@
 		<span class={hideLabelOnMobile ? "max-sm:hidden" : undefined}>{trigger.text}</span>
 	</Button>
 
-	<Modal bind:open title="Vouch for {label}" titleIcon={trigger.icon}>
+	<Modal bind:open testid="vouch" title="Vouch for {label}" titleIcon={trigger.icon}>
 		<p class="text-foreground-muted">
 			{#if current}
 				You {current.kind === "vouch" ? "vouched for" : "denounced"}
@@ -212,6 +214,7 @@
 				{@const active = choice === option.value}
 				<button
 					type="button"
+					data-value={option.value}
 					onclick={() => (choice = option.value)}
 					disabled={save.loading}
 					aria-pressed={active}
diff --git a/web/src/lib/components/reaction/Reaction.svelte b/web/src/lib/components/reaction/Reaction.svelte
index 81e00f85b..133bb3414 100644
--- a/web/src/lib/components/reaction/Reaction.svelte
+++ b/web/src/lib/components/reaction/Reaction.svelte
@@ -50,6 +50,8 @@
 </script>
 
 <Button
+	data-testid="reactionChip"
+	data-kind={reaction.kind}
 	size="small"
 	{title}
 	disabled={pending}
diff --git a/web/src/lib/components/reaction/ReactionPicker.svelte b/web/src/lib/components/reaction/ReactionPicker.svelte
index aeea81fd5..91a4f46b4 100644
--- a/web/src/lib/components/reaction/ReactionPicker.svelte
+++ b/web/src/lib/components/reaction/ReactionPicker.svelte
@@ -100,6 +100,7 @@
 	<div class="grid grid-cols-4">
 		{#each ORDERED_REACTION_KINDS as kind (kind)}
 			<Button
+				data-kind={kind}
 				variant="ghost"
 				class="[--btn-radius:0.25rem]"
 				aria-label={`React with ${kind}`}
diff --git a/web/src/lib/components/repo/BlobView.svelte b/web/src/lib/components/repo/BlobView.svelte
index adb3c33fc..0a6f7e755 100644
--- a/web/src/lib/components/repo/BlobView.svelte
+++ b/web/src/lib/components/repo/BlobView.svelte
@@ -186,7 +186,11 @@
 			</video>
 		</div>
 	{:else if blob.kind === "markup" && view === "rendered" && blob.renderedHtml !== null}
-		<div class="markup overflow-x-auto" use:enhanceCodeblocks={blob.renderedHtml}>
+		<div
+			data-testid="renderedMarkdownBody"
+			class="markup overflow-x-auto"
+			use:enhanceCodeblocks={blob.renderedHtml}
+		>
 			<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
 			{@html blob.renderedHtml}
 		</div>
diff --git a/web/src/lib/components/repo/CloneDropdown.svelte b/web/src/lib/components/repo/CloneDropdown.svelte
index 25e879e2d..5ef0942c4 100644
--- a/web/src/lib/components/repo/CloneDropdown.svelte
+++ b/web/src/lib/components/repo/CloneDropdown.svelte
@@ -83,6 +83,8 @@
 				class="flex items-stretch divide-x divide-border-default rounded-md border border-border-default"
 			>
 				<span
+					data-testid="cloneUrlValue"
+					data-label={entry.label}
 					class="flex-1 overflow-x-auto bg-background-inset px-sm py-xs typography-monospace-small whitespace-nowrap text-foreground-default select-all"
 					>{value}</span
 				>
@@ -104,6 +106,8 @@
 	<div class="mt-md flex gap-xs">
 		{#each [{ format: "tar.gz" }, { format: "zip" }] as const as archive (archive.format)}
 			<a
+				data-testid="downloadArchiveLink"
+				data-format={archive.format}
 				href={archiveUrl(archive.format)}
 				rel="external noopener noreferrer"
 				class="flex flex-1 items-center justify-center gap-xs rounded-md border border-border-default px-xs py-1.5 typography-paragraph-small text-foreground-default no-underline hover:bg-background-subtle hover:no-underline"
diff --git a/web/src/lib/components/repo/DiffFileHeader.svelte b/web/src/lib/components/repo/DiffFileHeader.svelte
index 8b756f632..086b8045a 100644
--- a/web/src/lib/components/repo/DiffFileHeader.svelte
+++ b/web/src/lib/components/repo/DiffFileHeader.svelte
@@ -32,7 +32,11 @@
 
 {#snippet path(name: string)}
 	{@const cut = name.lastIndexOf("/")}
-	<span class="flex min-w-0 flex-1 items-center overflow-hidden">
+	<span
+		data-testid="diffFileName"
+		data-path={name}
+		class="flex min-w-0 flex-1 items-center overflow-hidden"
+	>
 		<span class="min-w-0 truncate">{cut === -1 ? name : name.slice(0, cut)}</span>
 		{#if cut !== -1}
 			<span class="shrink-0">{name.slice(cut)}</span>
diff --git a/web/src/lib/components/repo/DiffView.svelte b/web/src/lib/components/repo/DiffView.svelte
index 212cdecca..3db4abb0c 100644
--- a/web/src/lib/components/repo/DiffView.svelte
+++ b/web/src/lib/components/repo/DiffView.svelte
@@ -241,7 +241,11 @@
 						<div class="flex items-center gap-xs">
 							{#if diff}
 								<DiffStatPill stat={diff.stat} />
-								<span class="text-foreground-muted">
+								<span
+									data-testid="changedFilesCount"
+									data-count={diff.files.length}
+									class="text-foreground-muted"
+								>
 									{diff.files.length} changed {plural(
 										diff.files.length,
 										"file",
@@ -291,7 +295,11 @@
 						{/if}
 						{#if diff}
 							<DiffStatPill stat={diff.stat} size="small" />
-							<span class="typography-paragraph-small text-foreground-muted">
+							<span
+								data-testid="changedFilesCount"
+								data-count={diff.files.length}
+								class="typography-paragraph-small text-foreground-muted"
+							>
 								{diff.files.length} changed {plural(
 									diff.files.length,
 									"file",
diff --git a/web/src/lib/components/repo/EmptyRepo.svelte b/web/src/lib/components/repo/EmptyRepo.svelte
index af3e01a72..9ba74094c 100644
--- a/web/src/lib/components/repo/EmptyRepo.svelte
+++ b/web/src/lib/components/repo/EmptyRepo.svelte
@@ -80,7 +80,7 @@
 			<div
 				class="flex w-fit max-w-full min-w-0 flex-col gap-lg px-md py-xl typography-paragraph-small"
 			>
-				<p>This is an empty repository.</p>
+				<p data-testid="emptyRepoNote">This is an empty repository.</p>
 				<div class="flex flex-col gap-xs">
 					<p class="text-foreground-subtle">
 						…create a new repository on the command line
@@ -112,7 +112,7 @@
 			<div
 				class="flex w-fit max-w-full min-w-0 flex-col gap-md px-md py-xl typography-paragraph-small"
 			>
-				<p>This is an empty repository. To get started:</p>
+				<p data-testid="emptyRepoNote">This is an empty repository. To get started:</p>
 				<p>
 					{@render bullet(1)}First, generate a new
 					<a
@@ -137,5 +137,7 @@
 		</div>
 	{/if}
 {:else}
-	<p class="py-xl text-center text-foreground-subtle">This is an empty repository.</p>
+	<p data-testid="emptyRepoNote" class="py-xl text-center text-foreground-subtle">
+		This is an empty repository.
+	</p>
 {/if}
diff --git a/web/src/lib/components/repo/PierreFile.svelte b/web/src/lib/components/repo/PierreFile.svelte
index 6048acf8b..fdcd0940e 100644
--- a/web/src/lib/components/repo/PierreFile.svelte
+++ b/web/src/lib/components/repo/PierreFile.svelte
@@ -84,7 +84,12 @@
 </script>
 
 <div bind:this={wrapper} class="relative">
-	<diffs-container bind:this={element} class="diffs-container">
+	<diffs-container
+		data-testid="fileContents"
+		data-filename={name}
+		bind:this={element}
+		class="diffs-container"
+	>
 		{#if prerenderedHTML}
 			<!-- eslint-disable-next-line svelte/no-at-html-tags -- pierre's own renderer output, token text is escaped by its hast builder -->
 			<template shadowrootmode="open">{@html prerenderedHTML}</template>
diff --git a/web/src/lib/components/repo/Readme.svelte b/web/src/lib/components/repo/Readme.svelte
index 94f758e10..109f6c206 100644
--- a/web/src/lib/components/repo/Readme.svelte
+++ b/web/src/lib/components/repo/Readme.svelte
@@ -20,7 +20,11 @@
 		</span>
 	</div>
 	{#if html}
-		<div class="markup overflow-x-auto px-xl py-md" use:enhanceCodeblocks={html}>
+		<div
+			data-testid="renderedMarkdownBody"
+			class="markup overflow-x-auto px-xl py-md"
+			use:enhanceCodeblocks={html}
+		>
 			<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
 			{@html html}
 		</div>
diff --git a/web/src/lib/components/repo/RepoHeader.svelte b/web/src/lib/components/repo/RepoHeader.svelte
index 24861f813..dafa352bd 100644
--- a/web/src/lib/components/repo/RepoHeader.svelte
+++ b/web/src/lib/components/repo/RepoHeader.svelte
@@ -91,7 +91,7 @@
 			class="flex flex-wrap items-center gap-x-md gap-y-2xs typography-paragraph-small text-foreground-muted"
 		>
 			{#if repo.description}
-				<span>{repo.description}</span>
+				<span data-testid="repoDescription">{repo.description}</span>
 			{/if}
 
 			<Pending>
@@ -99,7 +99,7 @@
 				{#if resolvedSource}
 					<span class="flex items-center gap-2xs">
 						<GitFork class="size-3.5 shrink-0" aria-hidden="true" />
-						<span>forked from</span>
+						<span data-testid="forkedFromPrefix">forked from</span>
 						<a
 							href={resolve(
 								`/${resolvedSource.ownerHandle}/${resolvedSource.name}` as "/"
diff --git a/web/src/lib/components/repo/ServicePicker.svelte b/web/src/lib/components/repo/ServicePicker.svelte
index 3d57112e2..301794565 100644
--- a/web/src/lib/components/repo/ServicePicker.svelte
+++ b/web/src/lib/components/repo/ServicePicker.svelte
@@ -39,7 +39,7 @@
 <div class="flex flex-col gap-2xs">
 	{#if none !== undefined}
 		<div class="flex min-h-8 items-center">
-			<Radio value="" bind:group={choice} name={kind}>{none}</Radio>
+			<Radio value="" data-value="" bind:group={choice} name={kind}>{none}</Radio>
 		</div>
 	{/if}
 	{#await hosts}
@@ -49,7 +49,7 @@
 	{:then list}
 		{#each list as host (host)}
 			<div class="flex min-h-8 items-center gap-xs">
-				<Radio value={host} bind:group={choice} name={kind}>
+				<Radio value={host} data-value={host} bind:group={choice} name={kind}>
 					{#if host === official}
 						Hosted by Tangled. <span class="sr-only">({host})</span>
 					{:else}
@@ -71,7 +71,13 @@
 	{/await}
 
 	<div class="flex min-h-8 items-center gap-xs">
-		<Radio value={OTHER_SERVICE} bind:group={choice} name={kind} aria-label="Another {kind}" />
+		<Radio
+			value={OTHER_SERVICE}
+			data-value={OTHER_SERVICE}
+			bind:group={choice}
+			name={kind}
+			aria-label="Another {kind}"
+		/>
 		<Input
 			bind:value={address}
 			placeholder="{kind}.example.com"
diff --git a/web/src/lib/components/repo/StarButton.svelte b/web/src/lib/components/repo/StarButton.svelte
index b88c27ee0..e0b4b67d3 100644
--- a/web/src/lib/components/repo/StarButton.svelte
+++ b/web/src/lib/components/repo/StarButton.svelte
@@ -166,6 +166,8 @@
 	<Tooltip content="Something went wrong. Try again." disabled={!failed} class="w-full">
 		<ButtonGroup class="w-full">
 			<Button
+				data-testid="star"
+				data-starred={starred}
 				variant={failed ? "danger" : "default"}
 				href={signedIn ? undefined : loginHref}
 				disabled={signedIn && (!relation.known || !subjectKey)}
diff --git a/web/src/lib/components/repo/SubscribeButton.svelte b/web/src/lib/components/repo/SubscribeButton.svelte
index 3e3162af5..45484627e 100644
--- a/web/src/lib/components/repo/SubscribeButton.svelte
+++ b/web/src/lib/components/repo/SubscribeButton.svelte
@@ -115,6 +115,8 @@
 <Tooltip content={error ?? ""} disabled={!error} class={className}>
 	<ButtonGroup class="w-full">
 		<Button
+			data-testid="watch"
+			data-subscribed={subscribed}
 			variant={error ? "danger" : "default"}
 			href={signedIn ? undefined : loginHref}
 			class="flex-1 max-sm:px-xs! sm:min-w-24"
diff --git a/web/src/lib/components/repo/TagCard.svelte b/web/src/lib/components/repo/TagCard.svelte
index abc2f2de8..77073f1de 100644
--- a/web/src/lib/components/repo/TagCard.svelte
+++ b/web/src/lib/components/repo/TagCard.svelte
@@ -22,7 +22,11 @@
 	const messageParts = $derived(tag.message?.split("\n\n") ?? []);
 </script>
 
-<div class="flex flex-col md:grid md:grid-cols-12 md:items-start">
+<div
+	data-testid="tagCard"
+	data-name={tag.name}
+	class="flex flex-col md:grid md:grid-cols-12 md:items-start"
+>
 	<div
 		class="w-full border-b border-border-default md:col-span-2 md:h-full md:border-r md:border-b-0"
 	>
@@ -80,7 +84,9 @@
 
 	<div class="px-xs py-sm md:col-span-10 md:py-none md:pb-xl">
 		{#if messageParts.length > 0}
-			<p class="typography-paragraph-large font-bold">{messageParts[0]}</p>
+			<p data-testid="tagMessageTitle" class="typography-paragraph-large font-bold">
+				{messageParts[0]}
+			</p>
 			{#if messageParts.length > 1}
 				<p class="cursor-text py-xs whitespace-pre-wrap">{messageParts[1]}</p>
 			{/if}
diff --git a/web/src/lib/components/repo/TopicList.svelte b/web/src/lib/components/repo/TopicList.svelte
index f4946f8f0..4e267a537 100644
--- a/web/src/lib/components/repo/TopicList.svelte
+++ b/web/src/lib/components/repo/TopicList.svelte
@@ -62,7 +62,7 @@
 
 		<div class="flex flex-wrap items-center gap-2xs">
 			{#each topics.slice(0, visibleCount) as topic (topic)}
-				<Tag color="gray">{topic}</Tag>
+				<Tag data-testid="topicChip" data-topic={topic} color="gray">{topic}</Tag>
 			{/each}
 			{#if hiddenCount > 0}
 				<details bind:open={expanded} class="contents">
@@ -71,7 +71,9 @@
 					>
 					<div class="flex basis-full flex-wrap items-center gap-2xs">
 						{#each topics.slice(visibleCount) as topic (topic)}
-							<Tag color="gray">{topic}</Tag>
+							<Tag data-testid="topicChip" data-topic={topic} color="gray"
+								>{topic}</Tag
+							>
 						{/each}
 					</div>
 				</details>
diff --git a/web/src/lib/components/repo/issues/IssueThreadView.svelte b/web/src/lib/components/repo/issues/IssueThreadView.svelte
index aee835ae0..eaa4f5ac1 100644
--- a/web/src/lib/components/repo/issues/IssueThreadView.svelte
+++ b/web/src/lib/components/repo/issues/IssueThreadView.svelte
@@ -275,11 +275,13 @@
 							disabled={changeState.loading}
 							hideLabelOnMobile
 							onclick={requestStateChange}
+							data-state={issue.state}
 						>
 							{issue.state === "open" ? "Close issue" : "Reopen issue"}
 						</Button>
 						{#if changeState.error}
 							<span
+								data-testid="stateChangeError"
 								role="status"
 								class="typography-paragraph-small text-foreground-danger"
 								>{changeState.error}</span
@@ -292,6 +294,8 @@
 							disabled={subLoading || subToggling}
 							hideLabelOnMobile
 							onclick={toggleSubscription}
+							data-subscribed={subscribed}
+							data-pending={subToggling}
 						>
 							{#if subToggling}
 								{subscribed ? "Unsubscribing..." : "Subscribing..."}
diff --git a/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte b/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte
index 360df5c3a..924159b0c 100644
--- a/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte
@@ -152,7 +152,11 @@
 				<span class={classes.row()}>
 					<span class={classes.name()}>
 						<PipelineStatusIcon status={workflow.status} colored />
-						<span class={classes.label()}>{workflow.name}</span>
+						<span
+							data-testid="workflowName"
+							data-name={workflow.name}
+							class={classes.label()}>{workflow.name}</span
+						>
 					</span>
 					<span class={classes.outcome()}>
 						{workflow.duration > 0
diff --git a/web/src/lib/components/repo/pulls/PullCommitRow.svelte b/web/src/lib/components/repo/pulls/PullCommitRow.svelte
index bea1a86ec..c0b96b85b 100644
--- a/web/src/lib/components/repo/pulls/PullCommitRow.svelte
+++ b/web/src/lib/components/repo/pulls/PullCommitRow.svelte
@@ -66,6 +66,8 @@
 >
 	{#if onclick}
 		<button
+			data-testid="commitRow"
+			data-hash={commit.hash}
 			type="button"
 			class="absolute inset-x-0 top-0 h-10 cursor-pointer"
 			aria-label="Show changes in {commit.shortHash}"
diff --git a/web/src/lib/components/repo/pulls/PullDiscussion.svelte b/web/src/lib/components/repo/pulls/PullDiscussion.svelte
index 1b7211e17..886f318fb 100644
--- a/web/src/lib/components/repo/pulls/PullDiscussion.svelte
+++ b/web/src/lib/components/repo/pulls/PullDiscussion.svelte
@@ -57,13 +57,17 @@
 			{#if group.version && group.version > 0}
 				<Separator variant="line" />
 			{/if}
-			<div class="space-y-xs">
+			<div data-testid="roundGroup" data-version={group.version} class="space-y-xs">
 				{#if group.version !== undefined}
 					{@const isActive = group.version === currentVersion}
 					{@const version = versions[group.version]}
 					<div class="flex h-6 items-center justify-between px-xs">
 						<div class="flex items-center gap-xs">
-							<span class:text-foreground-muted={!isActive}>v{group.version}</span>
+							<span
+								data-testid="roundLabel"
+								data-version={group.version}
+								class:text-foreground-muted={!isActive}>v{group.version}</span
+							>
 							<TimeAgo class="text-foreground-subtle" value={version.createdAt} />
 						</div>
 						{#if pipelineStatuses}
diff --git a/web/src/lib/components/repo/pulls/PullReviewComment.svelte b/web/src/lib/components/repo/pulls/PullReviewComment.svelte
index 67f56c2d2..6a6308f72 100644
--- a/web/src/lib/components/repo/pulls/PullReviewComment.svelte
+++ b/web/src/lib/components/repo/pulls/PullReviewComment.svelte
@@ -106,6 +106,8 @@
 		{:else}
 			{#if comment.bodyHtml}
 				<article
+					data-testid="reviewCommentBody"
+					data-rkey={comment.rkey}
 					class="markup mt-2xs {active ? '' : 'text-foreground-muted'}"
 					use:enhanceCodeblocks={comment.bodyHtml}
 					use:codeblockToolbars={comment.bodyHtml}
@@ -114,7 +116,11 @@
 					{@html comment.bodyHtml}
 				</article>
 			{:else if comment.body}
-				<article class="mt-2xs whitespace-pre-wrap">
+				<article
+					data-testid="reviewCommentBody"
+					data-rkey={comment.rkey}
+					class="mt-2xs whitespace-pre-wrap"
+				>
 					{comment.body}
 				</article>
 			{/if}
diff --git a/web/src/lib/components/repo/pulls/PullReviewCommentForm.svelte b/web/src/lib/components/repo/pulls/PullReviewCommentForm.svelte
index 87acb5670..a35b50f0f 100644
--- a/web/src/lib/components/repo/pulls/PullReviewCommentForm.svelte
+++ b/web/src/lib/components/repo/pulls/PullReviewCommentForm.svelte
@@ -116,6 +116,7 @@
 {#snippet composer()}
 	<div class={composerClasses.container()}>
 		<Textarea
+			data-testid="reviewComment"
 			bind:value
 			bind:element={field}
 			{placeholder}
diff --git a/web/src/lib/components/repo/tickets/Ticket.svelte b/web/src/lib/components/repo/tickets/Ticket.svelte
index 8ce797cb7..15b65d572 100644
--- a/web/src/lib/components/repo/tickets/Ticket.svelte
+++ b/web/src/lib/components/repo/tickets/Ticket.svelte
@@ -106,7 +106,9 @@
 <div class="flex flex-col">
 	<header class="flex flex-wrap items-center gap-xs">
 		<h1 class="flex-1 typography-paragraph-large">
-			<span class="font-medium">{editing ? "Editing" : ticket.title}</span>
+			<span data-testid="ticketTitle" class="font-medium"
+				>{editing ? "Editing" : ticket.title}</span
+			>
 			<span class="typography-monospace-large text-foreground-muted">#{ticket.rkey}</span>
 		</h1>
 		<div class="ml-auto flex items-center gap-2xs self-start">
diff --git a/web/src/lib/components/repo/tickets/TicketBody.svelte b/web/src/lib/components/repo/tickets/TicketBody.svelte
index aeae0eb9f..352d8d074 100644
--- a/web/src/lib/components/repo/tickets/TicketBody.svelte
+++ b/web/src/lib/components/repo/tickets/TicketBody.svelte
@@ -13,10 +13,17 @@
 </script>
 
 {#if bodyHtml}
-	<article class="markup" use:enhanceCodeblocks={bodyHtml} use:codeblockToolbars={bodyHtml}>
+	<article
+		data-testid="ticketBody"
+		class="markup"
+		use:enhanceCodeblocks={bodyHtml}
+		use:codeblockToolbars={bodyHtml}
+	>
 		<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
 		{@html bodyHtml}
 	</article>
 {:else if body}
-	<article class="whitespace-pre-wrap text-foreground-default">{body}</article>
+	<article data-testid="ticketBody" class="whitespace-pre-wrap text-foreground-default">
+		{body}
+	</article>
 {/if}
diff --git a/web/src/lib/components/repo/tickets/TicketCard.svelte b/web/src/lib/components/repo/tickets/TicketCard.svelte
index 43e9adb3c..a086dac98 100644
--- a/web/src/lib/components/repo/tickets/TicketCard.svelte
+++ b/web/src/lib/components/repo/tickets/TicketCard.svelte
@@ -24,6 +24,6 @@
 	}: Props = $props();
 </script>
 
-<Card {rounded} {border} {background}>
+<Card data-testid="ticketRow" data-rkey={ticket.rkey} {rounded} {border} {background}>
 	<TicketCardContent {ownerHandle} {repoName} {ticket} {isPull} />
 </Card>
diff --git a/web/src/lib/components/repo/tickets/TicketCardContent.svelte b/web/src/lib/components/repo/tickets/TicketCardContent.svelte
index ae28e79f1..60bb9c441 100644
--- a/web/src/lib/components/repo/tickets/TicketCardContent.svelte
+++ b/web/src/lib/components/repo/tickets/TicketCardContent.svelte
@@ -37,7 +37,11 @@
 >
 	{#snippet extraInfo()}
 		<Separator variant="dot" />
-		<span class="text-foreground-muted">
+		<span
+			data-testid="commentCount"
+			data-count={ticket.commentCount}
+			class="text-foreground-muted"
+		>
 			{pluralize(ticket.commentCount, "comment", "comments")}
 		</span>
 	{/snippet}
diff --git a/web/src/lib/components/repo/tickets/TicketInfoBar.svelte b/web/src/lib/components/repo/tickets/TicketInfoBar.svelte
index c6c14efd7..b9ae7a567 100644
--- a/web/src/lib/components/repo/tickets/TicketInfoBar.svelte
+++ b/web/src/lib/components/repo/tickets/TicketInfoBar.svelte
@@ -62,9 +62,11 @@
 
 {#snippet branch(name: string)}
 	{#if targetBranchHref}
-		<Link href={targetBranchHref} variant="inherit"><Tag>{name}</Tag></Link>
+		<Link href={targetBranchHref} variant="inherit"
+			><Tag data-testid="targetBranchTag" data-branch={name}>{name}</Tag></Link
+		>
 	{:else}
-		<Tag>{name}</Tag>
+		<Tag data-testid="targetBranchTag" data-branch={name}>{name}</Tag>
 	{/if}
 {/snippet}
 
@@ -99,7 +101,11 @@
 
 	{#if assignee && !assignedToAuthor}
 		<Separator variant="dot" class="max-sm:hidden" />
-		<span class="flex flex-wrap items-center gap-1.5">
+		<span
+			data-testid="assignee"
+			data-handle={assignee.handle}
+			class="flex flex-wrap items-center gap-1.5"
+		>
 			<span class="whitespace-nowrap">assigned to</span>
 			{@render person(assignee)}
 		</span>
diff --git a/web/src/lib/components/repo/tickets/TicketStatePill.svelte b/web/src/lib/components/repo/tickets/TicketStatePill.svelte
index 8c0332735..825867100 100644
--- a/web/src/lib/components/repo/tickets/TicketStatePill.svelte
+++ b/web/src/lib/components/repo/tickets/TicketStatePill.svelte
@@ -72,7 +72,7 @@
 	const style = $derived(statePill({ state, size }));
 </script>
 
-<span class={style.base({ class: className })}>
+<span data-testid="ticketStatePill" data-state={state} class={style.base({ class: className })}>
 	<Icon class={style.icon()} aria-hidden="true" />
 	<span>{label}</span>
 </span>
diff --git a/web/src/lib/components/settings/AvatarForm.svelte b/web/src/lib/components/settings/AvatarForm.svelte
index 12561898a..65e2bc10e 100644
--- a/web/src/lib/components/settings/AvatarForm.svelte
+++ b/web/src/lib/components/settings/AvatarForm.svelte
@@ -59,6 +59,7 @@
 					{file ? file.name : "No file selected."}
 				</span>
 				<input
+					data-testid="avatarFileInput"
 					bind:this={input}
 					type="file"
 					accept="image/png,image/jpeg"
@@ -84,6 +85,7 @@
 		{/snippet}
 		<Button href={resolve(backHref as "/")} icon={X}>Cancel</Button>
 		<Button
+			data-testid="uploadAvatar"
 			variant="primary"
 			icon={Upload}
 			disabled={!file || save.loading}
diff --git a/web/src/lib/components/settings/DrillDown.svelte b/web/src/lib/components/settings/DrillDown.svelte
index 153614828..d89651441 100644
--- a/web/src/lib/components/settings/DrillDown.svelte
+++ b/web/src/lib/components/settings/DrillDown.svelte
@@ -29,9 +29,16 @@
 
 <div class="flex w-full flex-col gap-md">
 	<div class="flex flex-col gap-2xs">
-		<h1 class="typography-paragraph-large text-foreground-default">{title}</h1>
+		<h1 data-testid="drillDownTitle" class="typography-paragraph-large text-foreground-default">
+			{title}
+		</h1>
 		{#each lines as line (line)}
-			<p class="typography-paragraph-regular text-foreground-muted">{line}</p>
+			<p
+				data-testid="drillDownDescription"
+				class="typography-paragraph-regular text-foreground-muted"
+			>
+				{line}
+			</p>
 		{/each}
 	</div>
 	{@render children()}
diff --git a/web/src/lib/components/settings/ProfileSettingsForm.svelte b/web/src/lib/components/settings/ProfileSettingsForm.svelte
index e4ebb613e..2874fdfbf 100644
--- a/web/src/lib/components/settings/ProfileSettingsForm.svelte
+++ b/web/src/lib/components/settings/ProfileSettingsForm.svelte
@@ -110,6 +110,8 @@
 			<div class="flex w-full flex-col gap-xs sm:w-80">
 				{#each form.links.keys() as i (i)}
 					<Input
+						data-testid="formLink"
+						data-index={i}
 						bind:value={form.links[i]}
 						label="Link {i + 1}"
 						placeholder="https://example.com"
diff --git a/web/src/lib/components/settings/RepoGeneralForm.svelte b/web/src/lib/components/settings/RepoGeneralForm.svelte
index 94a32fd91..6041cc723 100644
--- a/web/src/lib/components/settings/RepoGeneralForm.svelte
+++ b/web/src/lib/components/settings/RepoGeneralForm.svelte
@@ -206,6 +206,7 @@
 							{#each labels as item (item.uri)}
 								<SettingsRow title={item.value.name}>
 									<Button
+										data-name={item.value.name}
 										variant="ghost"
 										size="small"
 										icon={Trash}
@@ -224,7 +225,7 @@
 
 		<Separator />
 
-		<SettingsSection title="Danger zone" headingGap="4">
+		<SettingsSection name="danger" title="Danger zone" headingGap="4">
 			<SettingsRow title="Rename">
 				<Button icon={Pencil} href={path(`${base}/rename`)}>Rename repository</Button>
 			</SettingsRow>
diff --git a/web/src/lib/components/settings/SettingsBlock.svelte b/web/src/lib/components/settings/SettingsBlock.svelte
index aede5f7eb..64adeead4 100644
--- a/web/src/lib/components/settings/SettingsBlock.svelte
+++ b/web/src/lib/components/settings/SettingsBlock.svelte
@@ -32,6 +32,7 @@
 			<div class="flex min-w-0 flex-col">
 				{#if title}
 					<span
+						data-testid="settingsBlockTitle"
 						class="{titleSize === 'large'
 							? 'typography-paragraph-large'
 							: 'typography-paragraph-regular'} text-foreground-default"
@@ -40,7 +41,12 @@
 					</span>
 				{/if}
 				{#each lines as line (line)}
-					<p class="typography-paragraph-regular text-foreground-muted">{line}</p>
+					<p
+						data-testid="settingsBlockDescription"
+						class="typography-paragraph-regular text-foreground-muted"
+					>
+						{line}
+					</p>
 				{/each}
 			</div>
 			{#if action}
diff --git a/web/src/lib/components/settings/SettingsEmpty.svelte b/web/src/lib/components/settings/SettingsEmpty.svelte
index 8b4aa8eb4..f7d1b767a 100644
--- a/web/src/lib/components/settings/SettingsEmpty.svelte
+++ b/web/src/lib/components/settings/SettingsEmpty.svelte
@@ -7,6 +7,7 @@
 </script>
 
 <div
+	data-testid="settingsEmpty"
 	class="flex w-full items-center justify-center rounded-md border border-border-default px-md py-sm typography-paragraph-regular text-foreground-muted"
 >
 	{message}
diff --git a/web/src/lib/components/settings/SettingsHeader.svelte b/web/src/lib/components/settings/SettingsHeader.svelte
index dbf9169ab..799529b2a 100644
--- a/web/src/lib/components/settings/SettingsHeader.svelte
+++ b/web/src/lib/components/settings/SettingsHeader.svelte
@@ -3,16 +3,23 @@
 
 	interface Props {
 		title: string;
+		name?: string;
 		description?: string;
 		action?: Snippet;
 	}
 
-	let { title, description, action }: Props = $props();
+	let { title, name, description, action }: Props = $props();
 </script>
 
 <div class="flex w-full flex-col justify-center gap-md">
 	<div class="flex flex-wrap items-start justify-between gap-md">
-		<h1 class="min-w-0 flex-1 typography-heading-2 text-foreground-default">{title}</h1>
+		<h1
+			data-testid="settingsHeaderTitle"
+			data-name={name}
+			class="min-w-0 flex-1 typography-heading-2 text-foreground-default"
+		>
+			{title}
+		</h1>
 		{#if action}
 			{@render action()}
 		{/if}
diff --git a/web/src/lib/components/settings/SettingsRow.svelte b/web/src/lib/components/settings/SettingsRow.svelte
index c687f1796..730d08595 100644
--- a/web/src/lib/components/settings/SettingsRow.svelte
+++ b/web/src/lib/components/settings/SettingsRow.svelte
@@ -79,7 +79,9 @@
 				{#if href}
 					<Link href={resolve(href as "/")} variant="inherit">{title}</Link>
 				{:else}
-					<span class="typography-paragraph-regular text-foreground-default">{title}</span
+					<span
+						data-testid="settingsRowTitle"
+						class="typography-paragraph-regular text-foreground-default">{title}</span
 					>
 				{/if}
 				{#if tags}
diff --git a/web/src/lib/components/settings/SettingsSaveBar.svelte b/web/src/lib/components/settings/SettingsSaveBar.svelte
index 4945096b0..9c463e984 100644
--- a/web/src/lib/components/settings/SettingsSaveBar.svelte
+++ b/web/src/lib/components/settings/SettingsSaveBar.svelte
@@ -19,7 +19,10 @@
 			class="order-last flex w-full items-center justify-between gap-md sm:order-0 sm:w-auto"
 		>
 			<Button icon={RotateCcw} onclick={onreset}>Reset</Button>
-			<span class="typography-paragraph-regular text-foreground-muted">Unsaved changes</span>
+			<span
+				data-testid="unsavedChanges"
+				class="typography-paragraph-regular text-foreground-muted">Unsaved changes</span
+			>
 		</div>
 	{/if}
 	<Button
diff --git a/web/src/lib/components/settings/SettingsSection.svelte b/web/src/lib/components/settings/SettingsSection.svelte
index a21cf1f54..0e7834c32 100644
--- a/web/src/lib/components/settings/SettingsSection.svelte
+++ b/web/src/lib/components/settings/SettingsSection.svelte
@@ -4,20 +4,27 @@
 
 	interface Props {
 		title?: string;
+		name?: string;
 		id?: string;
 		headingGap?: "3" | "4";
 		framed?: boolean;
 		children: Snippet;
 	}
 
-	let { title, id, headingGap = "3", framed = true, children }: Props = $props();
+	let { title, name, id, headingGap = "3", framed = true, children }: Props = $props();
 
 	const gapClass = $derived(headingGap === "4" ? "gap-md" : "gap-sm");
 </script>
 
 <section {id} class="flex w-full flex-col {gapClass}">
 	{#if title}
-		<h2 class="typography-heading-4 text-foreground-default">{title}</h2>
+		<h2
+			data-testid="settingsSectionTitle"
+			data-name={name}
+			class="typography-heading-4 text-foreground-default"
+		>
+			{title}
+		</h2>
 	{/if}
 	{#if framed}
 		<SettingsList>
diff --git a/web/src/lib/components/settings/VerifyEmailCard.svelte b/web/src/lib/components/settings/VerifyEmailCard.svelte
index 6937426a5..7002f33ae 100644
--- a/web/src/lib/components/settings/VerifyEmailCard.svelte
+++ b/web/src/lib/components/settings/VerifyEmailCard.svelte
@@ -35,8 +35,18 @@
 		</p>
 	{:else}
 		<TriangleAlert class="size-8 text-foreground-danger" aria-hidden="true" />
-		<h1 class="typography-heading-2 text-foreground-default">Verification failed</h1>
-		<p class="typography-paragraph-regular text-foreground-muted">{state.message}</p>
+		<h1
+			data-testid="verificationFailedHeading"
+			class="typography-heading-2 text-foreground-default"
+		>
+			Verification failed
+		</h1>
+		<p
+			data-testid="verificationErrorMessage"
+			class="typography-paragraph-regular text-foreground-muted"
+		>
+			{state.message}
+		</p>
 		<Button icon={Settings} href="/settings/emails">Go to email settings</Button>
 	{/if}
 </div>
diff --git a/web/src/lib/components/settings/tabs/KeysTab.svelte b/web/src/lib/components/settings/tabs/KeysTab.svelte
index 996d981a2..48a390e23 100644
--- a/web/src/lib/components/settings/tabs/KeysTab.svelte
+++ b/web/src/lib/components/settings/tabs/KeysTab.svelte
@@ -104,6 +104,8 @@
 					{#snippet meta()}
 						{#if data.fingerprints[k.rkey]}
 							<span
+								data-testid="keyFingerprint"
+								data-rkey={k.rkey}
 								class="typography-monospace-regular break-all text-foreground-muted"
 							>
 								{data.fingerprints[k.rkey]}
diff --git a/web/src/lib/components/settings/tabs/KnotsTab.svelte b/web/src/lib/components/settings/tabs/KnotsTab.svelte
index ae2143dc9..2bce93ab3 100644
--- a/web/src/lib/components/settings/tabs/KnotsTab.svelte
+++ b/web/src/lib/components/settings/tabs/KnotsTab.svelte
@@ -38,6 +38,7 @@
 </script>
 
 <SettingsHeader
+	name="knots"
 	title="Knots"
 	description="Knots are lightweight headless servers that enable users to host Git repositories with ease. The knots you save here are the ones offered to you when creating a repository."
 />
@@ -64,6 +65,7 @@
 			{#each loaded.data as knot (knot)}
 				<SettingsRow icon={Server} title={knot} stack>
 					<Button
+						data-host={knot}
 						variant="destructive"
 						icon={Trash}
 						loading={remove.loading && remove.args?.[0] === knot}
diff --git a/web/src/lib/components/settings/tabs/NotificationsTab.svelte b/web/src/lib/components/settings/tabs/NotificationsTab.svelte
index ee24b06eb..f4f63dfab 100644
--- a/web/src/lib/components/settings/tabs/NotificationsTab.svelte
+++ b/web/src/lib/components/settings/tabs/NotificationsTab.svelte
@@ -167,7 +167,11 @@
 <SettingsList>
 	{#each prefs as pref (pref.key)}
 		{@const Glyph = pref.icon}
-		<div class="flex w-full items-center justify-between gap-md">
+		<div
+			data-testid="notificationPreference"
+			data-key={pref.key}
+			class="flex w-full items-center justify-between gap-md"
+		>
 			<div class="flex min-w-0 flex-col gap-2xs">
 				<span class="flex items-center gap-xs">
 					<Glyph
@@ -186,6 +190,8 @@
 				<Bones capture={uiToggleChecked} class="w-fit shrink-0" />
 			{:else}
 				<Toggle
+					data-testid="notificationToggle"
+					data-key={pref.key}
 					bind:checked={pref.enabled}
 					disabled={save.loading}
 					aria-label={pref.label}
diff --git a/web/src/lib/components/settings/tabs/SpindlesTab.svelte b/web/src/lib/components/settings/tabs/SpindlesTab.svelte
index 1fbeedc47..42b74c5b6 100644
--- a/web/src/lib/components/settings/tabs/SpindlesTab.svelte
+++ b/web/src/lib/components/settings/tabs/SpindlesTab.svelte
@@ -64,6 +64,7 @@
 			{#each loaded.data as spindle (spindle)}
 				<SettingsRow icon={Spool} title={spindle} stack>
 					<Button
+						data-host={spindle}
 						variant="destructive"
 						icon={Trash}
 						loading={remove.loading && remove.args?.[0] === spindle}
diff --git a/web/src/lib/components/shell/Topbar.svelte b/web/src/lib/components/shell/Topbar.svelte
index 93271b55e..75c7bb79a 100644
--- a/web/src/lib/components/shell/Topbar.svelte
+++ b/web/src/lib/components/shell/Topbar.svelte
@@ -201,7 +201,7 @@
 									</DropdownItem>
 								{/each}
 							{/if}
-							<DropdownItem href={appPath(loginHref)}>
+							<DropdownItem data-testid="addAccount" href={appPath(loginHref)}>
 								<span class={style.addBall()}>
 									<Plus class="size-3" aria-hidden="true" />
 								</span>
@@ -232,8 +232,11 @@
 						</Dropdown>
 					{:else}
 						<div class={style.identity({ class: "gap-xs" })}>
-							<Button variant="ghost" size="small" href={appPath(loginHref)}
-								>Login</Button
+							<Button
+								data-testid="login"
+								variant="ghost"
+								size="small"
+								href={appPath(loginHref)}>Login</Button
 							>
 							<Button variant="primary" size="small" href={resolve("/signup")}>
 								Join now
diff --git a/web/src/lib/components/strings/StringForm.svelte b/web/src/lib/components/strings/StringForm.svelte
index e4659594f..33b3a24fd 100644
--- a/web/src/lib/components/strings/StringForm.svelte
+++ b/web/src/lib/components/strings/StringForm.svelte
@@ -135,7 +135,10 @@
 					>{stats.lines} {plural(stats.lines, "line", "lines")}</span
 				>
 				<Separator variant="dot" class="px-2xs" />
-				<span class="typography-monospace-small"
+				<span
+					data-testid="contentBytes"
+					data-bytes={stats.bytes}
+					class="typography-monospace-small"
 					>{stats.bytes} {plural(stats.bytes, "byte", "bytes")}</span
 				>
 			</div>
diff --git a/web/src/lib/components/strings/StringHeader.svelte b/web/src/lib/components/strings/StringHeader.svelte
index 15e710098..6f31471fd 100644
--- a/web/src/lib/components/strings/StringHeader.svelte
+++ b/web/src/lib/components/strings/StringHeader.svelte
@@ -88,7 +88,7 @@
 	</div>
 
 	{#if description}
-		<p class="typography-paragraph-small text-foreground-muted">
+		<p data-testid="stringDescription" class="typography-paragraph-small text-foreground-muted">
 			{description}
 		</p>
 	{:else}
diff --git a/web/src/lib/components/welcome/ProfileStep.svelte b/web/src/lib/components/welcome/ProfileStep.svelte
index 10527f729..d730652c7 100644
--- a/web/src/lib/components/welcome/ProfileStep.svelte
+++ b/web/src/lib/components/welcome/ProfileStep.svelte
@@ -73,6 +73,7 @@
 					</span>
 				{/if}
 				<input
+					data-testid="welcomeAvatarInput"
 					type="file"
 					accept="image/png,image/jpeg"
 					class="sr-only"
diff --git a/web/src/lib/components/welcome/StepHeader.svelte b/web/src/lib/components/welcome/StepHeader.svelte
index 7103004e7..d15874f18 100644
--- a/web/src/lib/components/welcome/StepHeader.svelte
+++ b/web/src/lib/components/welcome/StepHeader.svelte
@@ -24,7 +24,7 @@
 </script>
 
 <header class={slot.root()}>
-	<h2 class={slot.title()}>{title}</h2>
+	<h2 data-testid="stepHeaderTitle" class={slot.title()}>{title}</h2>
 	{#if subtitle}
 		<p class={slot.subtitle()}>{subtitle}</p>
 	{/if}
diff --git a/web/src/routes/+error.svelte b/web/src/routes/+error.svelte
index 56c68dc62..3603b9cb1 100644
--- a/web/src/routes/+error.svelte
+++ b/web/src/routes/+error.svelte
@@ -55,11 +55,13 @@
 
 		<div class="space-y-md">
 			<h1
+				data-testid="errorTitle"
+				data-status={copy.status}
 				class="typography-heading-3 font-bold text-foreground-default sm:typography-heading-2"
 			>
 				{copy.status} &mdash; {copy.title}
 			</h1>
-			<p class="text-foreground-muted">{copy.message}</p>
+			<p data-testid="errorMessage" class="text-foreground-muted">{copy.message}</p>
 			<div class="mt-xl flex flex-col items-center justify-center gap-sm sm:flex-row">
 				<Button href={resolve("/")} variant="default">Back to home</Button>
 			</div>
diff --git a/web/src/routes/[handle]/[repo]/pulls/[rkey]/[version]/[[range]]/PullViewPage.svelte b/web/src/routes/[handle]/[repo]/pulls/[rkey]/[version]/[[range]]/PullViewPage.svelte
index 1bd1c7f7b..b1e45b497 100644
--- a/web/src/routes/[handle]/[repo]/pulls/[rkey]/[version]/[[range]]/PullViewPage.svelte
+++ b/web/src/routes/[handle]/[repo]/pulls/[rkey]/[version]/[[range]]/PullViewPage.svelte
@@ -984,7 +984,7 @@
 						/>
 						<TriangleAlert class="size-4 sm:hidden" aria-hidden="true" />
 						<span class="sm:hidden">Merge conflicts detected</span>
-						<span class="max-sm:hidden">Conflicts</span>
+						<span data-testid="conflictsSummary" class="max-sm:hidden">Conflicts</span>
 					</span>
 					<span class="typography-paragraph-regular font-normal"
 						>{conflicts.length}
@@ -1005,6 +1005,8 @@
 								{#if anchor}
 									<!-- eslint-disable svelte/no-navigation-without-resolve -->
 									<a
+										data-testid="conflictedFile"
+										data-filename={conflict.filename}
 										href={anchor}
 										onclick={(event) =>
 											jumpToConflict(event, conflict.filename, anchor)}
@@ -1016,6 +1018,8 @@
 									<!-- eslint-enable svelte/no-navigation-without-resolve -->
 								{:else}
 									<span
+										data-testid="conflictedFile"
+										data-filename={conflict.filename}
 										class="block w-max min-w-full px-xs typography-monospace-small whitespace-nowrap"
 										title={conflict.filename}
 									>
diff --git a/web/src/routes/[handle]/[repo]/settings/access/+page.svelte b/web/src/routes/[handle]/[repo]/settings/access/+page.svelte
index 108d701e0..7a5d8571f 100644
--- a/web/src/routes/[handle]/[repo]/settings/access/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/access/+page.svelte
@@ -61,7 +61,11 @@
 		separator
 	>
 		{#snippet action()}
-			<Button icon={UserRoundPlus} href={path(`${base}/access/new`)}>Add collaborator</Button>
+			<Button
+				data-testid="addCollaborator"
+				icon={UserRoundPlus}
+				href={path(`${base}/access/new`)}>Add collaborator</Button
+			>
 		{/snippet}
 
 		<SettingsList>
@@ -70,7 +74,12 @@
 					{#snippet label()}
 						<span class="flex min-w-0 items-center gap-xs">
 							<Avatar did={person.did} handle={person.handle} size="regular" />
-							<span class="typography-paragraph-regular text-foreground-default">
+							<span
+								data-testid="collaboratorHandle"
+								data-handle={person.handle}
+								data-did={person.did}
+								class="typography-paragraph-regular text-foreground-default"
+							>
 								{person.handle}
 							</span>
 							{#if person.standing === "invited"}
@@ -84,6 +93,8 @@
 					{/snippet}
 					{#if person.standing !== "owner"}
 						<Button
+							data-handle={person.handle}
+							data-standing={person.standing}
 							variant="destructive"
 							icon={UserRoundMinus}
 							loading={remove.loading && remove.args?.[0] === person.did}
diff --git a/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte b/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte
index abc9afda9..b694675ef 100644
--- a/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte
@@ -76,8 +76,11 @@
 		]}
 	>
 		{#snippet action()}
-			<Button icon={Plus} disabled={!spindle || !target} href={path(`${base}/hooks/new`)}
-				>New webhook</Button
+			<Button
+				data-testid="newWebhook"
+				icon={Plus}
+				disabled={!spindle || !target}
+				href={path(`${base}/hooks/new`)}>New webhook</Button
 			>
 		{/snippet}
 
@@ -93,6 +96,8 @@
 			<SettingsList>
 				{#each hooks.data ?? [] as hook (hook.id)}
 					<div
+						data-testid="webhookRow"
+						data-url={hook.url}
 						class="flex w-full flex-col gap-md sm:flex-row sm:items-start sm:justify-between"
 					>
 						<div class="flex min-w-0 flex-col gap-2xs">
@@ -109,6 +114,8 @@
 						</div>
 						<div class="flex flex-col items-end gap-md sm:shrink-0">
 							<Toggle
+								data-testid="webhookSwitch"
+								data-url={hook.url}
 								checked={hook.active}
 								disabled={toggle.loading && toggle.args?.[0] === hook.id}
 								aria-label="Enable {hook.url}"
diff --git a/web/src/routes/[handle]/[repo]/settings/labels/new/+page.svelte b/web/src/routes/[handle]/[repo]/settings/labels/new/+page.svelte
index 2ee46c103..cc556886f 100644
--- a/web/src/routes/[handle]/[repo]/settings/labels/new/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/labels/new/+page.svelte
@@ -99,6 +99,7 @@
 					<button
 						type="button"
 						onclick={() => (color = swatch)}
+						data-value={swatch}
 						aria-label="Use colour {swatch}"
 						aria-pressed={color === swatch}
 						class="size-sm cursor-pointer rounded-full transition-shadow {color ===
diff --git a/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte b/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
index fa600dcd3..d6743dc2e 100644
--- a/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
@@ -140,7 +140,9 @@
 						matchTriggerWidth
 					>
 						{#snippet trigger()}
-							<span class="min-w-0 truncate">{chosen || "No spindle"}</span>
+							<span data-testid="chosenSpindle" class="min-w-0 truncate"
+								>{chosen || "No spindle"}</span
+							>
 							<ChevronDown class="ml-auto size-3.5 shrink-0" aria-hidden="true" />
 						{/snippet}
 						{#each [NO_SPINDLE, ...options] as option (option)}
@@ -174,6 +176,7 @@
 	>
 		{#snippet action()}
 			<Button
+				data-testid="addSecret"
 				icon={Plus}
 				disabled={!repo.spindle}
 				href={path(`${base}/pipelines/secrets/new`)}>Add secret</Button
@@ -206,6 +209,8 @@
 						{#snippet label()}
 							<span class="flex min-w-0 flex-col gap-2xs">
 								<span
+									data-testid="secretName"
+									data-key={secret.key}
 									class="typography-monospace-regular break-all text-foreground-default"
 								>
 									{secret.key}
diff --git a/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte b/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte
index f77034882..5b5ccf400 100644
--- a/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte
@@ -71,7 +71,9 @@
 
 	{#if deployed}
 		<div class="flex gap-xs">
-			<Tag color="success" icon={Check}>Live at {domain}</Tag>
+			<Tag data-testid="siteLiveTag" data-domain={domain} color="success" icon={Check}
+				>Live at {domain}</Tag
+			>
 			<Button icon={ExternalLink}>Open</Button>
 		</div>
 	{/if}
diff --git a/web/src/routes/invite/+page.svelte b/web/src/routes/invite/+page.svelte
index 81a4f1269..dd96aaf38 100644
--- a/web/src/routes/invite/+page.svelte
+++ b/web/src/routes/invite/+page.svelte
@@ -70,7 +70,9 @@
 			</p>
 		{:else if joined}
 			<Check class="size-8 text-foreground-success" aria-hidden="true" />
-			<h1 class="typography-heading-2 text-foreground-default">You're in</h1>
+			<h1 data-testid="youreInHeading" class="typography-heading-2 text-foreground-default">
+				You're in
+			</h1>
 			<p class="typography-paragraph-regular text-foreground-muted">
 				You're a member of
 				<span class="font-medium text-foreground-default">{knot}</span>, and it's saved to
@@ -78,7 +80,13 @@
 			</p>
 			<Button variant="primary" icon={Settings} href="/settings/knots">Your knots</Button>
 		{:else}
-			<h1 class="typography-heading-2 text-foreground-default">Join {knot}</h1>
+			<h1
+				data-testid="joinHeading"
+				data-knot={knot}
+				class="typography-heading-2 text-foreground-default"
+			>
+				Join {knot}
+			</h1>
 			<p class="typography-paragraph-regular text-foreground-muted">
 				You've been invited to this knot. Joining adds you to its member list and saves it
 				to your knots, so it's on hand when you create a repository.
diff --git a/web/src/routes/login/+page.svelte b/web/src/routes/login/+page.svelte
index ec5fdc189..56d785da9 100644
--- a/web/src/routes/login/+page.svelte
+++ b/web/src/routes/login/+page.svelte
@@ -117,8 +117,8 @@
 		>
 			<span class="py-2xs" aria-hidden="true"><CircleAlert class="size-3.5" /></span>
 			<div>
-				<h5 class="font-medium">Login error</h5>
-				<p class="typography-paragraph-small">{banner}</p>
+				<h5 data-testid="loginErrorHeading" class="font-medium">Login error</h5>
+				<p data-testid="loginErrorMessage" class="typography-paragraph-small">{banner}</p>
 			</div>
 		</div>
 	{/if}
diff --git a/web/src/routes/settings/profile/deactivate/+page.svelte b/web/src/routes/settings/profile/deactivate/+page.svelte
index 53d00f415..a69f52b30 100644
--- a/web/src/routes/settings/profile/deactivate/+page.svelte
+++ b/web/src/routes/settings/profile/deactivate/+page.svelte
@@ -31,6 +31,8 @@
 	<FormActions>
 		<Button href="/settings" icon={X}>Cancel</Button>
 		<!-- mocked — account lifecycle is backed by G4 -->
-		<Button variant="warning" icon={Pause} disabled={!valid}>Deactivate</Button>
+		<Button data-testid="deactivateButton" variant="warning" icon={Pause} disabled={!valid}
+			>Deactivate</Button
+		>
 	</FormActions>
 </DrillDown>
diff --git a/web/src/routes/settings/profile/delete/+page.svelte b/web/src/routes/settings/profile/delete/+page.svelte
index 8ce1f37e2..02ebaa763 100644
--- a/web/src/routes/settings/profile/delete/+page.svelte
+++ b/web/src/routes/settings/profile/delete/+page.svelte
@@ -31,6 +31,11 @@
 	<FormActions>
 		<Button href="/settings" icon={X}>Cancel</Button>
 		<!-- mocked — account lifecycle is backed by G4 -->
-		<Button variant="destructive" icon={Mail} disabled={!valid}>Send deletion code</Button>
+		<Button
+			data-testid="sendDeletionCodeButton"
+			variant="destructive"
+			icon={Mail}
+			disabled={!valid}>Send deletion code</Button
+		>
 	</FormActions>
 </DrillDown>
diff --git a/web/src/routes/settings/profile/password/+page.svelte b/web/src/routes/settings/profile/password/+page.svelte
index 3d1f5931b..8fcf579e9 100644
--- a/web/src/routes/settings/profile/password/+page.svelte
+++ b/web/src/routes/settings/profile/password/+page.svelte
@@ -26,6 +26,8 @@
 	<FormActions>
 		<Button href="/settings" icon={X}>Cancel</Button>
 		<!-- mocked — the reset mail is sent by the G4 account service -->
-		<Button variant="primary" icon={Key} disabled={!valid}>Send reset code</Button>
+		<Button data-testid="sendResetCodeButton" variant="primary" icon={Key} disabled={!valid}
+			>Send reset code</Button
+		>
 	</FormActions>
 </DrillDown>
diff --git a/web/src/routes/signup/+page.svelte b/web/src/routes/signup/+page.svelte
index 0ef94641a..93196467e 100644
--- a/web/src/routes/signup/+page.svelte
+++ b/web/src/routes/signup/+page.svelte
@@ -60,7 +60,9 @@
 
 	{#if sent}
 		<div class="mt-md flex flex-col gap-xs" role="status">
-			<h1 class="typography-heading-2 text-foreground-default">Check your email</h1>
+			<h1 data-testid="checkEmailTitle" class="typography-heading-2 text-foreground-default">
+				Check your email
+			</h1>
 			<p class="typography-paragraph-regular text-foreground-default">
 				A verification email was sent to <span class="font-medium">{sentEmail}</span>.
 			</p>
@@ -123,7 +125,11 @@
 					/>
 				</div>
 			{:else}
-				<p class="mt-md typography-paragraph-small text-foreground-danger" role="alert">
+				<p
+					data-testid="signupUnavailable"
+					class="mt-md typography-paragraph-small text-foreground-danger"
+					role="alert"
+				>
 					Signup is temporarily unavailable — the verification service is not configured.
 				</p>
 			{/if}