Tutorial UI Testing dengan Visual Studio 2010 · Langkah-langkah melakukan UI (User Interface)...

14
2010 Jeffrey Hermanto Halimsetiawan [TUTORIAL UI TESTING DENGAN VISUAL STUDIO 2010] Langkah-langkah melakukan UI (User Interface) Testing dengan menggunakan Microsoft Visual Studio 2010

Transcript of Tutorial UI Testing dengan Visual Studio 2010 · Langkah-langkah melakukan UI (User Interface)...

Page 1: Tutorial UI Testing dengan Visual Studio 2010 · Langkah-langkah melakukan UI (User Interface) Testing dengan menggunakan Microsoft Visual Studio 2010 . June 2, ... Jika ‘New Project’,

2010

Jeffrey Hermanto Halimsetiawan

[TUTORIAL UI TESTING DENGAN VISUAL STUDIO 2010] Langkah-langkah melakukan UI (User Interface) Testing dengan menggunakan Microsoft Visual Studio 2010

Page 2: Tutorial UI Testing dengan Visual Studio 2010 · Langkah-langkah melakukan UI (User Interface) Testing dengan menggunakan Microsoft Visual Studio 2010 . June 2, ... Jika ‘New Project’,

June 2, 2010 [TUTORIAL UI TESTING DENGAN VISUAL STUDIO 2010]

Jeffrey Hermanto Halimsetiawan | Tutorial UI Testing dengan Microsoft Visual Studio 2010 2

Tutorial UI Testing dengan Microsoft Visual Studio 2010

Record Action

1. Buka Microsoft Visual Studio 2010

2. Pilih ‘New Project’ ataupun ‘Open Project’

3. Jika ‘New Project’, maka silahkan buat sebuah program yang sudah siap dijalankan

4. Pada Menu Bar pilih ‘Test’ kemudian ‘New Test’

5. Kemudian akan dialog ‘Add New Test’, inputkan nama class untuk UI Test dan juga pilih

project Test nya dan klik button ‘OK’

Page 3: Tutorial UI Testing dengan Visual Studio 2010 · Langkah-langkah melakukan UI (User Interface) Testing dengan menggunakan Microsoft Visual Studio 2010 . June 2, ... Jika ‘New Project’,

June 2, 2010 [TUTORIAL UI TESTING DENGAN VISUAL STUDIO 2010]

Jeffrey Hermanto Halimsetiawan | Tutorial UI Testing dengan Microsoft Visual Studio 2010 3

6. Dialog ‘Generate Code For Coded UI Test’ akan muncul, pilih ‘Record actions, edit UI map or

add assertions’ apabila belum pernah melakukan record action sebelumnya.

7. Secara otomatis project dan file untuk testing akan di-generate, kemudian akan muncul

Coded UI Test Builder pada bagian kanan bawah untuk mempermudah melakukan UI

Testing

Page 4: Tutorial UI Testing dengan Visual Studio 2010 · Langkah-langkah melakukan UI (User Interface) Testing dengan menggunakan Microsoft Visual Studio 2010 . June 2, ... Jika ‘New Project’,

June 2, 2010 [TUTORIAL UI TESTING DENGAN VISUAL STUDIO 2010]

Jeffrey Hermanto Halimsetiawan | Tutorial UI Testing dengan Microsoft Visual Studio 2010 4

8. Sebelum dapat merekam action yang dilakukan, jalankan aplikasi yang ingin ditesting atau

dapat menggunakan Start Debugging pada Visual Studio

9. Setelah muncul form aplikasi yang ingin ditesting, klik tombol ‘Record’ pada UI Map – Coded

UI Test Builder dan seluruh action yang dilakukan akan mulai direkam.

10. Ketika dalam keadaan merekam, semua action yang dilakukan akan dcatat semua seperti

yang terlihat pada gambar di bawah ini.

Page 5: Tutorial UI Testing dengan Visual Studio 2010 · Langkah-langkah melakukan UI (User Interface) Testing dengan menggunakan Microsoft Visual Studio 2010 . June 2, ... Jika ‘New Project’,

June 2, 2010 [TUTORIAL UI TESTING DENGAN VISUAL STUDIO 2010]

Jeffrey Hermanto Halimsetiawan | Tutorial UI Testing dengan Microsoft Visual Studio 2010 5

