diff --git a/ phpunit.dusk.xml b/ phpunit.dusk.xml
new file mode 100644
index 00000000..db1abe1e
--- /dev/null
+++ b/ phpunit.dusk.xml	
@@ -0,0 +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/.env.dusk b/.env.dusk
new file mode 100644
index 00000000..4041ae24
--- /dev/null
+++ b/.env.dusk
@@ -0,0 +1,59 @@
+APP_NAME=Laravel
+APP_ENV=local
+APP_KEY=base64:X521H/hWdbsG6S/JG0Q/BZgTo1azoV18kzqkqMQSDrQ=
+APP_DEBUG=true
+APP_URL=http://localhost
+
+LOG_CHANNEL=stack
+
+DB_CONNECTION=dusk
+DB_HOST=127.0.0.1
+DB_PORT=3306
+DB_DATABASE=exchange-test
+DB_USERNAME=root
+DB_PASSWORD=
+
+BROADCAST_DRIVER=log
+CACHE_DRIVER=file
+QUEUE_CONNECTION=sync
+SESSION_DRIVER=file
+SESSION_LIFETIME=120
+
+REDIS_HOST=127.0.0.1
+REDIS_PASSWORD=null
+REDIS_PORT=6379
+
+MAIL_MAILER=smtp
+MAIL_HOST=smtp.mailtrap.io
+MAIL_PORT=2525
+MAIL_USERNAME=null
+MAIL_PASSWORD=null
+MAIL_ENCRYPTION=null
+MAIL_FROM_ADDRESS=null
+MAIL_FROM_NAME="${APP_NAME}"
+
+AWS_ACCESS_KEY_ID=
+AWS_SECRET_ACCESS_KEY=
+AWS_DEFAULT_REGION=us-east-1
+AWS_BUCKET=
+
+PUSHER_APP_ID=
+PUSHER_APP_KEY=
+PUSHER_APP_SECRET=
+PUSHER_APP_CLUSTER=mt1
+
+MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+
+FILESYSTEM_DRIVER="documents"
+
+JWT_SECRET=
+JWT_TTL=1440
+
+SHIPPING_URL=http://shipping-portal.test/
+MIX_SHIPPING_URL="${SHIPPING_URL}"
+
+BILLPLZ_BASE_URL="https://www.billplz-sandbox.com"
+BILLPLZ_API_KEY="0fa4c710-761b-4a7a-a501-c2c2d02643d5"
+BILLPLZ_X_SIGNATURE_KEY="S-pbNVthVRsvnPfZlgLwqqOg"
+BILLPLZ_COLLECTION_ID="hev2wdjy"
\ No newline at end of file
diff --git a/app/Classes/Modules/Accounts/ControllersLogic/CreateCustomerLogic.php b/app/Classes/Modules/Accounts/ControllersLogic/CreateCustomerLogic.php
index 2c732126..c0e1ab8a 100644
--- a/app/Classes/Modules/Accounts/ControllersLogic/CreateCustomerLogic.php
+++ b/app/Classes/Modules/Accounts/ControllersLogic/CreateCustomerLogic.php
@@ -101,7 +101,7 @@ class CreateCustomerLogic extends AbstractControllerLogic
 
         $this->assignSegmentProcessor->execute($company);
 
-         $this->generateEmailVerificationAttemptProcessor->execute($user);
+         // $this->generateEmailVerificationAttemptProcessor->execute($user);
 
         return $this->response($this->authenticationProcessor->execute($request));
 
diff --git a/composer.json b/composer.json
index 32f52d83..32305073 100644
--- a/composer.json
+++ b/composer.json
@@ -10,7 +10,7 @@
     "require": {
         "php": "^7.2.5",
         "ext-fileinfo": "*",
-        "ext-json": "^1.6",
+        "ext-json": "*",
         "ext-zip": "*",
         "barryvdh/laravel-dompdf": "^0.9.0",
         "carlos-meneses/laravel-mpdf": "^2.1",
@@ -31,6 +31,7 @@
     "require-dev": {
         "facade/ignition": "^2.0",
         "fzaninotto/faker": "^1.9.1",
+        "laravel/dusk": "^6.23",
         "mockery/mockery": "^1.3.1",
         "nunomaduro/collision": "^4.1",
         "phpunit/phpunit": "^8.5"
diff --git a/config/database.php b/config/database.php
index aeabec6f..ac0b718b 100644
--- a/config/database.php
+++ b/config/database.php
@@ -63,6 +63,26 @@ return [
             ]) : [],
         ],
 
