ConductionNL · rubenvdlinde · May 13, 2026 · May 13, 2026
@@ -1,5 +1,5 @@
 <template>
-	<div class="cn-actions-bar">
+	<div class="cn-actions-bar" data-testid="cn-actions-bar">
 		<div class="cn-actions-bar__info">
 			<span v-if="pagination && pagination.total > 0" class="cn-actions-bar__count">
 				{{ countText }}
@@ -34,6 +34,7 @@
 			<NcButton v-if="showAdd"
 				type="primary"
 				:disabled="addDisabled"
+				data-testid="cn-cta-primary"
 				@click="$emit('add')">
 				<template #icon>
 					<CnIcon v-if="addIcon" :name="addIcon" :size="20" />
@@ -48,7 +49,8 @@
 			<NcActions
 				:force-name="true"
 				:inline="inlineActionCount"
-				menu-name="Actions">
+				menu-name="Actions"
+				data-testid="cn-actions">
 				<NcActionButton :disabled="refreshing || refreshDisabled" @click="$emit('refresh')">
 					<template #icon>
 						<NcLoadingIcon v-if="refreshing" :size="20" />

@@ -5,7 +5,11 @@
 		:can-close="!loading"
 		@closing="$emit('close')">
 		<!-- Result phase -->
-		<div v-if="result !== null" class="cn-advanced-form-dialog__result">
+		<div v-if="result !== null"
+			class="cn-advanced-form-dialog__result"
+			data-testid="cn-modal"
+			data-testid-modal="cn-advanced-form-dialog"
+			data-testid-phase="result">
 			<NcNoteCard v-if="result.success" type="success">
 				{{ resolvedSuccessText }}
 			</NcNoteCard>
@@ -15,7 +19,11 @@
 		</div>
 
 		<!-- Form phase -->
-		<div v-else class="cn-advanced-form-dialog__form">
+		<div v-else
+			class="cn-advanced-form-dialog__form"
+			data-testid="cn-modal"
+			data-testid-modal="cn-advanced-form-dialog"
+			data-testid-phase="form">
 			<!-- Full form override slot -->
 			<slot
 				v-if="$scopedSlots.form"

@@ -20,6 +20,7 @@
 		:title="agentName"
 		:active="activeTab"
 		:force-menu="true"
+		data-testid="cn-ai-panel"
 		@close="onClose"
 		@update:active="activeTab = $event">
 		<template #description>
@@ -50,7 +51,8 @@
 		<NcAppSidebarTab
 			id="chat"
 			:name="cnTranslate('Chat')"
-			:order="1">
+			:order="1"
+			data-testid="cn-ai-panel-tab-chat">
 			<template #icon>
 				<Creation :size="20" />
 			</template>

@@ -14,7 +14,7 @@
   FAB and panel both hidden when cnAiContext.pageKind === 'chat'.
 -->
 <template>
-	<div v-if="probeSucceeded && !isChatPage" class="cn-ai-companion">
+	<div v-if="probeSucceeded && !isChatPage" class="cn-ai-companion" data-testid="cn-ai-companion">
 		<CnAiFloatingButton
 			:visible="!isPanelOpen"
 			:position="position"

@@ -16,6 +16,7 @@
 		]"
 		:aria-label="cnTranslate('Open AI chat')"
 		type="button"
+		data-testid="cn-ai-fab"
 		@click="$emit('click')">
 		<span class="cn-ai-floating-button__hex">
 			<Creation :size="26" class="cn-ai-floating-button__icon" />

@@ -7,7 +7,7 @@
   - Send button disabled when textarea is empty or whitespace-only.
 -->
 <template>
-	<div class="cn-ai-input">
+	<div class="cn-ai-input" data-testid="cn-ai-input">
 		<textarea
 			ref="textarea"
 			v-model="inputText"
@@ -16,6 +16,7 @@
 			:disabled="disabled"
 			:placeholder="cnTranslate('Message input')"
 			rows="1"
