Merge pull request #10550 from allenve/conditionBuilder-testid

feat: conditionBuilder 支持testid
2024-11-29 18:48:45 +08:00 · 2024-07-01 14:20:28 +08:00 · 2024-07-01 14:20:28 +08:00 · dc927969af
commit dc927969af
parent ddde285005 c888126725
13 changed files with 146 additions and 33 deletions
--- a/packages/amis-ui/src/components/ChainedDropdownSelection.tsx
+++ b/packages/amis-ui/src/components/ChainedDropdownSelection.tsx
@ -13,6 +13,7 @@ import {Options} from './Select';
 import {BaseSelection, BaseSelectionProps} from './Selection';

 import DropDownSelection from './DropDownSelection';
+import type {TestIdBuilder} from 'amis-core';

 export interface ChainedDropDownSelectionProps
  extends ThemeProps,
@ -24,6 +25,7 @@ export interface ChainedDropDownSelectionProps
  disabled?: boolean;
  searchable?: boolean;
  popOverContainer?: any;
+  testIdBuilder?: TestIdBuilder;
 }

 interface ChainedDropdownSelectionState {
@ -113,7 +115,7 @@ export class ChainedDropdownSelection extends BaseSelection<

  render() {
    const {stacks, values} = this.state;
-    const {className, classnames: cx} = this.props;
+    const {className, classnames: cx, testIdBuilder} = this.props;

    return (
      <div className={cx('ChainedDropdownSelection', className)}>
@ -124,6 +126,7 @@ export class ChainedDropdownSelection extends BaseSelection<
              value={values[index]}
              options={item}
              onChange={value => this.handleSelect(index, value)}
+              testIdBuilder={testIdBuilder?.getChild(`chained-${index}`)}
            />
          </div>
        ))}
--- a/packages/amis-ui/src/components/DropDownSelection.tsx
+++ b/packages/amis-ui/src/components/DropDownSelection.tsx
@ -20,6 +20,7 @@ import {matchSorter} from 'match-sorter';
 import {Icon} from './icons';
 import SearchBox from './SearchBox';
 import {Option} from './Select';
+import type {TestIdBuilder} from 'amis-core';

 export interface DropDownSelectionProps
  extends ThemeProps,
@ -33,6 +34,7 @@ export interface DropDownSelectionProps
  searchable?: boolean;
  popOverContainer?: any;
  mode?: 'list' | 'tree';
+  testIdBuilder?: TestIdBuilder;
 }

 export interface DropDownSelectionState {
@ -98,6 +100,7 @@ class DropDownSelection extends BaseSelection<
      option2value,
      loadingConfig,
      popOverContainer,
+      testIdBuilder,
      mobileUI
    } = this.props;

