From 03a71297dde728bc120dd27cc81b4169989e752d Mon Sep 17 00:00:00 2001
From: kezhenxu94 <kezhenxu94@apache.org>
Date: Wed, 22 Dec 2021 14:53:39 +0800
Subject: [PATCH] Unify the element selector rules for E2E (#7409)

* Unify the element selector rules for E2E

* Fix typo in docker swarm
---
 dolphinscheduler-e2e/README.md                     |  6 +++---
 .../dolphinscheduler/e2e/pages/LoginPage.java      |  6 +++---
 .../e2e/pages/common/NavBarPage.java               |  4 ++--
 .../e2e/pages/project/ProjectDetailPage.java       |  4 ++--
 .../e2e/pages/project/ProjectPage.java             |  8 ++++----
 .../project/workflow/WorkflowDefinitionTab.java    |  8 ++++----
 .../e2e/pages/project/workflow/WorkflowForm.java   |  2 +-
 .../project/workflow/WorkflowInstanceTab.java      |  8 ++++----
 .../pages/project/workflow/WorkflowRunDialog.java  |  2 +-
 .../pages/project/workflow/WorkflowSaveDialog.java |  6 +++---
 .../pages/project/workflow/task/TaskNodeForm.java  |  4 ++--
 .../e2e/pages/security/SecurityPage.java           |  2 +-
 .../e2e/pages/security/TenantPage.java             | 14 +++++++-------
 .../conf/home/pages/dag/_source/canvas/toolbar.vue |  2 +-
 .../home/pages/dag/_source/formModel/formModel.vue |  4 ++--
 .../pages/dag/_source/udp/_source/selectTenant.vue |  2 +-
 .../src/js/conf/home/pages/dag/_source/udp/udp.vue |  4 ++--
 .../pages/definition/pages/list/_source/list.vue   |  6 +++---
 .../pages/definition/pages/list/_source/start.vue  |  2 +-
 .../projects/pages/definition/pages/list/index.vue |  2 +-
 .../pages/instance/pages/list/_source/list.vue     |  6 +++---
 .../projects/pages/list/_source/createProject.vue  |  4 ++--
 .../pages/projects/pages/list/_source/list.vue     |  2 +-
 .../conf/home/pages/projects/pages/list/index.vue  |  2 +-
 .../pages/tenement/_source/createTenement.vue      | 10 +++++-----
 .../pages/security/pages/tenement/_source/list.vue |  2 +-
 .../home/pages/security/pages/tenement/index.vue   |  2 +-
 dolphinscheduler-ui/src/js/conf/login/App.vue      |  6 +++---
 .../src/js/module/components/nav/nav.vue           |  4 ++--
 .../components/secondaryMenu/_source/menu.js       |  6 +++---
 30 files changed, 70 insertions(+), 70 deletions(-)

diff --git a/dolphinscheduler-e2e/README.md b/dolphinscheduler-e2e/README.md
index 35c3043a1c..f41e5539f2 100644
--- a/dolphinscheduler-e2e/README.md
+++ b/dolphinscheduler-e2e/README.md
@@ -14,13 +14,13 @@ following fields,
 
 ```java
 public final class LoginPage {
-    @FindBy(id = "input-username")
+    @FindBy(id = "inputUsername")
     private WebElement inputUsername;
 
-    @FindBy(id = "input-password")
+    @FindBy(id = "inputPassword")
     private WebElement inputPassword;
 
-    @FindBy(id = "button-login")
+    @FindBy(id = "btnLogin")
     private WebElement buttonLogin;
 }
 ```
diff --git a/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/LoginPage.java b/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/LoginPage.java
index f2431d6311..9fd782d2df 100644
--- a/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/LoginPage.java
+++ b/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/LoginPage.java
@@ -33,13 +33,13 @@ import lombok.SneakyThrows;
 
 @Getter
 public final class LoginPage extends NavBarPage {
-    @FindBy(id = "input-username")
+    @FindBy(id = "inputUsername")
     private WebElement inputUsername;
 
-    @FindBy(id = "input-password")
+    @FindBy(id = "inputPassword")
     private WebElement inputPassword;
 
-    @FindBy(id = "button-login")
+    @FindBy(id = "btnLogin")
     private WebElement buttonLogin;
 
     public LoginPage(RemoteWebDriver driver) {
diff --git a/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/common/NavBarPage.java b/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/common/NavBarPage.java
index 546a714236..e9d54d4ad7 100644
--- a/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/common/NavBarPage.java
+++ b/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/common/NavBarPage.java
@@ -33,9 +33,9 @@ import lombok.Getter;
 public class NavBarPage {
     protected final RemoteWebDriver driver;
 
-    @FindBy(id = "project-tab")
+    @FindBy(id = "tabProject")
     private WebElement projectTab;
-    @FindBy(id = "security-tab")
+    @FindBy(id = "tabSecurity")
     private WebElement securityTab;
 
     public NavBarPage(RemoteWebDriver driver) {
diff --git a/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/ProjectDetailPage.java b/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/ProjectDetailPage.java
index 5dd7051524..f4440cca0a 100644
--- a/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/ProjectDetailPage.java
+++ b/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/ProjectDetailPage.java
@@ -31,9 +31,9 @@ import lombok.Getter;
 
 @Getter
 public final class ProjectDetailPage extends NavBarPage {
-    @FindBy(className = "process-definition")
+    @FindBy(className = "tab-process-definition")
     private WebElement menuProcessDefinition;
-    @FindBy(className = "process-instance")
+    @FindBy(className = "tab-process-instance")
     private WebElement menuProcessInstances;
 
     public ProjectDetailPage(RemoteWebDriver driver) {
diff --git a/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/ProjectPage.java b/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/ProjectPage.java
index 86cdb931bd..53522ef16a 100644
--- a/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/ProjectPage.java
+++ b/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/ProjectPage.java
@@ -37,10 +37,10 @@ import lombok.Getter;
 
 @Getter
 public final class ProjectPage extends NavBarPage implements NavBarItem {
-    @FindBy(id = "button-create-project")
+    @FindBy(id = "btnCreateProject")
     private WebElement buttonCreateProject;
 
-    @FindBy(className = "rows-project")
+    @FindBy(className = "items-project")
     private List<WebElement> projectList;
 
     @FindBys({
@@ -105,10 +105,10 @@ public final class ProjectPage extends NavBarPage implements NavBarItem {
             PageFactory.initElements(driver, this);
         }
 
-        @FindBy(id = "input-project-name")
+        @FindBy(id = "inputProjectName")
         private WebElement inputProjectName;
 
-        @FindBy(id = "button-submit")
+        @FindBy(id = "btnSubmit")
         private WebElement buttonSubmit;
     }
 }
diff --git a/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/workflow/WorkflowDefinitionTab.java b/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/workflow/WorkflowDefinitionTab.java
index 5d30dcd19b..49e997d283 100644
--- a/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/workflow/WorkflowDefinitionTab.java
+++ b/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/workflow/WorkflowDefinitionTab.java
@@ -34,18 +34,18 @@ import java.util.stream.Collectors;
 
 @Getter
 public final class WorkflowDefinitionTab extends NavBarPage implements ProjectDetailPage.Tab {
-    @FindBy(id = "button-create-process")
+    @FindBy(id = "btnCreateProcess")
     private WebElement buttonCreateProcess;
     @FindBy(className = "select-all")
     private WebElement checkBoxSelectAll;
-    @FindBy(className = "button-delete-all")
+    @FindBy(className = "btn-delete-all")
     private WebElement buttonDeleteAll;
     @FindBys({
         @FindBy(className = "el-popconfirm"),
         @FindBy(className = "el-button--primary"),
     })
     private List<WebElement> buttonConfirm;
-    @FindBy(className = "rows-workflow-definitions")
+    @FindBy(className = "items")
     private List<WebElement> workflowList;
 
     public WorkflowDefinitionTab(RemoteWebDriver driver) {
@@ -88,7 +88,7 @@ public final class WorkflowDefinitionTab extends NavBarPage implements ProjectDe
         final Supplier<List<WebElement>> cancelButtons = () ->
             workflowList()
                 .stream()
-                .flatMap(it -> it.findElements(By.className("button-cancel-publish")).stream())
+                .flatMap(it -> it.findElements(By.className("btn-cancel-publish")).stream())
                 .filter(WebElement::isDisplayed)
                 .collect(Collectors.toList());
 
diff --git a/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/workflow/WorkflowForm.java b/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/workflow/WorkflowForm.java
index b4250829d6..87da7823df 100644
--- a/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/workflow/WorkflowForm.java
+++ b/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/workflow/WorkflowForm.java
@@ -42,7 +42,7 @@ public final class WorkflowForm {
     private final WebDriver driver;
     private final WorkflowSaveDialog saveForm;
 
-    @FindBy(id = "button-save")
+    @FindBy(id = "btnSave")
     private WebElement buttonSave;
 
     public WorkflowForm(WebDriver driver) {
diff --git a/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/workflow/WorkflowInstanceTab.java b/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/workflow/WorkflowInstanceTab.java
index 97f29b40a9..fcb6de981e 100644
--- a/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/workflow/WorkflowInstanceTab.java
+++ b/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/workflow/WorkflowInstanceTab.java
@@ -36,11 +36,11 @@ import lombok.RequiredArgsConstructor;
 
 @Getter
 public final class WorkflowInstanceTab extends NavBarPage implements ProjectDetailPage.Tab {
-    @FindBy(className = "rows-workflow-instances")
+    @FindBy(className = "items-workflow-instances")
     private List<WebElement> instanceList;
     @FindBy(className = "select-all")
     private WebElement checkBoxSelectAll;
-    @FindBy(className = "button-delete-all")
+    @FindBy(className = "btn-delete-all")
     private WebElement buttonDeleteAll;
     @FindBys({
         @FindBy(className = "el-popconfirm"),
@@ -82,7 +82,7 @@ public final class WorkflowInstanceTab extends NavBarPage implements ProjectDeta
         private final WebElement row;
 
         public WebElement rerunButton() {
-            return row.findElement(By.className("button-rerun"));
+            return row.findElement(By.className("btn-rerun"));
         }
 
         public boolean isSuccess() {
@@ -94,7 +94,7 @@ public final class WorkflowInstanceTab extends NavBarPage implements ProjectDeta
         }
 
         public Row rerun() {
-            row.findElements(By.className("button-rerun"))
+            row.findElements(By.className("btn-rerun"))
                .stream()
                .filter(WebElement::isDisplayed)
                .findFirst()
diff --git a/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/workflow/WorkflowRunDialog.java b/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/workflow/WorkflowRunDialog.java
index 9801378454..37083f2349 100644
--- a/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/workflow/WorkflowRunDialog.java
+++ b/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/workflow/WorkflowRunDialog.java
@@ -29,7 +29,7 @@ import lombok.Getter;
 public final class WorkflowRunDialog {
     private final WorkflowDefinitionTab parent;
 
-    @FindBy(id = "button-submit")
+    @FindBy(id = "btnSubmit")
     private WebElement buttonSubmit;
 
     public WorkflowRunDialog(WorkflowDefinitionTab parent) {
diff --git a/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/workflow/WorkflowSaveDialog.java b/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/workflow/WorkflowSaveDialog.java
index 9c0039782d..9f0b07effa 100644
--- a/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/workflow/WorkflowSaveDialog.java
+++ b/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/workflow/WorkflowSaveDialog.java
@@ -38,9 +38,9 @@ public final class WorkflowSaveDialog {
     private final WebDriver driver;
     private final WorkflowForm parent;
 
-    @FindBy(id = "input-name")
+    @FindBy(id = "inputName")
     private WebElement inputName;
-    @FindBy(id = "button-submit")
+    @FindBy(id = "btnSubmit")
     private WebElement buttonSubmit;
     @FindBys({
         @FindBy(className = "input-param-key"),
@@ -52,7 +52,7 @@ public final class WorkflowSaveDialog {
         @FindBy(tagName = "input"),
     })
     private List<WebElement> inputParamVal;
-    @FindBy(id = "select-tenant")
+    @FindBy(id = "selectTenant")
     private WebElement selectTenant;
 
     public WorkflowSaveDialog(WorkflowForm parent) {
diff --git a/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/workflow/task/TaskNodeForm.java b/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/workflow/task/TaskNodeForm.java
index c2e703c1e1..4537985890 100644
--- a/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/workflow/task/TaskNodeForm.java
+++ b/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/workflow/task/TaskNodeForm.java
@@ -34,9 +34,9 @@ import java.util.stream.Stream;
 
 @Getter
 public abstract class TaskNodeForm {
-    @FindBy(id = "input-node-name")
+    @FindBy(id = "inputNodeName")
     private WebElement inputNodeName;
-    @FindBy(id = "button-submit")
+    @FindBy(id = "btnSubmit")
     private WebElement buttonSubmit;
     @FindBys({
         @FindBy(className = "input-param-key"),
diff --git a/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/security/SecurityPage.java b/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/security/SecurityPage.java
index 8e4c7b9848..36f960c41e 100644
--- a/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/security/SecurityPage.java
+++ b/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/security/SecurityPage.java
@@ -30,7 +30,7 @@ import lombok.Getter;
 
 @Getter
 public class SecurityPage extends NavBarPage implements NavBarItem {
-    @FindBy(className = "tenant-manage")
+    @FindBy(className = "tab-tenant-manage")
     private WebElement menuTenantManage;
 
     public SecurityPage(RemoteWebDriver driver) {
diff --git a/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/security/TenantPage.java b/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/security/TenantPage.java
index 6e9c548189..6fc70c6b54 100644
--- a/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/security/TenantPage.java
+++ b/dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/security/TenantPage.java
@@ -37,10 +37,10 @@ import lombok.Getter;
 
 @Getter
 public final class TenantPage extends NavBarPage implements SecurityPage.Tab {
-    @FindBy(id = "button-create-tenant")
+    @FindBy(id = "btnCreateTenant")
     private WebElement buttonCreateTenant;
 
-    @FindBy(className = "rows-tenant")
+    @FindBy(className = "items")
     private List<WebElement> tenantList;
 
     @FindBys({
@@ -93,19 +93,19 @@ public final class TenantPage extends NavBarPage implements SecurityPage.Tab {
             PageFactory.initElements(driver, this);
         }
 
-        @FindBy(id = "input-tenant-code")
+        @FindBy(id = "inputTenantCode")
         private WebElement inputTenantCode;
 
-        @FindBy(id = "select-queue")
+        @FindBy(id = "selectQueue")
         private WebElement selectQueue;
 
-        @FindBy(id = "input-description")
+        @FindBy(id = "inputDescription")
         private WebElement inputDescription;
 
-        @FindBy(id = "button-submit")
+        @FindBy(id = "btnSubmit")
         private WebElement buttonSubmit;
 
-        @FindBy(id = "button-cancel")
+        @FindBy(id = "btnCancel")
         private WebElement buttonCancel;
     }
 }
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/toolbar.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/toolbar.vue
index 3b8f4157bf..cb701d6586 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/toolbar.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/toolbar.vue
@@ -143,7 +143,7 @@
         type="primary"
         size="mini"
         @click="saveProcess"
-        id="button-save"
+        id="btnSave"
         >{{ $t("Save") }}</el-button
       >
       <el-button
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
index b53e661296..1c6e1f2c20 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
@@ -65,7 +65,7 @@
               :disabled="isDetails"
               :placeholder="$t('Please enter name (required)')"
               maxlength="100"
-              id="input-node-name"
+              id="inputNodeName"
             >
             </el-input>
           </div>
@@ -443,7 +443,7 @@
           :loading="spinnerLoading"
           @click="ok()"
           :disabled="isDetails"
-          id="button-submit"
+          id="btnSubmit"
           >{{ spinnerLoading ? $t("Loading...") : $t("Confirm") }}
         </el-button>
       </div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/udp/_source/selectTenant.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/udp/_source/selectTenant.vue
index 50a789f43c..31637389d1 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/udp/_source/selectTenant.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/udp/_source/selectTenant.vue
@@ -20,7 +20,7 @@
           @change="_onChange"
           v-model="selectedValue"
           size="small"
-          id="select-tenant"
+          id="selectTenant"
           style="width: 180px">
     <el-option
             v-for="item in itemList"
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/udp/udp.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/udp/udp.vue
index d39ac79c3b..054dcfaade 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/udp/udp.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/udp/udp.vue
@@ -22,7 +22,7 @@
                 type="text"
                 size="small"
                 v-model="name"
-                id="input-name"
+                id="inputName"
                 :disabled="router.history.current.name === 'projects-instance-details'"
                 :placeholder="$t('Please enter name (required)')">
         </el-input>
@@ -102,7 +102,7 @@
           </div>
         </template>
         <el-button type="text" size="small" @click="close()"> {{$t('Cancel')}} </el-button>
-        <el-button type="primary" size="small" round :disabled="isDetails" @click="ok()" id="button-submit">{{$t('Add')}}</el-button>
+        <el-button type="primary" size="small" round :disabled="isDetails" @click="ok()" id="btnSubmit">{{$t('Add')}}</el-button>
       </div>
     </div>
   </div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
index b7d99bfe20..ef11f23c8e 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
@@ -17,7 +17,7 @@
 <template>
   <div class="list-model" style="position: relative;">
     <div class="table-box">
-      <el-table :data="list" size="mini" style="width: 100%" @selection-change="_arrDelChange" row-class-name="rows-workflow-definitions">
+      <el-table :data="list" size="mini" style="width: 100%" @selection-change="_arrDelChange" row-class-name="items">
         <el-table-column type="selection" width="50" :selectable="selectable" class-name="select-all"></el-table-column>
         <el-table-column prop="id" :label="$t('#')" width="50"></el-table-column>
         <el-table-column :label="$t('Process Name')" min-width="200">
@@ -75,7 +75,7 @@
               <span><el-button type="warning" size="mini" v-if="scope.row.releaseState === 'OFFLINE'"  icon="el-icon-upload2" @click="_poponline(scope.row)" circle class="button-publish"></el-button></span>
             </el-tooltip>
             <el-tooltip :content="$t('offline')" placement="top" :enterable="false">
-              <span><el-button type="danger" size="mini" icon="el-icon-download" v-if="scope.row.releaseState === 'ONLINE'" @click="_downline(scope.row)" circle class="button-cancel-publish"></el-button></span>
+              <span><el-button type="danger" size="mini" icon="el-icon-download" v-if="scope.row.releaseState === 'ONLINE'" @click="_downline(scope.row)" circle class="btn-cancel-publish"></el-button></span>
             </el-tooltip>
             <el-tooltip :content="$t('Copy Workflow')" placement="top" :enterable="false">
               <span><el-button type="primary" size="mini" :disabled="scope.row.releaseState === 'ONLINE'"  icon="el-icon-document-copy" @click="_copyProcess(scope.row)" circle></el-button></span>
@@ -115,7 +115,7 @@
         :title="$t('Delete?')"
         @onConfirm="_delete({},-1)"
       >
-        <el-button style="position: absolute; bottom: -48px; left: 19px;"  type="primary" size="mini" :disabled="!strSelectCodes" slot="reference" class="button-delete-all">{{$t('Delete')}}</el-button>
+        <el-button style="position: absolute; bottom: -48px; left: 19px;"  type="primary" size="mini" :disabled="!strSelectCodes" slot="reference" class="btn-delete-all">{{$t('Delete')}}</el-button>
       </el-popconfirm>
     </el-tooltip>
     <el-button type="primary" size="mini" :disabled="!strSelectCodes" style="position: absolute; bottom: -48px; left: 80px;" @click="_batchExport(item)" >{{$t('Export')}}</el-button>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/start.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/start.vue
index 8c99f8b1cb..8b7c9fe30f 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/start.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/start.vue
@@ -191,7 +191,7 @@
     </div>
     <div class="submit">
       <el-button type="text" size="small" @click="close()"> {{$t('Cancel')}} </el-button>
-      <el-button type="primary" size="small" round :loading="spinnerLoading" @click="ok()" id="button-submit">{{spinnerLoading ? $t('Loading...') : $t('Start')}} </el-button>
+      <el-button type="primary" size="small" round :loading="spinnerLoading" @click="ok()" id="btnSubmit">{{spinnerLoading ? $t('Loading...') : $t('Start')}} </el-button>
     </div>
   </div>
 </template>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue
index 9fca167e29..ec1e8988e3 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue
@@ -20,7 +20,7 @@
       <template slot="conditions">
         <m-conditions @on-conditions="_onConditions">
           <template slot="button-group">
-            <el-button size="mini"  @click="() => this.$router.push({name: 'definition-create'})" id="button-create-process">{{$t('Create process')}}</el-button>
+            <el-button size="mini"  @click="() => this.$router.push({name: 'definition-create'})" id="btnCreateProcess">{{$t('Create process')}}</el-button>
             <el-button size="mini"  @click="_uploading">{{$t('Import process')}}</el-button>
           </template>
         </m-conditions>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue
index ba572b8fe9..f5e7aa3865 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue
@@ -17,7 +17,7 @@
 <template>
   <div class="list-model" style="position: relative;">
     <div class="table-box">
-      <el-table class="fixed" :data="list" size="mini" style="width: 100%" @selection-change="_arrDelChange" row-class-name="rows-workflow-instances">
+      <el-table class="fixed" :data="list" size="mini" style="width: 100%" @selection-change="_arrDelChange" row-class-name="items-workflow-instances">
         <el-table-column type="selection" width="50" class-name="select-all"></el-table-column>
         <el-table-column prop="id" :label="$t('#')" width="50"></el-table-column>
         <el-table-column :label="$t('Process Name')" min-width="200">
@@ -80,7 +80,7 @@
                 </span>
               </el-tooltip>
               <el-tooltip :content="$t('Rerun')" placement="top" :enterable="false">
-                <span><el-button type="primary" size="mini" :disabled="scope.row.state !== 'SUCCESS' && scope.row.state !== 'PAUSE' && scope.row.state !== 'FAILURE' && scope.row.state !== 'STOP'"  icon="el-icon-refresh" @click="_reRun(scope.row,scope.$index)" circle class="button-rerun"></el-button></span>
+                <span><el-button type="primary" size="mini" :disabled="scope.row.state !== 'SUCCESS' && scope.row.state !== 'PAUSE' && scope.row.state !== 'FAILURE' && scope.row.state !== 'STOP'"  icon="el-icon-refresh" @click="_reRun(scope.row,scope.$index)" circle class="btn-rerun"></el-button></span>
               </el-tooltip>
               <el-tooltip :content="$t('Recovery Failed')" placement="top" :enterable="false">
                 <span>
@@ -233,7 +233,7 @@
         :title="$t('Delete?')"
         @onConfirm="_delete({},-1)"
       >
-        <el-button style="position: absolute; bottom: -48px; left: 19px;"  type="primary" size="mini" :disabled="!strDelete" slot="reference" class="button-delete-all">{{$t('Delete')}}</el-button>
+        <el-button style="position: absolute; bottom: -48px; left: 19px;"  type="primary" size="mini" :disabled="!strDelete" slot="reference" class="btn-delete-all">{{$t('Delete')}}</el-button>
       </el-popconfirm>
     </el-tooltip>
   </div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/createProject.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/createProject.vue
index 443c219343..fef3aa3901 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/createProject.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/createProject.vue
@@ -16,14 +16,14 @@
  */
 <template>
   <m-popover ref="popover" :nameText="item ? $t('Edit') : $t('Create Project')" :ok-text="item ? $t('Edit') : $t('Submit')"
-           @close="_close" @ok="_ok" ok-id="button-submit">
+           @close="_close" @ok="_ok" ok-id="btnSubmit">
     <template slot="content">
       <div class="projects-create-model">
         <m-list-box-f>
           <template slot="name"><strong>*</strong>{{ $t('Project Name') }}</template>
           <template slot="content">
             <el-input
-              id="input-project-name"
+              id="inputProjectName"
               v-model="projectName"
               :placeholder="$t('Please enter name')"
               maxlength="60"
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/list.vue
index 3b939328b8..b1bf025b5f 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/list.vue
@@ -17,7 +17,7 @@
 <template>
   <div class="list-model">
     <div class="table-box">
-      <el-table :data="list" size="mini" style="width: 100%" row-class-name="rows-project">
+      <el-table :data="list" size="mini" style="width: 100%" row-class-name="items-project">
         <el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
         <el-table-column :label="$t('Project Name')">
           <template slot-scope="scope">
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/index.vue
index a80116e41c..1cc9f8f871 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/index.vue
@@ -19,7 +19,7 @@
     <template slot="conditions">
       <m-conditions @on-conditions="_onConditions">
         <template slot="button-group">
-          <el-button size="mini" @click="_create('')" id="button-create-project">{{ $t('Create Project') }}</el-button>
+          <el-button size="mini" @click="_create('')" id="btnCreateProject">{{ $t('Create Project') }}</el-button>
           <el-dialog
             :title="item ? $t('Edit') : $t('Create Project')"
             v-if="createProjectDialog"
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/createTenement.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/createTenement.vue
index 1e9b125b89..042a1d5b9a 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/createTenement.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/createTenement.vue
@@ -16,8 +16,8 @@
  */
 <template>
   <m-popover
-          okId="button-submit"
-          cancelId="button-cancel"
+          okId="btnSubmit"
+          cancelId="btnCancel"
           ref="popover"
           :ok-text="item ? $t('Edit') : $t('Submit')"
           @ok="_ok"
@@ -28,7 +28,7 @@
           <template slot="name"><strong>*</strong>{{$t('OS Tenant Code')}}</template>
           <template slot="content">
             <el-input
-                id="input-tenant-code"
+                id="inputTenantCode"
                 type="input"
                 :disabled="item ? true : false"
                 v-model="tenantCode"
@@ -43,7 +43,7 @@
           <template slot="content">
             <el-select v-model="queueId" size="small">
               <el-option
-                      id="select-queue"
+                      id="selectQueue"
                       v-for="city in queueList"
                       :key="city.id"
                       :value="city.id"
@@ -56,7 +56,7 @@
           <template slot="name">{{$t('Description')}}</template>
           <template slot="content">
             <el-input
-                    id="input-description"
+                    id="inputDescription"
                     type="textarea"
                     v-model="description"
                     size="small"
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/list.vue
index df980f8cc8..35195d8f6d 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/list.vue
@@ -17,7 +17,7 @@
 <template>
   <div class="list-model">
     <div class="table-box">
-      <el-table :data="list" size="mini" style="width: 100%" row-class-name="rows-tenant">
+      <el-table :data="list" size="mini" style="width: 100%" row-class-name="items">
         <el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
         <el-table-column prop="tenantCode" :label="$t('OS Tenant Code')" min-width="100"></el-table-column>
         <el-table-column :label="$t('Description')" min-width="100">
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/index.vue
index d6c522690a..54bfa57740 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/index.vue
@@ -19,7 +19,7 @@
     <template slot="conditions">
       <m-conditions @on-conditions="_onConditions">
         <template slot="button-group" v-if="isADMIN">
-          <el-button id="button-create-tenant" size="mini" @click="_create('')">{{$t('Create Tenant')}}</el-button>
+          <el-button id="btnCreateTenant" size="mini" @click="_create('')">{{$t('Create Tenant')}}</el-button>
           <el-dialog
             :title="item ? $t('Edit Tenant') : $t('Create Tenant')"
             v-if="createTenementDialog"
diff --git a/dolphinscheduler-ui/src/js/conf/login/App.vue b/dolphinscheduler-ui/src/js/conf/login/App.vue
index c4beda9bb0..930fe1f82a 100644
--- a/dolphinscheduler-ui/src/js/conf/login/App.vue
+++ b/dolphinscheduler-ui/src/js/conf/login/App.vue
@@ -24,7 +24,7 @@
         <label>{{$t('User Name')}}</label>
         <div>
           <el-input
-                  id="input-username"
+                  id="inputUsername"
                   type="text"
                   v-model.trim="userName"
                   :placeholder="$t('Please enter user name')"
@@ -40,7 +40,7 @@
         <label>{{$t('Password')}}</label>
         <div>
           <el-input
-                  id="input-password"
+                  id="inputPassword"
                   type="password"
                   v-model="userPassword"
                   :placeholder="$t('Please enter your password')"
@@ -53,7 +53,7 @@
         </p>
       </div>
       <div class="list" style="margin-top: 10px;">
-        <el-button id="button-login" style="width: 365px" type="primary" round :loading="spinnerLoading" long @click="_ok">{{spinnerLoading ? $t('Loading...') : ` ${$t('Login')} `}} </el-button>
+        <el-button id="btnLogin" style="width: 365px" type="primary" round :loading="spinnerLoading" long @click="_ok">{{spinnerLoading ? $t('Loading...') : ` ${$t('Login')} `}} </el-button>
       </div>
     </div>
   </div>
diff --git a/dolphinscheduler-ui/src/js/module/components/nav/nav.vue b/dolphinscheduler-ui/src/js/module/components/nav/nav.vue
index 0c6fb23d91..1d66c7dc96 100644
--- a/dolphinscheduler-ui/src/js/module/components/nav/nav.vue
+++ b/dolphinscheduler-ui/src/js/module/components/nav/nav.vue
@@ -29,7 +29,7 @@
       </div>
       <div class="clearfix list">
         <div class="nav-links">
-          <router-link :to="{ path: '/projects'}" tag="a" active-class="active" id="project-tab">
+          <router-link :to="{ path: '/projects'}" tag="a" active-class="active" id="tabProject">
             <span><em class="ansiconfont el-icon-tickets"></em>{{$t('Project Manage')}}</span><strong></strong>
           </router-link>
         </div>
@@ -57,7 +57,7 @@
       </div>
       <div class="clearfix list" >
         <div class="nav-links">
-          <router-link :to="{ path: '/security'}" tag="a" active-class="active" v-ps="['ADMIN_USER']" id="security-tab">
+          <router-link :to="{ path: '/security'}" tag="a" active-class="active" v-ps="['ADMIN_USER']" id="tabSecurity">
             <span><em class="ansfont ri-shield-check-line"></em>{{$t('Security')}}</span><strong></strong>
           </router-link>
         </div>
diff --git a/dolphinscheduler-ui/src/js/module/components/secondaryMenu/_source/menu.js b/dolphinscheduler-ui/src/js/module/components/secondaryMenu/_source/menu.js
index 9c02958857..3eb7c9fff7 100644
--- a/dolphinscheduler-ui/src/js/module/components/secondaryMenu/_source/menu.js
+++ b/dolphinscheduler-ui/src/js/module/components/secondaryMenu/_source/menu.js
@@ -52,14 +52,14 @@ const menu = {
           path: 'definition',
           id: 0,
           enabled: true,
-          classNames: 'process-definition'
+          classNames: 'tab-process-definition'
         },
         {
           name: `${i18n.$t('Process Instance')}`,
           path: 'instance',
           id: 1,
           enabled: true,
-          classNames: 'process-instance'
+          classNames: 'tab-process-instance'
         },
         {
           name: `${i18n.$t('Task Instance')}`,
@@ -98,7 +98,7 @@ const menu = {
       enabled: true,
       icon: 'el-icon-user-solid',
       children: [],
-      classNames: 'tenant-manage'
+      classNames: 'tab-tenant-manage'
     },
     {
       name: `${i18n.$t('User Manage')}`,