+			data-testid="cn-ai-input-textarea"
 			@keydown.enter.exact.prevent="handleEnter"
 			@keydown.shift.enter.exact="handleShiftEnter"
 			@input="autoGrow" />
@@ -24,6 +25,7 @@
 			type="button"
 			:aria-label="cnTranslate('Send message')"
 			:disabled="disabled || isTextEmpty"
+			data-testid="cn-ai-input-send"
 			@click="handleSend">
 			<NcLoadingIcon
 				v-if="disabled"

@@ -8,7 +8,7 @@
   The assistant message container has aria-live="polite" for screen-reader streaming.
 -->
 <template>
-	<div class="cn-ai-message-list">
+	<div class="cn-ai-message-list" data-testid="cn-ai-message-list">
 		<!-- Empty state -->
 		<div v-if="messages.length === 0" class="cn-ai-message-list__empty">
 			<slot name="empty" />

@@ -9,7 +9,7 @@
   See REQ-JMR-010 of the json-manifest-renderer specification.
 -->
 <template>
-	<div class="cn-app-loading">
+	<div class="cn-app-loading" data-testid="cn-app-loading">
 		<div class="cn-app-loading__inner">
 			<slot name="logo">
 				<img

@@ -29,7 +29,7 @@
   See REQ-JMR-004 of the json-manifest-renderer specification.
 -->
 <template>
-	<NcAppNavigation>
+	<NcAppNavigation data-testid="cn-nav">
 		<template #list>
 			<NcAppNavigationItem
 				v-for="item in mainItems"
@@ -39,6 +39,7 @@
 				:exact="isExact(item)"
 				:icon="item.icon"
 				:active="isActive(item)"
+				:data-testid="`cn-nav-entry-${item.id}`"
 				@click="onItemClick(item, $event)">
 				<NcAppNavigationItem
 					v-for="child in visibleChildren(item)"
@@ -48,11 +49,12 @@
 					:exact="isExact(child)"
 					:icon="child.icon"
 					:active="isActive(child)"
+					:data-testid="`cn-nav-entry-${child.id}`"
 					@click="onItemClick(child, $event)" />
 			</NcAppNavigationItem>
 		</template>
 		<template v-if="settingsItems.length" #footer>
-			<ul class="cn-app-nav__footer-list">
+			<ul class="cn-app-nav__footer-list" data-testid="cn-nav-footer">
 				<NcAppNavigationItem
 					v-for="item in settingsItems"
 					:key="item.id"
@@ -61,6 +63,7 @@
 					:exact="isExact(item)"
 					:icon="item.icon"
 					:active="isActive(item)"
+					:data-testid="`cn-nav-entry-${item.id}`"
 					@click="onItemClick(item, $event)" />
 			</ul>
 		</template>

@@ -40,10 +40,10 @@
   and REQ-OR-1..REQ-OR-7 of the cnapproot-app-availability-guard spec.
 -->
 <template>
-	<NcContent :app-name="appId">
+	<NcContent :app-name="appId" data-testid="cn-app-root">
 		<!-- Phase 0a: capabilities check in flight -->
 		<template v-if="capabilitiesLoading">
-			<div class="cn-app-root__capabilities-loading">
+			<div class="cn-app-root__capabilities-loading" data-testid="cn-app-root-capabilities-loading">
 				<NcLoadingIcon :size="32" />
 			</div>
 		</template>

@@ -12,7 +12,7 @@
   thread renderers and consumer-built chat UIs).
 -->
 <template>
-	<div class="cn-chat-page">
+	<div class="cn-chat-page" data-testid="cn-chat-page">
 		<!-- Header — overridable via #header slot -->
 		<slot
 			name="header"

@@ -5,6 +5,7 @@
 		:force-menu="true"
 		class="cn-context-menu"
 		container="body"
+		data-testid="cn-context-menu"
 		@close="onClose">
 		<!-- Dynamic actions from array prop -->
 		<NcActionButton
