diff --git a/ phpunit.dusk.xml b/ phpunit.dusk.xml
index 40848a84..db1abe1e 100644
--- a/ phpunit.dusk.xml	
+++ b/ phpunit.dusk.xml	
@@ -1,4 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
 <php>
     <ini name="display_errors" value="On" />
     <ini name="display_startup_errors" value="On" />
 </php>
+    <phpunit
+            colors="true"
+    >
+        <testsuites>
+            <testsuite name="dryrun">
+               <directory suffix="php">./tests/Browser/DryRun/</directory>
+            </testsuite>
+        </testsuites>
+    </phpunit>
+
+
diff --git a/resources/assets/vue/components/bookings/elements/BookingConfirmationComponent.vue b/resources/assets/vue/components/bookings/elements/BookingConfirmationComponent.vue
index f08ea597..26c036b7 100644
--- a/resources/assets/vue/components/bookings/elements/BookingConfirmationComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/BookingConfirmationComponent.vue
@@ -100,7 +100,7 @@
                                             </div>
                                             <div class="row" v-show="!createBank">
                                                 <div class="col-7 p-r-0">
-                                                    <div class="row">
+                                                    <div class="row" id="select-list" name="select-list">
                                                         <div class="col">
                                                             <div class="form-group no-margin form-group-default">
                                                                 <label>{{ data.serviceType.id === 4 ? 'Alipay recipient Email / Phone' : 'Account No.' }}</label>
@@ -115,7 +115,7 @@
                                                                     <div class="row text-left no-margin bg-white">
                                                                         <div class="col no-padding">
                                                                             <div class="row no-margin"  v-for="bank in data.recipientBanks.filter(AccountNumber)" v-bind:key="bank.id" >
-                                                                                <div class="col b-b b-grey p-t-10 p-b-10 pointer  p-t-10 p-b-10" :class="[{'bg-master-lightest': parameters.bankAccount.id === bank.id}, {'text-master': parameters.bankAccount.id === bank.id}, {'hover-primary': parameters.bankAccount.id !== bank.id}, {'pointer': parameters.bankAccount.id !== bank.id}]" @click="selectBank(bank)">
+                                                                                <div id="select-option" name="select-option" class="col b-b b-grey p-t-10 p-b-10 pointer  p-t-10 p-b-10" :class="[{'bg-master-lightest': parameters.bankAccount.id === bank.id}, {'text-master': parameters.bankAccount.id === bank.id}, {'hover-primary': parameters.bankAccount.id !== bank.id}, {'pointer': parameters.bankAccount.id !== bank.id}]" @click="selectBank(bank)">
                                                                                     <div class="row align-items-center justify-content-center">
                                                                                         <div class="col">
                                                                                             <div class="row">
@@ -320,4 +320,4 @@
         },
         mixins: [FormHandler]
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue b/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue
index 57cbe49e..4ce30e7d 100644
--- a/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue
@@ -133,7 +133,7 @@
                                     </div>
                                     <div class="row p-b-15" v-if="(summary.calculation.total > 0 && (data.status === 1 || data.status === 2)) || ($store.getters.isAdmin && summary.calculation.total > 0)">
                                         <div class="col">
-                                            <div class="btn btn-sm btn-block btn-success b-rad-none shadow-sm pointer requestModal" data-type="transferSummary" >Transfer Now</div>
+                                            <div class="btn btn-sm btn-block btn-success b-rad-none shadow-sm pointer requestModal" data-type="transferSummary" id="transfer-now" name="transfer-now">Transfer Now</div>
                                         </div>
                                     </div>
                                     <div class="row"  v-if="summary.calculation.total > 0 && data.status === 0">
@@ -152,7 +152,7 @@
                                             </modal-component>
                                         </div>
                                     </div>
-                                    <modal-component v-if="summary.calculation.total > 0" class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="transferSummary" size="large">
+                                    <modal-component id="select-account-modal" v-if="summary.calculation.total > 0" class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="transferSummary" size="large">
                                         <booking-confirmation-component :data="summary" :section="section"></booking-confirmation-component>
                                     </modal-component>
                                 </div>
diff --git a/resources/assets/vue/components/bookings/forms/CurrencyConverterComponent.vue b/resources/assets/vue/components/bookings/forms/CurrencyConverterComponent.vue
index a9b0ba80..6e21140f 100644
--- a/resources/assets/vue/components/bookings/forms/CurrencyConverterComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/CurrencyConverterComponent.vue
@@ -17,7 +17,7 @@
                         <div class="col no-padding">
                             <div class="form-group form-group-default m-b-0">
                                 <label>Recipient Gets</label>
