diff --git a/dolphinscheduler-ui-next/docs/e2e/security.md b/dolphinscheduler-ui-next/docs/e2e/security.md
index 72ee807b7..177bea45c 100644
--- a/dolphinscheduler-ui-next/docs/e2e/security.md
+++ b/dolphinscheduler-ui-next/docs/e2e/security.md
@@ -83,35 +83,36 @@ id:
 
 #### environment manage
 
-class:
-- [ ] items
-- [ ] el-popconfirm
-- [ ] el-button--primary
-- [ ] environmentName
-- [ ] edit
-- [ ] delete
-
-id:
-- [ ] btnCreateEnvironment
-- [ ] inputEnvironmentName
-- [ ] inputEnvironmentConfig
-- [ ] inputEnvironmentDesc
-- [ ] inputEnvironmentWorkerGroup
-- [ ] btnSubmit
-- [ ] btnCancel
+| check              | class                          |
+|--------------------|--------------------------------|
+| :white_check_mark: | items                          |
+|  | el-popconfirm                  |
+|  | el-button--primary             |
+| :white_check_mark: | environment-name               |
+| :white_check_mark: | edit                           |
+| :white_check_mark: | delete                         |
+| :white_check_mark: | btn-create-environment         |
+| :white_check_mark: | input-environment-name         |
+| :white_check_mark: | input-environment-config       |
+| :white_check_mark: | input-environment-desc         |
+| :white_check_mark: | input-environment-worker-group |
+| :white_check_mark: | btn-submit                     |
+| :white_check_mark: | btn-cancel                     |
 
 #### token manage
 