11. Sesudah semua fitur dari aplikasi telah dijalankan dan aplikasi telah tertutup, tekan tombol

‘Pause’ pada UI Map – Coded UI Test Builder dan seluruh action yang dilakukan tidak akan

direkam lagi.

12. Tekan tombol ‘Generate Code’ pada UI Map – Coded UI Test Builder di bagian paling kanan

dan akan muncul dialog untuk memberi nama method dari hasil record yang telah dilakukan.

Jika sudah memberi nama method, tekan ‘Add and Generate’

13. Microsoft Visual Studio 2010 akan men-generate UIMap dan UITestPenjualan.cs dari hasil

record tadi.

Page 6: Tutorial UI Testing dengan Visual Studio 2010 · Langkah-langkah melakukan UI (User Interface) Testing dengan menggunakan Microsoft Visual Studio 2010 . June 2, ... Jika ‘New Project’,

June 2, 2010 [TUTORIAL UI TESTING DENGAN VISUAL STUDIO 2010]

Jeffrey Hermanto Halimsetiawan | Tutorial UI Testing dengan Microsoft Visual Studio 2010 6

14. Setelah dibuat skenario test secara otomatis melalui Coded UI Test Builder, pilih menu bar

Test – Run – All Tests in Solution untuk menjalankan test tersebut.

15. Jalankan kembali aplikasi yang ingin ditesting atau dapat menggunakan Start Debugging

pada Visual Studio

16. Secara otomatis form aplikasi yang dibuka akan diberi user action sesuai dengan yang

dilakukan pada saat menggunakan skenario testing secara live preview.

Page 7: Tutorial UI Testing dengan Visual Studio 2010 · Langkah-langkah melakukan UI (User Interface) Testing dengan menggunakan Microsoft Visual Studio 2010 . June 2, ... Jika ‘New Project’,

June 2, 2010 [TUTORIAL UI TESTING DENGAN VISUAL STUDIO 2010]

Jeffrey Hermanto Halimsetiawan | Tutorial UI Testing dengan Microsoft Visual Studio 2010 7

17. Saat semua test telah selesai dijalankan, hasil test akan muncul sehingga akan diketahui

apakah hasil test tersebut pass atau failed seperti gambar di bawah ini

Add Assertion

1. Buka Microsoft Visual Studio 2010

2. Pilih ‘New Project’ ataupun ‘Open Project’

3. Jika ‘New Project’, maka silahkan buat sebuah program yang sudah siap dijalankan

4. Pada Menu Bar pilih ‘Test’ kemudian ‘New Test’

Page 8: Tutorial UI Testing dengan Visual Studio 2010 · Langkah-langkah melakukan UI (User Interface) Testing dengan menggunakan Microsoft Visual Studio 2010 . June 2, ... Jika ‘New Project’,

June 2, 2010 [TUTORIAL UI TESTING DENGAN VISUAL STUDIO 2010]

Jeffrey Hermanto Halimsetiawan | Tutorial UI Testing dengan Microsoft Visual Studio 2010 8

5. Kemudian akan dialog ‘Add New Test’, inputkan nama class untuk UI Test sebagai contoh

‘UITestAdministrasiAnggota.cs’ dan juga pilih project Test nya dan klik button ‘OK’

6. Dialog ‘Generate Code For Coded UI Test’ akan muncul, pilih ‘Record actions, edit UI map or

add assertions’ apabila belum pernah melakukan record action sebelumnya.

Page 9: Tutorial UI Testing dengan Visual Studio 2010 · Langkah-langkah melakukan UI (User Interface) Testing dengan menggunakan Microsoft Visual Studio 2010 . June 2, ... Jika ‘New Project’,

June 2, 2010 [TUTORIAL UI TESTING DENGAN VISUAL STUDIO 2010]

Jeffrey Hermanto Halimsetiawan | Tutorial UI Testing dengan Microsoft Visual Studio 2010 9

7. Secara otomatis project dan file untuk testing akan di-generate, kemudian akan muncul

Coded UI Test Builder pada bagian kanan bawah untuk mempermudah melakukan UI

Testing

8. Sebelum dapat add assertion pada properti UI, jalankan aplikasi yang ingin ditesting atau

dapat menggunakan Start Debugging pada Visual Studio