-                                <input type="text" placeholder="0.00" value="0" class="form-control" v-model="recipientInput" @keyup="updateAmount($event, 1)" v-money="money">
+                                <input id="cc_get" name="cc_get" type="text" placeholder="0.00" value="0" class="form-control" v-model="recipientInput" @keyup="updateAmount($event, 1)" v-money="money">
                             </div>
                         </div>
                         <div class="col-auto bg-primary text-white">
@@ -111,7 +111,7 @@
                         <div class="col no-padding">
                             <div class="form-group form-group-default m-b-0">
                                 <label>You'r Sending</label>
-                                <input type="text" placeholder="0.00" value="0.00" v-model="senderInput" class="form-control"  @keyup="updateAmount($event, 0)"  v-money="money">
+                                <input id="cc_sending" name="cc_sending" type="text" placeholder="0.00" value="0.00" v-model="senderInput" class="form-control"  @keyup="updateAmount($event, 0)"  v-money="money">
                             </div>
                         </div>
                         <div class="col-auto bg-primary text-white">
diff --git a/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue b/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue
index cde4d84d..0608fcb2 100644
--- a/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue
@@ -23,13 +23,13 @@
                                         <div class="col-sm-12 col-md-4 pr-md-1">
                                             <div class="form-group form-group-default b-rad-none">
                                                 <label>Stock Code</label>
-                                                <input type="text" class="form-control b-rad-none" v-model="product.stockCode" />
+                                                <input id="stock_code" name="stock_code" type="text" class="form-control b-rad-none" v-model="product.stockCode" />
                                             </div>
                                         </div>
                                         <div class="col-sm-12 col-md pl-md-1">
                                             <div class="form-group form-group-default b-rad-none required">
                                                 <label>description</label>
-                                                <input class="form-control b-rad-none" rows="1" @keyup="onlyEnglish($event)" v-model="product.description">
+                                                <input id="desc" name="desc" class="form-control b-rad-none" rows="1" @keyup="onlyEnglish($event)" v-model="product.description">
                                             </div>
                                         </div>
                                     </div>
@@ -37,13 +37,13 @@
                                         <div class="col-sm-12 col-md-6 pr-md-1">
                                             <div class="form-group form-group-default b-rad-none required">
                                                 <label>Unit Price</label>
-                                                <input type="text" class="form-control b-rad-none" placeholder="Unit Price" v-model.lazy="product.unit_price" v-money="productPrice" />
+                                                <input id="unit_price" name="unit_price" type="text" class="form-control b-rad-none" placeholder="Unit Price" v-model.lazy="product.unit_price" v-money="productPrice" />
                                             </div>
                                         </div>
                                         <div class="col-sm-12 col-md-6 pl-md-1">
                                             <div class="form-group form-group-default b-rad-none no-padding no-border">
                                                 <div class="row no-margin">
-                                                    <div class="col-auto bg-master-lightest pointer" @mousedown="updateQuantity" @mouseleave="clearInterval" @mouseup="clearInterval" @touchstart="updateQuantity" @touchend="clearInterval" @touchcancel="clearInterval">
+                                                    <div  id="minus-quantity" name="minus-quantity" class="col-auto bg-master-lightest pointer" @mousedown="updateQuantity" @mouseleave="clearInterval" @mouseup="clearInterval" @touchstart="updateQuantity" @touchend="clearInterval" @touchcancel="clearInterval">
                                                         <div class="row h-100 align-items-center">
                                                             <div class="col">
                                                                 <i class="fa fa-minus"></i>
@@ -52,9 +52,9 @@
                                                     </div>
                                                     <div class="col no-padding">
                                                         <label class="p-t-5 p-l-5 text-center">Quantity</label>
-                                                        <input type="text" class="form-control m-b-5 b-rad-none no-border text-center" v-model.lazy="product.quantity" v-mask="'#########'"/>
+                                                        <input  id="quantity" name="quantity" type="text" class="form-control m-b-5 b-rad-none no-border text-center" v-model.lazy="product.quantity" v-mask="'#########'"/>
                                                     </div>
-                                                    <div class="col-auto bg-master-lightest pointer" @mousedown="updateQuantity('add')" @mouseleave="clearInterval" @mouseup="clearInterval" @touchstart="updateQuantity('add')" @touchend="clearInterval" @touchcancel="clearInterval">
+                                                    <div id="add-quantity" name="add-quantity" class="col-auto bg-master-lightest pointer" @mousedown="updateQuantity('add')" @mouseleave="clearInterval" @mouseup="clearInterval" @touchstart="updateQuantity('add')" @touchend="clearInterval" @touchcancel="clearInterval">
                                                         <div class="row h-100 align-items-center">
                                                             <div class="col">
                                                                 <i class="fa fa-plus"></i>