@ -108,7 +111,11 @@ class DropDownSelection extends BaseSelection<
        popOverRender={({onClose}) => (
          <div>
            {searchable ? (
-              <SearchBox mini={false} onSearch={this.onSearch} />
+              <SearchBox
+                mini={false}
+                onSearch={this.onSearch}
+                testIdBuilder={testIdBuilder?.getChild('searchbox')}
+              />
            ) : null}
            {mode === 'list' ? (
              <ListSelection
@ -117,6 +124,7 @@ class DropDownSelection extends BaseSelection<
                options={this.filterOptions(this.props.options)}
                value={value}
                option2value={option2value}
+                testIdBuilder={testIdBuilder?.getChild('selection')}
                onChange={(value: any) => {
                  onChange(Array.isArray(value) ? value[0] : value);
                }}
@ -128,6 +136,7 @@ class DropDownSelection extends BaseSelection<
                options={this.filterOptions(this.props.options)}
                value={value}
                loadingConfig={loadingConfig}
+                testIdBuilder={testIdBuilder?.getChild('selection')}
                onChange={(value: any) => {
                  this.onPopClose(onClose);
                  onChange(value[valueField]);
@ -156,6 +165,7 @@ class DropDownSelection extends BaseSelection<
              placeholder={__('Condition.field_placeholder')}
              disabled={disabled}
              mobileUI={mobileUI}
+              testIdBuilder={testIdBuilder?.getChild('resultbox')}
            >
              {!mobileUI ? (
                <span className={cx('DropDownSelection-caret')}>
--- a/packages/amis-ui/src/components/GroupedSelection.tsx
+++ b/packages/amis-ui/src/components/GroupedSelection.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import {uncontrollable, flattenTree} from 'amis-core';
+import {uncontrollable, flattenTree, TestIdBuilder} from 'amis-core';

 import {BaseSelection, BaseSelectionProps} from './Selection';
 import {themeable} from 'amis-core';
@ -15,7 +15,8 @@ export class GroupedSelection extends BaseSelection<BaseSelectionProps> {
    option: Option,
    index: number,
    key: string = `${index}`,
-    styles: object = {}
+    styles: object = {},
+    testIdBuilder?: TestIdBuilder
  ): JSX.Element {
    const {
      disabled,
@ -25,12 +26,13 @@ export class GroupedSelection extends BaseSelection<BaseSelectionProps> {
      labelField = 'label'
    } = this.props;

+    const tBuilder = testIdBuilder?.getChild(index);
    if (Array.isArray(option.children)) {
      if (!option[labelField]) {
        return (
          <>
            {option.children.map((child: Option, index: number) =>
-              this.renderOption(child, index)
+              this.renderOption(child, index, `${index}`, {}, tBuilder)
            )}
          </>
        );
@ -49,20 +51,21 @@ export class GroupedSelection extends BaseSelection<BaseSelectionProps> {
              onChange: () => undefined,
              disabled: disabled || option.disabled,
              labelField,
-              classnames: cx
+              classnames: cx,
+              testIdBuilder: tBuilder?.getChild('label')
            })}
          </div>

          <div className={cx('GroupedSelection-items', option.className)}>
            {option.children.map((child, index) =>
-              this.renderOption(child, index)
+              this.renderOption(child, index, `${index}`, {}, tBuilder)
            )}
          </div>
        </div>
      );
    }

-    return this.renderPureOption(option, index, key, styles);
+    return this.renderPureOption(option, index, key, styles, tBuilder);
  }

  renderOptionOrLabel(
@ -120,7 +123,8 @@ export class GroupedSelection extends BaseSelection<BaseSelectionProps> {
    option: Option,
    index: number,
    key: string = `${index}`,
-    styles: object = {}
+    styles: object = {},
+    testIdBuilder?: TestIdBuilder
  ): JSX.Element {
    const {
      labelClassName,
@ -129,12 +133,12 @@ export class GroupedSelection extends BaseSelection<BaseSelectionProps> {
      itemClassName,
      itemRender,
      multiple,
-      labelField,
-      testIdBuilder
+      labelField
    } = this.props;

    const valueArray = this.valueArray;
-    const itemTIB = testIdBuilder?.getChild(`item-${option.value || index}`);
+    console.log(option.value);
+    const itemTIB = testIdBuilder?.getChild(`item-${index}`);

    return (
      <div
@ -168,7 +172,8 @@ export class GroupedSelection extends BaseSelection<BaseSelectionProps> {
            onChange: () => this.toggleOption(option),
            disabled: disabled || option.disabled,
            labelField,
-            classnames: cx
+            classnames: cx,
+            testIdBuilder: itemTIB?.getChild('label')
          })}
        </div>
      </div>
@ -231,7 +236,8 @@ export class GroupedSelection extends BaseSelection<BaseSelectionProps> {
      placeholderRender,
      virtualThreshold = 1000,
      itemHeight = 32,
-      virtualListHeight
+      virtualListHeight,
+      testIdBuilder
    } = this.props;
    const __ = this.props.translate;

@ -281,7 +287,9 @@ export class GroupedSelection extends BaseSelection<BaseSelectionProps> {
        ) : (
          <>
            {this.renderCheckAll()}
-            {options.map((option, key) => this.renderOption(option, key))}
+            {options.map((option, key) =>
+              this.renderOption(option, key, `${key}`, {}, testIdBuilder)
+            )}
          </>
        );
    }
--- a/packages/amis-ui/src/components/Selection.tsx
+++ b/packages/amis-ui/src/components/Selection.tsx
@ -62,6 +62,7 @@ export interface ItemRenderStates {
  onChange: () => void;
  disabled?: boolean;
  classnames: ClassNamesFn;
+  testIdBuilder?: TestIdBuilder;
 }

 export class BaseSelection<
@ -72,6 +73,7 @@ export class BaseSelection<
    const label = option[states?.labelField || 'label'];
    const tip = option.tip || '';
    const classnames = states.classnames;
+    const testIdBuilder = states.testIdBuilder;

    const canlabelTitle =
      typeof label === 'string' || typeof label === 'number';
@ -84,6 +86,7 @@ export class BaseSelection<
        className={`${cx({'is-invalid': option?.__unmatched})} ${classnames(
          'Selection-ellipsis-line'
        )}`}
+        {...testIdBuilder?.getChild('span').getTestId()}
      >
        {label}
        {tip}
@ -244,7 +247,8 @@ export class BaseSelection<
      multiple,
      labelField,
      valueField,
-      onClick
+      onClick,
+      testIdBuilder
    } = this.props;

    const __ = this.props.translate;
@ -276,7 +280,8 @@ export class BaseSelection<
            onChange: () => this.toggleOption(option),
            labelField,
            classnames: cx,
-            disabled: disabled || option.disabled
+            disabled: disabled || option.disabled,
+            testIdBuilder: testIdBuilder?.getChild(key)
          })}
        </Checkbox>
      ));
--- a/packages/amis-ui/src/components/condition-builder/Expression.tsx
+++ b/packages/amis-ui/src/components/condition-builder/Expression.tsx
@ -22,7 +22,12 @@ import ConditionFunc from './Func';
 import {ConditionBuilderConfig} from './config';
 import Formula from './Formula';
 import {FormulaPickerProps} from '../formula/Picker';
-import type {ExpressionComplex, OperatorType, ExpressionFunc} from 'amis-core';
+import type {
+  ExpressionComplex,
+  OperatorType,
+  ExpressionFunc,
+  TestIdBuilder
+} from 'amis-core';

 /**
 * 支持4中表达式设置方式
@ -51,6 +56,7 @@ export interface ExpressionProps extends ThemeProps, LocaleProps {
  popOverContainer?: any;
  renderEtrValue?: any;
  selectMode?: 'list' | 'tree' | 'chained';
+  testIdBuilder?: TestIdBuilder;
 }

 const fieldMap = {
@ -131,7 +137,8 @@ export class Expression extends React.Component<ExpressionProps> {
      formula,
      popOverContainer,
      selectMode,
-      renderEtrValue
+      renderEtrValue,
+      testIdBuilder
    } = this.props;
    const inputType =
      ((value as any)?.type === 'field'
@ -162,6 +169,7 @@ export class Expression extends React.Component<ExpressionProps> {
            formula={formula}
            popOverContainer={popOverContainer}
            renderEtrValue={renderEtrValue}
+            testIdBuilder={testIdBuilder?.getChild('tValue')}
          />
        ) : null}

@ -174,6 +182,7 @@ export class Expression extends React.Component<ExpressionProps> {
            searchable={searchable}
            popOverContainer={popOverContainer}
            selectMode={selectMode}
+            testIdBuilder={testIdBuilder?.getChild('tField')}
            options={
              valueField
                ? filterTree(
@ -197,6 +206,7 @@ export class Expression extends React.Component<ExpressionProps> {
            fields={fields}
            allowedTypes={allowedTypes}
            disabled={disabled}
+            testIdBuilder={testIdBuilder?.getChild('tFunc')}
          />
        ) : null}

@ -206,6 +216,7 @@ export class Expression extends React.Component<ExpressionProps> {
            value={inputType}
            popOverContainer={popOverContainer}
            onChange={this.handleInputTypeChange}
+            testIdBuilder={testIdBuilder?.getChild('tSwitch')}
            options={types.map(item => ({
              label: fieldMap[item],
              value: item
--- a/packages/amis-ui/src/components/condition-builder/Field.tsx
+++ b/packages/amis-ui/src/components/condition-builder/Field.tsx
@ -3,6 +3,7 @@ import {ThemeProps, themeable, localeable, LocaleProps} from 'amis-core';
 import {SpinnerExtraProps} from '../Spinner';
 import DropDownSelection from '../DropDownSelection';
 import ChainedDropdownSelection from '../ChainedDropdownSelection';
+import type {TestIdBuilder} from 'amis-core';

 export interface ConditionFieldProps
  extends ThemeProps,
@ -16,6 +17,7 @@ export interface ConditionFieldProps
  searchable?: boolean;
  popOverContainer?: any;
  selectMode?: 'list' | 'tree' | 'chained';
+  testIdBuilder?: TestIdBuilder;
 }

 export interface FieldState {
@ -38,7 +40,8 @@ export class ConditionField extends React.Component<
      searchable,
      selectMode = 'list',
      options,
-      loadingConfig
+      loadingConfig,
+      testIdBuilder
    } = this.props;

    return selectMode === 'chained' ? (
@ -52,6 +55,7 @@ export class ConditionField extends React.Component<
        option2value={option2value}
        searchable={searchable}
        disabled={disabled}
+        testIdBuilder={testIdBuilder?.getChild('s-chained')}
        onChange={(value: any) => {
          onChange(Array.isArray(value) ? value[0] : value);
        }}
@ -70,6 +74,7 @@ export class ConditionField extends React.Component<
        options={options}
        value={value}
        loadingConfig={loadingConfig}
+        testIdBuilder={testIdBuilder?.getChild('s-tree')}
        onChange={(value: any) => {
          onChange(value);
        }}
@ -84,6 +89,7 @@ export class ConditionField extends React.Component<
        option2value={option2value}
        searchable={searchable}
        disabled={disabled}
+        testIdBuilder={testIdBuilder?.getChild('s-default')}
        onChange={(value: any) =>
          onChange(Array.isArray(value) ? value[0] : value)
        }
--- a/packages/amis-ui/src/components/condition-builder/Func.tsx
+++ b/packages/amis-ui/src/components/condition-builder/Func.tsx
@ -20,7 +20,7 @@ import ResultBox from '../ResultBox';
 import {Icon} from '../icons';
 import Expression from './Expression';
 import {ConditionBuilderConfig} from './config';
-import type {ExpressionFunc} from 'amis-core';
+import type {TestIdBuilder, ExpressionFunc} from 'amis-core';

 export interface ConditionFuncProps extends ThemeProps, LocaleProps {
  value: ExpressionFunc;
@ -31,6 +31,7 @@ export interface ConditionFuncProps extends ThemeProps, LocaleProps {
  funcs?: ConditionBuilderFuncs;
  allowedTypes?: Array<'value' | 'field' | 'func'>;
  fieldClassName?: string;
+  testIdBuilder?: TestIdBuilder;
 }

 const option2value = (item: ConditionFieldFunc) => item.type;
@ -52,7 +53,15 @@ export class ConditionFunc extends React.Component<ConditionFuncProps> {
  }

  renderFunc(func: ConditionFieldFunc) {
-    const {classnames: cx, fields, value, funcs, config, disabled} = this.props;
+    const {
+      classnames: cx,
+      fields,
+      value,
+      funcs,
+      config,
+      disabled,
+      testIdBuilder
+    } = this.props;

    return (
      <div className={cx('CBFunc-args')}>
@ -70,6 +79,7 @@ export class ConditionFunc extends React.Component<ConditionFuncProps> {
                onChange={this.handleArgChange}
                funcs={funcs}
                disabled={disabled}
+                testIdBuilder={testIdBuilder?.getChild(`exp-${index}`)}
                // allowedTypes={allowedTypes}
              />
            ))}
@ -87,6 +97,7 @@ export class ConditionFunc extends React.Component<ConditionFuncProps> {
      fieldClassName,
      funcs,
      disabled,
+      testIdBuilder,
      translate: __
    } = this.props;
    const func = value
@ -107,6 +118,7 @@ export class ConditionFunc extends React.Component<ConditionFuncProps> {
              option2value={option2value}
              onChange={this.handleFuncChange}
              multiple={false}
+              testIdBuilder={testIdBuilder?.getChild('group')}
            />
          )}
        >
@ -125,6 +137,7 @@ export class ConditionFunc extends React.Component<ConditionFuncProps> {
                onResultClick={onClick}
                placeholder={__('Condition.field_placeholder')}
                disabled={disabled}
+                testIdBuilder={testIdBuilder?.getChild('resbox')}
              >
                <span className={cx('CBGroup-fieldCaret')}>
                  <Icon icon="right-arrow-bold" className="icon" />
--- a/packages/amis-ui/src/components/condition-builder/Group.tsx
+++ b/packages/amis-ui/src/components/condition-builder/Group.tsx
@ -18,6 +18,7 @@ import {FormulaPickerProps} from '../formula/Picker';
 import Select from '../Select';

 import {DownArrowBoldIcon} from '../icons';
+import type {TestIdBuilder} from 'amis-core';

 interface ConditionGroupState {
  isCollapsed: boolean;
@ -50,6 +51,7 @@ export interface ConditionGroupProps extends ThemeProps, LocaleProps {
  depth: number;
  isAddBtnVisibleOn?: (param: {depth: number; breadth: number}) => boolean;
  isAddGroupBtnVisibleOn?: (param: {depth: number; breadth: number}) => boolean;
+  testIdBuilder?: TestIdBuilder;
 }

 export class ConditionGroup extends React.Component<
@ -196,7 +198,8 @@ export class ConditionGroup extends React.Component<
      isAddBtnVisibleOn,
      isAddGroupBtnVisibleOn,
      showIf,
-      formulaForIf
+      formulaForIf,
+      testIdBuilder
    } = this.props;
    const {isCollapsed} = this.state;

@ -252,6 +255,9 @@ export class ConditionGroup extends React.Component<
                  value: 'or'
                }
              ]}
+              testIdBuilder={testIdBuilder?.getChild(
+                value?.conjunction || 'and'
+              )}
              value={value?.conjunction || 'and'}
              disabled={disabled}
              onChange={this.handleConjunctionChange}
@ -289,6 +295,7 @@ export class ConditionGroup extends React.Component<
                  isAddGroupBtnVisibleOn={isAddGroupBtnVisibleOn}
                  showIf={showIf}
                  formulaForIf={formulaForIf}
+                  testIdBuilder={testIdBuilder?.getChild(`group-${index}`)}
                />
              ))
            ) : (
@ -331,6 +338,7 @@ export class ConditionGroup extends React.Component<
                      onClick={this.handleAdd}
                      size="xs"
                      disabled={disabled}
+                      testIdBuilder={testIdBuilder?.getChild('add')}
                    >
                      {__('Condition.add_cond')}
                    </Button>
@ -341,6 +349,7 @@ export class ConditionGroup extends React.Component<
                      size="xs"
                      disabled={disabled}
                      level="link"
+                      testIdBuilder={testIdBuilder?.getChild('add-group')}
                    >
                      {__('Condition.add_cond_group')}
                    </Button>
@ -351,6 +360,7 @@ export class ConditionGroup extends React.Component<
                      size="xs"
                      disabled={disabled}
                      level="link"
+                      testIdBuilder={testIdBuilder?.getChild('add-del')}
                    >
                      {__('Condition.delete_cond_group')}
                    </Button>
--- a/packages/amis-ui/src/components/condition-builder/GroupOrItem.tsx
+++ b/packages/amis-ui/src/components/condition-builder/GroupOrItem.tsx
@ -9,6 +9,7 @@ import FormulaPicker, {FormulaPickerProps} from '../formula/Picker';
 import Button from '../Button';
 import type {ConditionGroupValue, ConditionValue} from 'amis-core';
 import TooltipWrapper from '../TooltipWrapper';
+import type {TestIdBuilder} from 'amis-core';

 export interface CBGroupOrItemProps extends ThemeProps {
  builderMode?: 'simple' | 'full';
@ -36,6 +37,7 @@ export interface CBGroupOrItemProps extends ThemeProps {
  isAddGroupBtnVisibleOn?: (param: {depth: number; breadth: number}) => boolean;
  showIf?: boolean;
  formulaForIf?: FormulaPickerProps;
+  testIdBuilder?: TestIdBuilder;
 }

 export class CBGroupOrItem extends React.Component<CBGroupOrItemProps> {
@ -103,6 +105,7 @@ export class CBGroupOrItem extends React.Component<CBGroupOrItemProps> {
      isAddGroupBtnVisibleOn,
      showIf,
      formulaForIf,
+      testIdBuilder,
      mobileUI
    } = this.props;

@ -155,6 +158,7 @@ export class CBGroupOrItem extends React.Component<CBGroupOrItemProps> {
                isAddGroupBtnVisibleOn={isAddGroupBtnVisibleOn}
                showIf={showIf}
                formulaForIf={formulaForIf}
+                testIdBuilder={testIdBuilder?.getChild(`sub-${depth}`)}
              />
            </div>
          ) : (
@ -182,6 +186,7 @@ export class CBGroupOrItem extends React.Component<CBGroupOrItemProps> {
                popOverContainer={popOverContainer}
                renderEtrValue={renderEtrValue}
                selectMode={selectMode}
+                testIdBuilder={testIdBuilder?.getChild(`cItem`)}
              />
              {showIf ? (
                <FormulaPicker
@ -215,6 +220,7 @@ export class CBGroupOrItem extends React.Component<CBGroupOrItemProps> {
                onClick={this.handleItemRemove}
                disabled={disabled}
                level="link"
+                testIdBuilder={testIdBuilder?.getChild(`delete`)}
              >
                <Icon icon="remove" className="icon" />
              </Button>
--- a/packages/amis-ui/src/components/condition-builder/InputSwitch.tsx
+++ b/packages/amis-ui/src/components/condition-builder/InputSwitch.tsx
@ -3,6 +3,7 @@ import PopOverContainer from '../PopOverContainer';
 import {Icon} from '../icons';
 import GroupedSelection from '../GroupedSelection';
 import {themeable, ThemeProps} from 'amis-core';
+import type {TestIdBuilder} from 'amis-core';

 export interface InputSwitchProps extends ThemeProps {
  options: Array<any>;
@ -10,6 +11,7 @@ export interface InputSwitchProps extends ThemeProps {
  popOverContainer?: any;
  value: any;
  onChange: (value: any) => void;
+  testIdBuilder?: TestIdBuilder;
 }

 const option2value = (item: any) => item.value;
@ -20,7 +22,8 @@ export function InputSwitch({
  onChange,
  classnames: cx,
  disabled,
-  popOverContainer
+  popOverContainer,
+  testIdBuilder
 }: InputSwitchProps) {
  return (
    <PopOverContainer
@ -34,11 +37,15 @@ export function InputSwitch({
          value={value}
          multiple={false}
          disabled={disabled}
+          testIdBuilder={testIdBuilder?.getChild('group')}
        />
      )}
    >
      {({onClick, isOpened, ref}) => (
-        <div className={cx('CBInputSwitch', isOpened ? 'is-active' : '')}>
+        <div
+          className={cx('CBInputSwitch', isOpened ? 'is-active' : '')}
+          {...testIdBuilder?.getTestId()}
+        >
          <a onClick={onClick} ref={ref}>
            <Icon icon="ellipsis-v" />
          </a>
--- a/packages/amis-ui/src/components/condition-builder/Item.tsx
+++ b/packages/amis-ui/src/components/condition-builder/Item.tsx
@ -33,7 +33,8 @@ import type {
  OperatorType,
  ExpressionFunc,
  ExpressionField,
-  ExpressionComplex
+  ExpressionComplex,
+  TestIdBuilder
 } from 'amis-core';

 const option2value = (item: any) => item.value;
@ -53,6 +54,7 @@ export interface ConditionItemProps extends ThemeProps, LocaleProps {
  popOverContainer?: any;
  renderEtrValue?: any;
  selectMode?: 'list' | 'tree' | 'chained';
+  testIdBuilder?: TestIdBuilder;
 }

 export class ConditionItem extends React.Component<ConditionItemProps> {
@ -157,7 +159,8 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
      fieldClassName,
      searchable,
      popOverContainer,
-      selectMode
+      selectMode,
+      testIdBuilder
    } = this.props;
    return (
      <Expression
@ -171,6 +174,7 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
        searchable={searchable}
        popOverContainer={popOverContainer}
        selectMode={selectMode}
+        testIdBuilder={testIdBuilder?.getChild('left')}
        allowedTypes={
          ['field', 'func'].filter(
            type => type === 'field' || type === 'func'
@ -189,6 +193,7 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
      classnames: cx,
      disabled,
      popOverContainer,
+      testIdBuilder,
      mobileUI
    } = this.props;
    const left = value?.left;
@ -239,6 +244,7 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
              options={options}
              value={value.op}
              multiple={false}
+              testIdBuilder={testIdBuilder?.getChild('operator-group')}
            />
          )}
        >
@ -260,6 +266,7 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
                disabled={disabled}
                placeholder={__('Condition.cond_placeholder')}
                mobileUI={mobileUI}
+                testIdBuilder={testIdBuilder?.getChild('operator-resbox')}
              >
                {!mobileUI ? (
                  <span className={cx('CBGroup-operatorCaret')}>
@ -324,7 +331,8 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
      disabled,
      formula,
      popOverContainer,
-      renderEtrValue
+      renderEtrValue,
+      testIdBuilder
    } = this.props;
    let field = {
      ...config.types[type],
@ -372,6 +380,9 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
            formula={formula}
            popOverContainer={popOverContainer}
            renderEtrValue={renderEtrValue}
+            testIdBuilder={testIdBuilder?.getChild(
+              `right-${op}-${field.name}-exp-0`
+            )}
          />

          <span className={cx('CBSeprator')}>~</span>
@ -393,6 +404,9 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
            formula={formula}
            popOverContainer={popOverContainer}
            renderEtrValue={renderEtrValue}
+            testIdBuilder={testIdBuilder?.getChild(
+              `right-${op}-${field.name}-exp-1`
+            )}
          />
        </>
      );
@ -418,6 +432,9 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
              formula={formula}
              popOverContainer={popOverContainer}
              renderEtrValue={renderEtrValue}
+              testIdBuilder={testIdBuilder?.getChild(
+                `right-${op}-${field.name}-exp-${i}`
+              )}
            />
          </span>
        );
@ -441,6 +458,7 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
        formula={formula}
        popOverContainer={popOverContainer}
        renderEtrValue={renderEtrValue}
+        testIdBuilder={testIdBuilder?.getChild(`right-${op}-${field.name}-exp`)}
      />
    );
  }
--- a/packages/amis-ui/src/components/condition-builder/Value.tsx
+++ b/packages/amis-ui/src/components/condition-builder/Value.tsx
@ -13,7 +13,7 @@ import DatePicker from '../DatePicker';
 import {SelectWithRemoteOptions as Select} from '../Select';
 import Switch from '../Switch';
 import {FormulaPicker, FormulaPickerProps} from '../formula/Picker';
-import type {OperatorType} from 'amis-core';
+import type {OperatorType, TestIdBuilder} from 'amis-core';
 import omit from 'lodash/omit';

 export interface ValueProps extends ThemeProps, LocaleProps {
@ -26,6 +26,7 @@ export interface ValueProps extends ThemeProps, LocaleProps {
  formula?: FormulaPickerProps;
  popOverContainer?: any;
  renderEtrValue?: any;
+  testIdBuilder?: TestIdBuilder;
 }

 export class Value extends React.Component<ValueProps> {
@ -60,7 +61,8 @@ export class Value extends React.Component<ValueProps> {
      disabled,
      formula,
      popOverContainer,
-      mobileUI
+      mobileUI,
+      testIdBuilder
    } = this.props;
    let input: JSX.Element | undefined = undefined;
    if (formula) {
@ -101,6 +103,7 @@ export class Value extends React.Component<ValueProps> {
          placeholder={__(field.placeholder)}
          disabled={disabled}
          mobileUI={mobileUI}
+          testIdBuilder={testIdBuilder?.getChild('text')}
        />
      );
    } else if (field.type === 'number') {
@ -115,6 +118,7 @@ export class Value extends React.Component<ValueProps> {
          onChange={onChange}
          disabled={disabled}
          mobileUI={mobileUI}
+          testIdBuilder={testIdBuilder?.getChild('number')}
        />
      );
    } else if (field.type === 'date') {
@ -129,6 +133,7 @@ export class Value extends React.Component<ValueProps> {
          disabled={disabled}
          popOverContainer={popOverContainer}
          mobileUI={mobileUI}
+          testIdBuilder={testIdBuilder?.getChild('date')}
        />
      );
    } else if (field.type === 'time') {
@ -145,6 +150,7 @@ export class Value extends React.Component<ValueProps> {
          disabled={disabled}
          popOverContainer={popOverContainer}
          mobileUI={mobileUI}
+          testIdBuilder={testIdBuilder?.getChild('time')}
        />
      );
    } else if (field.type === 'datetime') {
@ -159,6 +165,7 @@ export class Value extends React.Component<ValueProps> {
          disabled={disabled}
          popOverContainer={popOverContainer}
          mobileUI={mobileUI}
+          testIdBuilder={testIdBuilder?.getChild('datetime')}
        />
      );
    } else if (field.type === 'select') {
@ -181,6 +188,7 @@ export class Value extends React.Component<ValueProps> {
          mobileUI={mobileUI}
          maxTagCount={field.maxTagCount}
          overflowTagPopover={field.overflowTagPopover}
+          testIdBuilder={testIdBuilder?.getChild('select')}
        />
      );
    } else if (field.type === 'boolean') {
@ -190,6 +198,7 @@ export class Value extends React.Component<ValueProps> {
            value={value ?? field.defaultValue}
            onChange={onChange}
            disabled={disabled}
+            testIdBuilder={testIdBuilder?.getChild('switch')}
          />
        </div>
      );
@ -197,13 +206,15 @@ export class Value extends React.Component<ValueProps> {
      input = this.renderCustomValue({
        value: value ?? field.defaultValue,
        onChange,
-        inputSettings: field
+        inputSettings: field,
+        testIdBuilder: testIdBuilder?.getChild('custom')
      });
    } else {
      // 不支持的也转给自定义组件处理
      input = this.renderCustomValue({
        value: value ?? (field as any).defaultValue,
        onChange,
+        testIdBuilder: testIdBuilder?.getChild('custom'),
        inputSettings: {
          value: omit(field, [
            'label',
--- a/packages/amis-ui/src/components/condition-builder/index.tsx
+++ b/packages/amis-ui/src/components/condition-builder/index.tsx
@ -20,7 +20,7 @@ import defaultConfig, {ConditionBuilderConfig} from './config';
 import {FormulaPickerProps} from '../formula/Picker';
 import PickerContainer from '../PickerContainer';
 import ResultBox from '../ResultBox';
-import type {ConditionGroupValue} from 'amis-core';
+import type {ConditionGroupValue, TestIdBuilder} from 'amis-core';

 export interface ConditionBuilderProps extends ThemeProps, LocaleProps {
  builderMode?: 'simple' | 'full'; // 简单模式｜完整模式
@ -48,6 +48,7 @@ export interface ConditionBuilderProps extends ThemeProps, LocaleProps {
  selectMode?: 'list' | 'tree' | 'chained';
  isAddBtnVisibleOn?: (param: {depth: number; breadth: number}) => boolean;
  isAddGroupBtnVisibleOn?: (param: {depth: number; breadth: number}) => boolean;
+  testIdBuilder?: TestIdBuilder;
 }

 export interface ConditionBuilderState {
@ -265,7 +266,8 @@ export class QueryBuilder extends React.Component<
      isAddBtnVisibleOn,
      isAddGroupBtnVisibleOn,
      showIf,
-      formulaForIf
+      formulaForIf,
+      testIdBuilder
    } = this.props;

    const normalizedValue = Array.isArray(value?.children)
@ -311,6 +313,7 @@ export class QueryBuilder extends React.Component<
        isAddGroupBtnVisibleOn={isAddGroupBtnVisibleOn}
        showIf={showIf}
        formulaForIf={formulaForIf}
+        testIdBuilder={testIdBuilder?.getChild('group')}
      />
    );
  }
@ -329,6 +332,7 @@ export class QueryBuilder extends React.Component<
      title,
      disabled,
      popOverContainer,
+      testIdBuilder,
      mobileUI
    } = this.props;

@ -388,6 +392,7 @@ export class QueryBuilder extends React.Component<
            }
            mobileUI={mobileUI}
            onResultClick={onClick}
+            testIdBuilder={testIdBuilder?.getChild('result-box')}
          ></ResultBox>
        )}
      </PickerContainer>