9. Setelah muncul form aplikasi yang ingin ditesting, drag tombol crosshair pada UI control

atau tekan Windows Logo Key + I untuk memilih UI control pada posisi mouse pointer.

Sebagai contoh pada gambar, melakukan drag tombol crosshair di kanan menuju ke textbox

berisi ‘localhost’

Page 10: Tutorial UI Testing dengan Visual Studio 2010 · Langkah-langkah melakukan UI (User Interface) Testing dengan menggunakan Microsoft Visual Studio 2010 . June 2, ... Jika ‘New Project’,

June 2, 2010 [TUTORIAL UI TESTING DENGAN VISUAL STUDIO 2010]

Jeffrey Hermanto Halimsetiawan | Tutorial UI Testing dengan Microsoft Visual Studio 2010 10

10. Kemudian akan muncul dialog Coded UI Test Builder yang akan menampilkan properti dari

UI control tersebut yang dapat ditest.

Page 11: Tutorial UI Testing dengan Visual Studio 2010 · Langkah-langkah melakukan UI (User Interface) Testing dengan menggunakan Microsoft Visual Studio 2010 . June 2, ... Jika ‘New Project’,

June 2, 2010 [TUTORIAL UI TESTING DENGAN VISUAL STUDIO 2010]

Jeffrey Hermanto Halimsetiawan | Tutorial UI Testing dengan Microsoft Visual Studio 2010 11

11. Pilih salah satu properti yang ingin ditest, kemudian klik tombol ‘Add Assertion’ atau dengan

menekan shortcut key Alt + A

12. Muncul dialog yang meminta untuk memilih ‘Comparator:’ yang digunakan dan ‘Comparison

Value:’ yang ingin dipakai. Jika sudah, tekan button ‘OK’

13. Jika telah selesai menambahkan assertion untuk semua properti, maka tutup aplikasi yang

tadi dijalankan apabila tadi menggunakan mode Debugging Visual Studio 2010 dan pilih

tombol ‘Generate Code’ atau shortcut key Alt + G

Page 12: Tutorial UI Testing dengan Visual Studio 2010 · Langkah-langkah melakukan UI (User Interface) Testing dengan menggunakan Microsoft Visual Studio 2010 . June 2, ... Jika ‘New Project’,

June 2, 2010 [TUTORIAL UI TESTING DENGAN VISUAL STUDIO 2010]

Jeffrey Hermanto Halimsetiawan | Tutorial UI Testing dengan Microsoft Visual Studio 2010 12

14. Masukkan nama method yang diinginkan untuk menjalankan assertion yang telah dibuat.

15. Microsoft Visual Studio 2010 akan menambahkan method ‘AssertMethodDatabaseSelector’

pada UIMap dan men-generate UITestAdministrasiAnggota.cs dari hasil assertion tadi.

Page 13: Tutorial UI Testing dengan Visual Studio 2010 · Langkah-langkah melakukan UI (User Interface) Testing dengan menggunakan Microsoft Visual Studio 2010 . June 2, ... Jika ‘New Project’,

June 2, 2010 [TUTORIAL UI TESTING DENGAN VISUAL STUDIO 2010]

Jeffrey Hermanto Halimsetiawan | Tutorial UI Testing dengan Microsoft Visual Studio 2010 13

16. Setelah dibuat skenario test secara otomatis melalui Coded UI Test Builder, pilih menu bar

Test – Run – All Tests in Solution untuk menjalankan test tersebut.

17. Jalankan kembali aplikasi yang ingin ditesting atau dapat menggunakan Start Debugging

pada Visual Studio

Page 14: Tutorial UI Testing dengan Visual Studio 2010 · Langkah-langkah melakukan UI (User Interface) Testing dengan menggunakan Microsoft Visual Studio 2010 . June 2, ... Jika ‘New Project’,

June 2, 2010 [TUTORIAL UI TESTING DENGAN VISUAL STUDIO 2010]

Jeffrey Hermanto Halimsetiawan | Tutorial UI Testing dengan Microsoft Visual Studio 2010 14

18. Saat semua test telah selesai dijalankan, hasil test akan muncul sehingga akan diketahui

apakah hasil test tersebut pass atau failed seperti gambar di bawah ini. Pada hasil test

terdapat 2 test dimana test yang pertama adalah hasil test dari record action dan test kedua

adalah hasil test assertion.