@@ -71,7 +71,7 @@
                                             <h6 class="no-margin bold text-complete">{{data.fixed_currency.short_code}} {{productTotal.toFixed(3)}}</h6>
                                         </div>
                                         <div class="col-sm-12 col-md">
-                                            <button class="btn btn-sm btn-block btn-complete b-rad-none" @click="addProduct()">Add Product</button>
+                                            <button id="add-product" name="add-product" class="btn btn-sm btn-block btn-complete b-rad-none" @click="addProduct()">Add Product</button>
                                         </div>
                                     </div>
                                 </div>
@@ -112,7 +112,7 @@
                         <div class="col">
                             <div class="row m-b-10">
                                 <div class="col">
-                                    <button class="btn btn-xs all-caps b-rad-none btn-primary btn-block" @click="submitForm()">{{(Math.round((poTotal + Number.EPSILON) * 1000) / 1000).toFixed(3) !== (Math.round((data.amount + Number.EPSILON) * 1000) / 1000).toFixed(3) ? 'Save Purchase Order' : 'Save & Confirm'}}</button>
+                                    <button id="save-purchase-order" name="save-purchase-order" class="btn btn-xs all-caps b-rad-none btn-primary btn-block" @click="submitForm()">{{(Math.round((poTotal + Number.EPSILON) * 1000) / 1000).toFixed(3) !== (Math.round((data.amount + Number.EPSILON) * 1000) / 1000).toFixed(3) ? 'Save Purchase Order' : 'Save & Confirm'}}</button>
                                 </div>
                             </div>
                             <div class="row" v-if="(Math.round((poTotal + Number.EPSILON) * 1000) / 1000).toFixed(3) !== data.amount">
@@ -262,4 +262,4 @@
         },
         mixins: [formHandler]
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/assets/vue/components/bookings/forms/PurchaseOrderItemFormComponent.vue b/resources/assets/vue/components/bookings/forms/PurchaseOrderItemFormComponent.vue
index 80e28394..d91d2661 100644
--- a/resources/assets/vue/components/bookings/forms/PurchaseOrderItemFormComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/PurchaseOrderItemFormComponent.vue
@@ -58,13 +58,13 @@
                         <div class="col-4 p-r-5">
                             <div class="form-group form-group-default b-rad-none">
                                 <label>Stock Code</label>
-                                <input type="text" class="form-control b-rad-none" v-model="product.stockCode" />
+                                <input id="stock_code" name="stock_code"  type="text" class="form-control b-rad-none" v-model="product.stockCode" />
                             </div>
                         </div>
                         <div class="col p-l-5">
                             <div class="form-group form-group-default b-rad-none required">
                                 <label>description</label>
-                                <input class="form-control b-rad-none" rows="1" @keyup="onlyEnglish($event)" v-model="product.description">
+                                <input id="desc" name="desc" class="form-control b-rad-none" rows="1" @keyup="onlyEnglish($event)" v-model="product.description">
                             </div>
                         </div>
                     </div>
@@ -72,13 +72,13 @@
                         <div class="col-6 p-r-5">
                             <div class="form-group form-group-default b-rad-none required">
                                 <label>Unit Price</label>
-                                <input type="text" class="form-control b-rad-none" placeholder="Unit Price" v-model.lazy="product.unit_price" v-money="productPrice" />
+                                <input id="unit_price" name="unit_price" type="text" class="form-control b-rad-none" placeholder="Unit Price" v-model.lazy="product.unit_price" v-money="productPrice" />
                             </div>
                         </div>
                         <div class="col-6 p-l-5">
                             <div class="form-group form-group-default b-rad-none no-padding no-border">
                                 <div class="row no-margin">
-                                    <div class="col-auto bg-master-lighter pointer" @mousedown="updateQuantity" @mouseleave="clearInterval" @mouseup="clearInterval" @touchstart="updateQuantity" @touchend="clearInterval" @touchcancel="clearInterval">
+                                    <div id="minus-quantity" name="minus-quantity" class="col-auto bg-master-lighter pointer" @mousedown="updateQuantity" @mouseleave="clearInterval" @mouseup="clearInterval" @touchstart="updateQuantity" @touchend="clearInterval" @touchcancel="clearInterval">
                                         <div class="row h-100 align-items-center">
                                             <div class="col">
                                                 <i class="fa fa-minus"></i>
