IMPLEMENTASI BROWSER AUTOMATION TEST FRAMEWORK DENGAN PENDEKATAN BLACK BOX PADA
APLIKASI BERBASIS WEB
TUGAS AKHIR
Diajukan Sebagai Salah Satu Syarat Untuk Memperoleh Gelar Sarjana Teknik
Filbert Wijaya 00000019525
PROGRAM STUDI TEKNIK KOMPUTER FAKULTAS TEKNIK DAN INFORMATIKA UNIVERSITAS MULTIMEDIA NUSANTARA
TANGERANG 2021
ii
PERNYATAAN TIDAK MELAKUKAN PLAGIAT
Dengan ini saya,
Nama : Filbert Wijaya
NIM : 00000019525
Fakultas : Teknologi Informasi dan Komunikasi Program Studi: Teknik Komputer
menyatakan bahwa yang berjudul “IMPLEMENTASI BROWSER
AUTOMATION TEST FRAMEWORK DENGAN PENDEKATAN BLACK
BOX PADA APLIKASI BERBASIS WEB” ini adalah karya ilmiah saya sendiri, bukan plagiat dari karya ilmiah yang ditulis oleh orang lain atau lembaga lain, dan semua karya ilmiah orang lain atau lembaga lain yang dirujuk dalam tugas akhir ini telah disebutkan sumber kutipannya serta dicantumkan di Daftar Pustaka. Jika di kemudian hari terbukti ditemukan kecurangan / penyimpangan dalam penulisan tugas akhir, saya bersedia menerima konsekuensi dinyatakan TIDAK LULUS untuk mata kuliah yang telah saya tempuh.
Tangerang, 17 Februari 2021
Filbert Wijaya
iii
HALAMAN PERSETUJUAN
Tugas Akhir dengan Judul
IMPLEMENTASI BROWSER AUTOMATION TEST FRAMEWORK DENGAN PENDEKATAN BLACK BOX PADA
APLIKASI BERBASIS WEB
Oleh Filbert Wijaya
00000010525
telah disetujui untuk diajukan pada
Sidang Tugas Akhir Universitas Multimedia Nusantara
Tangerang, Menyetujui,
Dosen Pembimbing Ketua Program Studi
Dareen Kusuma Halim, S.Kom., M.Eng.Sc. Samuel Hutagalung M.T.I
iv
HALAMAN PENGESAHAN TUGAS AKHIR
IMPLEMENTASI BROWSER AUTOMATION TEST FRAMEWORK DENGAN PENDEKATAN BLACK BOX PADA APLIKASI BERBASIS
WEB Oleh
Nama : Filbert Wijaya
NIM : 00000019525
Fakultas : Teknik dan Informatika Program Studi : Teknik Komputer
Telah diujikan pada hari Jumat, tanggal 18 Juni 2018 dan dinyatakan lulus dengan susunan Tim Penguji sebagai berikut,
Ketua Sidang Dosen Pembimbing Dosen Penguji
Nabila Husna Shabrina, S.T., M.T.
Dareen Kusuma Halim, S.Kom., M.Eng.Sc.
Disahkan Oleh, Ketua Program Studi
Aminuddin Rizal, S.T.,M.Sc
Samuel Hutagalung, M.T.I
ii
KATA PENGANTAR
Puji syukur kepada Tuhan Yang Maha Esa atas berkat dan karunia-Nya, penulis mampu menyelesaikan tugas akhir yang berjudul “IMPLEMENTASI BROWSER AUTOMATION TEST FRAMEWORK DENGAN PENDEKATAN BLACK BOX PADA APLIKASI BERBASIS WEB”
Penulis juga mengucapkan terima kasih kepada:
1. Dr. Ninok Leksono, Rektor Universitas Multimedia Nusantara,
2. Samuel Hutagalung M.T.I, Ketua Program Studi Teknik Komputer Universitas Multimedia Nusantara,
3. Dareen Kusuma Halim, S.Kom., M.Eng.Sc.,selaku dosen yang membimbing, mendukung dan memberikan saran kepada penulis dalam menyusun dan menyelesaikan tugas akhir ini,
4. Leonardo Kurnia, Jordi Bernandi serta kerabat Commsult Indonesia yang telah membantu penulis dalam mengumpulkan data sampel, dan mendukung penulis dalam pembuatan tugas akhir ini,
5. Keluarga dan teman-teman yang tidak bisa disebutkan satu per satu.
Semoga tugas akhir ini dapat bermanfaat, baik sebagai sumber informasi maupun sumber inspirasi, bagi para pembaca. Kiranya jika ada kekurangan dalam penulisan maupun pemilihan kata, penulis mengharapkan kritik dan saran yang membangun agar penulis mampu lebih baik kedepannya.
Tangerang, Mei 2021
Filbert Wijaya
iii
IMPLEMENTASI BROWSER AUTOMATION TEST
FRAMEWORK DENGAN PENDEKATAN BLACK BOX PADA APLIKASI BERBASIS WEB
ABSTRAK
Teknologi yang menjadi bagian dari kehidupan sehari – hari di masyarakat, salah satunya adalah perusahaan teknologi yang menyediakan layanan berupa aplikasi, membutuhkan setidaknya standar yang baik dan sesuai dengan kebutuhan customer. Sehingga, adanya pengujian sangat dibutuhkan untuk mengukur kelayakan sebuah aplikasi. Automated testing dengan menggunakan tools menjadi bagian penting dari siklus pengembangan sebuah aplikasi, terutama CICD. Siklus CICD meruapakan tahapan pengembangan yang berjalan secara terus menerus dan otomatis. Proses implementasi pada tahap pengujian sebuah aplikasi harus sejalan dengan prinsip CICD yang memerlukan pengujian secara otomatis, namun penerapan pengujian pada siklus CICD perusahaan masih dilakukan secara manual, sehingga pengujian secara manual dalam siklus ini tidak relevan untuk digunakan.
Aplikasi Ontego SAP Mobility merupakan objek penelitian yang akan diuji fiturnya secara otomatis. WebdriverIO merupakan tools yang akan menjalankan pengujian secara otomatis pada aplikasi yang bertujuan untuk dibandingkan dengan pengujian manual yang masih digunakan oleh perusahaan. Adanya pembuatan Skenario Testing ditujukan untuk menguji fitur secara fungsional khususnya pada antarmuka aplikasi. Implementasi Pengujian fungsional dengan metode Black Box secara otomatis berguna untuk menguji fungsi fitur pada aplikasi Ontego SAP Mobility secara cepat, efektif , bersifat reusable, maintanable, dan efisien, serta sejalan dengan prinsip kerja CICD.
Kata Kunci: Black Box, Automated Testing, Ontego SAP Mobility, WebdriverIO, CICD, Functional Testing
iv
IMPLEMENTASI BROWSER AUTOMATION TEST
FRAMEWORK DENGAN PENDEKATAN BLACK BOX PADA APLIKASI BERBASIS WEB
ABSTRACT
Technology that is part of everyday life in society, one of which is a technology company that provides services in the form of applications, requires at least good standards and according to customer needs. Thus, testing is needed to measure the feasibility of an application. Automated testing using tools is an important part of the application development cycle, especially CICD. The CICD cycle is a development stage that runs continuously and automatically. The implementation process at the testing stage of an application must be in line with the CICD principle which requires automated testing, but the implementation of testing in the company's CICD cycle is still done manually, so manual testing in this cycle is irrelevant to use. The Ontego SAP Mobility application is an object of research that will be tested for its features automatically. WebdriverIO is a tool that will run tests automatically on applications that aim to be compared with manual tests that are still used by companies. The existence of Scenario Testing is intended to test features functionally, especially in the application interface. Implementation Functional testing with the Black Box method is automatically useful for testing feature functions in the Ontego SAP Mobility application quickly, effectively, reusable, maintanable, and efficient, and in line with CICD working principles.
Keywords: Black Box, Automated Testing, Ontego SAP Mobility, WebdriverIO, CICD, Functional Testing
v
DAFTAR ISI
HALAMAN JUDUL ... i
PERNYATAAN TIDAK MELAKUKAN PLAGIAT ... ii
HALAMAN PERSETUJUAN ... iii
HALAMAN PENGESAHAN TUGAS AKHIR ... iv
KATA PENGANTAR ... ii
ABSTRAK ... iii
ABSTRACT ... iv
DAFTAR ISI ... v
DAFTAR GAMBAR ... viii
DAFTAR TABEL ... xi
BAB I ... 1
PENDAHULUAN ... 1
1.1 Latar Belakang ... 1
1.2 Rumusan Masalah ... 4
1.3 Batasan Masalah ... 4
1.4 Tujuan Penelitian ... 5
1.5 Manfaat Penelitian ... 6
BAB II ... 7
TINJAUAN PUSTAKA ... 7
2.1 Penelitian Terkait ... 7
2.2 CI/CD ... 10
2.3 Software Testing ... 11
2.4 Black Box Testing ... 12
2.5 Functional Testing ... 14
vi
2.6 End-to-end Testing ... 15
2.7 Manual Testing ... 15
2.8 Automated Testing ... 15
2.9 WebdriverIO ... 17
2.10 Node.js ... 17
2.11 NPM ... 18
2.12 Yarn ... 18
2.13 Mocha ... 18
2.14 Chrome Driver ... 18
2.15 Docker ... 18
2.16 React ... 19
BAB III ... 20
RANCANGAN SISTEM ... 20
3.1 Gambaran Umum Sistem ... 20
3.2 Spesifikasi Sistem ... 21
3.3 Spesifikasi Aplikasi ... 22
3.4 Metodologi Penelitian ... 22
3.5 Tabel Skenario Testing ... 27
3.6 Skema Pengujian ... 51
BAB IV ... 54
IMPLEMENTASI DAN HASIL PENGUJIAN SISTEM ... 54
4.1 Setup Aplikasi ... 54
4.2 Pra Implementasi Automated Testing ... 55
4.3 Proses Implementasi Modul - Modul Automated Testing ... 59
4.4 Hasil Testing Manual Aplikasi Ontego SAP Mobility ... 85
4.5 Hasil Testing Otomatis Aplikasi Ontego SAP Mobility ... 88
vii
4.6 Perbandingan Pengujian Manual dan Otomatis Aplikasi Ontego SAP
Mobility ... 114
BAB V ... 116
SIMPULAN ... 116
DAFTAR PUSTAKA ... 118
LAMPIRAN ... 121
viii
DAFTAR GAMBAR
Gambar 2.1 Diagram Black Box Testing ... 13
Gambar 3.1 Diagram Umum Sistem ... 20
Gambar 3.2 Diagram Alur... 23
Gambar 3.3 npm install @wdio/cli ... 25
Gambar 3.4 npx wdio config ... 25
Gambar 3.5 WDIO Configuration Helper ... 26
Gambar 3.6 Diagram Umum Skenario testing ... 27
Gambar 3.7 Halaman Login ... 28
Gambar 3.8 Halaman Login Gagal ... 28
Gambar 3.9 Halaman Utama ... 30
Gambar 3.10 Halaman Special Functions ... 30
Gambar 3.11 Halaman create new function ... 30
Gambar 3.12 List Special Functions ... 31
Gambar 3.13 add to collection ... 31
Gambar 3.14 edit Special Function ... 31
Gambar 3.15 delete Special Functios ... 31
Gambar 3.16 Halaman Utama Manage ... 37
Gambar 3.17 Manage ... 38
Gambar 3.18 create Application Management... 38
Gambar 3.19 edit Application Management ... 38
Gambar 3.20 Halaman list Application Management ... 38
Gambar 3.21 Dialog box delete Application Management ... 39
Gambar 3.22 Halaman utama Signature Key ... 43
Gambar 3.23 create Signature Key ... 44
Gambar 3.24 Upload file ... 44
Gambar 3.25 Halaman list Signature Key ... 44
Gambar 3.26 Dialog box delete Signature Key ... 44
Gambar 3.27 Halaman Application Flow ... 47
ix
Gambar 3.28 create phase App. Flow ... 47
Gambar 3.29 edit phase Application Flow ... 47
Gambar 3.30 Kotak dialog delete phase Application Flow ... 48
Gambar 3.31 Fungsi drag and drop Application Flow ... 48
Gambar 4.1 Menjalankan docker-compose up... 54
Gambar 4.2 Menjalankan yarn start:dev ... 55
Gambar 4.3 Diagram umum pengujian fitur ... 57
Gambar 4.4 Diagram umum pengujian end-to-end... 59
Gambar 4.5 Diagram Open Browser ... 60
Gambar 4.6 GeneralFunction.js ... 60
Gambar 4.7 Diagram Alur Login ... 61
Gambar 4.8 LoginTest.js ... 62
Gambar 4.9 Diagram Alur Special Functions ... 63
Gambar 4.10 specialFunctionsTest.js ... 64
Gambar 4.11 createCheckboxSpecialFunction.js ... 65
Gambar 4.12 editFailSpecialFunctionsTest.js ... 67
Gambar 4.13 editCheckboxSpecialFunctionsTest. ... 68
Gambar 4.14 specialFunctionsTest.js ... 69
Gambar 4.15 Diagram Alur Application Management ... 70
Gambar 4.16 createFailApplicationManagement.js ... 71
Gambar 4.17 editFailApplicationManagementTest.js ... 72
Gambar 4.18 applicationManagementTest.js ... 73
Gambar 4.19 equivalencePartitioningApplicationManagement.js ... 74
Gambar 4.20 boundaryValueAnalysisApplicationManagement.js ... 75
Gambar 4.21 Diagram Alur Signature Key... 76
Gambar 4.22 createFailSignatureKey.js ... 77
Gambar 4.23 signatureKeyTest.js ... 78
Gambar 4.24 Diagram Alur Application Flow ... 79
Gambar 4.25 ApplicationFlowTest.js ... 80
Gambar 4.26 Diagram Alur end-to-end ... 81
Gambar 4.27 example.e2e.js ... 81
x
Gambar 4.28 example.e2e.js ... 82
Gambar 4.29 wdio.conf.js ... 84
Gambar 4.30 Pengujian specs ... 84
Gambar 4.31 Pengujian suites ... 85
Gambar 4.32 npx wdio wdio.conf.js ... 88
Gambar 4.33 npx wdio wdio.conf.js --suite login ... 88
Gambar 4.34 npx wdio wdio.conf.js >>allFeaturesLog.txt ... 89
Gambar 4.35 npx wdio wdio.conf.js --suite loginTest >> loginTestLog.js ... 89
Gambar 4.36 Hasil Testing Login ... 90
Gambar 4.37 Hasil Testing Create Failure Special Function ... 93
Gambar 4.38 Hasil Testing Create Checkbox Special Function ... 94
Gambar 4.39 Hasil Testing Edit Failure Special Function ... 96
Gambar 4.40 Hasil Testing Edit Checkbox Special Function... 97
Gambar 4.41 Hasil Testing CRUD Special Function ... 99
Gambar 4.42 Hasil Testing Fail Create Application Management ... 101
Gambar 4.43 Hasil Testing Fail Edit Application Management ... 101
Gambar 4.44 Hasil Testing CRUD Application Management... 102
Gambar 4.45 Hasil Testing Equivalence Partitioning Application Management 103 Gambar 4.46 Hasil Testing Boundary Value Analysis Application Management ... 104
Gambar 4.47 Hasil Testing Create Fail Signature Key ... 108
Gambar 4.48 Hasil Testing Create,Read,Delete Signature Key ... 109
Gambar 4.49 Hasil Testing CRUD dan drag and drop Application Flow ... 110
Gambar 4.50 Hasil Testing end to end Testing ... 111
xi
DAFTAR TABEL
Tabel 2.1 Tingkatan Pengujian ... 12
Tabel 3.1 Pengujian open browser ... 27
Tabel 3.2 Uji Fungsionalitas Halaman Login ... 28
Tabel 3.3 Skenario Testing Login ... 29
Tabel 3.4 Uji Fungsionalitas Special Function ... 32
Tabel 3.5 Tabel Skenario Testing Kegagalan Create ... 32
Tabel 3.6 Skenario Testing Create pada fungsionalitas checkbox ... 33
Tabel 3.7 Skenario Testing kegagalan edit ... 34
Tabel 3.8 Skenario Testing edit checkbox ... 35
Tabel 3.9 Skenario Testing create dan keseluruhan fitur ... 36
Tabel 3.10 uji fungsionalitas Application Management ... 39
Tabel 3.11 Pengujian Kegagalan create ... 39
Tabel 3.12 Pengujian Kegagalan edit... 40
Tabel 3.13 Pengujian Keberhasilan fungsional create dan kesuluruhan fitur ... 40
Tabel 3.14 pengujian equivalence Partitioning Application Management ... 41
Tabel 3.15 pengujian boundary value analysis Application Management ... 42
Tabel 3.16 uji fungsionalitas Signature Key ... 44
Tabel 3.17 Pengujian kegagalan create ... 45
Tabel 3.18 Pengujian create dan keseluruhan fitur ... 46
Tabel 3.19 Uji Fungsionalitas Application Flow ... 48
Tabel 3.20 uji fungsionalitas CRUD dan drag and drop Application Flow ... 49
Tabel 3.21 Pengujian end to end ... 50
Tabel 3.22 Data Penguji ... 52
Tabel 4.1 Daftar Command yang Digunakan ... 55
Tabel 4.2 GeneralFunction.js ... 60
xii
Tabel 4.3 loginTest.js ... 62
Tabel 4.4createFailSpecialFunctionsTest.js ... 64
Tabel 4.5 createCheckboxSpecialFunctionsTest.js ... 65
Tabel 4.6 editFailSpecialFunctionsTest.js ... 67
Tabel 4.7 editCheckboxSpecialFunctionsTest.js ... 68
Tabel 4.8 specialFunctionsTest.js ... 69
Tabel 4.9 createFailApplicationManagement.js ... 71
Tabel 4.10 editFailApplicationManagement.js ... 72
Tabel 4.11applicationManagement.js ... 73
Tabel 4.12equivalencePartitioningApplicationManagement.js ... 74
Tabel 4.13boundaryValueAnalysisApplicationManagement.js... 75
Tabel 4.14 createFailSignatureKey.js ... 77
Tabel 4.15 signatureKeyTest.js ... 78
Tabel 4.16 applicationFlowTest.js ... 80
Tabel 4.17 example.e2e.js ... 82
Tabel 4.18 Data Uji Manual ... 85
Tabel 4.19 Hasil Testing Open Browser ... 89
Tabel 4.20 Hasil Testing Fungsionalitas Login ... 90
Tabel 4.21 Hasil Testing Login ... 91
Tabel 4.22 Hasil Testing Fungsionalitas Special Function ... 92
Tabel 4.23 Hasil Testing Kegagalan Create ... 93
Tabel 4.24 Hasil Testing Create Checkbox Special Functions ... 94
Tabel 4.25 Hasil Testing Kegagalan edit Special Functions ... 96
Tabel 4.26 Hasil Testing edit checkbox Special Functions ... 97
Tabel 4.27 Hasil Testing CRUD Special Functions ... 99
Tabel 4.28 Hasil Testing Fungsionalitas Application Management ... 100
Tabel 4.29 Hasil Testing Kegagalan create Application Management ... 101
Tabel 4.30 Hasil Testing Kegagalan edit Application Management ... 101
Tabel 4.31 Hasil Testing CRUD Application Management ... 102
Tabel 4.32 Hasil Testing Equivalence Partitioning Application Management ... 103
Tabel 4.33 Hasil Testing Boundary Value Analysis Application Management . 104 Tabel 4.34 Hasil Testing Fungsionalitas Signature Key ... 107
xiii
Tabel 4.35 Hasil Testing Kegagalan Create Signature Key ... 108
Tabel 4.36 Hasil Testing Create,Read,Delete Signature Key ... 109
Tabel 4.37 Hasil Testing Fungsionalitas Application Flow ... 109
Tabel 4.38 Hasil Testing CRUD dan drag and drop Application Flow ... 110
Tabel 4.39 Hasil Testing end-to-end ... 112
Tabel 4.40 Hasil Perbandingan Pengujian ... 114