+        'dusk' => [
+            'driver' => 'mysql',
+            'url' => env('DATABASE_URL'),
+            'host' => env('DB_HOST', '127.0.0.1'),
+            'port' => env('DB_PORT', '3306'),
+            'database' => env('DB_DATABASE', 'forge'),
+            'username' => env('DB_USERNAME', 'forge'),
+            'password' => env('DB_PASSWORD', ''),
+            'unix_socket' => env('DB_SOCKET', ''),
+            'charset' => 'utf8mb4',
+            'collation' => 'utf8mb4_unicode_ci',
+            'prefix' => '',
+            'prefix_indexes' => true,
+            'strict' => false,
+            'engine' => null,
+            'options' => extension_loaded('pdo_mysql') ? array_filter([
+                PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
+            ]) : [],
+        ],
+
         'pgsql' => [
             'driver' => 'pgsql',
             'url' => env('DATABASE_URL'),
diff --git a/resources/assets/vue/components/accounts/forms/LoginFormComponent.vue b/resources/assets/vue/components/accounts/forms/LoginFormComponent.vue
index ed097c68..5ddfdadb 100644
--- a/resources/assets/vue/components/accounts/forms/LoginFormComponent.vue
+++ b/resources/assets/vue/components/accounts/forms/LoginFormComponent.vue
@@ -7,13 +7,13 @@
                     <validation-wrapper-component class="m-b-15" :validator="$v.parameters.email">
                         <label class="text-primary">Email Address</label>
                         <div class="controls">
-                            <input type="text" class="form-control fs-12" v-model.trim="parameters.email">
+                            <input id="email" name="email" type="text" class="form-control fs-12" v-model.trim="parameters.email">
                         </div>
                     </validation-wrapper-component>
                     <validation-wrapper-component :validator="$v.parameters.password">
                         <label class="text-primary">Password</label>
                         <div class="controls">
-                            <input type="password" class="form-control fs-12" v-model="parameters.password">
+                            <input id="password" name="password" type="password" class="form-control fs-12" v-model="parameters.password">
                         </div>
                     </validation-wrapper-component>
                     <div class="row m-t-15 align-items-center justify-content-center">
@@ -21,7 +21,7 @@
                             <p class="muted fs-11 font-arial m-b-0 pointer" @click="$store.dispatch('toggleSection', {name: 'forgetPassword', status: true})">Forgot password?</p>
                         </div>
                         <div class="col text-right">
-                            <div class="btn btn-sm p-l-30 p-r-30 btn-primary bold v-align-middle b-rad-none all-caps" @click="submitForm">Sign In</div>
+                            <div class="btn btn-sm p-l-30 p-r-30 btn-primary bold v-align-middle b-rad-none all-caps" @click="submitForm" id="sign-in">Sign In</div>
                         </div>
                     </div>
                 </div>
@@ -55,4 +55,4 @@
         mixins: [loginFormValidation]
     }
 
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/assets/vue/components/accounts/forms/RegistrationFormComponent.vue b/resources/assets/vue/components/accounts/forms/RegistrationFormComponent.vue
index 429d0b9a..9f49275e 100644
--- a/resources/assets/vue/components/accounts/forms/RegistrationFormComponent.vue
+++ b/resources/assets/vue/components/accounts/forms/RegistrationFormComponent.vue
@@ -33,7 +33,7 @@
                                                                          viewBox="0 0 172 172"
                                                                          style=" fill:#000000;"><defs><linearGradient x1="107.5" y1="82.30469" x2="107.5" y2="101.12525" gradientUnits="userSpaceOnUse" id="color-1_114458_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="107.5" y1="56.10156" x2="107.5" y2="73.73962" gradientUnits="userSpaceOnUse" id="color-2_114458_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="123.625" y1="82.30469" x2="123.625" y2="101.12525" gradientUnits="userSpaceOnUse" id="color-3_114458_gr3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="123.625" y1="56.10156" x2="123.625" y2="73.73962" gradientUnits="userSpaceOnUse" id="color-4_114458_gr4"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="25.98006" x2="86" y2="147.8125" gradientUnits="userSpaceOnUse" id="color-5_114458_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="115.5625" y1="25.98006" x2="115.5625" y2="147.8125" gradientUnits="userSpaceOnUse" id="color-6_114458_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="115.5625" y1="25.98006" x2="115.5625" y2="147.8125" gradientUnits="userSpaceOnUse" id="color-7_114458_gr7"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="53.75" y1="99.4375" x2="53.75" y2="106.82813" gradientUnits="userSpaceOnUse" id="color-8_114458_gr8"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="63.15625" y1="85.88713" x2="63.15625" y2="94.23719" gradientUnits="userSpaceOnUse" id="color-9_114458_gr9"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="44.34375" y1="85.94356" x2="44.34375" y2="94.00606" gradientUnits="userSpaceOnUse" id="color-10_114458_gr10"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M104.8125,83.3125h5.375v16.125h-5.375z" fill="url(#color-1_114458_gr1)"></path><path d="M104.8125,56.4375h5.375v16.125h-5.375z" fill="url(#color-2_114458_gr2)"></path><path d="M120.9375,83.3125h5.375v16.125h-5.375z" fill="url(#color-3_114458_gr3)"></path><path d="M120.9375,56.4375h5.375v16.125h-5.375z" fill="url(#color-4_114458_gr4)"></path><path d="M155.875,37.625v-5.375c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-102.125c-2.96431,0 -5.375,2.41069 -5.375,5.375v5.375c0,2.96431 2.41069,5.375 5.375,5.375v16.7485c-10.01631,2.28438 -17.68644,10.78494 -18.69425,21.2205c-4.68431,1.15831 -8.18075,5.36694 -8.18075,10.406c0,5.47444 4.12531,9.9545 9.42506,10.61563c0.47569,1.36256 1.05888,2.67406 1.75763,3.91569c-10.38181,7.02512 -16.55769,18.57062 -16.55769,31.15619v8.0625h69.875h5.375h64.5v-5.375h-5.375v-96.75c2.96431,0 5.375,-2.41069 5.375,-5.375zM48.375,32.25h102.125l0.00538,5.375h-102.13038zM34.9375,83.3125c0,-10.37106 8.44144,-18.8125 18.8125,-18.8125c10.37106,0 18.8125,8.44144 18.8125,18.8125v10.75c0,10.37106 -8.44144,18.8125 -18.8125,18.8125c-10.37106,0 -18.8125,-8.44144 -18.8125,-18.8125zM26.875,91.375c0,-1.98069 1.08844,-3.69531 2.6875,-4.62788v7.31538c0,0.67188 0.04838,1.33569 0.10213,1.99412c-1.6555,-0.91644 -2.78963,-2.66062 -2.78963,-4.68162zM53.75,118.25c7.095,0 13.46437,-3.08794 17.89338,-7.97113c1.51575,1.01319 2.90788,2.15 4.20862,3.37281c-5.58194,6.28069 -13.62831,9.97331 -22.102,9.97331c-8.47637,0 -16.52275,-3.68994 -22.102,-9.97062c1.30075,-1.22281 2.69288,-2.35963 4.20863,-3.37281c4.429,4.8805 10.79838,7.96844 17.89338,7.96844zM21.5,139.75v-2.6875c0,-7.14875 2.3435,-13.89169 6.49837,-19.393c6.57631,7.15681 15.9315,11.3305 25.75163,11.3305c9.81744,0 19.17531,-4.17369 25.75163,-11.33319c4.15487,5.504 6.49837,12.24962 6.49837,19.39569v2.6875zM115.5625,139.75v-5.375h29.5625v5.375zM145.125,118.25h-18.8125v5.375h18.8125v5.375h-29.5625v-13.4375c0,-4.44512 -3.61738,-8.0625 -8.0625,-8.0625h-13.4375v5.375h13.4375c1.4835,0 2.6875,1.204 2.6875,2.6875v24.1875h-18.8125v-2.6875c0,-12.58556 -6.17588,-24.13106 -16.55769,-31.15619c0.70144,-1.24162 1.28463,-2.55044 1.75762,-3.91569c5.29975,-0.66112 9.42506,-5.14119 9.42506,-10.61562c0,-5.03906 -3.49644,-9.24769 -8.18075,-10.406c-1.1825,-12.24156 -11.52131,-21.844 -24.06925,-21.844v-16.125h91.375zM77.9375,94.0625v-7.31538c1.59906,0.93256 2.6875,2.64719 2.6875,4.62788c0,2.021 -1.13412,3.76519 -2.78963,4.68162c0.05375,-0.65844 0.10213,-1.32225 0.10213,-1.99412z" fill="url(#color-5_114458_gr5)"></path><path d="M99.4375,102.125h32.25c2.96431,0 5.375,-2.41069 5.375,-5.375v-10.75c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-32.25c-2.96431,0 -5.375,2.41069 -5.375,5.375v10.75c0,2.96431 2.41069,5.375 5.375,5.375zM99.4375,86h32.25l0.00538,10.75h-32.25538z" fill="url(#color-6_114458_gr6)"></path><path d="M99.4375,75.25h32.25c2.96431,0 5.375,-2.41069 5.375,-5.375v-10.75c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-32.25c-2.96431,0 -5.375,2.41069 -5.375,5.375v10.75c0,2.96431 2.41069,5.375 5.375,5.375zM99.4375,59.125h32.25l0.00538,10.75h-32.25538z" fill="url(#color-7_114458_gr7)"></path><path d="M53.75,107.5c4.45319,0 8.0625,-3.60931 8.0625,-8.0625h-16.125c0,4.45319 3.60931,8.0625 8.0625,8.0625z" fill="url(#color-8_114458_gr8)"></path><path d="M63.15625,86c-2.2264,0 -4.03125,1.80485 -4.03125,4.03125c0,2.2264 1.80485,4.03125 4.03125,4.03125c2.2264,0 4.03125,-1.80485 4.03125,-4.03125c0,-2.2264 -1.80485,-4.03125 -4.03125,-4.03125z" fill="url(#color-9_114458_gr9)"></path><path d="M44.34375,86c-2.2264,0 -4.03125,1.80485 -4.03125,4.03125c0,2.2264 1.80485,4.03125 4.03125,4.03125c2.2264,0 4.03125,-1.80485 4.03125,-4.03125c0,-2.2264 -1.80485,-4.03125 -4.03125,-4.03125z" fill="url(#color-10_114458_gr10)"></path></g></g></svg>
                                                                 </div>