@@ -87,9 +87,9 @@
                                     </div>
                                     <div class="col no-padding">
                                         <label class="p-t-5 p-l-5 text-center">Quantity</label>
-                                        <input type="text" class="form-control m-b-5 b-rad-none no-border text-center" v-model.lazy="product.quantity" v-mask="'#########'"/>
+                                        <input id="quantity" name="quantity" type="text" class="form-control m-b-5 b-rad-none no-border text-center" v-model.lazy="product.quantity" v-mask="'#########'"/>
                                     </div>
-                                    <div class="col-auto bg-master-lighter pointer" @mousedown="updateQuantity('add')" @mouseleave="clearInterval" @mouseup="clearInterval" @touchstart="updateQuantity('add')" @touchend="clearInterval" @touchcancel="clearInterval">
+                                    <div id="add-quantity" name="add-quantity" class="col-auto bg-master-lighter pointer" @mousedown="updateQuantity('add')" @mouseleave="clearInterval" @mouseup="clearInterval" @touchstart="updateQuantity('add')" @touchend="clearInterval" @touchcancel="clearInterval">
                                         <div class="row h-100 align-items-center">
                                             <div class="col">
                                                 <i class="fa fa-plus"></i>
@@ -185,4 +185,4 @@
         },
         mixins: [formHandler]
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/assets/vue/components/bookings/forms/confirmBookingComponent.vue b/resources/assets/vue/components/bookings/forms/confirmBookingComponent.vue
index 5897646c..2cb67ca0 100644
--- a/resources/assets/vue/components/bookings/forms/confirmBookingComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/confirmBookingComponent.vue
@@ -1,10 +1,10 @@
 <template>
     <div class="row">
         <div class="col-auto">
-            <button class="btn btn-lg btn-default bg-master-lightest b-rad-none all-caps fs-12" data-dismiss="modal">Cancel</button>
+            <button id="cancel-new-booking" name="cancel-new-booking" class="btn btn-lg btn-default bg-master-lightest b-rad-none all-caps fs-12" data-dismiss="modal">Cancel</button>
         </div>
         <div class="col text-right">
-            <button class="btn btn-lg btn-success b-rad-none all-caps fs-12" v-if="Object.keys(data.bankAccount).length" @click="submitForm()">Confirm & Proceed</button>
+            <button id="confirm-new-booking" name="confirm-new-booking" class="btn btn-lg btn-success b-rad-none all-caps fs-12" v-if="Object.keys(data.bankAccount).length" @click="submitForm()">Confirm & Proceed</button>
         </div>
     </div>
 </template>
@@ -37,4 +37,4 @@
         },
         mixins: [ModalFormHandler]
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/tests/Browser/CreateBooking.php b/tests/Browser/CreateBooking.php
deleted file mode 100644
index e7391624..00000000
--- a/tests/Browser/CreateBooking.php
+++ /dev/null
@@ -1,23 +0,0 @@
-<?php
-
-namespace Tests\Browser;
-
-use Illuminate\Foundation\Testing\DatabaseMigrations;
-use Laravel\Dusk\Browser;
-use Tests\DuskTestCase;
-
-class CreateBooking extends DuskTestCase
-{
-    /**
-     * A Dusk test example.
-     *
-     * @test
-     */
-    public function testCreateBooking()
-    {
-        $this->browse(function (Browser $browser) {
-            $browser->visit('/')
-                    ->assertSee('Laravel');
-        });
-    }
-}
diff --git a/tests/Browser/ExampleTest.php b/tests/Browser/ExampleTest.php
deleted file mode 100644
index 37f076bd..00000000
--- a/tests/Browser/ExampleTest.php
+++ /dev/null
@@ -1,28 +0,0 @@
-<?php
-
-namespace Tests\Browser;
-
-use Illuminate\Foundation\Testing\DatabaseMigrations;
-use Laravel\Dusk\Browser;
-use Tests\DuskTestCase;
-
-class ExampleTest extends DuskTestCase
-{
-    /**
-     * A basic browser test example.
-     *
-     * @return void
-     */
-    public function testBasicExample()
-    {
-        $this->browse(function (Browser $browser) {
-            $browser->visit('http://localhost:86')
-                    ->pause(500)
-                    ->type('email', 'junkit.mah@bioloop.com.my')
-                    ->type('password', '123456abcabc')
-                    ->click('#sign-in')
-                    ->pause(5000)
-                    ->assertPathIs('/dashboard');
-        });
-    }
-}