chore(query-builder): add data-testids for e2e selectors

Block roots are keyed by query name (query-A, formula-F1) so child ids
stay unindexed and survive reordering.

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.tsx

@@ -129,6 +129,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 										onChange={handleChangeOperator}
 										operators={operators}
 										className="metrics-operators-select"
+										data-testid="metrics-time-aggregation"
 									/>
 								</div>
 							</div>
@@ -192,7 +193,10 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 										AGGREGATE ACROSS TIME SERIES
 									</div>
 								</Tooltip>
-								<div className="metrics-aggregation-section-content-item-value">
+								<div
+									className="metrics-aggregation-section-content-item-value"
+									data-testid="metrics-space-aggregation"
+								>
 									<SpaceAggregationOptions
 										panelType={panelType}
 										key={`${panelType}${queryAggregation.spaceAggregation}${queryAggregation.timeAggregation}`}
@@ -229,7 +233,10 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 				<div className="metrics-space-aggregation-section">
 					<div className="metrics-aggregation-section-content">
 						<div className="metrics-aggregation-section-content-item">
-							<div className="metrics-aggregation-section-content-item-value">
+							<div
+								className="metrics-aggregation-section-content-item-value"
+								data-testid="metrics-space-aggregation"
+							>
 								<SpaceAggregationOptions
 									panelType={panelType}
 									key={`${panelType}${queryAggregation.spaceAggregation}${queryAggregation.timeAggregation}`}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/HavingFilter/HavingFilter.tsx

@@ -332,6 +332,7 @@ function HavingFilter({
 					value={input}
 					onChange={handleChange}
 					theme={isDarkMode ? copilot : githubLight}
+					data-testid="having-editor"
 					className="having-filter-select-editor"
 					width="100%"
 					extensions={[

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx

@@ -615,6 +615,7 @@ function QueryAggregationSelect({
 					setInput(value);
 					onChange?.(value);
 				}}
+				data-testid="query-aggregation-editor"
 				className={`query-aggregation-select-editor ${
 					validationError ? 'error' : ''
 				}`}

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -1607,6 +1607,7 @@ function QuerySearch({
 					onChange={handleChange}
 					onUpdate={handleUpdate}
 					onCreateEditor={handleEditorCreate}
+					data-testid="query-where-clause-editor"
 					className={cx('query-where-clause-editor', {
 						isValid: validation.isValid === true,
 						hasErrors: validation.errors.length > 0,
@@ -1680,6 +1681,7 @@ function QuerySearch({
 						className={cx('query-status-container', {
 							hasErrors: validation.errors.length > 0,
 						})}
+						data-testid="query-validation-status"
 					>
 						<Popover
 							placement="bottomRight"

frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx

@@ -183,6 +183,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 		<div
 			className={cx('query-v2', { 'where-clause-view': showOnlyWhereClause })}
 			ref={ref}
+			data-testid={`query-${query.queryName}`}
 		>
 			<div className="qb-content-section">
 				{(!showOnlyWhereClause || showTraceOperator) && (
@@ -246,6 +247,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 							{isMultiQueryAllowed && (
 								<Dropdown
 									items={queryActionItems}
+									testId="query-actions"
 									nativeButton={false}
 									align="end"
 									side="bottom"

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.tsx

@@ -61,7 +61,10 @@ export default function TraceOperator({
 	);
 
 	return (
-		<div className={cx('qb-trace-operator', !isRawQuery && 'non-list-view')}>
+		<div
+			className={cx('qb-trace-operator', !isRawQuery && 'non-list-view')}
+			data-testid="trace-operator"
+		>
 			<div className="qb-trace-operator-container">
 				<div
 					className={cx(

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperatorEditor.tsx

@@ -378,6 +378,7 @@ function TraceOperatorEditor({
 					theme={isDarkMode ? copilot : githubLight}
 					onChange={handleChange}
 					onUpdate={handleUpdate}
+					data-testid="trace-operator-editor"
 					className={cx('query-where-clause-editor', {
 						isValid: validation.isValid === true,
 						hasErrors: validation.errors.length > 0,

frontend/src/container/QueryBuilder/components/Formula/Formula.tsx

@@ -112,7 +112,7 @@ export function Formula({
 	);
 
 	return (
-		<Row gutter={[0, 15]}>
+		<Row gutter={[0, 15]} data-testid={`formula-${formula.queryName}`}>
 			<QBEntityOptions
 				isCollapsed={isCollapse}
 				showFunctions={false}
@@ -130,6 +130,7 @@ export function Formula({
 						<Input.TextArea
 							name="expression"
 							className="formula-expression"
+							data-testid="formula-expression"
 							onChange={handleChange}
 							size="middle"
 							value={formula.expression}
@@ -141,6 +142,7 @@ export function Formula({
 						<Input
 							name="legend"
 							className="formula-legend"
+							data-testid="formula-legend"
 							onChange={handleChange}
 							size="middle"
 							value={formula.legend}

frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.tsx

@@ -98,6 +98,7 @@ export default function QBEntityOptions({
 									value="search"
 									className="periscope-btn collapse"
 									onClick={onCollapseEntity}
+									data-testid="qb-entity-collapse"
 								>
 									{isCollapsed ? <ChevronRight size={16} /> : <ChevronDown size={16} />}
 								</Button>
@@ -108,6 +109,7 @@ export default function QBEntityOptions({
 									className="periscope-btn visibility-toggle"
 									onClick={onToggleVisibility}
 									disabled={isRawQuery && !showTraceOperator}
+									data-testid="qb-entity-visibility"
 								>
 									{entityData.disabled ? <EyeOff size={16} /> : <Eye size={16} />}
 								</Button>
@@ -115,7 +117,11 @@ export default function QBEntityOptions({
 
 							{entityType === 'query' && showCloneOption && (
 								<Tooltip title={`Clone Query ${entityData.queryName}`}>
-									<Button className={cx('periscope-btn')} onClick={handleCloneEntity}>
+									<Button
+										className={cx('periscope-btn')}
+										onClick={handleCloneEntity}
+										data-testid="qb-entity-clone"
+									>
 										<Copy size={14} />
 									</Button>
 								</Tooltip>
@@ -131,6 +137,7 @@ export default function QBEntityOptions({
 										: '',
 									isLogsExplorerPage && lastUsedQuery === index ? 'sync-btn' : '',
 								)}
+								data-testid="qb-entity-name"
 							>
 								{entityData.queryName}
 							</Button>
@@ -185,7 +192,11 @@ export default function QBEntityOptions({
 				</div>
 
 				{showDeleteButton && !isRawQuery && (
-					<Button className="periscope-btn ghost" onClick={onDelete}>
+					<Button
+						className="periscope-btn ghost"
+						onClick={onDelete}
+						data-testid="qb-entity-delete"
+					>
 						<Trash2 size={14} />
 					</Button>
 				)}

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/PanelEditorQueryBuilder.tsx

@@ -166,7 +166,10 @@ function PanelEditorQueryBuilder({
 		return modes.map((queryType) => ({
 			key: queryType,
 			label: (
-				<div className={styles.queryTypeTab}>
+				<div
+					className={styles.queryTypeTab}
+					data-testid={`query-type-tab-${queryType}`}
+				>
 					{queryTypeComponents[queryType].icon}
 					<Typography>{queryTypeComponents[queryType].label}</Typography>
 				</div>