-                                                                <p class="no-margin bold">Company</p>
+                                                                <p id="company-select" class="no-margin bold">Company</p>
                                                             </div>
                                                         </div>
                                                         <div class="col-auto">
@@ -43,7 +43,7 @@
                                                                          width="45" height="45"
                                                                          viewBox="0 0 172 172"
                                                                          style=" fill:#000000;"><defs><linearGradient x1="99.4375" y1="82.64063" x2="99.4375" y2="95.42506" gradientUnits="userSpaceOnUse" id="color-1_43595_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="72.5625" y1="82.64063" x2="72.5625" y2="95.42506" gradientUnits="userSpaceOnUse" id="color-2_43595_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="99.21444" x2="86" y2="110.1875" gradientUnits="userSpaceOnUse" id="color-3_43595_gr3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="16.57381" x2="86" y2="157.67563" gradientUnits="userSpaceOnUse" id="color-4_43595_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M99.4375,83.3125c-2.96853,0 -5.375,2.40647 -5.375,5.375c0,2.96853 2.40647,5.375 5.375,5.375c2.96853,0 5.375,-2.40647 5.375,-5.375c0,-2.96853 -2.40647,-5.375 -5.375,-5.375z" fill="url(#color-1_43595_gr1)"></path><path d="M72.5625,83.3125c-2.96853,0 -5.375,2.40647 -5.375,5.375c0,2.96853 2.40647,5.375 5.375,5.375c2.96853,0 5.375,-2.40647 5.375,-5.375c0,-2.96853 -2.40647,-5.375 -5.375,-5.375z" fill="url(#color-2_43595_gr2)"></path><path d="M91.375,99.4375h-10.75c-1.4835,0 -2.6875,1.204 -2.6875,2.6875c0,4.45319 3.60931,8.0625 8.0625,8.0625c4.45319,0 8.0625,-3.60931 8.0625,-8.0625c0,-1.4835 -1.204,-2.6875 -2.6875,-2.6875z" fill="url(#color-3_43595_gr3)"></path><path d="M120.40538,103.85575c1.02662,-2.31931 1.83288,-4.75419 2.37575,-7.29119c6.53062,-0.91106 11.59387,-6.47419 11.59387,-13.25206c0,-4.37256 -2.13119,-8.22644 -5.375,-10.68281v-5.44219c0,-18.00625 -11.137,-33.43787 -26.875,-39.83412v-5.84263c0,-2.96969 -2.41606,-5.38575 -5.38575,-5.38575h-2.67675c-3.225,0 -6.08987,1.45662 -8.0625,3.71412c-1.97263,-2.2575 -4.8375,-3.71412 -8.0625,-3.71412h-2.6875c-2.96431,0 -5.375,2.41069 -5.375,5.375v5.85338c-15.738,6.39625 -26.875,21.82787 -26.875,39.83413v5.44219c-3.24381,2.45637 -5.375,6.31025 -5.375,10.68281c0,6.77787 5.06325,12.341 11.59387,13.25206c0.54288,2.537 1.34913,4.97187 2.37575,7.29119c-12.30875,10.25281 -19.34462,25.18456 -19.34462,41.26925v10.75h107.5v-10.75c0,-16.08469 -7.03588,-31.01644 -19.34463,-41.26925zM120.97781,111.72206l-19.64025,19.64025c-1.01856,1.01319 -2.78156,1.01319 -3.80013,0l-5.5685,-5.5685c10.87631,-1.74419 20.19119,-8.14581 25.84569,-17.11131c1.10994,0.9675 2.15538,1.98875 3.16319,3.03956zM53.75,88.6875v-13.4375h5.375c6.84775,0 12.83281,-3.68994 16.125,-9.17513c3.29219,5.48519 9.27725,9.17513 16.125,9.17513h26.875v13.4375c0,17.78319 -14.46681,32.25 -32.25,32.25c-17.78319,0 -32.25,-14.46681 -32.25,-32.25zM123.51213,90.91544c0.043,-0.74175 0.11288,-1.47544 0.11288,-2.22794v-12.943c3.12287,1.11531 5.375,4.06888 5.375,7.568c0,3.53944 -2.30856,6.52256 -5.48788,7.60294zM94.0625,21.5l2.6875,0.01075v4.09038c-2.39725,-0.62081 -4.86706,-1.04813 -7.40675,-1.24431c0.90838,-1.69044 2.67137,-2.85681 4.71925,-2.85681zM75.25,21.5h2.6875c2.04788,0 3.81087,1.16637 4.71925,2.85681c-2.53969,0.19619 -5.0095,0.6235 -7.40675,1.24431zM86,29.5625c17.97669,0 33.02938,12.67963 36.73275,29.5625h-31.35775c-1.4835,0 -2.6875,-1.204 -2.6875,-2.6875v-5.375h-5.375v5.375c0,4.44512 3.61738,8.0625 8.0625,8.0625h32.11294c0.0645,0.89225 0.13706,1.78181 0.13706,2.6875v2.6875h-2.6875h-2.6875h-26.875c-7.40944,0 -13.4375,-6.02806 -13.4375,-13.4375v-5.375h-5.375v5.375c0,7.40944 -6.02806,13.4375 -13.4375,13.4375h-5.375h-2.6875h-2.6875v-2.6875c0,-0.90569 0.07256,-1.79525 0.13706,-2.6875h10.61294c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-5.375h-5.375v5.375c0,1.4835 -1.204,2.6875 -2.6875,2.6875h-9.85775c3.70338,-16.88287 18.75606,-29.5625 36.73275,-29.5625zM43,83.3125c0,-3.49912 2.25212,-6.45269 5.375,-7.568v12.943c0,0.7525 0.06987,1.48619 0.11288,2.22794c-3.17931,-1.08038 -5.48788,-4.0635 -5.48788,-7.60294zM80.07406,125.79919l-5.6115,5.6115c-1.01856,1.01319 -2.78156,1.01319 -3.80013,0l-19.66175,-19.66175c1.01319,-1.05887 2.06669,-2.08819 3.18469,-3.06375c5.66256,8.97356 14.99356,15.37788 25.88869,17.114zM37.625,145.125c0,-10.7715 3.51525,-20.96519 9.8685,-29.283l19.36881,19.36881c1.57219,1.57219 3.63619,2.35694 5.70019,2.35694c2.064,0 4.128,-0.78475 5.70019,-2.35694l5.04981,-5.04981v20.339h-45.6875zM134.375,150.5h-5.375c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-10.75c-2.96431,0 -5.375,2.41069 -5.375,5.375h-18.8125v-20.38737l5.04981,5.04981c1.57219,1.57219 3.63619,2.35694 5.70019,2.35694c2.064,0 4.128,-0.78475 5.70019,-2.35694l19.34731,-19.34731c6.36669,8.32319 9.89,18.52494 9.89,29.30987z" fill="url(#color-4_43595_gr4)"></path></g></g></svg></div>
-                                                                <p class="no-margin bold">Personal</p>
+                                                                <p id="personal-select" class="no-margin bold">Personal</p>
                                                             </div>
                                                         </div>
                                                     </div>
@@ -62,7 +62,7 @@
                                                 <div class="col">
                                                     <validation-wrapper-component :validator="$v.parameters.company_name">
                                                         <label>Company Name</label>
-                                                        <input class="form-control" v-model="parameters.company_name">
+                                                        <input id="company_name" name="company_name" class="form-control" v-model="parameters.company_name">
                                                     </validation-wrapper-component>
                                                 </div>
                                             </div>
@@ -70,13 +70,13 @@
                                                 <div class="col p-r-5">
                                                     <validation-wrapper-component :validator="$v.parameters.name">
                                                         <label>Full Name</label>
-                                                        <input class="form-control" v-model="parameters.name">
+                                                        <input id="name" name="name" class="form-control" v-model="parameters.name">
                                                     </validation-wrapper-component>
                                                 </div>
                                                 <div class="col p-l-5">
                                                     <validation-wrapper-component :validator="$v.parameters.phone">
                                                         <label>Phone</label>
-                                                        <input class="form-control" v-model="parameters.phone">
+                                                        <input id="phone" name="phone" class="form-control" v-model="parameters.phone">
                                                     </validation-wrapper-component>
                                                 </div>
                                             </div>
@@ -95,7 +95,7 @@
                                         <div class="col">
                                             <validation-wrapper-component :validator="$v.parameters.email">
                                                 <label>Email</label>
-                                                <input class="form-control" v-model="parameters.email">
+                                                <input id="email" name="email" class="form-control" v-model="parameters.email">
                                             </validation-wrapper-component>
                                         </div>
                                     </div>
@@ -103,13 +103,13 @@
                                         <div class="col p-r-5">
                                             <validation-wrapper-component :validator="$v.parameters.password">
                                                 <label>Password</label>
-                                                <input class="form-control" type="password" v-model="parameters.password">
+                                                <input id="password" name="password" class="form-control" type="password" v-model="parameters.password">
                                             </validation-wrapper-component>
                                         </div>
                                         <div class="col p-l-5">
                                             <validation-wrapper-component :validator="$v.parameters.password_confirmation">
                                                 <label>Password Confirmation</label>
-                                                <input class="form-control" type="password" v-model="parameters.password_confirmation">
+                                                <input id="password_confirmation" name="password_confirmation" class="form-control" type="password" v-model="parameters.password_confirmation">
                                             </validation-wrapper-component>
                                         </div>
                                     </div>
@@ -135,7 +135,7 @@
                                     </a>
                                 </div>
                                 <div class="col text-right">
-                                    <button type="button" class="btn btn-sm p-t-10 p-b-10 p-r-35 p-l-35 btn-success b-rad-none" @click="changeStep('next')">Next</button>
+                                    <button type="button" id="next" class="btn btn-sm p-t-10 p-b-10 p-r-35 p-l-35 btn-success b-rad-none" @click="changeStep('next')">Next</button>
                                 </div>
                             </div>
                         </div>
@@ -156,7 +156,7 @@
                                     </button>
                                 </div>
                                 <div class="col text-right">
-                                    <button type="button" class="btn btn-sm p-t-10 p-b-10 p-r-35 p-l-35 btn-success b-rad-none" @click="submitForm">Complete Registration</button>
+                                    <button type="button" id="complete" class="btn btn-sm p-t-10 p-b-10 p-r-35 p-l-35 btn-success b-rad-none" @click="submitForm">Complete Registration</button>
                                 </div>
                             </div>
                         </div>
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/BookingPaymentQuotationComponent.vue b/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue
index b03b6447..79a428bc 100644
--- a/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue
@@ -124,7 +124,7 @@
                             </div>
                             <div class="row m-t-20" v-if="data.company.employee.status === 2 && data.company.status === 2 && data.outstanding_amount > 0">
                                 <div class="col">
-                                    <button class="btn btn-sm all-caps b-rad-none btn-success btn-block" @click="makePayment()">Make Payment</button>
+                                    <button id="payment-btn" class="btn btn-sm all-caps b-rad-none btn-success btn-block" @click="makePayment()">Make Payment</button>
                                 </div>
                             </div>
                         </div>
@@ -233,7 +233,7 @@
                                                             <div class="m-b-15 m-t-10 text-center">
                                                             <img src="/images/fpx-logo-vector-01.png" alt="logo" height="25">
                                                             </div>
-                                                            <p class="no-margin bold all-caps">Online Banking</p>
+                                                            <p id="online-banking" class="no-margin bold all-caps">Online Banking</p>
                                                         </div>
                                                     </div>
                                                 </div>
@@ -266,7 +266,7 @@
                                                 </div>
                                             </div>
                                             <div class="row m-t-10 m-b-10">
-                                                <div class="col text-center"><div class="padding-10 bg-master-lightest pointer" @click="$store.dispatch('toggleSection', {name: 'otherPaymentMethods', status: !$store.getters.isShowing('otherPaymentMethods')})"><i class="fa m-r-10" :class="[{'fa-angle-up': $store.getters.isShowing('otherPaymentMethods')}, {'fa-angle-down': !$store.getters.isShowing('otherPaymentMethods')}]"></i>{{$store.getters.isShowing('otherPaymentMethods') ? 'Hide' : 'Show'}} Alternative Methods <i class="fa m-l-10" :class="[{'fa-angle-up': $store.getters.isShowing('otherPaymentMethods')}, {'fa-angle-down': !$store.getters.isShowing('otherPaymentMethods')}]"></i></div></div>
+                                                <div class="col text-center"><div id="expend-method" class="padding-10 bg-master-lightest pointer" @click="$store.dispatch('toggleSection', {name: 'otherPaymentMethods', status: !$store.getters.isShowing('otherPaymentMethods')})"><i class="fa m-r-10" :class="[{'fa-angle-up': $store.getters.isShowing('otherPaymentMethods')}, {'fa-angle-down': !$store.getters.isShowing('otherPaymentMethods')}]"></i>{{$store.getters.isShowing('otherPaymentMethods') ? 'Hide' : 'Show'}} Alternative Methods <i class="fa m-l-10" :class="[{'fa-angle-up': $store.getters.isShowing('otherPaymentMethods')}, {'fa-angle-down': !$store.getters.isShowing('otherPaymentMethods')}]"></i></div></div>
                                             </div>
                                             <div class="row" v-show="$store.getters.isShowing('otherPaymentMethods')">
                                                 <div class="col">
@@ -280,7 +280,7 @@
                                                                              viewBox="0 0 172 172"
                                                                              style=" fill:#000000;"><defs><linearGradient x1="86" y1="15.45313" x2="86" y2="157.24562" gradientUnits="userSpaceOnUse" id="color-1_46094_gr1"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="62.14844" x2="86" y2="87.68238" gradientUnits="userSpaceOnUse" id="color-2_46094_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M142.4375,26.875h-18.8125v-5.375c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-64.5c-2.96431,0 -5.375,2.41069 -5.375,5.375v5.375h-18.8125c-4.44513,0 -8.0625,3.61737 -8.0625,8.0625v86c0,4.44512 3.61737,8.0625 8.0625,8.0625h40.3125v10.75h-10.75c-4.44512,0 -8.0625,3.61738 -8.0625,8.0625v2.6875h-10.75v5.375h10.75h69.875h10.75v-5.375h-10.75v-2.6875c0,-4.44512 -3.61738,-8.0625 -8.0625,-8.0625h-10.75v-10.75h40.3125c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-86c0,-4.44513 -3.61737,-8.0625 -8.0625,-8.0625zM123.625,96.75v-53.75h10.75v64.5h-96.75v-64.5h10.75v53.75zM107.5,91.375h-43v-48.64644c5.25675,-1.06962 9.40894,-5.22181 10.47856,-10.47856h22.04019c1.06963,5.25675 5.22181,9.40894 10.47856,10.47856v48.64644zM53.75,21.5h64.5v69.875h-5.375v-53.75h-2.6875c-4.44512,0 -8.0625,-3.61738 -8.0625,-8.0625v-2.6875h-32.25v2.6875c0,4.44512 -3.61737,8.0625 -8.0625,8.0625h-2.6875v53.75h-5.375zM112.875,145.125c1.4835,0 2.6875,1.204 2.6875,2.6875v2.6875h-59.125v-2.6875c0,-1.4835 1.204,-2.6875 2.6875,-2.6875h10.75h32.25zM96.75,139.75h-21.5v-10.75h21.5zM145.125,120.9375c0,1.4835 -1.204,2.6875 -2.6875,2.6875h-40.3125h-32.25h-40.3125c-1.4835,0 -2.6875,-1.204 -2.6875,-2.6875v-86c0,-1.4835 1.204,-2.6875 2.6875,-2.6875h18.8125v5.375h-10.75c-2.96431,0 -5.375,2.41069 -5.375,5.375v64.5c0,2.96431 2.41069,5.375 5.375,5.375h96.75c2.96431,0 5.375,-2.41069 5.375,-5.375v-64.5c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-10.75v-5.375h18.8125c1.4835,0 2.6875,1.204 2.6875,2.6875z" fill="url(#color-1_46094_gr1)"></path><path d="M86,64.5c-5.93706,0 -10.75,4.81294 -10.75,10.75c0,5.93706 4.81294,10.75 10.75,10.75c5.93706,0 10.75,-4.81294 10.75,-10.75c0,-5.93706 -4.81294,-10.75 -10.75,-10.75z" fill="url(#color-2_46094_gr2)"></path></g></g></svg>
                                                                     </div>
-                                                                    <p class="no-margin bold">Manual Transfer</p>
+                                                                    <p id="manual-transfer" class="no-margin bold">Manual Transfer</p>
                                                                 </div>
                                                             </div>
                                                         </div>
@@ -406,7 +406,7 @@
                                     <button class="btn btn-xs all-caps b-rad-none btn-default bg-master-lighter btn-block" @click="expandPayment = false">Cancel</button>
                                 </div>
                                 <div class="col p-l-0">
-                                    <button class="btn btn-xs all-caps b-rad-none btn-success btn-block" :class="[{'hide': paymentMethod.name === ''}]" @click="submitForm()">Create Booking</button>
+                                    <button id="create-booking" class="btn btn-xs all-caps b-rad-none btn-success btn-block" :class="[{'hide': paymentMethod.name === ''}]" @click="submitForm()">Create Booking</button>
                                 </div>
                             </div>
                         </div>
@@ -506,9 +506,9 @@
                                     <button class="btn btn-sm all-caps b-rad-none btn-default bg-master-lighter btn-block" @click="cancelQuotation()">Cancel</button>
                                 </div>
                                 <div class="col p-l-0" >
-                                    <button class="btn btn-sm all-caps b-rad-none btn-success btn-block requestModal" data-type="paymentSummary" v-if="paymentMethod.id !== 'wallet' || walletOutstanding >= 0">Lock Booking</button>
+                                    <button id="lock-booking" class="btn btn-sm all-caps b-rad-none btn-success btn-block requestModal" data-type="paymentSummary" v-if="paymentMethod.id !== 'wallet' || walletOutstanding >= 0">Lock Booking</button>
                                 </div>
-                                <modal-component v-if="calculation.total > 0" class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="paymentSummary">
+                                <modal-component id="confirm-booking-modal" v-if="calculation.total > 0" class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="paymentSummary">
                                     <confirm-quotation-form-component v-on:cancelQuotation="cancelQuotation()" :calculation="calculation" :section="section" :id="item.id" :payment_method="paymentMethod.id" :bank_code="onlinePayment.id" :amount="amount"></confirm-quotation-form-component>
                                 </modal-component>
                             </div>
diff --git a/resources/assets/vue/components/bookings/forms/ConfirmQuotationFormComponent.vue b/resources/assets/vue/components/bookings/forms/ConfirmQuotationFormComponent.vue
index f8db5603..db136e28 100644
--- a/resources/assets/vue/components/bookings/forms/ConfirmQuotationFormComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/ConfirmQuotationFormComponent.vue
@@ -71,7 +71,7 @@
                                     <button class="btn btn-sm all-caps b-rad-none btn-default bg-master-lighter" data-dismiss="modal">Cancel</button>
                                 </div>
                                 <div class="col-auto">
-                                    <button class="btn btn-sm all-caps b-rad-none btn-success" @click="submitForm()">Confirm Booking</button>
+                                    <button id="confirm-booking" class="btn btn-sm all-caps b-rad-none btn-success" @click="submitForm()">Confirm Booking</button>
                                 </div>
                             </div>
                             <div class="row text-right" v-if="payment_method !== 'wallet'">
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 76a202a1..101f92ed 100644
--- a/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue
@@ -30,13 +30,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>
@@ -44,13 +44,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>
@@ -59,9 +59,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>
@@ -78,7 +78,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>
@@ -119,7 +119,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">
@@ -269,4 +269,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/DryRun/CreateBookingTest.php b/tests/Browser/DryRun/CreateBookingTest.php
new file mode 100644
index 00000000..989dd565
--- /dev/null
+++ b/tests/Browser/DryRun/CreateBookingTest.php
@@ -0,0 +1,76 @@
+<?php
+
+namespace Tests\Browser\DryRun;
+
+use Illuminate\Foundation\Testing\DatabaseMigrations;
+use Laravel\Dusk\Browser;
+use Tests\DuskTestCase;
+use App\Classes\Modules\Transactions\Services\FetchesTransaction;
+
+
+class CreateBookingTest extends DuskTestCase
+{
+     public function testLogin()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser->visit('http://exchange-2.0.test')
+                    ->pause(5000)
+                    ->type('email', 'giftolavie@hotmail.com')
+                    ->type('password', 'pass123')
+                    ->click('#sign-in')
+                    ->pause(5000)
+                    ->assertPathIs('/dashboard');
+        });
+    }
+
+    /**
+    * @test
+    * @depends testLogin
+    */
+    public function testCreateBooking()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser->waitForLocation('/dashboard')
+                    ->waitForText('X1 Service')
+                    ->typeSlowly('cc_sending', '10000')
+                    ->pause(5000)
+                    ->waitForText('Transfer Now',5000)
+                    ->click('#transfer-now')
+                    ->whenAvailable('#select-account-modal', function ($modal) {
+                        $modal->pause(1000)
+                            ->press('#select-list')
+                            ->press('#select-option')
+                            ->pause(5000)
+                            ->click('#confirm-new-booking');
+                            #->click('#cancel-new-booking');
+                    })
+                    ->pause(7000)
+                    ->typeSlowly('stock_code', '123')
+                    ->typeSlowly('desc', 'Product A')
+                    ->typeSlowly('unit_price', '100')
+                    ->pause(7000)
+                    ->click('#add-quantity')
+                    ->click('#add-quantity')
+                    ->pause(7000)
+                    ->click('#minus-quantity')
+                    ->click('#minus-quantity')
+                    ->pause(7000)
+                    ->typeSlowly('quantity', '5')
+                    ->pause(7000)
+                    ->click('#add-product')
+                    ->pause(7000)
+                    ->click('#save-purchase-order')
+                    ->click('#payment-btn')
+                    ->click('#online-banking')
+                    ->click('#create-booking')
+                    ->pause(3000)
+                    ->click('#lock-booking')
+                    ->whenAvailable('#confirm-booking-modal', function ($modal) {
+                        $modal->click('#confirm-booking');
+                    })  
+                    ->pause(10000);
+                    //Assert if booking created successfully
+
+        });
+    }
+}
diff --git a/tests/Browser/DryRun/LoginTe.php b/tests/Browser/DryRun/LoginTe.php
new file mode 100644
index 00000000..3694dfde
--- /dev/null
+++ b/tests/Browser/DryRun/LoginTe.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace Tests\Browser\DryRun;
+
+use Illuminate\Foundation\Testing\DatabaseMigrations;
+use Laravel\Dusk\Browser;
+use Tests\DuskTestCase;
+
+class LoginTest extends DuskTestCase
+{
+    /**
+    * @test
+    */
+    public function testLogin()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser->visit('http://exchange-2.0.test')
+                    ->pause(500)
+                    ->type('email', 'junkit.mah@bioloop.com.my')
+                    ->type('password', '123456abcabc')
+                    ->click('#sign-in')
+                    ->pause(5000)
+                    ->assertPathIs('/dashboard');
+        });
+    }
+}
diff --git a/tests/Browser/DryRun/UserRegisterLoginTest.php b/tests/Browser/DryRun/UserRegisterLoginTest.php
new file mode 100644
index 00000000..d288fddd
--- /dev/null
+++ b/tests/Browser/DryRun/UserRegisterLoginTest.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace Tests\Browser\DryRun;
+
+use Laravel\Dusk\Browser;
+use Tests\DuskTestCase;
+
+class UserRegisterTest extends DuskTestCase
+{
+    public function testRegister()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser->visit('http://exchange-2.0.test/signup')
+                    ->pause(5000)
+                    ->click('#company-select')
+                    ->type('company_name', 'lazada')
+                    ->type('name', 'Someone')
+                    ->type('phone', '0128888888')
+                    ->click('#next')
+                    ->type('email', 'someone@gmail.com')
+                    ->type('password', 'pass123')
+                    ->type('password_confirmation', 'pass123')
+                    ->click('#complete')
+                    ->pause(5000)
+                    ->assertPathIs('/dashboard');
+        });
+    }
+}
diff --git a/tests/Browser/Pages/HomePage.php b/tests/Browser/Pages/HomePage.php
new file mode 100644
index 00000000..26bf174f
--- /dev/null
+++ b/tests/Browser/Pages/HomePage.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace Tests\Browser\Pages;
+
+use Laravel\Dusk\Browser;
+
+class HomePage extends Page
+{
+    /**
+     * Get the URL for the page.
+     *
+     * @return string
+     */
+    public function url()
+    {
+        return '/';
+    }
+
+    /**
+     * Assert that the browser is on the page.
+     *
+     * @param  \Laravel\Dusk\Browser  $browser
+     * @return void
+     */
+    public function assert(Browser $browser)
+    {
+        //
+    }
+
+    /**
+     * Get the element shortcuts for the page.
+     *
+     * @return array
+     */
+    public function elements()
+    {
+        return [
+            '@element' => '#selector',
+        ];
+    }
+}
diff --git a/tests/Browser/Pages/Page.php b/tests/Browser/Pages/Page.php
new file mode 100644
index 00000000..f8d76222
--- /dev/null
+++ b/tests/Browser/Pages/Page.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace Tests\Browser\Pages;
+
+use Laravel\Dusk\Page as BasePage;
+
+abstract class Page extends BasePage
+{
+    /**
+     * Get the global element shortcuts for the site.
+     *
+     * @return array
+     */
+    public static function siteElements()
+    {
+        return [
+            '@element' => '#selector',
+        ];
+    }
+}
diff --git a/tests/Browser/console/.gitignore b/tests/Browser/console/.gitignore
new file mode 100644
index 00000000..d6b7ef32
--- /dev/null
+++ b/tests/Browser/console/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/tests/Browser/screenshots/.gitignore b/tests/Browser/screenshots/.gitignore
new file mode 100644
index 00000000..d6b7ef32
--- /dev/null
+++ b/tests/Browser/screenshots/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/tests/Browser/source/.gitignore b/tests/Browser/source/.gitignore
new file mode 100644
index 00000000..d6b7ef32
--- /dev/null
+++ b/tests/Browser/source/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/tests/DuskTestCase.php b/tests/DuskTestCase.php
new file mode 100644
index 00000000..2aabaad9
--- /dev/null
+++ b/tests/DuskTestCase.php
@@ -0,0 +1,59 @@
+<?php
+
+namespace Tests;
+
+use Facebook\WebDriver\Chrome\ChromeOptions;
+use Facebook\WebDriver\Remote\DesiredCapabilities;
+use Facebook\WebDriver\Remote\RemoteWebDriver;
+use Laravel\Dusk\TestCase as BaseTestCase;
+
+abstract class DuskTestCase extends BaseTestCase
+{
+    use CreatesApplication;
+
+    /**
+     * Prepare for Dusk test execution.
+     *
+     * @beforeClass
+     * @return void
+     */
+    public static function prepare()
+    {
+        if (! static::runningInSail()) {
+            static::startChromeDriver();
+        }
+    }
+
+    /**
+     * Create the RemoteWebDriver instance.
+     *
+     * @return \Facebook\WebDriver\Remote\RemoteWebDriver
+     */
+    protected function driver()
+    {
+        $options = (new ChromeOptions)->addArguments([
+            '--no-sandbox'
+        ]);
+
+
+        return RemoteWebDriver::create(
+            //'http://localhost:86',
+            'http://localhost:9515',
+            DesiredCapabilities::chrome()->setCapability(
+                ChromeOptions::CAPABILITY, $options
+            )
+        );
+    }
+
+    /**
+     * Determine whether the Dusk command has disabled headless mode.
+     *
+     * @return bool
+     */
+    protected function hasHeadlessDisabled()
+    {
+        return true;
+                //isset($_SERVER['DUSK_HEADLESS_DISABLED']) ||
+                //isset($_ENV['DUSK_HEADLESS_DISABLED']);
+    }
+}
diff --git a/tests/Unit/QualityControlTest.php b/tests/Unit/QualityControlTest.php
deleted file mode 100644
index 3ed9d19a..00000000
--- a/tests/Unit/QualityControlTest.php
+++ /dev/null
@@ -1,119 +0,0 @@
-<?php
-
-namespace Tests\Unit;
-
-use PHPUnit\Exception;
-use PHPUnit\Framework\AssertionFailedError;
-use PHPUnit\Framework\ExpectationFailedException;
-use PHPUnit\Framework\PHPTAssertionFailedError;
-use PHPUnit\Framework\TestCase;
-use RecursiveIteratorIterator;
-use RecursiveDirectoryIterator;
-use FilesystemIterator;
-
-class QualityControlTest extends TestCase
-{
-    private $non_standard_folders = [];
-
-    private $file_check=[];
-
-    private $results = [];
-
-    public const CODE_LINE_COUNT = 400;
-
-    public const METHOD_COUNT = 20;
-
-    public function __construct(?string $name = null, array $data = [], string $dataName = '')
-    {
-        //Unit test defaults
-        parent::__construct($name, $data, $dataName);
-
-        $fullPath = dirname(__FILE__, 3).'/app/Classes/Modules';
-        $dirs = $files = [];
-
-        $modules_dir_count = [];
-
-        $current_directory = "";
-        $allowed_folders = ['ControllersLogic','DataTransferObjects','Processors','Services','Standards'];
-        $allowed_standards_folders = ['Criteria','Criterias','Rules','Validators'];
-        $ignore_folders = ['Rates'];
-
-        $directory = new RecursiveDirectoryIterator($fullPath, FilesystemIterator::SKIP_DOTS);
-
-        $modules = array_map('basename',glob($fullPath.'/*', GLOB_ONLYDIR));
-
-        foreach (new RecursiveIteratorIterator($directory, RecursiveIteratorIterator::SELF_FIRST) as $path ) {
-
-            //Note: $path is SplFileInfo class. For all the options/methods , please check here: https://www.php.net/manual/en/class.splfileinfo.php
-
-            if($path->isDir()){
-                //Check Modules directory for allowed folders
-                //TODO: Check folder in correct orders, e.g. if Validators inside Standards folder
-
-                $dirs[] = $path->__toString();
-
-                if(in_array($path->getFileName(),$modules)){
-                    $current_directory = $path->getFileName();
-                    $modules_dir_count[$path->getFileName()]=['count'=>0,'standards_count'=>0];
-                }else if(in_array($path->getFileName(),$allowed_folders)){
-                    $modules_dir_count[$current_directory]['count'] += 1;
-                }else if(in_array($path->getFileName(),$allowed_standards_folders)){
-                    $modules_dir_count[$current_directory]['standards_count'] += 1;
-                } else if(!in_array($path->getFileName(),$ignore_folders)){
-                    $this->non_standard_folders[]= $path->__toString();
-                }
-            }else{
-                $files[] = realpath($path->__toString());
-
-                //TODO: Read files (.php) & check for class name format & if possible variable name format
-
-                $file = $path->openFile('r');
-                if(!isset($this->file_check[$path->getFileName()]['files'])){
-                    $this->file_check[$path->getFileName()]=['lines'=>0,'methods_count'=>0];
-                }
-                $file->seek(PHP_INT_MAX);
-                $linesTotal = $file->key();
-                $this->file_check[$path->getFileName()]['lines'] = $linesTotal;
-
-
-                //Note: Use reflection to get class info :  https://www.php.net/manual/en/class.reflectionclass.php
-                $namespace = str_replace($fullPath."/","",$file->getPath());
-                $namespace = str_replace("/","\\",$namespace);
-                $class_name = "App\Classes\Modules\\".$namespace."\\".$file->getBasename('.php');
-
-                $class = new \ReflectionClass($class_name);
-                $class_methods = $class->getMethods();
-
-                $this->file_check[$path->getFileName()]['methods_count'] = count($class_methods);
-
-            }
-
-        }
-
-        //var_dump($files, $dirs);
-        //var_dump($this->file_check);
-        //var_dump($modules_dir_count,$non_standard_folders);
-        //die('debug');
-    }
-
-    public function checkCodeStandards()
-    {
-        foreach ($this->file_check as $filename => $file) {
-            $this->results['code line'] = $this->assertLessThanOrEqual($this::CODE_LINE_COUNT, $file['lines'],'Please check '.$filename.', the code line is '.$file['lines']);
-            $this->results['code method'] = $this->assertLessThanOrEqual($this::METHOD_COUNT,$file['methods_count']);
-        }
-    }
-
-    public function checkFolderStandards()
-    {
-        $this->results['folder check'] = $this->assertCount(0,$this->non_standard_folders ,"Found non standard folders");
-    }
-
-    public function testQualityCheck(){
-        $this->checkCodeStandards();
-        $this->checkFolderStandards();
-
-        print_r($this->results);
-    }
-
-}