-| check              | class               |
-|--------------------|---------------------|
-| :white_check_mark: | items               |
-|  | el-popconfirm       |
-|  | el-button--primary  |
-| :white_check_mark: | username            |
-| :white_check_mark: | token               |
-| :white_check_mark: | edit                |
-| :white_check_mark: | delete              |
-| :white_check_mark: | btn-create-token    |
-| :white_check_mark: | btn-generate-token  |
-| :white_check_mark: | btn-submit          |
-| :white_check_mark: | btn-cancel          |
+| check              | class              |
+|--------------------|--------------------|
+| :white_check_mark: | items              |
+|  | el-popconfirm      |
+|  | el-button--primary |
+| :white_check_mark: | username           |
+| :white_check_mark: | token              |
+| :white_check_mark: | input-username     |
+| :white_check_mark: | input-token        |
+| :white_check_mark: | edit               |
+| :white_check_mark: | delete             |
+| :white_check_mark: | btn-create-token   |
+| :white_check_mark: | btn-generate-token |
+| :white_check_mark: | btn-submit         |
+| :white_check_mark: | btn-cancel         |
diff --git a/dolphinscheduler-ui-next/src/views/security/environment-manage/components/environment-modal.tsx b/dolphinscheduler-ui-next/src/views/security/environment-manage/components/environment-modal.tsx
index 4ab94d2a5..6cc4ccf71 100644
--- a/dolphinscheduler-ui-next/src/views/security/environment-manage/components/environment-modal.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/environment-manage/components/environment-modal.tsx
@@ -123,6 +123,8 @@ const EnvironmentModal = defineComponent({
           confirmDisabled={
             !this.model.name || !this.model.config || !this.model.description
           }
+          confirmClassName='btn-submit'
+          cancelClassName='btn-cancel'
         >
           {{
             default: () => (
@@ -136,6 +138,7 @@ const EnvironmentModal = defineComponent({
                   path='name'
                 >
                   <NInput
+                    class='input-environment-name'
                     placeholder={t(
                       'security.environment.environment_name_tips'
                     )}
@@ -147,6 +150,7 @@ const EnvironmentModal = defineComponent({
                   path='config'
                 >
                   <NInput
+                    class='input-environment-config'
                     placeholder={envConfigPlaceholder}
                     type='textarea'
                     autosize={{ minRows: 16 }}
@@ -158,6 +162,7 @@ const EnvironmentModal = defineComponent({
                   path='description'
                 >
                   <NInput
+                    class='input-environment-desc'
                     placeholder={t(
                       'security.environment.environment_description_tips'
                     )}
@@ -169,6 +174,7 @@ const EnvironmentModal = defineComponent({
                   path='workerGroups'
                 >
                   <NSelect
+                    class='input-environment-worker-group'
                     multiple
                     placeholder={t('security.environment.worker_group_tips')}
                     options={this.model.generalOptions}
diff --git a/dolphinscheduler-ui-next/src/views/security/environment-manage/index.tsx b/dolphinscheduler-ui-next/src/views/security/environment-manage/index.tsx
index 872898ba0..f60d2d62d 100644
--- a/dolphinscheduler-ui-next/src/views/security/environment-manage/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/environment-manage/index.tsx
@@ -105,7 +105,7 @@ const environmentManage = defineComponent({
         <NCard>
           <div class={styles['search-card']}>
             <div>
-              <NButton size='small' type='primary' onClick={handleModalChange}>
+              <NButton size='small' type='primary' onClick={handleModalChange} class='btn-create-environment'>
                 {t('security.environment.create_environment')}
               </NButton>
             </div>
@@ -129,7 +129,7 @@ const environmentManage = defineComponent({
           </div>
         </NCard>
         <Card class={styles['table-card']}>
-          <NDataTable columns={this.columns} data={this.tableData} />
+          <NDataTable row-class-name='items' columns={this.columns} data={this.tableData} />
           <div class={styles.pagination}>
             <NPagination
               v-model:page={this.page}
diff --git a/dolphinscheduler-ui-next/src/views/security/environment-manage/use-table.ts b/dolphinscheduler-ui-next/src/views/security/environment-manage/use-table.ts
index 00696bb70..be208f1a5 100644
--- a/dolphinscheduler-ui-next/src/views/security/environment-manage/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/security/environment-manage/use-table.ts
@@ -47,7 +47,8 @@ export function useTable() {
       },
       {
         title: t('security.environment.environment_name'),
-        key: 'name'
+        key: 'name',
+        className: 'environment-name'
       },
       {
         title: t('security.environment.environment_config'),
@@ -97,6 +98,7 @@ export function useTable() {
                         circle: true,
                         type: 'info',
                         size: 'small',
+                        class: 'edit',
                         onClick: () => {
                           handleEdit(row)
                         }
@@ -127,7 +129,8 @@ export function useTable() {
                             {
                               circle: true,
                               type: 'error',
-                              size: 'small'
+                              size: 'small',
+                              class: 'delete'
                             },
                             {
                               icon: () => h(DeleteOutlined)
diff --git a/dolphinscheduler-ui-next/src/views/security/token-manage/components/token-modal.tsx b/dolphinscheduler-ui-next/src/views/security/token-manage/components/token-modal.tsx
index 2dd8b8c2b..488c69e9f 100644
--- a/dolphinscheduler-ui-next/src/views/security/token-manage/components/token-modal.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/token-manage/components/token-modal.tsx
@@ -165,7 +165,7 @@ const TokenModal = defineComponent({
                   'GENERAL_USER' && (
                   <NFormItem label={t('security.token.user')} path='userId'>
                     <NSelect
-                      class='username'
+                      class='input-username'
                       filterable
                       placeholder={t('security.token.user_tips')}
                       options={this.model.generalOptions}
@@ -176,7 +176,7 @@ const TokenModal = defineComponent({
                 <NFormItem label={t('security.token.token')} path='token'>
                   <NSpace>
                     <NInput
-                      class='token'
+                      class='input-token'
                       style={{ width: '504px' }}
                       disabled
                       placeholder={t('security.token.token_tips')}
diff --git a/dolphinscheduler-ui-next/src/views/security/token-manage/use-table.ts b/dolphinscheduler-ui-next/src/views/security/token-manage/use-table.ts
index 1612199ad..06929115e 100644
--- a/dolphinscheduler-ui-next/src/views/security/token-manage/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/security/token-manage/use-table.ts
@@ -46,11 +46,13 @@ export function useTable() {
       },
       {
         title: t('security.token.user'),
-        key: 'userName'
+        key: 'userName',
+        className: 'username'
       },
       {
         title: t('security.token.token'),
-        key: 'token'
+        key: 'token',
+        className: 'token'
       },
       {
         title: t('security.token.expiration_time'),