diff --git a/web/src/components/auto-keywords-form-field.tsx b/web/src/components/auto-keywords-form-field.tsx
index 9b8b9da73d..33373b1e1d 100644
--- a/web/src/components/auto-keywords-form-field.tsx
+++ b/web/src/components/auto-keywords-form-field.tsx
@@ -13,6 +13,8 @@ export function AutoKeywordsFormField() {
       min={0}
       tooltip={t('autoKeywordsTip')}
       layout={FormLayout.Horizontal}
+      sliderTestId="ds-settings-parser-auto-keyword-slider"
+      numberInputTestId="ds-settings-parser-auto-keyword-input"
     ></SliderInputFormField>
   );
 }
@@ -28,6 +30,8 @@ export function AutoQuestionsFormField() {
       min={0}
       tooltip={t('autoQuestionsTip')}
       layout={FormLayout.Horizontal}
+      sliderTestId="ds-settings-parser-auto-question-slider"
+      numberInputTestId="ds-settings-parser-auto-question-input"
     ></SliderInputFormField>
   );
 }
diff --git a/web/src/components/avatar-upload.tsx b/web/src/components/avatar-upload.tsx
index bee9c85f0c..95e9d9c3a7 100644
--- a/web/src/components/avatar-upload.tsx
+++ b/web/src/components/avatar-upload.tsx
@@ -18,10 +18,25 @@ type AvatarUploadProps = {
   value?: string;
   onChange?: (value: string) => void;
   tips?: string;
+  uploadInputTestId?: string;
+  removeButtonTestId?: string;
+  cropModalTestId?: string;
+  cropModalOkButtonTestId?: string;
 };
 
 export const AvatarUpload = forwardRef<HTMLInputElement, AvatarUploadProps>(
-  function AvatarUpload({ value, onChange, tips }, ref) {
+  function AvatarUpload(
+    {
+      value,
+      onChange,
+      tips,
+      uploadInputTestId,
+      removeButtonTestId,
+      cropModalTestId,
+      cropModalOkButtonTestId,
+    },
+    ref,
+  ) {
     const { t } = useTranslation();
     const [avatarBase64Str, setAvatarBase64Str] = useState(''); // Avatar Image base64
     const [isCropModalOpen, setIsCropModalOpen] = useState(false);
@@ -285,6 +300,7 @@ export const AvatarUpload = forwardRef<HTMLInputElement, AvatarUploadProps>(
                 className="border-background focus-visible:border-background absolute -top-2 -right-2 size-6 rounded-full border-2 shadow-none z-10"
                 aria-label="Remove image"
                 type="button"
+                data-testid={removeButtonTestId}
               >
                 <LucideX className="size-3" />
               </Button>
@@ -299,6 +315,7 @@ export const AvatarUpload = forwardRef<HTMLInputElement, AvatarUploadProps>(
             className="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
             onChange={handleChange}
             ref={ref}
+            data-testid={uploadInputTestId}
           />
         </div>
         <div className="margin-1 text-sm text-text-secondary">
@@ -318,6 +335,8 @@ export const AvatarUpload = forwardRef<HTMLInputElement, AvatarUploadProps>(
           size="small"
           onCancel={handleCancelCrop}
           onOk={handleCrop}
+          testId={cropModalTestId}
+          okButtonTestId={cropModalOkButtonTestId}
           // footer={
           //   <div className="flex justify-end space-x-2">
           //     <Button variant="secondary" onClick={handleCancelCrop}>
diff --git a/web/src/components/children-delimiter-form.tsx b/web/src/components/children-delimiter-form.tsx
index 7fa417a56c..b39d243c12 100644
--- a/web/src/components/children-delimiter-form.tsx
+++ b/web/src/components/children-delimiter-form.tsx
@@ -75,6 +75,7 @@ export function ChildrenDelimiterForm() {
                       onChange(checked);
                     }}
                     {...restProps}
+                    data-testid="ds-settings-parser-child-chunk-switch"
                   />
                 </FormControl>
               </div>
@@ -99,7 +100,10 @@ export function ChildrenDelimiterForm() {
                 </FormLabel>
                 <div className="w-3/4">
                   <FormControl>
-                    <DelimiterInput {...field} />
+                    <DelimiterInput
+                      {...field}
+                      data-testid="ds-settings-parser-child-chunk-delimiter-input"
+                    />
                   </FormControl>
                 </div>
               </div>
diff --git a/web/src/components/confirm-delete-dialog.tsx b/web/src/components/confirm-delete-dialog.tsx
index 616ff7a072..eacbb83986 100644
--- a/web/src/components/confirm-delete-dialog.tsx
+++ b/web/src/components/confirm-delete-dialog.tsx
@@ -27,6 +27,9 @@ interface IProps {
   };
   okButtonText?: string;
   cancelButtonText?: string;
+  testId?: string;
+  confirmButtonTestId?: string;
+  cancelButtonTestId?: string;
 }
 
 export function ConfirmDeleteDialog({
@@ -41,6 +44,9 @@ export function ConfirmDeleteDialog({
   content,
   okButtonText,
   cancelButtonText,
+  testId,
+  confirmButtonTestId,
+  cancelButtonTestId,
 }: IProps & DialogProps) {
   const { t } = useTranslation();
 
@@ -60,6 +66,7 @@ export function ConfirmDeleteDialog({
         onSelect={(e) => e.preventDefault()}
         onClick={(e) => e.stopPropagation()}
         className="bg-bg-base "
+        data-testid={testId ?? 'confirm-delete-dialog'}
       >
         <AlertDialogHeader className="space-y-5">
           <AlertDialogTitle>
@@ -86,12 +93,20 @@ export function ConfirmDeleteDialog({
           )}
         </AlertDialogHeader>
         <AlertDialogFooter className="px-5 flex items-center gap-2">
-          <AlertDialogCancel onClick={onCancel}>
+          <AlertDialogCancel
+            onClick={onCancel}
+            data-testid={
+              cancelButtonTestId ?? 'confirm-delete-dialog-cancel-btn'
+            }
+          >
             {cancelButtonText || t('common.cancel')}
           </AlertDialogCancel>
           <AlertDialogAction
             className="bg-state-error text-text-primary hover:text-text-primary hover:bg-state-error"
             onClick={onOk}
+            data-testid={
+              confirmButtonTestId ?? 'confirm-delete-dialog-confirm-btn'
+            }
           >
             {okButtonText || t('common.delete')}
           </AlertDialogAction>
diff --git a/web/src/components/edit-tag/index.tsx b/web/src/components/edit-tag/index.tsx
index decfbb968b..cadd34ee8c 100644
--- a/web/src/components/edit-tag/index.tsx
+++ b/web/src/components/edit-tag/index.tsx
@@ -13,10 +13,15 @@ interface EditTagsProps {
   value?: string[];
   onChange?: (tags: string[]) => void;
   disabled?: boolean;
+  addButtonTestId?: string;
+  inputTestId?: string;
 }
 
 const EditTag = React.forwardRef<HTMLDivElement, EditTagsProps>(
-  function EditTag({ value = [], onChange, disabled }, ref) {
+  function EditTag(
+    { value = [], onChange, disabled, addButtonTestId, inputTestId },
+    ref,
+  ) {
     const [inputVisible, setInputVisible] = useState(false);
     const [inputValue, setInputValue] = useState('');
     const inputRef = useRef<HTMLInputElement>(null);
@@ -92,6 +97,7 @@ const EditTag = React.forwardRef<HTMLDivElement, EditTagsProps>(
             onChange={handleInputChange}
             onBlur={handleInputConfirm}
             disabled={disabled}
+            data-testid={inputTestId}
             onKeyDown={(e) => {
               if (e?.key === 'Enter') {
                 handleInputConfirm();
@@ -107,6 +113,7 @@ const EditTag = React.forwardRef<HTMLDivElement, EditTagsProps>(
               className="w-fit flex items-center justify-center gap-2 bg-bg-card border-border-button border"
               onClick={showInput}
               disabled={disabled}
+              data-testid={addButtonTestId}
             >
               <PlusOutlined />
             </Button>
diff --git a/web/src/components/entity-types-form-field.tsx b/web/src/components/entity-types-form-field.tsx
index 0cc6b9f071..6838ce8ac1 100644
--- a/web/src/components/entity-types-form-field.tsx
+++ b/web/src/components/entity-types-form-field.tsx
@@ -11,9 +11,13 @@ import {
 
 type EntityTypesFormFieldProps = {
   name?: string;
+  addButtonTestId?: string;
+  inputTestId?: string;
 };
 export function EntityTypesFormField({
   name = 'parser_config.entity_types',
+  addButtonTestId,
+  inputTestId,
 }: EntityTypesFormFieldProps) {
   const { t } = useTranslate('knowledgeConfiguration');
   const form = useFormContext();
@@ -31,7 +35,11 @@ export function EntityTypesFormField({
               </FormLabel>
               <div className="w-3/4">
                 <FormControl>
-                  <EditTag {...field}></EditTag>
+                  <EditTag
+                    {...field}
+                    addButtonTestId={addButtonTestId}
+                    inputTestId={inputTestId}
+                  ></EditTag>
                 </FormControl>
               </div>
             </div>
diff --git a/web/src/components/excel-to-html-form-field.tsx b/web/src/components/excel-to-html-form-field.tsx
index 13ff8b821e..7e4bca3032 100644
--- a/web/src/components/excel-to-html-form-field.tsx
+++ b/web/src/components/excel-to-html-form-field.tsx
@@ -37,6 +37,7 @@ export function ExcelToHtmlFormField() {
                   <Switch
                     checked={field.value}
                     onCheckedChange={field.onChange}
+                    data-testid="ds-settings-parser-excel-to-html-switch"
                   ></Switch>
                 </FormControl>
               </div>
diff --git a/web/src/components/layout-recognize-form-field.tsx b/web/src/components/layout-recognize-form-field.tsx
index e122055e4c..7b6a077fb3 100644
--- a/web/src/components/layout-recognize-form-field.tsx
+++ b/web/src/components/layout-recognize-form-field.tsx
@@ -6,8 +6,8 @@ import { camelCase } from 'lodash';
 import { ReactNode, useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { MinerUOptionsFormField } from './mineru-options-form-field';
-import { PaddleOCROptionsFormField } from './paddleocr-options-form-field';
 import { SelectWithSearch } from './originui/select-with-search';
+import { PaddleOCROptionsFormField } from './paddleocr-options-form-field';
 import {
   FormControl,
   FormField,
@@ -30,6 +30,7 @@ export function LayoutRecognizeFormField({
   label,
   showMineruOptions = true,
   showPaddleocrOptions = true,
+  testId,
 }: {
   name?: string;
   horizontal?: boolean;
@@ -37,6 +38,7 @@ export function LayoutRecognizeFormField({
   label?: ReactNode;
   showMineruOptions?: boolean;
   showPaddleocrOptions?: boolean;
+  testId?: string;
 }) {
   const form = useFormContext();
 
@@ -106,6 +108,7 @@ export function LayoutRecognizeFormField({
                     <SelectWithSearch
                       {...field}
                       options={options}
+                      testId={testId}
                     ></SelectWithSearch>
                   </FormControl>
                 </div>
diff --git a/web/src/components/max-token-number-from-field.tsx b/web/src/components/max-token-number-from-field.tsx
index b01598d934..c9ed7212c9 100644
--- a/web/src/components/max-token-number-from-field.tsx
+++ b/web/src/components/max-token-number-from-field.tsx
@@ -5,9 +5,16 @@ import { SliderInputFormField } from './slider-input-form-field';
 interface IProps {
   initialValue?: number;
   max?: number;
+  sliderTestId?: string;
+  numberInputTestId?: string;
 }
 
-export function MaxTokenNumberFormField({ max = 2048, initialValue }: IProps) {
+export function MaxTokenNumberFormField({
+  max = 2048,
+  initialValue,
+  sliderTestId,
+  numberInputTestId,
+}: IProps) {
   const { t } = useTranslate('knowledgeConfiguration');
 
   return (
@@ -18,6 +25,8 @@ export function MaxTokenNumberFormField({ max = 2048, initialValue }: IProps) {
       max={max}
       defaultValue={initialValue ?? 0}
       layout={FormLayout.Horizontal}
+      sliderTestId={sliderTestId}
+      numberInputTestId={numberInputTestId}
     ></SliderInputFormField>
   );
 }
diff --git a/web/src/components/page-rank-form-field.tsx b/web/src/components/page-rank-form-field.tsx
index ea7d345905..42c6d00a24 100644
--- a/web/src/components/page-rank-form-field.tsx
+++ b/web/src/components/page-rank-form-field.tsx
@@ -14,6 +14,8 @@ export function PageRankFormField() {
       max={100}
       min={0}
       layout={FormLayout.Horizontal}
+      sliderTestId="ds-settings-parser-page-rank-slider"
+      numberInputTestId="ds-settings-parser-page-rank-input"
     ></SliderInputFormField>
   );
 }
diff --git a/web/src/components/parse-configuration/graph-rag-form-fields.tsx b/web/src/components/parse-configuration/graph-rag-form-fields.tsx
index 8f1fcdb434..1c41877392 100644
--- a/web/src/components/parse-configuration/graph-rag-form-fields.tsx
+++ b/web/src/components/parse-configuration/graph-rag-form-fields.tsx
@@ -147,7 +147,11 @@ const GraphRagItems = ({
       ></UseGraphRagFormField>
       {useRaptor && (
         <>
-          <EntityTypesFormField name="parser_config.graphrag.entity_types"></EntityTypesFormField>
+          <EntityTypesFormField
+            name="parser_config.graphrag.entity_types"
+            addButtonTestId="ds-settings-graph-entity-types-add-btn"
+            inputTestId="ds-settings-graph-entity-types-input"
+          ></EntityTypesFormField>
           <FormField
             control={form.control}
             name="parser_config.graphrag.method"
@@ -171,6 +175,7 @@ const GraphRagItems = ({
                       <RAGFlowSelect
                         {...field}
                         options={methodOptions}
+                        triggerTestId="ds-settings-graph-method-select"
                       ></RAGFlowSelect>
                     </FormControl>
                   </div>
@@ -200,6 +205,7 @@ const GraphRagItems = ({
                       <Switch
                         checked={field.value}
                         onCheckedChange={field.onChange}
+                        data-testid="ds-settings-graph-entity-resolution-switch"
                       ></Switch>
                     </FormControl>
                   </div>
@@ -229,6 +235,7 @@ const GraphRagItems = ({
                       <Switch
                         checked={field.value}
                         onCheckedChange={field.onChange}
+                        data-testid="ds-settings-graph-community-reports-switch"
                       ></Switch>
                     </FormControl>
                   </div>
diff --git a/web/src/components/parse-configuration/raptor-form-fields.tsx b/web/src/components/parse-configuration/raptor-form-fields.tsx
index dc089cdb0a..110493009f 100644
--- a/web/src/components/parse-configuration/raptor-form-fields.tsx
+++ b/web/src/components/parse-configuration/raptor-form-fields.tsx
@@ -129,8 +129,18 @@ const RaptorFormFields = ({
                   <FormControl>
                     <Radio.Group {...field} disabled={!!data?.finish_at}>
                       <div className={'flex gap-4 w-full text-text-secondary '}>
-                        <Radio value="dataset">{t('scopeDataset')}</Radio>
-                        <Radio value="file">{t('scopeSingleFile')}</Radio>
+                        <Radio
+                          value="dataset"
+                          testId="ds-settings-raptor-generation-scope-option-dataset"
+                        >
+                          {t('scopeDataset')}
+                        </Radio>
+                        <Radio
+                          value="file"
+                          testId="ds-settings-raptor-generation-scope-option-document"
+                        >
+                          {t('scopeSingleFile')}
+                        </Radio>
                       </div>
                     </Radio.Group>
                   </FormControl>
@@ -167,6 +177,7 @@ const RaptorFormFields = ({
                           onChange={(e) => {
                             field.onChange(e?.target?.value);
                           }}
+                          data-testid="ds-settings-raptor-prompt-textarea"
                         />
                       </FormControl>
                     </div>
@@ -186,6 +197,8 @@ const RaptorFormFields = ({
             max={2048}
             min={0}
             layout={FormLayout.Horizontal}
+            sliderTestId="ds-settings-raptor-max-token-slider"
+            numberInputTestId="ds-settings-raptor-max-token-input"
           ></SliderInputFormField>
           <SliderInputFormField
             name={'parser_config.raptor.threshold'}
@@ -195,6 +208,8 @@ const RaptorFormFields = ({
             max={1}
             min={0}
             layout={FormLayout.Horizontal}
+            sliderTestId="ds-settings-raptor-threshold-slider"
+            numberInputTestId="ds-settings-raptor-threshold-input"
           ></SliderInputFormField>
           <SliderInputFormField
             name={'parser_config.raptor.max_cluster'}
@@ -203,6 +218,8 @@ const RaptorFormFields = ({
             max={1024}
             min={1}
             layout={FormLayout.Horizontal}
+            sliderTestId="ds-settings-raptor-max-cluster-slider"
+            numberInputTestId="ds-settings-raptor-max-cluster-input"
           ></SliderInputFormField>
           <FormField
             control={form.control}
@@ -220,11 +237,13 @@ const RaptorFormFields = ({
                         className="w-full"
                         defaultValue={0}
                         type="number"
+                        data-testid="ds-settings-raptor-seed-input"
                         suffix={
                           <div className="w-7 flex justify-center items-center">
                             <Shuffle
                               className="size-3.5 cursor-pointer"
                               onClick={handleGenerate}
+                              data-testid="ds-settings-raptor-seed-randomize-btn"
                             />
                           </div>
                         }
diff --git a/web/src/components/slider-input-form-field.tsx b/web/src/components/slider-input-form-field.tsx
index 2b9980eb12..f45290eb07 100644
--- a/web/src/components/slider-input-form-field.tsx
+++ b/web/src/components/slider-input-form-field.tsx
@@ -27,6 +27,8 @@ type SliderInputFormFieldProps = {
   className?: string;
   numberInputClassName?: string;
   percentage?: boolean;
+  sliderTestId?: string;
+  numberInputTestId?: string;
 } & FormLayoutType;
 
 export const SliderInputFormField = forwardRef<
@@ -46,6 +48,8 @@ export const SliderInputFormField = forwardRef<
       numberInputClassName,
       layout = FormLayout.Horizontal,
       percentage = false,
+      sliderTestId,
+      numberInputTestId,
     },
     ref,
   ) => {
@@ -95,6 +99,7 @@ export const SliderInputFormField = forwardRef<
                   max={displayMax}
                   min={displayMin}
                   step={displayStep}
+                  data-testid={sliderTestId}
                 ></SingleFormSlider>
               </FormControl>
               <FormControl>
@@ -118,6 +123,7 @@ export const SliderInputFormField = forwardRef<
                       );
                     }
                   }}
+                  data-testid={numberInputTestId}
                 ></NumberInput>
               </FormControl>
             </div>
diff --git a/web/src/components/ui/radio.tsx b/web/src/components/ui/radio.tsx
index 64fa7d14f4..edcfb502d0 100644
--- a/web/src/components/ui/radio.tsx
+++ b/web/src/components/ui/radio.tsx
@@ -13,9 +13,17 @@ type RadioProps = {
   disabled?: boolean;
   onChange?: (checked: boolean) => void;
   children?: React.ReactNode;
+  testId?: string;
 };
 
-function Radio({ value, checked, disabled, onChange, children }: RadioProps) {
+function Radio({
+  value,
+  checked,
+  disabled,
+  onChange,
+  children,
+  testId,
+}: RadioProps) {
   const groupContext = useContext(RadioGroupContext);
   const isControlled = checked !== undefined;
   // const [internalChecked, setInternalChecked] = useState(false);
@@ -54,6 +62,7 @@ function Radio({ value, checked, disabled, onChange, children }: RadioProps) {
           mergedDisabled && 'border-muted',
         )}
         onClick={handleClick}
+        data-testid={testId}
       >
         {isChecked && (
           <div className="h-3 w-3 fill-primary text-primary bg-text-primary rounded-full" />
diff --git a/web/src/components/ui/select.tsx b/web/src/components/ui/select.tsx
index b4bd825ab7..71e28fe7cc 100644
--- a/web/src/components/ui/select.tsx
+++ b/web/src/components/ui/select.tsx
@@ -203,6 +203,8 @@ export type RAGFlowSelectProps = Partial<ControllerRenderProps> & {
   contentProps?: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>;
   triggerClassName?: string;
   onlyShowSelectedIcon?: boolean;
+  triggerTestId?: string;
+  optionTestIdPrefix?: string;
 } & SelectPrimitive.SelectProps;
 
 /**
@@ -237,6 +239,8 @@ export const RAGFlowSelect = forwardRef<
     // defaultValue,
     triggerClassName,
     onlyShowSelectedIcon = false,
+    triggerTestId,
+    optionTestIdPrefix,
   },
   ref,
 ) {
@@ -301,6 +305,7 @@ export const RAGFlowSelect = forwardRef<
           allowClear={allowClear}
           ref={ref}
           className={triggerClassName}
+          data-testid={triggerTestId}
         >
           <SelectValue placeholder={placeholder}>{label}</SelectValue>
         </SelectTrigger>
@@ -313,6 +318,11 @@ export const RAGFlowSelect = forwardRef<
                 value={o.value as RAGFlowSelectOptionType['value']}
                 key={o.value}
                 disabled={o.disabled}
+                data-testid={
+                  optionTestIdPrefix
+                    ? `${optionTestIdPrefix}-${o.value}`
+                    : undefined
+                }
               >
                 <div className="flex items-center gap-1">
                   {o.icon}
@@ -326,7 +336,16 @@ export const RAGFlowSelect = forwardRef<
             <SelectGroup key={idx}>
               <SelectLabel className="pl-2">{o.label}</SelectLabel>
               {o.options.map((x) => (
-                <SelectItem value={x.value} key={x.value} disabled={x.disabled}>
+                <SelectItem
+                  value={x.value}
+                  key={x.value}
+                  disabled={x.disabled}
+                  data-testid={
+                    optionTestIdPrefix
+                      ? `${optionTestIdPrefix}-${x.value}`
+                      : undefined
+                  }
+                >
                   {x.label}
                 </SelectItem>
               ))}
diff --git a/web/src/pages/dataset/components/metedata/interface.ts b/web/src/pages/dataset/components/metedata/interface.ts
index f5b65b194c..6b759a64c5 100644
--- a/web/src/pages/dataset/components/metedata/interface.ts
+++ b/web/src/pages/dataset/components/metedata/interface.ts
@@ -73,6 +73,11 @@ export type IManageModalProps = {
   builtInMetadata?: IBuiltInMetadataItem[];
   success?: (data: any) => void;
   secondTitle?: ReactNode;
+  testId?: string;
+  okButtonTestId?: string;
+  addButtonTestId?: string;
+  nestedModalTestId?: string;
+  nestedModalOkButtonTestId?: string;
 };
 
 export interface IManageValuesProps {
@@ -97,6 +102,9 @@ export interface IManageValuesProps {
     type?: MetadataValueType,
   ) => void;
   addDeleteValue: (key: string, value: string) => void;
+  testId?: string;
+  okButtonTestId?: string;
+  addValueButtonTestId?: string;
 }
 
 export interface DeleteOperation {
diff --git a/web/src/pages/dataset/components/metedata/manage-modal.tsx b/web/src/pages/dataset/components/metedata/manage-modal.tsx
index 3fb8fca812..7fa3fc6bce 100644
--- a/web/src/pages/dataset/components/metedata/manage-modal.tsx
+++ b/web/src/pages/dataset/components/metedata/manage-modal.tsx
@@ -68,6 +68,11 @@ export const ManageMetadataModal = (props: IManageModalProps) => {
     success,
     documentIds,
     secondTitle,
+    testId,
+    okButtonTestId,
+    addButtonTestId,
+    nestedModalTestId,
+    nestedModalOkButtonTestId,
   } = props;
   const { t } = useTranslation();
   const [valueData, setValueData] = useState<IMetaDataTableData>({
@@ -304,6 +309,8 @@ export const ManageMetadataModal = (props: IManageModalProps) => {
         onCancel={hideModal}
         maskClosable={false}
         okText={t('common.save')}
+        testId={testId}
+        okButtonTestId={okButtonTestId}
         onOk={async () => {
           const res = await handleSave({
             callback: hideModal,
@@ -337,6 +344,7 @@ export const ManageMetadataModal = (props: IManageModalProps) => {
                     className="border border-border-button"
                     type="button"
                     onClick={handAddValueRow}
+                    data-testid={addButtonTestId}
                   >
                     <Plus />
                     {t('common.add')}
@@ -571,6 +579,9 @@ export const ManageMetadataModal = (props: IManageModalProps) => {
           isShowValueSwitch={isShowValueSwitch}
           isShowType={true}
           isVerticalShowValue={isVerticalShowValue}
+          testId={nestedModalTestId}
+          okButtonTestId={nestedModalOkButtonTestId}
+          addValueButtonTestId="ds-settings-metadata-add-modal-add-value-btn"
           //   handleDeleteSingleValue={handleDeleteSingleValue}
           //   handleDeleteSingleRow={handleDeleteSingleRow}
         />
diff --git a/web/src/pages/dataset/components/metedata/manage-values-modal.tsx b/web/src/pages/dataset/components/metedata/manage-values-modal.tsx
index 97383e60a6..f2a74a1c9e 100644
--- a/web/src/pages/dataset/components/metedata/manage-values-modal.tsx
+++ b/web/src/pages/dataset/components/metedata/manage-values-modal.tsx
@@ -123,6 +123,9 @@ export const ManageValuesModal = (props: IManageValuesProps) => {
     isVerticalShowValue,
     isShowType,
     type: metadataType,
+    testId,
+    okButtonTestId,
+    addValueButtonTestId,
   } = props;
   const {
     metaData,
@@ -251,6 +254,8 @@ export const ManageValuesModal = (props: IManageValuesProps) => {
       onOk={() => formRef.current?.submit(handleSubmit)}
       maskClosable={false}
       footer={null}
+      testId={testId}
+      okButtonTestId={okButtonTestId}
     >
       <div className="flex flex-col gap-4">
         {!isEditField && (
@@ -281,6 +286,7 @@ export const ManageValuesModal = (props: IManageValuesProps) => {
                       variant={'ghost'}
                       className="border border-border-button"
                       onClick={handleAddValue}
+                      data-testid={addValueButtonTestId}
                     >
                       <Plus />
                     </Button>
diff --git a/web/src/pages/dataset/dataset-setting/configuration/common-item.tsx b/web/src/pages/dataset/dataset-setting/configuration/common-item.tsx
index 45db84f498..66ad986f93 100644
--- a/web/src/pages/dataset/dataset-setting/configuration/common-item.tsx
+++ b/web/src/pages/dataset/dataset-setting/configuration/common-item.tsx
@@ -107,11 +107,13 @@ export const EmbeddingSelect = ({
   field,
   name,
   disabled = false,
+  testId,
 }: {
   isEdit: boolean;
   field: FieldValues;
   name?: string;
   disabled?: boolean;
+  testId?: string;
 }) => {
   const { t } = useTranslate('knowledgeConfiguration');
   const form = useFormContext();
@@ -149,6 +151,7 @@ export const EmbeddingSelect = ({
         value={field.value}
         options={embeddingModelOptions}
         placeholder={t('embeddingModelPlaceholder')}
+        testId={testId}
       />
     </Spin>
   );
@@ -188,6 +191,7 @@ export function EmbeddingModelItem({ line = 1, isEdit }: IProps) {
                     isEdit={!!isEdit}
                     field={field}
                     disabled={disabled}
+                    testId="ds-settings-basic-embedding-model-select"
                   ></EmbeddingSelect>
                 </FormControl>
               </div>
@@ -313,6 +317,7 @@ export function EnableTocToggle() {
                 <Switch
                   checked={field.value}
                   onCheckedChange={field.onChange}
+                  data-testid="ds-settings-parser-page-index-switch"
                 />
               </FormControl>
             </div>
@@ -345,6 +350,8 @@ export function ImageContextWindow() {
               defaultValue={0}
               min={0}
               max={256}
+              sliderTestId="ds-settings-parser-image-table-context-window-slider"
+              numberInputTestId="ds-settings-parser-image-table-context-window-input"
             />
           </FormControl>
           <div className="flex pt-1">
@@ -365,6 +372,8 @@ export function OverlappedPercent() {
       label={t('knowledgeConfiguration.overlappedPercent')}
       max={0.3}
       step={0.01}
+      sliderTestId="ds-settings-parser-overlapped-percent-slider"
+      numberInputTestId="ds-settings-parser-overlapped-percent-input"
     ></SliderInputFormField>
   );
 }
@@ -439,7 +448,12 @@ export function AutoMetadata({
     tooltip: t('knowledgeConfiguration.autoMetadataTip'),
     render: (fieldProps: ControllerRenderProps) => (
       <div className="flex items-center justify-between">
-        <Button type="button" variant="ghost" onClick={handleClickOpenMetadata}>
+        <Button
+          type="button"
+          variant="ghost"
+          onClick={handleClickOpenMetadata}
+          data-testid="ds-settings-metadata-open-modal-btn"
+        >
           <div className="flex items-center gap-2">
             <Settings />
             {t('knowledgeConfiguration.settings')}
@@ -448,6 +462,7 @@ export function AutoMetadata({
         <Switch
           checked={fieldProps.value}
           onCheckedChange={fieldProps.onChange}
+          data-testid="ds-settings-metadata-switch"
         />
       </div>
     ),
@@ -500,6 +515,11 @@ export function AutoMetadata({
           }) => {
             handleSaveMetadata(data);
           }}
+          testId="ds-settings-metadata-modal"
+          okButtonTestId="ds-settings-metadata-modal-save-btn"
+          addButtonTestId="ds-settings-metadata-add-btn"
+          nestedModalTestId="ds-settings-metadata-add-modal"
+          nestedModalOkButtonTestId="ds-settings-metadata-add-modal-confirm-btn"
         />
       )}
     </>
diff --git a/web/src/pages/dataset/dataset-setting/configuration/naive.tsx b/web/src/pages/dataset/dataset-setting/configuration/naive.tsx
index 648183cbaf..d69319970e 100644
--- a/web/src/pages/dataset/dataset-setting/configuration/naive.tsx
+++ b/web/src/pages/dataset/dataset-setting/configuration/naive.tsx
@@ -22,8 +22,12 @@ export function NaiveConfiguration() {
   return (
     <MainContainer>
       <ConfigurationFormContainer>
-        <LayoutRecognizeFormField></LayoutRecognizeFormField>
-        <MaxTokenNumberFormField initialValue={512}></MaxTokenNumberFormField>
+        <LayoutRecognizeFormField testId="ds-settings-parser-pdf-parser-select"></LayoutRecognizeFormField>
+        <MaxTokenNumberFormField
+          initialValue={512}
+          sliderTestId="ds-settings-parser-recommended-chunk-size-slider"
+          numberInputTestId="ds-settings-parser-recommended-chunk-size-input"
+        ></MaxTokenNumberFormField>
         <DelimiterFormField></DelimiterFormField>
         <ChildrenDelimiterForm />
         <EnableTocToggle />
diff --git a/web/src/pages/dataset/dataset-setting/general-form.tsx b/web/src/pages/dataset/dataset-setting/general-form.tsx
index a93dae8be0..0d1a772103 100644
--- a/web/src/pages/dataset/dataset-setting/general-form.tsx
+++ b/web/src/pages/dataset/dataset-setting/general-form.tsx
@@ -42,7 +42,10 @@ export function GeneralForm() {
                 {t('common.name')}
               </FormLabel>
               <FormControl className="w-3/4">
-                <Input {...field}></Input>
+                <Input
+                  {...field}
+                  data-testid="ds-settings-basic-name-input"
+                ></Input>
               </FormControl>
             </div>
             <div className="flex pt-1">
@@ -61,6 +64,7 @@ export function GeneralForm() {
           <SelectWithSearch
             options={languageOptions}
             triggerClassName="w-full"
+            testId="ds-settings-basic-language-select"
           ></SelectWithSearch>
         </RAGFlowFormItem>
       </div>
@@ -74,7 +78,12 @@ export function GeneralForm() {
                 {t('setting.avatar')}
               </FormLabel>
               <FormControl className="w-3/4">
-                <AvatarUpload {...field}></AvatarUpload>
+                <AvatarUpload
+                  {...field}
+                  uploadInputTestId="ds-settings-basic-avatar-upload"
+                  cropModalTestId="ds-settings-basic-avatar-crop-modal"
+                  cropModalOkButtonTestId="ds-settings-basic-avatar-crop-confirm-btn"
+                ></AvatarUpload>
               </FormControl>
             </div>
             <div className="flex pt-1">
@@ -99,7 +108,10 @@ export function GeneralForm() {
                   {t('flow.description')}
                 </FormLabel>
                 <FormControl className="w-3/4">
-                  <Input {...field}></Input>
+                  <Input
+                    {...field}
+                    data-testid="ds-settings-basic-description-input"
+                  ></Input>
                 </FormControl>
               </div>
               <div className="flex pt-1">
diff --git a/web/src/pages/dataset/dataset-setting/index.tsx b/web/src/pages/dataset/dataset-setting/index.tsx
index b4a8590538..b3ce08ea09 100644
--- a/web/src/pages/dataset/dataset-setting/index.tsx
+++ b/web/src/pages/dataset/dataset-setting/index.tsx
@@ -334,6 +334,7 @@ export default function DatasetSettings() {
                 <Button
                   type="reset"
                   className="bg-transparent text-color-white hover:bg-transparent border-gray-500 border-[1px]"
+                  data-testid="ds-settings-page-cancel-btn"
                   onClick={() => {
                     form.reset();
                   }}
diff --git a/web/src/pages/dataset/dataset-setting/permission-form-field.tsx b/web/src/pages/dataset/dataset-setting/permission-form-field.tsx
index e608573380..33336a8241 100644
--- a/web/src/pages/dataset/dataset-setting/permission-form-field.tsx
+++ b/web/src/pages/dataset/dataset-setting/permission-form-field.tsx
@@ -23,6 +23,7 @@ export function PermissionFormField() {
       <SelectWithSearch
         options={teamOptions}
         triggerClassName="w-full"
+        testId="ds-settings-basic-permissions-select"
       ></SelectWithSearch>
     </RAGFlowFormItem>
   );
diff --git a/web/src/pages/dataset/dataset-setting/saving-button.tsx b/web/src/pages/dataset/dataset-setting/saving-button.tsx
index eead9bb723..8d77ca57ae 100644
--- a/web/src/pages/dataset/dataset-setting/saving-button.tsx
+++ b/web/src/pages/dataset/dataset-setting/saving-button.tsx
@@ -22,6 +22,7 @@ export function GeneralSavingButton() {
     <ButtonLoading
       type="button"
       loading={submitLoading}
+      data-testid="ds-settings-basic-save-btn"
       onClick={() => {
         (async () => {
           let isValidate = await form.trigger('name');
@@ -55,6 +56,7 @@ export function SavingButton() {
   return (
     <ButtonLoading
       loading={submitLoading}
+      data-testid="ds-settings-page-save-btn"
       onClick={() => {
         (async () => {
           try {