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/tests/Browser/DryRun/CreateBookingTest.php b/tests/Browser/DryRun/CreateBookingTest.php
index 75299c22..989dd565 100644
--- a/tests/Browser/DryRun/CreateBookingTest.php
+++ b/tests/Browser/DryRun/CreateBookingTest.php
@@ -15,8 +15,8 @@ class CreateBookingTest extends DuskTestCase
         $this->browse(function (Browser $browser) {
             $browser->visit('http://exchange-2.0.test')
                     ->pause(5000)
-                    ->typeSlowly('email', 'junkit.mah@bioloop.com.my')
-                    ->typeSlowly('password', '123456abcabc')
+                    ->type('email', 'giftolavie@hotmail.com')
+                    ->type('password', 'pass123')
                     ->click('#sign-in')
                     ->pause(5000)
                     ->assertPathIs('/dashboard');
@@ -60,6 +60,14 @@ class CreateBookingTest extends DuskTestCase
                     ->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