@@ -13,6 +14,7 @@
 			:title="resolveTitle(action)"
 			:disabled="resolveDisabled(action)"
 			:class="{ 'cn-row-action--destructive': action.destructive }"
+			:data-testid="`cn-action-item-${slugifyLabel(action.label)}`"
 			close-after-click
 			@click="onAction(action)">
 			<template v-if="action.icon" #icon>
@@ -160,6 +162,22 @@ export default {
 			return action.title || undefined
 		},
 
+		/**
+		 * Slugify an action label for use in stable `data-testid` selectors.
+		 * Lowercase, kebab-case, strip non-alphanumeric. Used solely by the
+		 * `:data-testid` binding on NcActionButton — does not affect runtime
+		 * behaviour or rendered text.
+		 *
+		 * @param {string} label The action's display label.
+		 * @return {string} kebab-case slug suitable for a testid suffix.
+		 */
+		slugifyLabel(label) {
+			return String(label || '')
+				.toLowerCase()
+				.replace(/[^a-z0-9]+/g, '-')
+				.replace(/^-+|-+$/g, '')
+		},
+
 		onAction(action) {
 			if (action.handler && typeof action.handler === 'function') {
 				action.handler(this.targetItem)

@@ -5,7 +5,11 @@
 		:can-close="!loading"
 		@closing="$emit('close')">
 		<!-- Result phase -->
-		<div v-if="result !== null" class="cn-copy__result">
+		<div v-if="result !== null"
+			class="cn-copy__result"
+			data-testid="cn-modal"
+			data-testid-modal="cn-copy-dialog"
+			data-testid-phase="result">
 			<NcNoteCard v-if="result.success" type="success">
 				{{ successText }}
 			</NcNoteCard>
@@ -15,7 +19,11 @@
 		</div>
 
 		<!-- Form phase -->
-		<div v-else class="cn-copy__form">
+		<div v-else
+			class="cn-copy__form"
+			data-testid="cn-modal"
+			data-testid-modal="cn-copy-dialog"
+			data-testid-phase="form">
 			<div class="cn-copy__pattern">
 				<label for="cn-copy-pattern">{{ patternLabel }}</label>
 				<NcSelect

@@ -10,9 +10,9 @@
   - Header with title, actions, and edit toggle
 -->
 <template>
-	<div class="cn-dashboard-page">
+	<div class="cn-dashboard-page" data-testid="cn-dashboard-page">
 		<!-- Header -->
-		<div class="cn-dashboard-page__header">
+		<div class="cn-dashboard-page__header" data-testid="cn-dashboard-page-header">
 			<div class="cn-dashboard-page__header-left">
 				<h2 v-if="title" class="cn-dashboard-page__title">
 					{{ title }}

@@ -1,13 +1,13 @@
 <template>
-	<div class="cn-table-container" :class="{ 'cn-table-container--scrollable': scrollable }">
+	<div class="cn-table-container" data-testid="cn-object-list" :class="{ 'cn-table-container--scrollable': scrollable }">
 		<!-- Loading State -->
-		<div v-if="loading" class="cn-table-loading">
+		<div v-if="loading" class="cn-table-loading" data-testid="cn-object-list-loading">
 			<NcLoadingIcon :size="32" />
 			<p>{{ loadingText }}</p>
 		</div>
 
 		<!-- Table -->
-		<table v-else class="cn-data-table">
+		<table v-else class="cn-data-table" data-testid="cn-object-list-table">
 			<thead>
 				<tr>
 					<!-- Checkbox column -->
@@ -45,7 +45,7 @@
 
 			<tbody>
 				<!-- Empty state -->
-				<tr v-if="rows.length === 0" class="cn-table-empty">
+				<tr v-if="rows.length === 0" class="cn-table-empty" data-testid="cn-object-list-empty">
 					<td :colspan="totalColumns">
 						<slot name="empty">
 							{{ emptyText }}
@@ -59,6 +59,8 @@
 					v-else
 					:key="row[rowKey]"
 					class="cn-table-row"
+					data-testid="cn-object-row"
+					:data-testid-row-id="row[rowKey]"
 					:class="[
 						isSelected(row) ? 'cn-table-row--selected' : '',
 						rowClass ? rowClass(row) : '',

@@ -5,7 +5,11 @@
 		:can-close="!loading"
 		@closing="$emit('close')">
 		<!-- Result phase -->
-		<div v-if="result !== null" class="cn-delete__result">
+		<div v-if="result !== null"
+			class="cn-delete__result"
+			data-testid="cn-modal"
+			data-testid-modal="cn-delete-dialog"
+			data-testid-phase="result">
 			<NcNoteCard v-if="result.success" type="success">
 				{{ successText }}
 			</NcNoteCard>
@@ -15,7 +19,11 @@
 		</div>
 
 		<!-- Confirm phase -->
-		<div v-else class="cn-delete__confirm">
+		<div v-else
+			class="cn-delete__confirm"
+			data-testid="cn-modal"
+			data-testid-modal="cn-delete-dialog"
+			data-testid-phase="confirm">
 			<NcNoteCard type="warning">
 				{{ resolvedWarningText }}
 			</NcNoteCard>

@@ -9,7 +9,7 @@
   See REQ-JMR-011 of the json-manifest-renderer specification.
 -->
 <template>
-	<div class="cn-dependency-missing">
+	<div class="cn-dependency-missing" data-testid="cn-dependency-missing">
 		<div class="cn-dependency-missing__inner">
 			<h1 class="cn-dependency-missing__heading">
 				{{ heading }}

@@ -21,9 +21,9 @@
   - Content sections via slots
 -->
 <template>
-	<div class="cn-detail-page" :style="{ maxWidth: maxWidth }">
+	<div class="cn-detail-page" data-testid="cn-detail-page" :style="{ maxWidth: maxWidth }">
 		<!-- Header -->
-		<div class="cn-detail-page__header">
+		<div class="cn-detail-page__header" data-testid="cn-detail-page-header">
 			<!-- Header (left block) — overridable via #header slot. Default
 			     renders the icon + title + description. The right-hand
 			     #actions slot remains separate so headerComponent and

@@ -16,7 +16,7 @@
   WebDAV-backed listing).
 -->
 <template>
-	<div class="cn-files-page">
+	<div class="cn-files-page" data-testid="cn-files-page">
 		<!-- Header — overridable via #header slot -->
 		<slot
 			name="header"

@@ -1,7 +1,7 @@
 <template>
-	<div class="cn-filter-bar">
+	<div class="cn-filter-bar" data-testid="cn-filter-bar">
 		<!-- Search input -->
-		<div class="cn-filter-bar__search">
+		<div class="cn-filter-bar__search" data-testid="cn-filter-bar-search">
 			<NcTextField
 				:value="searchValue"
 				:placeholder="searchPlaceholder"

@@ -5,7 +5,11 @@
 		:can-close="!loading"
 		@closing="$emit('close')">
 		<!-- Result phase -->
-		<div v-if="result !== null" class="cn-form-dialog__result">
+		<div v-if="result !== null"
+			class="cn-form-dialog__result"
+			data-testid="cn-modal"
+			data-testid-modal="cn-form-dialog"
+			data-testid-phase="result">
 			<NcNoteCard v-if="result.success" type="success">
 				{{ resolvedSuccessText }}
 			</NcNoteCard>
@@ -15,7 +19,11 @@
 		</div>
 
 		<!-- Form phase -->
-		<div v-else class="cn-form-dialog__form">
+		<div v-else
+			class="cn-form-dialog__form"
+			data-testid="cn-modal"
+			data-testid-modal="cn-form-dialog"
+			data-testid-phase="form">
 			<!-- Full form override slot -->
 			<slot
 				v-if="$scopedSlots.form"