Tutorial Handle Verifikasi OTP SMS pada Login Flow Tiket.com (Part 1 | Prerequisite)

Halo Manteman,

Disini saya akan share bagaimana handle OTP SMS pada login flow. AUT yang kita gunakan kali ini adalah tiket.com, dengan user story sebagai berikut:

Feature: Login with OTP

  As an Registered User,
  I want to __login with my credentials__
  In order to **access logged in user feature**

  Scenario: Verify OTP Login functionality
    Given User already on Login Page
    When User enter registered phone number
    And User input OTP
    Then User is logged in 

Jadi, disini kita memakai BDD ya manteman.

Oke, sekarang marilah kita mulai membuat automationnya :)

Langkah 1. Pahami Flow dan Tentukan Requirementnya

Dari scenario di atas, kita bisa menyimpulkan bahwa flow test nya adalah sbb:

1. User telah memiliki akun yang terdaftar di tiket.com, berarti kita membutuhkan nomor HP valid dan Account tiket.com yang valid
2. User login menggunakan nomor HP, membutuhkan nomor HP valid
3. User mendapatkan OTP melalui SMS yang dikirim ke nomor HP user, membutuhkan body SMS OTP
4. User memasukkan OTP ke login page, membutuhkan filtered OTP dari body SMS OTP
5. User berhasil login

Langkah 2. Siapkan pre-requisite

Dari flow analysis, kita harus menyiapkan 2 hal, yakni nomo HP valid dan account tiket.com yang valid. Oke mari kita siapkan

Disinilah proses paling tricky menurut saya. Karena kita harus mengintegrasikan framework kita dengan SMS. Maka dari itu kita membutuhkan Third-Party app untuk handle SMS API-nya. Nah, dari beberapa research saya menemukan Twilio adalah solusi tepat. Berikut alasannya:

1. Easy to integrate dengan selenium, untuk integrate ke selenium, kita cukup import dependency Twilio (akan kita bahas saat mulai menulis kode nanti)
2. Terdapat feature SMS API, jadi kita bisa communicate ke system melalui API, bukan dengan UI. Sehingga akan mempersingkat waktu test.
3. System keamanan yang mumpuni, adaya SID dan API Auth token, dapat menghindari spam. Selain itu, apabila Token kita terupload di github secara “telanjang”, maka akan ada notif melalui email bahwa token kita terekspose dan token otomatis akan direvoke. Namun tenang manteman, akun manteman tidak ter-revoke.
4. Terdapat free credit trial $ 15, jadi kita bisa beli nomor dan menggunakan fitur messagenya “gratis”. Jadi untuk scale experiment sangat membantu.

Namun, Twilio memiliki beberapa limitasi yang harus diperhatikan. Salah satunya pada point 3 di atas. Jadi manteman jangan pernah upload SID dan API auth token secara telanjang ke repo remote. Kita bisa menggunakan environment variable dalam kode kita untuk mengatasi ini. Manteman bisa melihat cara set Environment Variable sesuai OS yang manteman gunakan pada link berikut: here.

Selain itu, limitasi kedua adalah, dalam case penggunaan SMS API, sayangnya Twilio belum menyediakan nomor Indonesia (+62). Sejauh yang saya cek, nomor HP yang compatible untuk SMS API hanyalah nomor US (+1). Maka dari itu, pastikan testing scope manteman sesuai limitasi ini

Tapi sebelum itu, manteman perlu register Twilio dan membeli nomor dahulu. Jadi, manteman bisa register free account dan akan mendapat free credit sebesar $ 15. Credit ini bisa manteman gunakan untuk membeli nomor dan untuk “pulsa” messaging service kita.

Berikut langkah registerasinya:

1. Buka https://www.twilio.com/try-twilio
2. Isi data sesuai spesifikasi

Register Page Twilio

3. Selanjutnya manteman akan menerima email konfirmasi

4. Setelah itu, manteman diminta memasukkan no HP untuk two-factor auth, pastikan no HP valid ya manteman, karena terkait login ke akun twilio manteman nanti

5. Nanti ada konfirmasi singkat mengenai tujuan penggunaan Twilio, silahkan manteman sesuaikan

6. BTW pada tahap ini, kita dapat $15.50 Trial Balance ya manteman. Ini bisa kita gunakan untuk member nomor dan operation experiment kita. Langkah selanjutnya, adalah membeli nomor. Ketika manteman sudah di console Twilio, pilih “# Phone Numbers” >> Manage >> Buy a number. Silahkan manteman pilih nomor yang manteman kehendaki. Pastikan terdapat Capabilities SMS pada nomor HP yang manteman pilih. Saran saya, manteman memilih nomor dari US (+1), karena murah sehingga tidak memotong terlalu banyak saldo trial manteman. Klik “Buy” pada nomor yang dikehendaki. Centang “I agree …” dan Klik Buy [nomor pilihan manteman]

7. Setelah itu, silahkan manteman kembali ke console twilio (https://console.twilio.com/) lalu manteman bisa scroll sampai menemukan Account Info. Silahkan manteaman catat: Account SID, Auth Token dan My Twilio phone number

Account SID dan Auth Token digunakan untuk authorization API pada automation code kita nanti. Sedangkan My Twilio phone number digunakan untuk registrasi pada AUT (Tiket.com) kita nanti.

Note: Auth Token bisa di show ya manteman.

8. Silahkan manteman register di AUT (https://www.tiket.com/login) dengan nomor HP Twilio kita. BTW, step ini tidak termasuk scope tutorial kita ya manteman. Karena disini kita khusus untuk case login flow, happy flow lagi, hehehehe

9. Manteman bisa verifikasi bahwa environment SMS API sudah all set dengan registrasi ini. Ketika manteman register dengan No HP twilio tadi, manteman bisa cek OTP registrasinya di Twilio console inbox manteman. Caranya saat di console (https://console.twilio.com/), pilih menu “Monitor” >> Logs >> Messaging.

Tampilan Inbox SMS manteman

Manteman bisa click di kolom date, untuk detail pesan dan Message Body (yang berisi OTP Register/Login kita).

Disini, manteman perlu catat From numbernya sebagai variable sms message body fetcher nya ya manteman. Nah, pada step registrasi, manteman bisa gunakan OTP sesuai pada message body tersebut.

From number pada case saya sesuai gambar di atas adalah “(623) 888–8859”, ini adalah nomor SMS gateway dari tiket.com. Karena kita membutuhkan kode negaranya juga, manteman bisa save nomornya menjadi “+16238888859” tanpa tanda petik.

Okay manteman, semua prerequisite sudah kita penuhi. Di part selanjutnya kita akan mulai coding automationnya. Stay tuned ya manteman untuk part selanjutnya. Terima kasih manteman