diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index edc7cbc..1e1fdfc 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -96,6 +96,7 @@ jobs:
   cypress:
     strategy:
       matrix:
+        test: [ tickets, templates, playbooks ]
         auth: [ simple, keycloak ]
     runs-on: ubuntu-latest
     steps:
@@ -164,6 +165,7 @@ jobs:
       - uses: cypress-io/github-action@v4
         env:
           CYPRESS_AUTH: ${{ matrix.auth }}
+          CYPRESS_TEST: ${{ matrix.test }}
         with:
           browser: chrome
           working-directory: ui
diff --git a/ui/cypress/e2e/catalyst.cy.js b/ui/cypress/e2e/catalyst.cy.js
index 1178952..764ae9c 100644
--- a/ui/cypress/e2e/catalyst.cy.js
+++ b/ui/cypress/e2e/catalyst.cy.js
@@ -1,32 +1,148 @@
-describe('user', () => {
-    it('open ticket', () => {
-        cy.visit('/');
+beforeEach(() => {
+    cy.visit('/');
 
-        if (Cypress.env('AUTH') === 'simple') {
-            cy.login();
-        } else if (Cypress.env('AUTH') === 'keycloak') {
-            cy.get("#username").type("bob");
-            cy.get("#password").type("bob");
-            cy.get("#kc-login").click();
-        }
+    cy.login();
 
-        cy.getCookie('user').should('exist');
+    cy.getCookie('user').should('exist');
 
-        cy.intercept('GET', '/api/userdata/demo', { fixture: 'userdata_demo.json' })
-        cy.intercept('GET', '/api/users/demo', { fixture: 'user_demo.json' })
+    cy.intercept('GET', '/api/userdata/demo', { fixture: 'userdata_demo.json' })
+    cy.intercept('GET', '/api/users/demo', { fixture: 'user_demo.json' })
+})
 
-        cy.visit('http://localhost/ui/tickets');
+if (Cypress.env('TEST') === 'tickets') {
+    describe('tickets', () => {
+        it('open ticket', () => {
+            cy.visit('http://localhost/ui/tickets');
 
-        // clear caql
-        cy.get("#caqlbar > div > div > div > div > div:nth-child(2) > div > button").click();
+            // clear caql
+            cy.get("#caqlbar > div > div > div > div > div:nth-child(2) > div > button").click();
 
-        // open ticket
-        cy.contains("live zebra").click()
+            // open ticket
+            cy.contains("live zebra").click()
 
-        // assert url
-        cy.url().should('eq', "http://localhost/ui/tickets/8123")
+            // assert url
+            cy.url().should('eq', "http://localhost/ui/tickets/8123")
 
-        // assert title
-        cy.get("h1").should("have.text", " Incident  #8123:  live zebra ")
+            // assert title
+            cy.get("h1").should("have.text", " Incident  #8123:  live zebra ")
+        })
     })
-})
\ No newline at end of file
+}
+
+if (Cypress.env('TEST') === 'templates') {
+    describe('templates', () => {
+        it('create template', () => {
+            cy.get("#toggle_menu").click();
+            cy.contains('Templates').click();
+            cy.get("#toggle_menu").click();
+
+            cy.get("body").then($body => {
+                if ($body.find('a[href="/ui/templates/description-only"]').length > 0) {
+                    cy.get('a[href="/ui/templates/description-only"]').trigger('mouseover');
+                    cy.get('a[href="/ui/templates/description-only"] button').click();
+                    cy.get("#delete-button").click();
+                }
+            });
+
+            cy.contains("New Template").click();
+            cy.url().should('eq', "http://localhost/ui/templates/new");
+            cy.get("#name-edit").click().clear().type("DescriptionOnly");
+            cy.get("#template-edit #advanced").click({force: true});
+            cy.get(".prism-editor__textarea").clear().type('{ "type": "object", "name": "Incident", "required": [ "description" ], "properties": { "description": { "title": "Description", "type": "string", "x-display": "textarea" } } }', {parseSpecialCharSequences: false});
+            cy.contains("Create").click();
+
+            cy.get("#toggle_menu").click();
+            cy.contains('Alerts').click();
+            cy.get("#toggle_menu").click();
+
+            cy.contains("New Alert").click();
+            cy.get("#title-edit").type("New Alert");
+            cy.get("#templates-edit .v-input__slot").click();
+            cy.contains("DescriptionOnly").click();
+            cy.contains("Create").click();
+            cy.wait(1000);
+
+            cy.get("#description").type("Lorem Ipsum");
+            cy.contains("Save Details").click();
+        })
+    })
+}
+
+if (Cypress.env('TEST') === 'playbooks') {
+    describe('playbooks', () => {
+        it('create playbook', () => {
+            cy.get("#toggle_menu").click();
+            cy.contains('Playbooks').click();
+            cy.get("#toggle_menu").click();
+
+            cy.get("body").then($body => {
+                if ($body.find('a[href="/ui/playbooks/test"]').length > 0) {
+                    cy.get('a[href="/ui/playbooks/test"]').trigger('mouseover');
+                    cy.get('a[href="/ui/playbooks/test"] button').click();
+                    cy.get("#delete-button").click();
+                }
+            });
+
+            cy.contains("New Playbook").click();
+            cy.url().should('eq', "http://localhost/ui/playbooks/new");
+            cy.get(".prism-editor__textarea").clear().type('name: Test\n' +
+                'tasks:\n' +
+                '  input:\n' +
+                '  name: Enter something to hash\n' +
+                'type: input\n' +
+                'schema:\n' +
+                '  title: Something\n' +
+                'type: object\n' +
+                'properties:\n' +
+                '  something:\n' +
+                '  type: string\n' +
+                'title: Something\n' +
+                'default: ""\n' +
+                '{backspace}{backspace}{backspace}next:\n' +
+                '  hash: "something != \'\'"\n' +
+                '{backspace}{backspace}\n' +
+                'hash:\n' +
+                '  name: Hash the something\n' +
+                'type: automation\n' +
+                'automation: hash.sha1\n' +
+                'payload:\n' +
+                '  default: "playbook.tasks[\'input\'].data[\'something\']"\n' +
+                '{backspace}next:\n' +
+                '  comment: "hash != \'\'"\n' +
+                '{backspace}{backspace}\n' +
+                'comment:\n' +
+                '  name: Comment the hash\n' +
+                'type: automation\n' +
+                'automation: comment\n' +
+                'payload:\n' +
+                '  default: "playbook.tasks[\'hash\'].data[\'hash\']"\n' +
+                '{backspace}next:\n' +
+                '  done: "done"\n' +
+                '{backspace}{backspace}\n' +
+                'done:\n' +
+                '  name: You can close this case now\n' +
+                'type: task\n');
+            cy.scrollTo('bottom');
+            cy.contains("Create").click();
+
+            cy.get("#toggle_menu").click();
+            cy.contains('Alerts').click();
+            cy.get("#toggle_menu").click();
+
+            cy.contains("New Alert").click();
+            cy.get("#title-edit").type("New Alert");
+            cy.get("#playbooks-edit .v-input__slot").click();
+            cy.contains("Test").click();
+            cy.contains("Create").click();
+            cy.wait(1000);
+
+            cy.scrollTo('bottom');
+            cy.get(".playbook-test .tasks").contains("Enter something to hash").click();
+            cy.get("#something").type("my test value");
+            cy.contains("Complete").click();
+
+            // cy.wait(300 * 1000);
+            // cy.contains("a94a8fe5ccb19ba61c4c0873d391e987982fbbd3").should('exist');
+        })
+    })
+}
diff --git a/ui/cypress/support/e2e.js b/ui/cypress/support/e2e.js
index 27ca45e..f8ea1a3 100644
--- a/ui/cypress/support/e2e.js
+++ b/ui/cypress/support/e2e.js
@@ -14,10 +14,15 @@ Cypress.on('uncaught:exception', (err, runnable) => {
 })
 
 Cypress.Commands.add('login', (options = {}) => {
-    // login
-    cy.contains("Name").click({force: true});
-    cy.get("#username").type("tom");
-    cy.contains("Password").click({force: true});
-    cy.get("#password").type("tom");
-    cy.get("button").contains("Login").click();
+    if (Cypress.env('AUTH') === 'simple') {
+        cy.contains("Name").click({force: true});
+        cy.get("#username").type("tom");
+        cy.contains("Password").click({force: true});
+        cy.get("#password").type("tom");
+        cy.get("button").contains("Login").click();
+    } else if (Cypress.env('AUTH') === 'keycloak') {
+        cy.get("#username").type("bob");
+        cy.get("#password").type("bob");
+        cy.get("#kc-login").click();
+    }
 })
diff --git a/ui/src/App.vue b/ui/src/App.vue
index ed79965..3ef635e 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -179,7 +179,7 @@
 
       </v-app-bar>
       <router-view></router-view>
-      <v-snackbar v-model="snackbar" :color="$store.state.alert.type" :timeout="$store.state.alert.type === 'error' ? -1 : 5000" outlined>
+      <v-snackbar id="alert" v-model="snackbar" :color="$store.state.alert.type" :timeout="$store.state.alert.type === 'error' ? -1 : 5000" outlined>
         <b style="display: block">{{ $store.state.alert.name | capitalize }}</b>
         {{ $store.state.alert.detail }}
         <template v-slot:action="{ attrs }">
diff --git a/ui/src/components/AdvancedJSONSchemaEditor.vue b/ui/src/components/AdvancedJSONSchemaEditor.vue
index a73abf2..4841dea 100644
--- a/ui/src/components/AdvancedJSONSchemaEditor.vue
+++ b/ui/src/components/AdvancedJSONSchemaEditor.vue
@@ -3,6 +3,7 @@
     <div class="d-flex" >
       <v-spacer></v-spacer>
       <v-switch
+          id="advanced"
           v-model="advanced"
           label="Advanced"
           class="float-right mt-0"
diff --git a/ui/src/components/Editor.vue b/ui/src/components/Editor.vue
index d30d9df..08c008f 100644
--- a/ui/src/components/Editor.vue
+++ b/ui/src/components/Editor.vue
@@ -1,7 +1,7 @@
 <template>
   <prism-editor
       v-if="showEditor"
-      class="my-editor"
+      class="editor"
       v-model="code"
       :highlight="highlighter"
       line-numbers
diff --git a/ui/src/components/List.vue b/ui/src/components/List.vue
index d97678b..4bfe36c 100644
--- a/ui/src/components/List.vue
+++ b/ui/src/components/List.vue
@@ -43,8 +43,8 @@
         <v-card-title> Delete {{ singular }} {{ deleteName }} ? </v-card-title>
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn color="error" text @click="dialog = false">Cancel</v-btn>
-          <v-btn color="success" outlined @click="deleteItem(deleteName)">Delete</v-btn>
+          <v-btn id="cancel-button" color="error" text @click="dialog = false">Cancel</v-btn>
+          <v-btn id="delete-button" color="success" outlined @click="deleteItem(deleteName)">Delete</v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
diff --git a/ui/src/views/Template.vue b/ui/src/views/Template.vue
index c8ba834..5ddca15 100644
--- a/ui/src/views/Template.vue
+++ b/ui/src/views/Template.vue
@@ -17,9 +17,9 @@
       <h2 v-else>Edit Template: {{ template.name }}</h2>
     </div>
 
-    <v-text-field label="Name" v-model="template.name" class="flex-grow-0 flex-shrink-0" :readonly="readonly"></v-text-field>
+    <v-text-field id="name-edit" label="Name" v-model="template.name" class="flex-grow-0 flex-shrink-0" :readonly="readonly"></v-text-field>
 
-    <AdvancedJSONSchemaEditor v-if="schema" @save="save" :schema="schema" :readonly="readonly" :hidepreview="false"></AdvancedJSONSchemaEditor>
+    <AdvancedJSONSchemaEditor id="template-edit" v-if="schema" @save="save" :schema="schema" :readonly="readonly" :hidepreview="false"></AdvancedJSONSchemaEditor>
   </div>
 </template>
 
diff --git a/ui/src/views/Ticket.vue b/ui/src/views/Ticket.vue
index b545954..eae9d14 100644
--- a/ui/src/views/Ticket.vue
+++ b/ui/src/views/Ticket.vue
@@ -278,7 +278,7 @@
           <div
             v-for="(playbook, playbookid) in ticket.playbooks"
             :key="playbookid"
-            class="mb-2"
+            :class="'playbook-'+playbookid + ' mb-2'"
           >
             <v-card color="cards" flat>
               <v-card-subtitle class="d-flex pa-2 pb-1 mb-0" style="line-height: 28px;">
@@ -310,7 +310,7 @@
                   class="mx-4"
                 />
               </div>
-              <v-list dense color="cards" class="py-0">
+              <v-list dense color="cards" class="tasks py-0">
                 <v-list-item
                   v-for="taskwithid in stasks(playbookid)"
                   :key="taskwithid.id"
diff --git a/ui/src/views/TicketNew.vue b/ui/src/views/TicketNew.vue
index 0926b93..414e655 100644
--- a/ui/src/views/TicketNew.vue
+++ b/ui/src/views/TicketNew.vue
@@ -2,24 +2,28 @@
   <div class="mt-8">
     <h2>New {{ $route.params.type | capitalize }}</h2>
     <v-form class="create clearfix">
-      <v-text-field label="Title" v-model="name"></v-text-field>
+      <v-text-field id="title-edit" label="Title" v-model="name"></v-text-field>
 
-      <v-select
-          label="Playbooks"
-          :items="playbooks"
-          item-text="name"
-          return-object
-          multiple
-          v-model="selectedPlaybooks"
-      ></v-select>
+      <div id="playbooks-edit">
+        <v-select
+            label="Playbooks"
+            :items="playbooks"
+            item-text="name"
+            return-object
+            multiple
+            v-model="selectedPlaybooks"
+        ></v-select>
+      </div>
 
-      <v-select
-        label="Template"
-        :items="templates"
-        item-text="name"
-        return-object
-        v-model="selectedTemplate"
-      ></v-select>
+      <div id="templates-edit">
+        <v-select
+            label="Template"
+            :items="templates"
+            item-text="name"
+            return-object
+            v-model="selectedTemplate"
+        ></v-select>
+      </div>
 
       <v-subheader class="pl-0 mt-4" style="height: 20px">Details</v-subheader>
       <div v-if="selectedTemplate !== undefined" class="details">