diff --git a/packages/nc-gui/components/project/spreadsheet/components/SpreadsheetNavDrawer.vue b/packages/nc-gui/components/project/spreadsheet/components/SpreadsheetNavDrawer.vue
index 9d494b18ea..8e4788c7b7 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/SpreadsheetNavDrawer.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/SpreadsheetNavDrawer.vue
@@ -294,7 +294,7 @@
             class="caption d-100 mt-2"
             @click="webhookSliderModal=true"
           >
-            <v-icon small class="mr-2">
+            <v-icon small class="mr-2 nc-btn-webhook">
               mdi-hook
             </v-icon> Webhooks
           </v-btn>
diff --git a/packages/nc-gui/components/project/tableTabs/webhook/HttpWebhook.vue b/packages/nc-gui/components/project/tableTabs/webhook/HttpWebhook.vue
index bee3d3049e..5062831ea3 100644
--- a/packages/nc-gui/components/project/tableTabs/webhook/HttpWebhook.vue
+++ b/packages/nc-gui/components/project/tableTabs/webhook/HttpWebhook.vue
@@ -5,7 +5,7 @@
         v-model="api.method"
         outlined
         dense
-        class="caption"
+        class="caption nc-select-hook-url-method"
         :items="Object.keys(apiMethodMeta)"
         style="max-width:100px;"
       />
@@ -14,7 +14,7 @@
         outlined
         placeholder="http://example.com"
         dense
-        class="flex-grow-1 ml-2 caption"
+        class="flex-grow-1 ml-2 caption nc-text-field-hook-url-path"
       />
     </div>
 
diff --git a/packages/nc-gui/components/project/tableTabs/webhook/WebhookEditor.vue b/packages/nc-gui/components/project/tableTabs/webhook/WebhookEditor.vue
index e23772a7cd..d23c5262d8 100644
--- a/packages/nc-gui/components/project/tableTabs/webhook/WebhookEditor.vue
+++ b/packages/nc-gui/components/project/tableTabs/webhook/WebhookEditor.vue
@@ -15,6 +15,7 @@
           outlined
           tooltip="Save"
           small
+          class="nc-btn-webhook-test"
           :disabled="loading || !valid || !hook.event"
           @click.prevent="$refs.webhookTest.testWebhook()"
         >
@@ -24,6 +25,7 @@
           tooltip="Save"
           color="primary"
           small
+          class="nc-btn-webhook-save"
           :disabled="loading || !valid || !hook.event"
           @click.prevent="saveHooks"
         >
@@ -39,7 +41,7 @@
     <v-card-text>
       <v-text-field
         v-model="hook.title"
-        class="caption"
+        class="caption nc-text-field-hook-title"
         outlined
         dense
         :label="$t('general.title')"
@@ -49,6 +51,7 @@
       <v-row>
         <v-col>
           <webhook-event
+            class="nc-text-field-hook-event"
             :event.sync="hook.event"
             :operation.sync="hook.operation"
           />
@@ -61,7 +64,7 @@
             required
             :items="notificationList"
             :rules="[(v) => !!v || `${$t('general.required')}`]"
-            class="caption"
+            class="caption nc-text-field-hook-notification-type"
             :prepend-inner-icon="notificationIcon[hook.notification.type]"
             @change="onNotTypeChange"
           >
diff --git a/packages/nc-gui/components/project/tableTabs/webhook/WebhookList.vue b/packages/nc-gui/components/project/tableTabs/webhook/WebhookList.vue
index 14223cbd10..cc768d2104 100644
--- a/packages/nc-gui/components/project/tableTabs/webhook/WebhookList.vue
+++ b/packages/nc-gui/components/project/tableTabs/webhook/WebhookList.vue
@@ -5,7 +5,7 @@
       <v-spacer />
       <v-btn
         tooltip="Save"
-        class="primary"
+        class="primary nc-btn-create-webhook"
         @click.prevent="$emit('add')"
       >
         Create Webhook
diff --git a/scripts/cypress/integration/common/8a_webhook.js b/scripts/cypress/integration/common/8a_webhook.js
new file mode 100644
index 0000000000..a8612fecbc
--- /dev/null
+++ b/scripts/cypress/integration/common/8a_webhook.js
@@ -0,0 +1,49 @@
+import { isTestSuiteActive } from "../../support/page_objects/projectConstants";
+
+export const genTest = (apiType, dbType) => {
+  if (!isTestSuiteActive(apiType, dbType)) return;
+  describe(`Webhook`, () => {
+    before(() => {});
+    after(() => {});
+
+    it("Create", () => {
+      // create an on-insert event webhook
+      // nc-btn-webhook
+      // nc-btn-create-webhook
+    })
+    it("Verify trigger", () => {})
+    it("Modify trigger event", () => {})
+    it("Verify trigger", () => {})
+    it("Delete trigger event", () => {})
+    it("Verify trigger", () => {})
+
+    it("Create, with condition", () => {})
+    it("Verify trigger", () => {})
+    it("Modify trigger condition", () => {})
+    it("Verify trigger", () => {})
+    it("Delete trigger condition", () => {})
+    it("Verify trigger", () => {})
+  })
+}
+
+/**
+ * @copyright Copyright (c) 2021, Xgene Cloud Ltd
+ *
+ * @author Raju Udava <sivadstala@gmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
\ No newline at end of file