Ngobrolin Otomasi bersama Jecelyn - Ngobrolin WEB ep36
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. Topik, tautan dan pertanyaan menarik bisa dilayangkan ke https://bit.ly/ngobrolinweb Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
0:18Halo, halo, selamat malam.
0:24Selamat Hari Selasa.
0:26Selamat Hari Selasa, dan hari selasa adalah waktunya...
0:29Ngobrolin web.
0:32Malam hari ini bukan hanya kita bertiga, bukan hanya ada saya, Riza, ada Eka, dan ada Irfan.
0:38Jadi trio web, plus...
0:41Plus satu.
0:43Featuringnya ini.
0:45Ini spesial karena ini adalah edisi pertama kita undang orang di luar Indonesia.
0:53Dan teman-teman mungkin sudah tahu karena judulnya sudah ada namanya ya, dan mungkin sudah sers-sers juga, gitu kan.
1:02Udah kita mention juga di beberapa episode sebelumnya, jadi kita langsung panggilkan saja, dan berikan sambutan yang meriah untuk tamu kita dari Malaysia, Kak Ros, oh bukan ya.
1:14Halo Jocelyn, selamat datang Jocelyn, selamat datang. Jiran, di garasi Jiran.
1:24Jocelyn, bagaimana dengan kamu?
1:29Saya baik, sekarang ini malam saya, mungkin ini waktu malam kamu.
1:35Di mana kamu sekarang?
1:39Saya di...
1:41Biar saya pikirkan, saya di Munich sekarang.
1:43Kenapa kamu harus pikirkan?
1:47Ya karena saya baru balik dari Amsterdam, dan sekarang saya akan pergi ke Rumania.
1:53Jadi saya harus pikirkan.
1:56Wow, sangat sibuk.
1:59Ya, bulan ini adalah bulan conferensi, jadi ada banyak conferensi.
2:03Adakah karena I/O extended atau I/O event?
2:09I/O event akan berlaku pada akhir bulan ini. Tapi secara umum, karena ini adalah waktu musim di Eropa.
2:17Jadi saya bahagia untuk pergi ke conferensi, untuk bertemu dengan orang lain.
2:22Jadi ini adalah conferensi JavaScript, jadi saya baru balik dari ASN.
2:28Ada juga satu World Camp Europe yang akan berlaku pada hujung minggu ini di Athens. Saya percaya ada beberapa kolega kamu yang terlibat dalam World Press Project.
2:39Seperti Felix, atau siapa lagi... Thomas...
2:45Saya tidak tahu, Thomas Muller mungkin?
2:47- Thomas, bukan? - Tidak, tidak.
Lihat transkrip lengkap
2:51Beri? Ya, ada beberapa dari mereka yang akan mencoba World Camp.
2:54Mungkin Rick Fiskomi.
2:57Ya, mungkin. Saya pikir dia pergi ke World Press Camp di World Camp di Thailand, Bangkok.
3:05- Di World Camp Asia? - Ya, dia ada di sana.
3:07- Maksud saya, kamu ada di sana juga? - Ya, saya ada di sana.
3:11- Saya juga... - Tentu saja, dia ada di sana.
3:13- Saya perempuan. - Perempuan? Wow, saya tidak tahu.
3:20Okay, Jessalyn, mungkin untuk meletakkan konteks sebelum kita berbicara tentang automasi dan web,
3:28- kita berbicara tentang... Anda perlu memperkenalkan diri sendiri. - Tidak.
3:34- Anda adalah SDDE, bukan? Google Developer Expert di... - Ya.
3:38- Angular? Di web teknologi? - Ya, di Angular.
3:42- Dan sekarang, Anda bekerja di Google sebagai... - Tidak, saya bukan SDDE.
3:48- Saya adalah SDDevRel di Chrome DevTools, bukan? - Ya.
3:55- Ya, juga secara general, titel pekerjaan saya adalah untuk debugging dan testing. - Debuging dan testing, oke.
4:02Chrome DevTools adalah di bawah debugging, dan WebTravel, Pydye, dan Puppeteer adalah di bawah testing.
4:11- Jadi, seperti ini. - Di kedua dunia, jadi Anda menyebrang jalan.
4:18Ya, debugging dan testing. Ya, tapi sebenarnya itu agak serupa, ya.
4:22Ya, ya, ya. Okay, jadi sebelum kita berbicara tentang itu, kita perlu tahu bagaimana pengalaman Anda menjadi...
4:34...pengalaman software engineer, jadi GDE, dan jadi Googlegler. - Ah, oke.
4:41- Cerita sedikit tentang Anda. - Ceritanya.
4:45- Beberapa tahun lalu, ketika saya memutuskan apa yang perlu saya lakukan setelah sekolah tinggi, saya seperti...
4:52...sebab saya datang dari keluarga yang cukup kurang, tidak kaya. Jadi, ayah saya tidak bisa...
4:59...mengerti saya untuk belajar lebih lanjut, jadi saya mulai belajar setelah form 5.
5:05Saya tidak tahu, di Indonesia, apakah Anda menyebutnya form 5 seperti sekolah tinggi?
5:09Kemudian saya berpikir, jadi apa sekarang? Apakah saya keluar dan belajar atau belajar?
5:14Dan hasil belajar saya cukup bagus pada saat itu. Dan kemudian ada sekolah ini.
5:19Mereka memberikan doa, bukan hanya doa, mereka memberikan doa dari pemerintah...
5:29...tapi mereka membuatnya sangat mudah untuk dilanjutkan. Dan mereka juga seperti...
5:32...dalam aplikasi, mereka akan menambahkan uang hidup dalam doa juga.
5:38Jadi, jika saya pergi ke sekolah itu, saya akan mendapatkan uang hidup...
5:43...dengan uang hidup untuk bebas, sehingga saya mulai bekerja dan menerima balas.
5:49Jadi, sebab saya bergabung dengan IT adalah kerana saya mengambil uang hidup.
5:56Jadi, uang hidup adalah tentang bisnis dan IT. Jadi, setengah waktu saya belajar tentang...
6:00...accounting, dan setengah waktu saya belajar IT, seperti programming.
6:06Saya berada di BB6 pada saat itu. Sangat lama, sekitar 13 tahun.
6:13Kemudian saya menyadari bahwa saya suka programming. Jadi, ketika saya mengulang...
6:18...semua klien saya melakukan kerja bisnis. Tapi saya merasa saya ingin melakukan programming.
6:25Kemudian saya mulai mencari pekerjaan programming. Jadi, pembicaraan pertama saya agak kurang bagus.
6:33Itu pengalaman yang saya ingat seumur hidup saya. Pada saat mereka beritahu saya, "Oh, apabila saya...
6:41...menginterview, mereka tanya saya, "Oh, kamu tahu C#?" Karena di sekolah saya tidak belajar...
6:46...tentang C#. Jadi, saya pikir itu berarti C++. Kemudian saya bilang, "Oh, saya hanya belajar...
6:51...tentang C++ sedikit di sekolah. Apa maksudmu?" Kemudian mereka bilang, "Tidak. Kamu tidak...
6:58...benar-benar tahu tentang C#. Bagaimana kamu menjadi programmer? Mengapa kamu...
7:02...menjumpai untuk menginterview?" - Oh, tidak.
7:04- Ya. - Oh, begitu.
7:07- Ya, dan kemudian... - Sangat menarik.
7:09- Neoma, saya tidak tahu apakah perusahaan itu masih berhasil.
7:13- Sudah. - Kemudian setelah itu, saya...
7:15- Sangat menarik. Jika kamu datang ke perusahaan sebagai Googler dan kamu bertemu...
7:19...pembicaraan lagi, "Hai, Gane. Kamu ingat saya?" - Ya.
7:24Kemudian setelah itu, saya... Pembicaraan pertama saya adalah orang yang sangat baik dan mereka...
7:29...mengatakan bahwa jika kamu ingin belajar, maka kami memiliki kesempatan untuk kamu.
7:33Kemudian, itu bagaimana saya mendapatkan pekerjaan pertama saya dan...
7:37...saya melakukan dengan baik dalam pekerjaan dan saya mendapatkan promosi...
7:42...untuk duit juga. Ya. - Ya, oke.
7:46- Ya, jadi pekerjaan pertama saya adalah Rp 1,500 untuk setahun, jadi...
7:52...itu agak rendah dari awal. Rp 1,500. Jika kamu pikirkan sekarang, itu sangat sedikit.
7:59Tapi dalam satu tahun, saya dapat Rp 3,500. Ya, jadi ini adalah sedikit...
8:05...detail tentang... - Jumping stone.
8:10- Ya, saya tidak menjumpai perusahaan, tetapi ada perusahaan yang meminta saya menjumpai.
8:14Saya memutuskan bahwa saya tidak menjumpai, tapi teman lain beritahu bos saya bahwa seseorang...
8:19...meminta saya menjumpai dan dia menghargai bahwa saya tidak menjumpai.
8:22Kemudian dia menambahkan salar bagi masyarakat. Ya.
8:27Jadi setelah itu, setelah bekerja beberapa tahun, saya dan kawan saya...
8:33...kita memulai women who code di Malaysia, karena di dunia kami biasanya seperti...
8:38...di ruang yang sama atau di semua perusahaan yang saya sertai, kebanyakan...
8:42...tentang satu perusahaan, satu perusahaan adalah 80 software engineer, hanya ada 2 female engineers.
8:51Saya dan yang lain, dan kami berdasarkan lokasi yang berbeda.
8:54Satu adalah Malaysia, satu adalah Sydney, jadi kami berdua tidak memiliki teman lelaki.
8:59Kemudian suatu hari, kami berkata, "Oh, apakah kami memiliki tempat untuk menemui...
9:07...pembangunan femail lainnya?" Kemudian kami berkata, "Oh, oke, kita akan mencari online.
9:12Ada ini woman who code, yang berasal dari San Francisco dan mereka bilang...
9:18...yang anda boleh memulai satu." Kemudian saya dan kawan saya, waktu itu kami...
9:23...memulai perjumpaan, dan itu cara saya perlahan-lahan memulai komunitas...
9:29...dan berbicara, berkongsi, berkongsi teknikal secara publik.
9:34Karena secara inisial, kami tidak tahu bagaimana untuk menemui pembicaraan.
9:38Jadi kami menjadi pembicaraan sendiri, dan kemudian perlahan-lahan kita bisa menemui...
9:42...pembangunan femail lainnya. Dan kemudian setelah itu, grup GDG...
9:48...mengetahui bahwa mereka membutuhkan pembicaraan femail di komunitas mereka...
9:56...dan mereka akan menghubungi kami juga, kemudian kami melakukan kolaborasi.
10:00- Dan itu bagaimana saya dapat mengetahui Google. - Henry? Itu saat anda bertemu Henry?
10:06Ya, dan semua yang lainnya. Sebenarnya perjumpaan pertama GDG...
10:14...yang saya bincangkan adalah di Penang, Georgetown, diorganisasi oleh Win.
10:20Dan kemudian setelah itu, saya dapat mengetahui Shaw, Mama Shaw.
10:27Mama Shaw adalah Google, dan dia berkata, "Oh, kenapa tidak seperti kamu?"
10:33"Sebab kamu melakukan banyak sharing juga." Dan pada saat itu, saya juga mulai menulis untuk beberapa blog.
10:39Jadi ia dipanggil... Saya lupa namanya sekarang, tapi ia dibawah.
10:44Ini adalah blog web yang sangat popular di Amerika. Dan kemudian mereka dibawah oleh Digital Ocean.
10:50Jadi jika anda mencari nama saya, artikel saya itu sedang berada di bagian dari Digital Ocean juga.
10:56- Scott.io saya pikir? - Ya, Scott.io.
11:03Dan karena mereka membayar juga, jadi di mana-mana yang anda gunakan artikel...
11:09Ya, mereka membayar per artikel. Jika diadakan dan diadakan, kita dapat membayar.
11:16Dan artikel itu mendapatkan beberapa juta rupiah, saya pikir.
11:22Jadi itu cara saya menggunakan... Ini adalah pengalaman yang saya gunakan untuk menggunakan Angula GDE dan Web GDE.
11:32Dan kemudian perlahan-lahan... Ini sebenarnya membuka kesempatan saya banyak.
11:38Karena saya tidak pernah berpikir bahwa saya akan pergi ke Amerika atau area lain.
11:45Bahkan saya berbicara di negara lain juga. Saya tidak tahu jika ini mungkin.
11:52Jadi dengan semua kesempatan ini, saya mulai berbicara.
11:59Saya juga mulai menguruskan konferensi. Karena saya sangat suka Angula pada waktu itu.
12:06Jadi ketika saya pergi ke konferensi di luar negara, saya lihat bagaimana mereka menguruskan konferensi dengan baik.
12:11Kemudian saya menguruskan duit saya sendiri dan menguruskan konferensi Angula Malaysia.
12:16Dan saya menjemputkan seorang pembicara dari luar negara juga untuk berbicara.
12:20Dan juga seorang pembicara dari kawasan.
12:23Seperti kita ada seorang pembicara dari Thailand untuk berbicara juga.
12:26Karena saya tidak ingin konferensi hanya "porang putih".
12:32Jadi saya ingin ada seorang pembicara dari kawasan juga.
12:36Jadi saya menggunakan seorang pembicara dari kawasan.
12:41Jadi semua ini saya lakukan ketika saya seorang pembicara dari kawasan.
12:44Pada waktu itu saya seorang pembicara dari kawasan.
12:47Seorang pembicara dari kawasan di Randstad, salah satu dari syarikat saya.
12:51Dan setelah itu saya memutuskan.
12:55Kemudian setelah itu ada kesempatan ini yang akan terjadi.
12:58Yang adalah developer Chrome Dev Tools.
13:02Selepas kita memiliki CDS 2019, kan?
13:08Ya, jadi saya melakukan interview semasa CDS 2019.
13:15Jadi ketika saya pergi ke konferensi.
13:18Saya ingat anda pergi melawat dengan Henry all over US?
13:22Ya, ya, ya.
13:24Ke Grand Canyon?
13:26Anda pergi ke Grand Canyon, kan?
13:28Ya, ya, ya.
13:29Saya ingat cerita itu, ya.
13:30Ya, dan setelah itu mereka lanjutkan perjalanan.
13:34Tetapi karena saya memiliki interview.
13:36Jadi saya harus terbang awal untuk interview.
13:39Sebenarnya, sehari sebelum CDS.
13:42Karena semua kumpulan tim Death Rail sudah siap untuk CDS.
13:48Jadi saya melakukan interview di US.
13:50Tapi kemudian role itu dikonsumsi.
13:54Atau di London atau di Jerman.
13:56Jadi kemudian saya memilih Munich karena saya sudah datang ke Munich sebelumnya.
14:00Karena kerja sebelumnya.
14:02Dan saya merasakan keseluruhan ini.
14:04Saya suka berada di kota kedua.
14:07Bukan kota utama seperti Jakarta.
14:09Seperti KL, kota besar.
14:11Munich lebih kecil.
14:13Agak seperti Penang di Malaysia.
14:16Jadi saya ingin mengalami itu.
14:18Itulah kenapa saya...
14:20Ketika saya mendapatkan pekerjaan, saya memilih untuk datang ke Munich.
14:23Ini adalah tempat kembang Death Tools Engineer Base.
14:28Jadi kebanyakan engineer base di sini.
14:30Oh!
14:31Sangat menginspirasi.
14:33Dan saya berada di sini selama 3 tahun.
14:35Jadi tahun pertama, saya hanya fokus ke Death Tools.
14:38Tapi sekarang jangkauan kerja saya lebih jauh.
14:41Ia menjadi seperti debugging dan testing.
14:44Oh!
14:45Itu ceritanya.
14:48Mungkin selanjutnya saya akan menjadi ketua GDE.
14:53Oh!
14:54Oh!
14:55Oh!
14:56Ecosistem web.
14:59Semoga saja.
15:01Semoga saja, iya.
15:02Tugasmu sekarang...
15:04Tugasmu sekarang adalah Death Rail, kan?
15:07Iya.
15:08Apa...
15:09Apa...
15:10Apa pekerjaanmu?
15:11Apa pekerjaanmu?
15:13Apa yang telah kamu lakukan?
15:15Apa yang telah kamu lakukan?
15:16Apa yang telah kamu lakukan?
15:17Atau...
15:18Oke.
15:19Kamu hanya...
15:20Ya.
15:21Ada...
15:22Jadi, untuk Death Rail, ada banyak...
15:24Like, Death Rail adalah sedikit dari segalanya.
15:26Jadi, saya bisa memberi kamu idea general.
15:29Kita perlu mengajarkan pembangunan.
15:32Tentang apa yang baru dan bagaimana untuk menggunakan bahan-bahan.
15:35Jadi, dalam kes ini, seperti Death Tools dan Web Driver By Die.
15:38Saya perlu seperti...
15:39Menciptakan narrative dan berpikir seperti...
15:41Atau mungkin seperti menciptakan demos.
15:43Untuk menceritakan pembangunan bagaimana untuk menggunakannya.
15:45Dan pada saat yang sama, saya juga perlu...
15:47Menciptakan tim internal juga.
15:50Seperti untuk berbagi dengan mereka...
15:51Bagaimana sebenarnya pembangunan melakukan hal.
15:54Karena perusahaan Chrome tidak membutuhkan pembangun web.
15:58Pembangunan web, ya.
15:59Ya, mereka benar-benar bagus di C++.
16:02Seperti...
16:03Seperti sebelumnya.
16:04Tapi mereka tidak benar-benar bagus di CSS.
16:06Seperti, mereka tidak...
16:07Kadang-kadang ada...
16:08Mereka tidak membutuhkan web.
16:09Mereka tidak membutuhkan web.
16:10Mereka tidak membutuhkan web.
16:11Mereka bukan penggunaan...
16:12Ya.
16:13Mereka bukan penggunaan...
16:15Mereka bukan penggunaan...
16:16Tidak.
16:17Mereka bukan penggunaan...
16:18Mereka bukan penggunaan...
16:19Mereka bukan penggunaan...
16:20Mereka bukan penggunaan...
16:21Mereka bukan penggunaan...
16:22Mereka bukan penggunaan...
16:23Mereka bukan penggunaan...
16:24Mereka bukan penggunaan...
16:25Mereka bukan penggunaan...
16:26Mereka bukan penggunaan...
16:27Mereka bukan penggunaan...
16:28Mereka bukan penggunaan...
16:29Mereka bukan penggunaan...
16:30Mereka bukan penggunaan...
16:31Mereka bukan penggunaan...
16:32Mereka bukan penggunaan...
16:33Mereka bukan penggunaan...
16:34Mereka bukan penggunaan...
16:43Mereka bukan penggunaan...
16:44Mereka bukan penggunaan...
16:45Mereka bukan penggunaan...
16:46Mereka bukan penggunaan...
16:47Mereka bukan penggunaan...
16:48Mereka bukan penggunaan...
16:49Mereka bukan penggunaan...
16:50Mereka bukan penggunaan...
16:51Mereka bukan penggunaan...
16:52Mereka bukan penggunaan...
16:53Mereka bukan penggunaan...
16:54Mereka bukan penggunaan...
16:55Mereka bukan penggunaan...
16:56Mereka bukan penggunaan...
16:57Mereka bukan penggunaan...
16:58Mereka bukan penggunaan...
16:59Mereka bukan penggunaan...
17:00Mereka bukan penggunaan...
17:01Mereka bukan penggunaan...
17:04Mereka bukan penggunaan...
17:05Mereka bukan penggunaan...
17:06Mereka bukan penggunaan...
17:07Mereka bukan penggunaan...
17:08Mereka bukan penggunaan...
17:09Mereka bukan penggunaan...
17:10Mereka bukan penggunaan...
17:11Mereka bukan penggunaan...
17:12Mereka bukan penggunaan...
17:13Mereka bukan penggunaan...
17:14Mereka bukan penggunaan...
17:15Mereka bukan penggunaan...
17:16Mereka bukan penggunaan...
17:17Mereka bukan penggunaan...
17:18Mereka bukan penggunaan...
17:19Mereka bukan penggunaan...
17:20Mereka bukan penggunaan...
17:21Mereka bukan penggunaan...
17:22Mereka bukan penggunaan...
17:23Mereka bukan penggunaan...
17:34Mereka bukan penggunaan...
17:35Mereka bukan penggunaan...
17:36Mereka bukan penggunaan...
17:37Mereka bukan penggunaan...
17:38Mereka bukan penggunaan...
17:39Mereka bukan penggunaan...
17:40Mereka bukan penggunaan...
17:41Mereka bukan penggunaan...
17:42Mereka bukan penggunaan...
17:43Mereka bukan penggunaan...
17:44Mereka bukan penggunaan...
17:45Mereka bukan penggunaan...
17:46Mereka bukan penggunaan...
17:47Mereka bukan penggunaan...
17:48Mereka bukan penggunaan...
17:49Mereka bukan penggunaan...
17:50Mereka bukan penggunaan...
17:51Mereka bukan penggunaan...
17:52Mereka bukan penggunaan...
17:53Mereka bukan penggunaan...
18:04Css, kamu harus melalui...
18:06Css, kamu harus melalui...
18:07Css, kamu harus melalui...
18:08Css, kamu harus melalui...
18:09Css, kamu harus melalui...
18:10Css, kamu harus melalui...
18:11Css, kamu harus melalui...
18:12Css, kamu harus melalui...
18:13Css, kamu harus melalui...
18:14Css, kamu harus melalui...
18:15Css, kamu harus melalui...
18:16Css, kamu harus melalui...
18:17Css, kamu harus melalui...
18:18Css, kamu harus melalui...
18:19Css, kamu harus melalui...
18:20Css, kamu harus melalui...
18:21Css, kamu harus melalui...
18:22Css, kamu harus melalui...
18:23Css, kamu harus melalui...
18:24Css, kamu harus melalui...
18:35Ya, jadi aku hanya bekerja dengan fitur DEV2 dan API Puppeteer dan sebagainya.
18:43Saya faham.
18:44Ya.
18:45Oke, sekarang kita ingin mengubah topik kita ke topik utama adalah...
18:54Otomation.
18:55Part meeting.
18:56Part meeting.
18:57I/O.
18:58I/O.
18:59Ya.
19:00Jadi sebelum kita pergi ke pemandu web by Dai, mungkin kita bisa berbicara tentang evolusi otomasi tes.
19:11Hmm.
19:12Oke.
19:13Ya.
19:14Oh, boleh saya?
19:15Apakah itu mungkin untuk saya untuk berbagi screen?
19:17Ya.
19:18Ya, ya.
19:19Tentu.
19:20Sangat mungkin.
19:21Oh, tolong.
19:22Ya, tapi Riza harus menambahkan screen anda ke...
19:25Ya.
19:26Atau kamu bisa menggunakan saya?
19:27Seperti ini?
19:28Ya.
19:29Tunggu, bagi saya.
19:30Oke.
19:31Ya.
19:32Tunggu, bagi saya.
19:33Seperti ini?
19:34Ya.
19:35Seperti ini?
19:36Ya.
19:37Tunggu, bagi saya.
19:38Seperti ini?
19:39Ya.
19:40Tunggu, bagi saya.
19:41Seperti ini?
19:42Ya.
19:43Tunggu, bagi saya.
19:44Seperti ini?
19:45Ya.
19:46Tunggu, bagi saya.
19:47Seperti ini?
19:48Ya.
19:49Tunggu, bagi saya.
19:50Seperti ini?
19:51Ya.
19:52Tunggu, bagi saya.
19:53Seperti ini?
19:54Ya.
19:55Tunggu, bagi saya.
19:56Seperti ini?
19:57Ya.
19:58Tunggu, bagi saya.
19:59Seperti ini?
20:00Ya.
20:01Tunggu, bagi saya.
20:02Seperti ini?
20:03Ya.
20:04Tunggu, bagi saya.
20:05Seperti ini?
20:06Ya.
20:07Tunggu, bagi saya.
20:08Seperti ini?
20:09Ya.
20:10Tunggu, bagi saya.
20:11Seperti ini?
20:12Ya.
20:13Tunggu, bagi saya.
20:14Seperti ini?
20:15Ya.
20:16Tunggu, bagi saya.
20:17Seperti ini?
20:18Ya.
20:19Tunggu, bagi saya.
20:20Seperti ini?
20:21Ya.
20:22Tunggu, bagi saya.
20:23Seperti ini?
20:24Ya.
20:25Tunggu, bagi saya.
20:26Seperti ini?
20:27Ya.
20:28Tunggu, bagi saya.
20:29Seperti ini?
20:30Ya.
20:31Tunggu, bagi saya.
20:32Seperti ini?
20:33Ya.
20:34Tunggu, bagi saya.
20:35Seperti ini?
20:36Ya.
20:37Tunggu, bagi saya.
20:38Seperti ini?
20:39Ya.
20:40Tunggu, bagi saya.
20:41Seperti ini?
20:42Ya.
20:43Tunggu, bagi saya.
20:44Seperti ini?
20:45Ya.
20:46Tunggu, bagi saya.
20:47Seperti ini?
20:48Ya.
20:49Tunggu, bagi saya.
20:50Seperti ini?
20:51Ya.
20:52Tunggu, bagi saya.
20:53Seperti ini?
20:54Ya.
20:55Tunggu, bagi saya.
20:57Seperti ini?
20:58Ya.
20:59Tunggu, bagi saya.
21:00Seperti ini?
21:01Ya.
21:02Tunggu, bagi saya.
21:03Seperti ini?
21:04Ya.
21:05Tunggu, bagi saya.
21:06Seperti ini?
21:07Ya.
21:08Tunggu, bagi saya.
21:09Seperti ini?
21:10Ya.
21:11Tunggu, bagi saya.
21:12Seperti ini?
21:13Ya.
21:14Tunggu, bagi saya.
21:15Seperti ini?
21:16Ya.
21:17Tunggu, bagi saya.
21:18Seperti ini?
21:19Ya.
21:20Tunggu, bagi saya.
21:21Seperti ini?
21:22Ya.
21:23Tunggu, bagi saya.
21:24Seperti ini?
21:25Ya.
21:26Tunggu, bagi saya.
21:27Seperti ini?
21:28Ya.
21:29Tunggu, bagi saya.
21:30Seperti ini?
21:31Ya.
21:32Tunggu, bagi saya.
21:33Seperti ini?
21:34Ya.
21:35Tunggu, bagi saya.
21:36Seperti ini?
21:37Ya.
21:38Tunggu, bagi saya.
21:39Seperti ini?
21:40Ya.
21:41Tunggu, bagi saya.
21:42Seperti ini?
21:43Ya.
21:44Tunggu, bagi saya.
21:45Seperti ini?
21:46Ya.
21:47Tunggu, bagi saya.
21:48Seperti ini?
21:49Ya.
21:50Tunggu, bagi saya.
21:51Seperti ini?
21:52Seperti ini?
21:53Ya.
21:54Tunggu, bagi saya.
21:55Seperti ini?
21:56Ya.
21:57Tunggu, bagi saya.
21:58Seperti ini?
21:59Ya.
22:00Tunggu, bagi saya.
22:01Seperti ini?
22:02Ya.
22:03Tunggu, bagi saya.
22:04Seperti ini?
22:05Ya.
22:06Tunggu, bagi saya.
22:07Seperti ini?
22:08Ya.
22:09Tunggu, bagi saya.
22:10Seperti ini?
22:11Ya.
22:12Tunggu, bagi saya.
22:13Seperti ini?
22:14Ya.
22:15Tunggu, bagi saya.
22:16Seperti ini?
22:17Ya.
22:18Tunggu, bagi saya.
22:19Seperti ini?
22:20Ya.
22:21Tunggu, bagi saya.
22:22Seperti ini?
22:23Ya.
22:24Tunggu, bagi saya.
22:25Seperti ini?
22:26Ya.
22:27Tunggu, bagi saya.
22:28Seperti ini?
22:29Ya.
22:30Tunggu, bagi saya.
22:31Seperti ini?
22:32Ya.
22:33Tunggu, bagi saya.
22:34Seperti ini?
22:35Ya.
22:36Tunggu, bagi saya.
22:37Seperti ini?
22:38Ya.
22:39Tunggu, bagi saya.
22:40Seperti ini?
22:41Ya.
22:42Tunggu, bagi saya.
22:43Seperti ini?
22:44Ya.
22:45Tunggu, bagi saya.
22:46Seperti ini?
22:47Ya.
22:48Tunggu, bagi saya.
22:49Seperti ini?
22:50Seperti ini?
22:51Ya.
22:52Tunggu, bagi saya.
22:53Seperti ini?
22:54Ya.
22:55Tunggu, bagi saya.
22:56Seperti ini?
22:57Ya.
22:58Tunggu, bagi saya.
22:59Seperti ini?
23:00Ya.
23:01Tunggu, bagi saya.
23:02Seperti ini?
23:03Ya.
23:04Tunggu, bagi saya.
23:05Seperti ini?
23:06Ya.
23:07Tunggu, bagi saya.
23:08Seperti ini?
23:09Ya.
23:10Tunggu, bagi saya.
23:11Seperti ini?
23:12Ya.
23:13Tunggu, bagi saya.
23:14Seperti ini?
23:15Ya.
23:16Tunggu, bagi saya.
23:17Seperti ini?
23:18Ya.
23:19Tunggu, bagi saya.
23:20Seperti ini?
23:21Ya.
23:22Tunggu, bagi saya.
23:23Seperti ini?
23:24Ya.
23:25Tunggu, bagi saya.
23:26Seperti ini?
23:27Ya.
23:28Tunggu, bagi saya.
23:29Seperti ini?
23:30Ya.
23:31Tunggu, bagi saya.
23:32Seperti ini?
23:33Ya.
23:34Tunggu, bagi saya.
23:35Seperti ini?
23:36Ya.
23:37Tunggu, bagi saya.
23:38Seperti ini?
23:39Ya.
23:40Tunggu, bagi saya.
23:41Seperti ini?
23:42Ya.
23:43Tunggu, bagi saya.
23:44Seperti ini?
23:45Ya.
23:46Tunggu, bagi saya.
23:47Seperti ini?
23:48Ya.
23:50Tunggu, bagi saya.
23:51Seperti ini?
23:52Ya.
23:53Tunggu, bagi saya.
23:54Seperti ini?
23:55Ya.
23:56Tunggu, bagi saya.
23:57Seperti ini?
23:58Ya.
23:59Tunggu, bagi saya.
24:00Seperti ini?
24:01Ya.
24:02Tunggu, bagi saya.
24:03Seperti ini?
24:04Ya.
24:05Tunggu, bagi saya.
24:06Seperti ini?
24:07Ya.
24:08Tunggu, bagi saya.
24:09Seperti ini?
24:10Ya.
24:11Tunggu, bagi saya.
24:12Seperti ini?
24:13Ya.
24:14Tunggu, bagi saya.
24:15Seperti ini?
24:16Seperti ini?
24:17Ya.
24:18Tunggu, bagi saya.
24:19Seperti ini?
24:20Ya.
24:21Tunggu, bagi saya.
24:22Seperti ini?
24:23Ya.
24:24Tunggu, bagi saya.
24:25Seperti ini?
24:26Ya.
24:27Tunggu, bagi saya.
24:28Seperti ini?
24:29Ya.
24:30Tunggu, bagi saya.
24:31Seperti ini?
24:32Ya.
24:33Tunggu, bagi saya.
24:34Seperti ini?
24:35Ya.
24:36Tunggu, bagi saya.
24:37Seperti ini?
24:38Ya.
24:39Tunggu, bagi saya.
24:40Seperti ini?
24:41Ya.
24:42Tunggu, bagi saya.
24:47Seperti ini?
24:48Ya.
24:49Tunggu, bagi saya.
24:50Seperti ini?
24:51Ya.
24:52Tunggu, bagi saya.
24:53Seperti ini?
24:54Ya.
24:55Tunggu, bagi saya.
24:56Seperti ini?
24:57Ya.
24:58Tunggu, bagi saya.
24:59Seperti ini?
25:00Ya.
25:01Tunggu, bagi saya.
25:02Seperti ini?
25:03Ya.
25:04Tunggu, bagi saya.
25:05Seperti ini?
25:06Ya.
25:07Tunggu, bagi saya.
25:08Seperti ini?
25:09Ya.
25:10Tunggu, bagi saya.
25:11Seperti ini?
25:12Ya.
25:13Tunggu, bagi saya.
25:14Seperti ini?
25:15Ya.
25:16Tunggu, bagi saya.
25:17Seperti ini?
25:18Ya.
25:19Tunggu, bagi saya.
25:20Seperti ini?
25:21Ya.
25:22Tunggu, bagi saya.
25:23Seperti ini?
25:24Ya.
25:25Tunggu, bagi saya.
25:26Seperti ini?
25:27Ya.
25:28Tunggu, bagi saya.
25:29Seperti ini?
25:30Ya.
25:31Tunggu, bagi saya.
25:32Seperti ini?
25:33Ya.
25:34Tunggu, bagi saya.
25:35Seperti ini?
25:36Ya.
25:37Tunggu, bagi saya.
25:38Seperti ini?
25:39Ya.
25:40Tunggu, bagi saya.
25:41Seperti ini?
25:42Ya.
25:43Tunggu, bagi saya.
25:44Seperti ini?
25:45Ya.
25:46Tunggu, bagi saya.
25:47Seperti ini?
25:48Ya.
25:49Tunggu, bagi saya.
25:50Seperti ini?
25:51Ya.
25:52Tunggu, bagi saya.
25:53Seperti ini?
25:54Ya.
25:55Tunggu, bagi saya.
25:56Seperti ini?
25:57Ya.
25:58Tunggu, bagi saya.
25:59Seperti ini?
26:00Ya.
26:01Tunggu, bagi saya.
26:02Seperti ini?
26:03Ya.
26:04Tunggu, bagi saya.
26:05Seperti ini?
26:06Ya.
26:07Tunggu, bagi saya.
26:10Seperti ini?
26:11Ya.
26:12Tunggu, bagi saya.
26:13Seperti ini?
26:14Ya.
26:15Tunggu, bagi saya.
26:16Seperti ini?
26:17Ya.
26:18Tunggu, bagi saya.
26:19Seperti ini?
26:20Ya.
26:21Tunggu, bagi saya.
26:22Seperti ini?
26:23Ya.
26:24Tunggu, bagi saya.
26:25Seperti ini?
26:26Ya.
26:27Tunggu, bagi saya.
26:28Seperti ini?
26:29Ya.
26:30Tunggu, bagi saya.
26:31Seperti ini?
26:32Ya.
26:33Tunggu, bagi saya.
26:34Seperti ini?
26:35Ya.
26:36Tunggu, bagi saya.
26:37Seperti ini?
26:38Ya.
26:39Tunggu, bagi saya.
26:40Seperti ini?
26:41Ya.
26:42Tunggu, bagi saya.
27:05Tunggu, bagi saya.
27:13Seperti ini?
27:14Ya.
27:15Tunggu, bagi saya.
27:16Seperti ini?
27:17Ya.
27:18Tunggu, bagi saya.
27:19Seperti ini?
27:20Ya.
27:21Tunggu, bagi saya.
27:22Seperti ini?
27:23Ya.
27:24Tunggu, bagi saya.
27:25Seperti ini?
27:26Ya.
27:27Tunggu, bagi saya.
27:28Seperti ini?
27:29Ya.
27:30Tunggu, bagi saya.
27:31Seperti ini?
27:32Ya.
27:33Tunggu, bagi saya.
27:34Seperti ini?
27:35Ya.
27:36Tunggu, bagi saya.
27:37Seperti ini?
27:38Ya.
27:39Tunggu, bagi saya.
27:40Seperti ini?
27:41Ya.
27:42Tunggu, bagi saya.
27:43Seperti ini?
27:44Ya.
27:45Tunggu, bagi saya.
27:46Seperti ini?
27:47Ya.
27:48Tunggu, bagi saya.
27:49Seperti ini?
27:50Ya.
27:51Tunggu, bagi saya.
27:52Seperti ini?
27:53Ya.
27:54Tunggu, bagi saya.
27:55Seperti ini?
27:56Ya.
27:57Tunggu, bagi saya.
27:58Seperti ini?
27:59Ya.
28:00Tunggu, bagi saya.
28:01Seperti ini?
28:02Seperti ini?
28:03Ya.
28:04Tunggu, bagi saya.
28:05Seperti ini?
28:06Ya.
28:07Tunggu, bagi saya.
28:08Seperti ini?
28:09Ya.
28:10Tunggu, bagi saya.
28:11Seperti ini?
28:12Ya.
28:13Tunggu, bagi saya.
28:14Seperti ini?
28:15Ya.
28:16Tunggu, bagi saya.
28:17Seperti ini?
28:18Ya.
28:19Tunggu, bagi saya.
28:20Seperti ini?
28:21Ya.
28:22Tunggu, bagi saya.
28:23Seperti ini?
28:24Ya.
28:25Tunggu, bagi saya.
28:26Seperti ini?
28:27Ya.
28:28Tunggu, bagi saya.
28:29Seperti ini?
28:30Ya.
28:31Tunggu, bagi saya.
28:32Seperti ini?
28:33Ya.
28:34Tunggu, bagi saya.
28:35Seperti ini?
28:36Ya.
28:37Tunggu, bagi saya.
28:38Seperti ini?
28:39Ya.
28:40Tunggu, bagi saya.
28:41Seperti ini?
28:42Ya.
28:43Tunggu, bagi saya.
29:02Seperti ini?
29:27Seperti ini?
29:32Ya.
29:33Tunggu, bagi saya.
29:34Seperti ini?
29:35Ya.
29:36Tunggu, bagi saya.
29:37Seperti ini?
29:38Ya.
29:39Tunggu, bagi saya.
29:40Seperti ini?
29:41Ya.
29:42Tunggu, bagi saya.
29:43Seperti ini?
29:44Ya.
29:45Tunggu, bagi saya.
29:46Seperti ini?
29:47Ya.
29:48Tunggu, bagi saya.
29:49Seperti ini?
29:50Ya.
29:51Tunggu, bagi saya.
29:52Seperti ini?
29:53Ya.
29:54Tunggu, bagi saya.
29:55Seperti ini?
29:56Ya.
29:57Tunggu, bagi saya.
29:58Seperti ini?
29:59Ya.
30:00Tunggu, bagi saya.
30:01Seperti ini?
30:02Ya.
30:03Tunggu, bagi saya.
30:04Seperti ini?
30:05Ya.
30:06Tunggu, bagi saya.
30:07Seperti ini?
30:08Ya.
30:09Tunggu, bagi saya.
30:10Seperti ini?
30:11Ya.
30:12Tunggu, bagi saya.
30:13Seperti ini?
30:14Ya.
30:15Tunggu, bagi saya.
30:16Seperti ini?
30:17Ya.
30:18Tunggu, bagi saya.
30:19Seperti ini?
30:20Ya.
30:21Tunggu, bagi saya.
30:22Seperti ini?
30:23Ya.
30:24Tunggu, bagi saya.
30:25Seperti ini?
30:26Ya.
30:27Tunggu, bagi saya.
30:28Seperti ini?
30:29Ya.
30:30Tunggu, bagi saya.
30:31Seperti ini?
30:32Ya.
30:33Tunggu, bagi saya.
30:34Seperti ini?
30:35Ya.
30:36Tunggu, bagi saya.
30:37Seperti ini?
30:38Ya.
30:39Tunggu, bagi saya.
30:40Seperti ini?
30:41Ya.
30:42Tunggu, bagi saya.
30:43Seperti ini?
30:44Ya.
31:04Ya.
31:05Tunggu, bagi saya.
31:06Seperti ini?
31:07Ya.
31:08Tunggu, bagi saya.
31:09Seperti ini?
31:10Ya.
31:11Tunggu, bagi saya.
31:12Seperti ini?
31:13Ya.
31:14Tunggu, bagi saya.
31:15Seperti ini?
31:16Ya.
31:17Tunggu, bagi saya.
31:18Seperti ini?
31:19Ya.
31:20Tunggu, bagi saya.
31:21Seperti ini?
31:22Ya.
31:23Tunggu, bagi saya.
31:24Seperti ini?
31:25Ya.
31:26Tunggu, bagi saya.
31:27Seperti ini?
31:28Ya.
31:29Tunggu, bagi saya.
31:30Seperti ini?
31:31Ya.
31:32Tunggu, bagi saya.
31:33Seperti ini?
31:34Ya.
31:35Tunggu, bagi saya.
31:36Seperti ini?
31:37Ya.
31:38Tunggu, bagi saya.
31:39Seperti ini?
31:40Ya.
31:41Tunggu, bagi saya.
31:42Seperti ini?
31:43Ya.
31:44Tunggu, bagi saya.
31:45Seperti ini?
31:46Ya.
31:47Tunggu, bagi saya.
31:48Seperti ini?
31:49Ya.
31:50Tunggu, bagi saya.
31:51Seperti ini?
31:52Ya.
31:53Tunggu, bagi saya.
31:54Seperti ini?
31:55Ya.
31:56Tunggu, bagi saya.
31:57Seperti ini?
31:58Ya.
31:59Tunggu, bagi saya.
32:00Seperti ini?
32:01Ya.
32:02Tunggu, bagi saya.
32:03Seperti ini?
32:04Ya.
32:05Tunggu, bagi saya.
32:06Seperti ini?
32:07Ya.
32:08Tunggu, bagi saya.
32:09Seperti ini?
32:10Ya.
32:11Tunggu, bagi saya.
32:12Seperti ini?
32:13Ya.
32:14Tunggu, bagi saya.
32:15Seperti ini?
32:16Ya.
32:17Tunggu, bagi saya.
32:18Seperti ini?
32:19Ya.
32:20Tunggu, bagi saya.
32:21Seperti ini?
32:22Ya.
32:23Tunggu, bagi saya.
32:24Seperti ini?
32:25Ya.
32:26Tunggu, bagi saya.
32:27Seperti ini?
32:28Ya.
32:29Tunggu, bagi saya.
32:30Seperti ini?
32:31Ya.
32:32Tunggu, bagi saya.
32:33Seperti ini?
32:34Ya.
32:35Tunggu, bagi saya.
32:36Seperti ini?
32:37Ya.
32:38Tunggu, bagi saya.
32:39Seperti ini?
32:40Ya.
32:41Tunggu, bagi saya.
32:42Seperti ini?
32:43Ya.
32:44Tunggu, bagi saya.
32:45Seperti ini?
32:46Ya.
32:47Tunggu, bagi saya.
32:48Seperti ini?
32:49Ya.
32:50Tunggu, bagi saya.
32:51Seperti ini?
32:52Ya.
32:53Tunggu, bagi saya.
32:54Seperti ini?
32:55Ya.
32:56Tunggu, bagi saya.
32:57Seperti ini?
32:58Ya.
32:59Tunggu, bagi saya.
33:00Seperti ini?
33:01Ya.
33:02Tunggu, bagi saya.
33:03Seperti ini?
33:04Ya.
33:05Tunggu, bagi saya.
33:06Seperti ini?
33:07Ya.
33:08Tunggu, bagi saya.
33:09Seperti ini?
33:10Ya.
33:11Tunggu, bagi saya.
33:12Seperti ini?
33:13Ya.
33:14Tunggu, bagi saya.
33:15Seperti ini?
33:16Ya.
33:17Tunggu, bagi saya.
33:18Seperti ini?
33:19Ya.
33:20Tunggu, bagi saya.
33:21Seperti ini?
33:22Ya.
33:23Tunggu, bagi saya.
33:24Seperti ini?
33:25Ya.
33:26Tunggu, bagi saya.
33:27Seperti ini?
33:28Ya.
33:29Tunggu, bagi saya.
33:30Seperti ini?
33:31Ya.
33:32Tunggu, bagi saya.
33:33Seperti ini?
33:34Ya.
33:35Tunggu, bagi saya.
33:36Seperti ini?
33:37Ya.
33:38Tunggu, bagi saya.
33:39Seperti ini?
33:40Ya.
33:41Tunggu, bagi saya.
33:42Seperti ini?
33:43Ya.
33:44Seperti ini?
34:13Ya.
34:14Tunggu, bagi saya.
34:15Seperti ini?
34:16Ya.
34:17Tunggu, bagi saya.
34:18Seperti ini?
34:19Ya.
34:20Tunggu, bagi saya.
34:21Seperti ini?
34:22Ya.
34:23Tunggu, bagi saya.
34:24Seperti ini?
34:25Ya.
34:26Tunggu, bagi saya.
34:27Seperti ini?
34:28Ya.
34:29Tunggu, bagi saya.
34:30Seperti ini?
34:31Ya.
34:32Tunggu, bagi saya.
34:33Seperti ini?
34:34Ya.
34:35Tunggu, bagi saya.
34:36Seperti ini?
34:37Ya.
34:38Tunggu, bagi saya.
34:39Seperti ini?
34:40Ya.
34:41Tunggu, bagi saya.
34:42Seperti ini?
34:43Ya.
34:44Tunggu, bagi saya.
34:45Seperti ini?
34:46Ya.
34:47Tunggu, bagi saya.
34:48Seperti ini?
34:49Ya.
34:50Tunggu, bagi saya.
34:51Seperti ini?
34:52Ya.
34:53Tunggu, bagi saya.
34:54Seperti ini?
34:55Ya.
34:56Tunggu, bagi saya.
34:57Seperti ini?
34:58Ya.
34:59Tunggu, bagi saya.
35:00Seperti ini?
35:01Ya.
35:02Tunggu, bagi saya.
35:03Seperti ini?
35:04Ya.
35:05Tunggu, bagi saya.
35:06Seperti ini?
35:07Ya.
35:08Tunggu, bagi saya.
35:09Seperti ini?
35:10Ya.
35:11Tunggu, bagi saya.
35:12Seperti ini?
35:13Ya.
35:14Tunggu, bagi saya.
35:15Seperti ini?
35:16Ya.
35:17Tunggu, bagi saya.
35:18Seperti ini?
35:19Ya.
35:20Tunggu, bagi saya.
35:21Seperti ini?
35:22Ya.
35:23Tunggu, bagi saya.
35:24Seperti ini?
35:25Ya.
35:26Tunggu, bagi saya.
35:27Seperti ini?
35:28Ya.
35:29Tunggu, bagi saya.
35:30Seperti ini?
35:31Ya.
35:32Tunggu, bagi saya.
35:33Seperti ini?
35:34Ya.
35:35Tunggu, bagi saya.
35:36Seperti ini?
35:37Ya.
35:38Tunggu, bagi saya.
35:39Seperti ini?
35:40Ya.
35:41Tunggu, bagi saya.
35:42Seperti ini?
35:43Ya.
35:44Tunggu, bagi saya.
35:45Seperti ini?
35:46Ya.
35:47Tunggu, bagi saya.
35:48Seperti ini?
35:49Ya.
35:50Tunggu, bagi saya.
35:51Seperti ini?
35:52Ya.
35:53Tunggu, bagi saya.
35:54Seperti ini?
35:55Ya.
35:56Tunggu, bagi saya.
35:57Seperti ini?
35:58Ya.
35:59Tunggu, bagi saya.
36:00Seperti ini?
36:01Ya.
36:02Tunggu, bagi saya.
36:03Seperti ini?
36:04Ya.
36:05Tunggu, bagi saya.
36:06Seperti ini?
36:07Ya.
36:08Tunggu, bagi saya.
36:09Seperti ini?
36:10Ya.
36:11Tunggu, bagi saya.
36:12Seperti ini?
36:13Ya.
36:14Tunggu, bagi saya.
36:15Seperti ini?
36:16Ya.
36:17Tunggu, bagi saya.
36:18Seperti ini?
36:19Ya.
36:20Tunggu, bagi saya.
36:21Seperti ini?
36:22Ya.
36:23Tunggu, bagi saya.
36:24Seperti ini?
36:25Ya.
36:26Tunggu, bagi saya.
36:27Seperti ini?
36:28Ya.
36:29Tunggu, bagi saya.
36:30Seperti ini?
36:31Ya.
36:32Tunggu, bagi saya.
36:33Seperti ini?
36:34Ya.
36:35Tunggu, bagi saya.
36:36Seperti ini?
36:37Ya.
36:38Tunggu, bagi saya.
36:39Seperti ini?
36:40Ya.
36:41Tunggu, bagi saya.
36:42Seperti ini?
36:43Ya.
36:44Tunggu, bagi saya.
36:45Seperti ini?
36:46Ya.
36:47Tunggu, bagi saya.
36:48Seperti ini?
36:49Ya.
36:50Tunggu, bagi saya.
36:51Seperti ini?
36:52Ya.
36:53Tunggu, bagi saya.
36:54Seperti ini?
36:55Ya.
36:56Tunggu, bagi saya.
36:57Seperti ini?
36:58Ya.
36:59Tunggu, bagi saya.
37:00Seperti ini?
37:01Ya.
37:02Tunggu, bagi saya.
37:03Seperti ini?
37:04Ya.
37:05Tunggu, bagi saya.
37:06Seperti ini?
37:07Ya.
37:08Tunggu, bagi saya.
37:09Seperti ini?
37:10Ya.
37:11Tunggu, bagi saya.
37:12Seperti ini?
37:13Ya.
37:14Tunggu, bagi saya.
37:15Seperti ini?
37:16Ya.
37:17Tunggu, bagi saya.
37:18Seperti ini?
37:19Ya.
37:20Tunggu, bagi saya.
37:21Seperti ini?
37:22Ya.
37:23Tunggu, bagi saya.
37:24Seperti ini?
37:25Ya.
37:26Tunggu, bagi saya.
37:27Seperti ini?
37:28Ya.
37:29Tunggu, bagi saya.
37:30Seperti ini?
37:31Ya.
37:32Tunggu, bagi saya.
37:33Seperti ini?
37:34Ya.
37:35Ya, oke.
37:37Tunggu, saya perlu menyalakan WebDriver by Die untuk beberapa menit.
37:44Mari lihat.
37:46Coba lagi.
37:48Dan ini juga.
37:51Ini juga.
37:53Karena ini.
37:54Biar saya runa satu lagi.
37:57Oke.
37:59Berapa banyak browser yang anda punya?
38:01Saya lihat.
38:02Mengapa terbuka 93 browser dan kemudian berhenti?
38:06Oke.
38:08Oke.
38:09Mari kita coba lagi.
38:10Oke.
38:11Mari kita coba Firefox yang ini.
38:12Ya.
38:13Oke.
38:14Oke.
38:15Lihat, ini adalah bagian yang menyenangkan.
38:17Live recording.
38:19Biar saya coba.
38:21Bagi ini.
38:23Dan letakkan ini.
38:25Untuk sekejap.
38:30Oke.
38:31Biar saya coba.
38:32Saya punya video jika tidak berhasil.
38:35Oke.
38:37Banyak.
38:39Ya.
38:41Oke.
38:42Firefox.
38:44Tidak.
38:45Tidak ada kapasitas yang sepadan.
38:46Tidak ada kapasitas yang sepadan.
38:47Saya telah mengambil sesuatu yang bagus.
38:49Saya tidak menyalakan barang?
38:52Atau saya...
38:53Bisa menyalakan barang?
38:55Tidak.
38:56Oke.
38:57Tunggu.
38:58Satu kali terakhir.
38:59Saya memiliki...
39:01Saya memiliki demo lainnya.
39:05Oke.
39:08Siapa?
39:11Itu hal yang sama.
39:13MPM, run.
39:16Oh, ini adalah script tes, kan?
39:19Ini bukan script type.
39:21Ini juga JavaScript.
39:22Tidak.
39:23Maaf.
39:24Script tes.
39:25Bukan script type.
39:26Ini adalah script tes.
39:27Ya, ya, ya.
39:28Jadi ini seperti...
39:29Saya memiliki test runner dan test framework juga.
39:33Yang lain, saya tidak memiliki itu.
39:36Jadi, biar saya run MPM, run WDIO.
39:42Oke, yang ini.
39:49Oke.
39:50Ini juga tidak berfungsi.
39:51Jadi, yang ini run Safari.
39:52Oke.
39:53Jangan run Safari.
39:54Saya akan menunjukkan di file konfig.
39:59Oh, Safari.
40:00Ini Safari.
40:01Bagus, kamu bisa konfigurasi.
40:02Oh, ini Safari.
40:03Ya.
40:04Karena ini seperti web driver yang saya miliki.
40:06Saya bisa konfigurasi.
40:07Sebenarnya, saya bisa run multiple service.
40:08Tapi saya hanya mahu run seperti ini.
40:11Oh, wow.
40:12Biar saya lihat jika saya ada lagi...
40:15Ya, di atas.
40:16Ya.
40:17Seperti itu.
40:18Oke.
40:19Oke, mari kita coba.
40:20Oke, jelas.
40:21Oke, jelas.
40:22Ya.
40:24Oke.
40:25Oke.
40:26Ya.
40:27Jadi, ini bukan itu.
40:28Jadi, apa yang saya ingin menunjukkan adalah...
40:31Biar saya menunjukkan...
40:32Apakah saya punya...
40:33Postman?
40:34Ini laptop baru saya.
40:35Jadi, saya punya...
40:36Oke.
40:37Jadi, apa yang saya ingin menunjukkan adalah...
40:38Saya punya...
40:39Jadi, sekarang, jika...
40:40Biar saya...
40:41Biar saya...
40:42Ya.
40:43Jadi, apa yang saya ingin tunjukkan adalah...
40:44Jadi, apa yang saya ingin tunjukkan adalah...
40:45Jadi, apa yang saya ingin tunjukkan adalah...
40:46Jadi, apa yang saya ingin tunjukkan adalah...
40:47Jadi, apa yang saya ingin tunjukkan adalah...
40:48Jadi, apa yang saya ingin tunjukkan adalah...
40:49Jadi, sekarang, jika...
40:50Biar saya...
40:52Biar saya...
40:53Biar saya...
40:54Biar saya...
40:55Biar saya...
40:56Biar saya...
40:57Biar saya...
40:58Biar saya...
40:59Biar saya...
41:00Jadi, apa yang saya ingin...
41:01Jadi, apa yang saya ingin...
41:02Jadi, apa yang saya ingin...
41:03Jadi, apa yang saya ingin...
41:04Jadi, apa yang saya ingin...
41:05Jadi, apa yang saya ingin...
41:06Jadi, apa yang saya ingin...
41:07Jadi, apa yang saya ingin...
41:08Jadi, apa yang saya ingin...
41:09Jadi, apa yang saya ingin...
41:10Jadi, apa yang saya ingin...
41:11Jadi, apa yang saya ingin...
41:12Jadi, apa yang saya ingin...
41:13Jadi, apa yang saya ingin...
41:14Jadi, apa yang saya ingin...
41:15Jadi, apa yang saya ingin...
41:16Jadi, apa yang saya ingin...
41:21Jadi, apa yang saya ingin...
41:22Jadi, apa yang saya ingin...
41:23Jadi, apa yang saya ingin...
41:24Jadi, apa yang saya ingin...
41:25Jadi, apa yang saya ingin...
41:26Jadi, apa yang saya ingin...
41:27Jadi, apa yang saya ingin...
41:28Jadi, apa yang saya ingin...
41:29Jadi, apa yang saya ingin...
41:30Jadi, apa yang saya ingin...
41:31Jadi, apa yang saya ingin...
41:32Jadi, apa yang saya ingin...
41:33Jadi, apa yang saya ingin...
41:34Jadi, apa yang saya ingin...
41:35Jadi, apa yang saya ingin...
41:36Jadi, apa yang saya ingin...
41:37Jadi, apa yang saya ingin...
41:38Jadi, apa yang saya ingin...
41:39Jadi, apa yang saya ingin...
41:40Jadi, apa yang saya ingin...
41:41Jadi, apa yang saya ingin...
41:47Jadi, apa yang saya ingin...
41:48Jadi, apa yang saya ingin...
41:49Jadi, apa yang saya ingin...
41:50Jadi, apa yang saya ingin...
41:51Jadi, apa yang saya ingin...
41:52Jadi, apa yang saya ingin...
41:53Jadi, apa yang saya ingin...
41:54Jadi, apa yang saya ingin...
41:55Jadi, apa yang saya ingin...
41:56Jadi, apa yang saya ingin...
41:57Jadi, apa yang saya ingin...
41:58Jadi, apa yang saya ingin...
41:59Jadi, apa yang saya ingin...
42:00Jadi, apa yang saya ingin...
42:01Jadi, apa yang saya ingin...
42:02Jadi, apa yang saya ingin...
42:03Jadi, apa yang saya ingin...
42:04Jadi, apa yang saya ingin...
42:05Jadi, apa yang saya ingin...
42:06Jadi, apa yang saya ingin...
42:07Jadi, apa yang saya ingin...
42:08Jadi, apa yang saya ingin...
42:16Jadi, apa yang saya ingin...
42:17Jadi, apa yang saya ingin...
42:18Jadi, apa yang saya ingin...
42:19Jadi, apa yang saya ingin...
42:20Jadi, apa yang saya ingin...
42:21Jadi, apa yang saya ingin...
42:22Jadi, apa yang saya ingin...
42:23Jadi, apa yang saya ingin...
42:24Jadi, apa yang saya ingin...
42:25Jadi, apa yang saya ingin...
42:26Jadi, apa yang saya ingin...
42:27Jadi, apa yang saya ingin...
42:28Jadi, apa yang saya ingin...
42:29Jadi, apa yang saya ingin...
42:30Jadi, apa yang saya ingin...
42:31Jadi, apa yang saya ingin...
42:32Jadi, apa yang saya ingin...
42:33Jadi, apa yang saya ingin...
42:34Jadi, apa yang saya ingin...
42:35Jadi, apa yang saya ingin...
42:36Jadi, apa yang saya ingin...
42:37Jadi, apa yang saya ingin...
42:47Ya.
42:48Jadi, apa yang saya ingin...
42:49Jadi, apa yang saya ingin...
42:50Jadi, apa yang saya ingin...
42:51Jadi, apa yang saya ingin...
42:52Jadi, apa yang saya ingin...
42:53Jadi, apa yang saya ingin...
42:54Jadi, apa yang saya ingin...
42:55Jadi, apa yang saya ingin...
42:56Jadi, apa yang saya ingin...
42:57Jadi, apa yang saya ingin...
42:58Jadi, apa yang saya ingin...
42:59Jadi, apa yang saya ingin...
43:00Jadi, apa yang saya ingin...
43:01Jadi, apa yang saya ingin...
43:02Jadi, apa yang saya ingin...
43:03Jadi, apa yang saya ingin...
43:04Jadi, apa yang saya ingin...
43:05Jadi, apa yang saya ingin...
43:06Jadi, apa yang saya ingin...
43:07Jadi, apa yang saya ingin...
43:08Jadi, apa yang saya ingin...
43:09Jadi, apa yang saya ingin...
43:22Jadi, apa yang saya ingin...
43:23Jadi, apa yang saya ingin...
43:24Jadi, apa yang saya ingin...
43:25Jadi, apa yang saya ingin...
43:26Jadi, apa yang saya ingin...
43:27Jadi, apa yang saya ingin...
43:28Jadi, apa yang saya ingin...
43:29Jadi, apa yang saya ingin...
43:30Jadi, apa yang saya ingin...
43:31Jadi, apa yang saya ingin...
43:32Jadi, apa yang saya ingin...
43:33Jadi, apa yang saya ingin...
43:34Jadi, apa yang saya ingin...
43:35Jadi, apa yang saya ingin...
43:36Jadi, apa yang saya ingin...
43:37Jadi, apa yang saya ingin...
43:38Jadi, apa yang saya ingin...
43:39Jadi, apa yang saya ingin...
43:40Jadi, apa yang saya ingin...
43:41Jadi, apa yang saya ingin...
43:42Jadi, apa yang saya ingin...
43:43Jadi, apa yang saya ingin...
43:44Jadi, apa yang saya ingin...
43:45Jadi, apa yang saya ingin...
43:46Jadi, apa yang saya ingin...
43:47Jadi, apa yang saya ingin...
43:48Jadi, apa yang saya ingin...
43:49Jadi, apa yang saya ingin...
43:50Jadi, apa yang saya ingin...
43:51Jadi, apa yang saya ingin...
43:52Jadi, apa yang saya ingin...
43:53Jadi, apa yang saya ingin...
43:54Jadi, apa yang saya ingin...
43:55Jadi, apa yang saya ingin...
43:56Jadi, apa yang saya ingin...
43:57Jadi, apa yang saya ingin...
43:58Jadi, apa yang saya ingin...
43:59Jadi, apa yang saya ingin...
44:08Jadi, apa yang saya ingin...
44:09Jadi, apa yang saya ingin...
44:10Jadi, apa yang saya ingin...
44:11Jadi, apa yang saya ingin...
44:12Jadi, apa yang saya ingin...
44:13Jadi, apa yang saya ingin...
44:14Jadi, apa yang saya ingin...
44:15Jadi, apa yang saya ingin...
44:16Jadi, apa yang saya ingin...
44:17Jadi, apa yang saya ingin...
44:18Jadi, apa yang saya ingin...
44:19Jadi, apa yang saya ingin...
44:20Jadi, apa yang saya ingin...
44:21Jadi, apa yang saya ingin...
44:22Jadi, apa yang saya ingin...
44:23Jadi, apa yang saya ingin...
44:24Jadi, apa yang saya ingin...
44:25Jadi, apa yang saya ingin...
44:26Jadi, apa yang saya ingin...
44:27Jadi, apa yang saya ingin...
44:28Jadi, apa yang saya ingin...
44:29Jadi, apa yang saya ingin...
44:38Jadi, apa yang saya ingin...
44:39Jadi, apa yang saya ingin...
44:40Jadi, apa yang saya ingin...
44:41Jadi, apa yang saya ingin...
44:42Jadi, apa yang saya ingin...
44:43Jadi, apa yang saya ingin...
44:44Jadi, apa yang saya ingin...
44:45Jadi, apa yang saya ingin...
44:46Jadi, apa yang saya ingin...
44:47Jadi, apa yang saya ingin...
44:48Jadi, apa yang saya ingin...
44:49Jadi, apa yang saya ingin...
44:50Jadi, apa yang saya ingin...
44:51Jadi, apa yang saya ingin...
44:52Jadi, apa yang saya ingin...
44:53Jadi, apa yang saya ingin...
44:54Jadi, apa yang saya ingin...
44:55Jadi, apa yang saya ingin...
44:56Jadi, apa yang saya ingin...
44:57Jadi, apa yang saya ingin...
44:58Jadi, apa yang saya ingin...
44:59Jadi, apa yang saya ingin...
45:08Jadi, apa yang saya ingin...
45:09Jadi, apa yang saya ingin...
45:10Jadi, apa yang saya ingin...
45:11Jadi, apa yang saya ingin...
45:12Jadi, apa yang saya ingin...
45:13Jadi, apa yang saya ingin...
45:14Jadi, apa yang saya ingin...
45:15Jadi, apa yang saya ingin...
45:16Jadi, apa yang saya ingin...
45:17Jadi, apa yang saya ingin...
45:18Jadi, apa yang saya ingin...
45:19Jadi, apa yang saya ingin...
45:20Jadi, apa yang saya ingin...
45:21Jadi, apa yang saya ingin...
45:22Jadi, apa yang saya ingin...
45:23Jadi, apa yang saya ingin...
45:24Jadi, apa yang saya ingin...
45:25Jadi, apa yang saya ingin...
45:26Jadi, apa yang saya ingin...
45:27Jadi, apa yang saya ingin...
45:28Jadi, apa yang saya ingin...
45:29Jadi, apa yang saya ingin...
45:38Jadi, apa yang saya ingin...
45:39Jadi, apa yang saya ingin...
45:40Jadi, apa yang saya ingin...
45:41Jadi, apa yang saya ingin...
45:42Jadi, apa yang saya ingin...
45:43Jadi, apa yang saya ingin...
45:44Jadi, apa yang saya ingin...
45:45Jadi, apa yang saya ingin...
45:46Jadi, apa yang saya ingin...
45:47Jadi, apa yang saya ingin...
45:48Jadi, apa yang saya ingin...
45:49Jadi, apa yang saya ingin...
45:50Jadi, apa yang saya ingin...
45:51Jadi, apa yang saya ingin...
45:52Jadi, apa yang saya ingin...
45:53Jadi, apa yang saya ingin...
45:54Jadi, apa yang saya ingin...
45:55Jadi, apa yang saya ingin...
45:56Jadi, apa yang saya ingin...
45:57Jadi, apa yang saya ingin...
45:58Jadi, apa yang saya ingin...
45:59Jadi, apa yang saya ingin...
46:08Right?
46:09Chrome DevTools Protocol.
46:10This name actually tell you that it's actually initially designed for Chrome DevTools.
46:16Yeah.
46:17For Chrome DevTools like to help you to inspect your page, to debug your page.
46:21It's not initially designed for like testing.
46:24But slowly people just realize, "Oh, Chrome DevTools Protocol is so powerful, we can actually use it for testing as well."
46:32So that's when people...
46:33That's when we come up with the idea of Puppeteer and we publish it.
46:37So for CDP, it's different from the web driver.
46:45There's no browser driver in between.
46:47There's no middle person.
46:49So your automation tool help directly to Chromium-based browsers via the Chrome DevTools Protocol.
46:57So you issue the command via the CDP and you control the browser via WebSocket instead of HTTP.
47:05You use WebSocket in order to do so.
47:08So for example, given the same script, if you run it with Puppeteer, you open a new page, you set the viewport, you go to the page.
47:17So I will show you how this command will translate into CDP.
47:23So we can go to a new page with the CDP.
47:28And to test CDP, you can actually use...
47:33Let me see if I have the script here.
47:36Because I need to...
47:39I have some script.
47:44Oh, no, I don't have it here.
47:46Do I save it somewhere else?
47:48Give me a second.
47:50I need to get the script.
48:00Just a moment.
48:02I just need to get...
48:10The JSON script, right?
48:13Yeah.
48:18Not the JSON script.
48:23Okay.
48:25Never mind.
48:26Let me just show you how it works.
48:29So in the Chrome DevTools, what you can do is that you can go to this More Tools, and you can go to this Protocol Monitor tab.
48:42So you can open it.
48:44I don't know this.
48:46There's a lot of tools.
48:48A lot of tools.
48:50So if you don't see it, because this is an experimental feature, what you need to do is that you go to the Experian.
48:56Turn on the protocol monitor tab in order to turn on that.
49:00And then after that, you realize every action you do on the page, like in DevTools page on the page, it will generate some sort of a command here.
49:10So this is basically the CDP command.
49:12This method, this is something that we call is a CDP command.
49:16So let me see. So for example, if we let me go to a blank page first.
49:27Okay.
49:32What?
49:33Oh my.
49:34Let me start recording.
49:35So if I go to like a coffee page, a coffee card page, and I stop the recording, from here I can see that there's a page.navigate event.
49:50Page.navigate command.
49:52So what I can do here, I can actually issue a CDP command called page.navigate.
50:00And then, because I need to like command, I usually have a short version like the command.
50:11And then I need to send in the parameters.
50:15Parameters.
50:17And then I send in like the URL.
50:24So it's in regular JSON format.
50:30Yes, this is a regular JSON format.
50:32So I need to like, let me see if this.
50:37So let's go back here.
50:39And then if I run this, let's see.
50:49You need to close the curly braces.
50:54Oh yeah, you need one more curly braces closing.
50:58Oh yeah, you are right.
51:02This is a linter.
51:07Let me also like check, so I have another page.
51:14So page.navigate.
51:16Okay, I remember it quite correctly.
51:19But what I need to do is that I need to run a JSON.stringify.
51:27I think the JSON could be like capital letter, right?
51:30Yeah, capital letter.
51:33So I need to like copy this line of command.
51:37And then come back here, put it here, run it.
51:42No, no, no.
51:46Why, why, why, why?
51:49Oh, it's the capital P.
51:53So this is like the command.
51:56So it's like, if you think of it, it's actually similar to your HTTP.
52:00But it's like the command is writing in a different way.
52:04So this is what powers the Chrome DevTools recorder, right?
52:08That's how it can work.
52:11We can import and export the Chrome DevTools recorder feature, right?
52:17No, the Chrome DevTools recorder, behind the scene we are using Puppeteer.
52:22But Puppeteer behind the scene is using this protocol to control the browsers, to automate the browsers.
52:29Okay, and this use WebSocket protocol, right?
52:35Yes, that's why you need to be like it is a string and I think because it is WebSocket and you cannot have a long string in there.
52:45Okay, got it now.
52:48So like go back to, yeah, okay, live coding is partially success, good.
52:55So if you want to know the command that runs behind the scene, you can run like this, navigate like go to this page.
53:04Find the coffee, like evaluate with the story selector and you can click on the coffee.
53:10Like clicking on the coffee is like you need to like dispatch a mouse click like press on it and then you need to release the mouse.
53:18So like press and release is like two actions in like in CDP command.
53:23And then usually every time when the browsers like when the browsers will wait for the coffee.
53:30For example, this fine coffee, the browser will wait until they get the response and then send the response back to the automation tool.
53:40The automation tool doesn't need to do like long polling because it just doesn't need to use WebSocket.
53:47Yeah, so the automation tool can subscribe to the to the event and then just wait until the event finish, the browsers will notify like to the.
53:56Yeah, since it's a WebSocket connection, I think it's a keep alive.
54:03So the connection is still still live during this session.
54:08That's why it's faster. Yeah, all right.
54:11And just now I think I missed a slide.
54:13So if you want to like see if you run if you use Puppeteer, you run the script.
54:19If you want to see that what are the CDP command running behind the scene, you can turn on these these settings before it.
54:25You can use this put in like debug Puppeteer protocol and you just want to see the same protocol and then you run your script.
54:31It will just show you a list of CDP command that is getting caught during the session.
54:37If you want to like debug what you want to know exactly what are the protocols behind the scene.
54:42Yeah, so you can use that.
54:48If you compare like CDP and the WebDriver Classic, so CDP can have like low level control because it's using WebSocket.
54:57It can intercept the network request.
54:59So intercept is very important in like nowadays when we do test automation because you want to mock the API.
55:05You want to mock some of the API.
55:07And in WebDriver Classic, it's very hard for you to mock it because there's there's no way for you to mock it.
55:13So mock it is HTTP.
55:18And then in CDP, you also can simulate device mode.
55:21Like for example, you can say that you want to use a mobile device mode without actually needing a actual live device.
55:30And you can also simulate the geolocations.
55:32So basically whatever you can do in Chrome DevTools, you can use sort of this CDP in order to do that.
55:39And also you can get the console messages as well.
55:42So for WebDriver Classic, it cannot support like this low level control just because of the limitations.
55:52And yeah, so in summary, CDP is like fast.
55:55It's bi-directional.
55:56It has low level control, but it is not a standard like the Chrome, the Chromium, the Chrome and the Chromium team.
56:05When one day really we think like we should change a certain API, we can just do so.
56:10But for WebDriver, it's the standard.
56:15So everyone in the standard need to agree on a certain standard.
56:19Then only you can do the changes.
56:21Yeah.
56:22So and also like the CDP is like slightly complex, like the API is not that friendly because it's built for testing.
56:29So like in just now this example, like in the coffee, you can see that it's like two mouth press and release.
56:36Like there is no click event that you can just click on it.
56:39You need to like press and release.
56:40So like sometimes like this, this API is designed for testing, fine grind control.
56:46That's why it's slightly complex compared to compared to WebDriver.
56:51So now that we have no like both like then we are thinking like how can we improve like cross browser automation fundamentally,
56:59like not just Chromium browsers that you can automate, but you can automate in like all the other browsers as well.
57:06So if you take like the good thing about CDP, which is fast and low level control, and you have WebDriver classic,
57:14you can build for testing like the W3C standard and all the major browsers support it.
57:20You combine it, then that's why we come up with another like standard is called WebDriver by die.
57:27It's a cross browser automation protocol that built using WebSocket.
57:32So now that we learned that we know that we know that in test automation we need like to mock API,
57:39mock the network request and to simulate like device mode, like get console messages like all this.
57:45Then this thing need WebSocket so that then we need to like come up with a new standard so that this standard,
57:52this W3C standard should be implemented in not only Chromium browsers, but as a standard to all others browsers as well.
58:03So that's what the WebDriver by die is for. So it's a work in progress.
58:10So it's not so when we talk about standard, which means that we have like multiple major browsers collaborate together.
58:17To come up with, to decide like what are the, so like for example, just now we go through this WebDriver spec, right?
58:25So we have a WebDriver by die spec as well. So everything is in the public, like even the meeting notes.
58:34And then from here over here. And then from here like how do we handle errors and how do we handle like a certain API?
58:44And how should we call a certain event? Like what is a by die sessions mean?
58:50Yeah, so there is a lot of like discussion on how like what are the commands it should be defined and all.
58:57You need to define the same command across browser, right? Like what is click, what is mouse scroll and so on.
59:06Yes, correct. And not only the browsers, the automations too need to be able to involve in the discussion as well.
59:17Because they are the ones who know the automations like the tester and the automation tester the most.
59:25Because they know how like the API should work and they have the experience.
59:29So like Selenium and WebDriver IO, they are in part of the collaboration as well. As well as like testing provider like browser stack and source lab.
59:37It's also like in part of the discussion on to shape the WebDriver by die spec.
59:45Okay, then what does it take like to implement a new protocol, right? A new standard.
59:51So it means that we have we need to have this like specification process like this is a RFC process like maybe someone in the Chrome team or someone in the Firefox team.
1:00:01We propose something, then we need to like write down like sort of the spec and then ask for like everyone opinions.
1:00:08So everyone like give in their comments and then do a discussions.
1:00:12And then when everyone agree and then we go to the verification state, which you need to create a set of tests.
1:00:19And this WebDriver by die like the build PT, we call it Web Platform Test.
1:00:24So this test is implement in Python and this test is meant to be the same test can run in can run in different browsers.
1:00:34And I click on the link like this same set of tests.
1:00:38That's how you we make sure that the features is work across the different browser because you are using the same test, not like everyone create like a different test.
1:00:47Ya, ya, ya. Nice.
1:00:49Ya, sekirasin buat temen-temen yang lagi nonton.
1:00:52Mungkin dulu sebelumnya kita pernah bikin episode tentang interoperability.
1:00:59Nah, itu kita cukup banyak bahas Web Platform Test, tapi itu kan untuk web API yang kayak CSS, JavaScript.
1:01:06Nah, itu ini ternyata WebDriver by die juga ada Web Platform Testnya juga.
1:01:13Nah, kalau yang pengen lihat lebih jauh lagi tentang detail proses-proses di Web Platform Test, bisa cari episode entah berapa.
1:01:23Let's continue.
1:01:26Ya, then we go through the test and then the last thing is the implementation to pass the test.
1:01:33And for the implementation, we have a dashboard.
1:01:36So you can come to this dashboard to see like all each of the browsers like how many tests fail, how many tests pass.
1:01:43And you can see that even Safari has some progress.
1:01:47Yay!
1:01:49Chrome and Edge and Firefox. Actually Firefox has the best progress overall.
1:01:54Oh wow.
1:01:55It passed almost all the tests like Chrome and Edge like it's also like not bad.
1:02:00And you can see like this result is as of like March, I have one like go in and check again like the latest progress.
1:02:06Yeah.
1:02:07Okay. And then after that, now we already like added like some initial support in the in the automations to like Puppeteer, WebDriver, Selenium.
1:02:18If you use them, there are some initial support which is already available.
1:02:22So for example, the same use case just now when we get a page click on a coffee, what you need to do sometimes is that you want to catch the console error.
1:02:30So wherever you want your test is like you want to assert that there's no console error throw in the in the in the console.
1:02:39Like for example, you might have some additional process, additional API to call like your your analytic API or some API to do every testing that might feel behind the scene that you do not know.
1:02:51So you might have some some case you want to catch the console error.
1:02:55Previously, it's not possible with WebDriver.
1:02:58But with WebDriver by die, you you are able to do so.
1:03:02And what you need to do is that just now in the in my script, when I launched the browsers, I need to pass in the WebSocket URL, set it to true.
1:03:12And then after that, I can set the browser's name to Firefox or to Chrome, which is already supported.
1:03:19And then I can start monitoring the log message.
1:03:22I can say that when the I can subscribe to the session and then I subscribe to this event like log entry edit event.
1:03:31So wherever the browsers receive this message, I will I will see that I will see that if there's there's a message like sent to me, I will just assert it failed because I don't expect any message.
1:03:44So with WebSocket and WebDriver by die, you can do that because you can subscribe to the WebSocket method.
1:03:52Nice.
1:03:53Yeah.
1:03:54Nice. So you just we just listening events like.
1:03:59Yeah, because in WebSocket, it is an event driven way to even driven.
1:04:05It's always open.
1:04:06Yeah.
1:04:07Connection.
1:04:08Yeah.
1:04:09Yeah.
1:04:10And then like like this, like so you have load like this is the one first use case that we we we unlock that even more.
1:04:20So if you want to check out what is the WebDriver by the roadmap, you can click on this thing to check on the roadmap.
1:04:26And the good thing is that WebDriver Classic WebDriver by that is not to not really to replace like WebDriver Classic.
1:04:33They can interoperate with each other.
1:04:35So if you're if you're you're you're you're ready to change it.
1:04:40All right.
1:04:41You can add like WebSocket the WebSocket URL and it will work.
1:04:46Yes.
1:04:47So in Puppeteer, it is the same.
1:04:50So you can check the demo, learn more in this link and you can check the demo as well.
1:04:56And yeah, it's also if you want to like support the project, you can like give it a test and then you can share about it about the project.
1:05:07And you can if your favorite frameworks, for example, if you're using some others testing framework, you see that there's no bidirector support yet.
1:05:15You can also ask them or send a file issues or an issue to ask them, hey, are you implement like the bidirector support yet?
1:05:23We also like talk to some of the automations too.
1:05:26But if you you as a user asking them, then they know that all there is a need, then they will like prioritize that even more.
1:05:34Yeah.
1:05:35And you can learn more about the project.
1:05:37Yes.
1:05:39Yeah, that's that's all about the thing.
1:05:42What's the one last thing?
1:05:43There's two last things.
1:05:45Yeah.
1:05:46So like for the testing stuff, we this is not like WebDriver by that, but it's generally testing.
1:05:52We have a new headless mode in Chrome.
1:05:54So previously, the headless mode in Chrome is a it's like it's a tool is a two different kind of like implementation.
1:06:04So you thought that when you run headless mode, which means that you don't see the UI behind the UI and implement the same thing, right?
1:06:12It's actually not.
1:06:14Oh, no, it's actually not previously.
1:06:16It's actually like two different set of code you are running executable.
1:06:20Yes. Now that we merge them to become like really just hide the UI and the back end.
1:06:26Actually one engine.
1:06:28Yes, the same engine.
1:06:30So you can read more about it.
1:06:32And this actually helped to solve a lot of like some weird issues when you print like PDF or some canvas when you work on that.
1:06:40This actually solve some of the testing issues that currently people have.
1:06:44And the other one is the recorder. So you can like go to the recorder panel to record the test within the Chrome DevTools itself and export it.
1:06:54Yeah.
1:06:56But I think we are a bit slightly over time.
1:06:58Yeah, it's fine.
1:07:00Yeah.
1:07:01Oh, yeah.
1:07:03Very interesting.
1:07:05Okay. I have a question. Is create your own memes in your job description?
1:07:15No, not my job description, but I just feel like it would be kind of fun.
1:07:23Like sometimes the meme.
1:07:26Risa is going to adopt it in his next show.
1:07:30We need that. Yeah.
1:07:32There is an interesting question.
1:07:34From Fauzi.
1:07:36It was an interesting demo, of course.
1:07:38And I have a question.
1:07:40How do you maintain the automation code with several different test scenario?
1:07:44Maybe the context is like there is a session shared or something like that.
1:07:53So you mean in the context of WebDropbyDrop in general, how do we maintain the automation code with several different testing scenario?
1:08:02I don't quite get the question.
1:08:05The life code you did is the testing one, right?
1:08:09Yes.
1:08:10Describe and test something.
1:08:12Maybe he was Fauzi asking about different scenario, how to maintain the login, cookie, something like that.
1:08:25Yeah, like continuously testing different scenario across the platform.
1:08:32Or maybe, I don't know what the original question refers to, but possibly like different scenario.
1:08:39Can you add to cart as a locked in user, as an authenticated user?
1:08:44Or maybe you do the same action, but as a guest, then you have different assertion.
1:08:49Maybe like there should be a pop-up asking to login first or something like that, maybe. I don't know.
1:08:56I think...
1:08:59Fauzi, you still there? Please elaborate more.
1:09:03I think I know. I think it's different case of here.
1:09:07So in this case of testing scenario, I think it's usually used in end-to-end testing.
1:09:14And its scenario is on-session. So it execute one scenario from beginning to end.
1:09:23And again, close the browser, create another session, test another scenario.
1:09:28So it's not going to be mixed actually. So it has to be like end-to-end.
1:09:34And usually end-to-end testing is based on a business use case.
1:09:44So if it's a block, can it run, write a block from beginning and until the article is published.
1:09:53Or if it is a login, just execute the login and that's it.
1:09:58So it's a different session.
1:10:00Actually it's an interesting question. So it's actually how you structure your...
1:10:05How do you maintain different scenario like if you...
1:10:08Some of the flow you really need to log in and then continue.
1:10:11How do you automate the end-to-end test? Do you every time run, create a new user and then you log in and over and over again?
1:10:18I think this really depends on how you structure your test and your...
1:10:21You know that there's a test pyramid and there is different way of testing.
1:10:26Maybe if you have your unit test to test most of your function like the add to cart.
1:10:32The modular one.
1:10:34Yes, the modular one. And you know that there is definitely successful already.
1:10:38What you want to test at the end, you don't need to test the set path, the field scenario.
1:10:45Maybe you have 10 field scenario and 2 successful scenario.
1:10:49But what you want to test in the final end-to-end test, end-to-end test usually the top is the last one.
1:10:55So what you need to test, you don't need to test like 10 field scenario and 2 successful scenario.
1:11:01What you need to test is that is everything like this flow working?
1:11:04Maybe you just pick like one or two scenario to test like end-to-end.
1:11:08Because you have all the other stuff like covered at the unit test which can run even faster because you don't need to launch a real browser to run it.
1:11:16So if you have that to cover your base and then your end-to-end really means like you...
1:11:21...from register to log in and then to add to cart and to successful.
1:11:25Maybe this is just one test that you are doing.
1:11:28Instead of like doing the 10, like repeating what you need to do in the unit test or you just skip unit test and do this.
1:11:35I think like this is not the way because it's slower.
1:11:39Don't have too much end-to-end testing otherwise it will burn your GitHub action budget.
1:11:44Yes, correct.
1:11:47I think we just have to go now.
1:11:52Because in Munich you still in working hour, right?
1:11:59Thank you so much for coming.
1:12:03Thank you so much for chatting with us.
1:12:06Thank you for hosting me.
1:12:09Maybe see you another episode maybe.
1:12:13Thank you. Bye bye.
1:12:17Thank you. Bye.
1:12:20Kita mau lanjut, Nak?
1:12:22Ya boleh. Kita ada beberapa pertanyaan. Kita selesaikan pertanyaannya.
1:12:26Kita selesaikan.
1:12:27Oke.
1:12:29What language? Sepertinya C+ ya?
1:12:33Pasti low-level language. Cuma kita nggak tahu apa.
1:12:37Karena bukan kita yang ngulis.
1:12:39Terus, oh ya kita kan punya temen juga nih yang kerjanya adalah engineer browser.
1:12:46Iya, si...
1:12:48Rakinah?
1:12:49Rakinah, iya, iya, iya.
1:12:51Oh iya, iya.
1:12:52Keren gak ya?
1:12:54Mudah-mudahan ya.
1:12:56Coba kita tanya Rakinah.
1:12:58Kalau masih, semoga.
1:13:00We love that CDP is easily readable and we can check action.
1:13:04Ya, betul, betul. Setuju, setuju.
1:13:06Kita pakai bahasa Indonesia aja sekarang ya. Capai juga bahasa Inggris.
1:13:10Iya. Tapi bagus kalau ini ya.
1:13:14Jadi...
1:13:16Keren sih.
1:13:18Iya. Kedepannya...
1:13:20End-to-end testing akan semakin mudah.
1:13:22Betul. End-to-end testing.
1:13:24Semakin jepang juga pasti.
1:13:26Web scraping juga semakin mudah.
1:13:28Web scraping juga semakin gampang.
1:13:30Terus import, export, itu gampang kayak apa sih, komen-komennya.
1:13:36Tapi kan semua bisa di-export.
1:13:38Itu kan JSON doang ya, ya udah bisa di-share lah.
1:13:40Misalnya kita punya project, ya kita punya team, atau apa.
1:13:44Kita bisa men-streamline proses, kayak proses-proses end-to-endnya itu kan.
1:13:49Dengan karakter...
1:13:50Iya, jadi lebih transparan di belakang layar ya.
1:13:52Jadi bisa lebih mudah didibug juga.
1:13:54Dan apa, nggak vendor log-in gitu sama tooling kan, maksudnya mau kita pake testing tools apa.
1:14:02Kalau udah ada standar thing streamline dan format yang kayak library agnostik,
1:14:08itu kan lebih memudahkan kedepannya.
1:14:12Iya. Wah seru ya.
1:14:14Ini Fauzi, pertanyaannya sudah terjawab belum ya?
1:14:18Kalau belum, kita bahas lagi aja.
1:14:22Iya bahasnya sama kita gitu.
1:14:24Soal tau aja kita.
1:14:26Pengalaman pakai end-to-end testing kan, kayak pakai Cypress itu.
1:14:32Kita jangan tes apa yang bisa kita tes dengan unit testing.
1:14:36Nggak ada gunanya misalnya ngetes contohnya ya.
1:14:41Komponennya ke-render apa nggak, alert-nya misalnya kayak FOB.
1:14:46Kalau nggak ada isinya, muncul nggak log-in test-nya.
1:14:49Itu nggak perlu pakai end-to-end testing.
1:14:51Karena itu bisa di handle pakai unit testing.
1:14:55Jadi nggak perlu.
1:14:57Ini kayaknya ada di Ken C. Dots itu loh.
1:14:59Beliau bikin artikel apa sih, testing Trophy ya.
1:15:02Testing pyramid.
1:15:04Testing pyramid, iya.
1:15:06Itu cari sendiri.
1:15:08Itu penjelasannya bagus sih, maksudnya tentang area-area wilayah-wilayah.
1:15:12Bukan pyramid dia, testing Trophy kalau si Ken C. Dots.
1:15:15Oh bener, gua bilang Trophy tadi.
1:15:17Iya, kalau testing pyramid itu si Martin Rauler.
1:15:20Ini awalnya ada di sini ya.
1:15:24Originalnya ini.
1:15:26Mana dia?
1:15:28Kayak interpretasinya dia buat web testing.
1:15:31Om Martin ini banyak banget ini teorinya ya.
1:15:35Testing Trophy ya.
1:15:39Kita undang ya gimana.
1:15:41Memang bisa, emang kenal.
1:15:46Kenalan lah, nggak kenal nih.
1:15:48Kenalan.
1:15:50N2N itu paling atas.
1:15:52Jadi apa yang bisa di tes sama yang bawa-bawa.
1:15:54Bawa aja, lebih cepet soalnya.
1:15:57Iya.
1:15:59Kalau nggak perlu N2N ya unit testing cukup.
1:16:01Ya udah, unit testing aja.
1:16:03Karena semakin ke atas itu semakin mahal.
1:16:06Semakin expensive.
1:16:08Bahkan M1 aja bisa jadi F1 kan.
1:16:12Apalagi yang Intel ya.
1:16:14Kalau Intel jadi drone.
1:16:18Jadi drone dia tau.
1:16:20Jadi drone terbang.
1:16:22M1 aja udah jadi F1.
1:16:25Nah biasanya kalau N2N itu lebih ke arah business critical.
1:16:35Kalau saya implementnya di tim.
1:16:38Jadi apa yang penting, contoh kalau e-commerce.
1:16:41Make sure add to cart sampai check out berhasil.
1:16:46Itu kan business critical ya.
1:16:49Jadi jangan sampai ada regression.
1:16:51Kalau testing misalkan CSS-nya warnanya merah.
1:16:55Atau kalau misalkan error itu warnanya merah.
1:16:58Atau warnanya kuning.
1:17:00Itu visual testing.
1:17:02Beda lagi ya.
1:17:04Itu bisa pakai visual regression testing.
1:17:06Bisa.
1:17:08Itu kalau yang terkenal sih, Chromatic itu perusahaannya.
1:17:13Perusahaannya yang bikin storybook.
1:17:16Ya kalau storybook kan open source kan.
1:17:18Itu library open source yang bisa dipakai.
1:17:20Tapi Chromatic tuh bayar ya.
1:17:22Itu service ya.
1:17:24Kalau mau...
1:17:26Oh ada free tier-nya kok.
1:17:28Ya itu ada free tier-nya ada.
1:17:32Ada free tier.
1:17:34Soalnya gimana ya visual regression testing.
1:17:38Itu juga yang di-test.
1:17:40Sebaiknya yang business critical juga sih.
1:17:44Bayangin deh, logikanya misalnya post berita.
1:17:48Kalau cuma geser 1 pixel atau apa.
1:17:51Kayaknya nggak se worth it itu ya.
1:17:53Buat set up testing sendiri.
1:17:56Tapi kalau misalnya ada apa yang hilang atau ketutupan.
1:17:59Ya mungkin itu...
1:18:01Ada yang free-nya.
1:18:03Khusus untuk react ya.
1:18:05Backstop JS itu bisa.
1:18:08Apa-apa?
1:18:09Backstop JS.
1:18:12Backstreetboy.
1:18:14Backstop.
1:18:15Backstop.
1:18:17Backstop JS.
1:18:19Backstop JS.
1:18:21Ini ya.
1:18:23Oh bagus nih.
1:18:25Ini udah ada.
1:18:27Oh ini juga pakai playwright dan property ya.
1:18:31Jadi coba ke GitHub-nya aja.
1:18:35Ke GitHub-nya aja ada screen-nya.
1:18:37Ada screenshot-nya maksudnya.
1:18:40Jadi bisa lihat comparison before-after aja.
1:18:45Ini untuk visual regression-nya.
1:18:48Nah ini khusus untuk CSS-CSSan.
1:18:52Kalau untuk integration testing, ya banyak kan.
1:18:58Itu bisa pakai yang test cafe.
1:19:02Nah kalian ini cari perkara tuh.
1:19:06Udah minta diundang Martin.
1:19:09Tiki Martin maksudnya.
1:19:11Nggak punya link-nya ke sana.
1:19:13Boleh, boleh.
1:19:14Mention aja di Twitter.
1:19:16Siapa tahu dia mau datang.
1:19:18Ini acara apa nih? Penasaran.
1:19:20Martin.
1:19:23Terus apa lagi?
1:19:25Jadi temen-temen kalau testing biasanya pakai tools apa?
1:19:28Ada yang pakai Cypress, ada yang pakai playwright sekarang ya.
1:19:32Yang kekinian ya.
1:19:34Terus apa lagi?
1:19:35Kalau dulu-dulu ya tadi kan WebDriver.
1:19:37Atau unit testing.
1:19:39Atau masih di unit testing.
1:19:42Atau nggak nge-test.
1:19:44Nggak pakai testing.
1:19:46Ada berani sekali.
1:19:48Manual testing.
1:19:50Nggak pakai QA.
1:19:52Atau...
1:19:55Kita sendiri manual testing kita buka.
1:19:57Kita ngerti.
1:19:59Pak, pakai bug driven development.
1:20:03Kalau nggak ketemu bug, nggak di develop ya.
1:20:06User report bug driven development.
1:20:08Jadi nunggu ada error yang dilaporin oleh user.
1:20:12Iya.
1:20:14Iya, iya, iya.
1:20:16Apa, si WebDriver ini ya tadi ya untuk memudahkan testing.
1:20:23Terutama yang end-to-end.
1:20:25Juga untuk web scraping juga sangat berguna.
1:20:30Ini ada yang pakai debugging buat testing.
1:20:32Ini gimana maksudnya?
1:20:35Pakai debugger ya, pakai debugger.
1:20:38Iya, pakai debugger.
1:20:40Dibugger.
1:20:41Itu bug driven development juga.
1:20:43Cuma belum dipublish saja.
1:20:47Kita harus nunggu debugnya beratikan.
1:20:51Oke, kalau gitu.
1:20:53Bahasan materi kita sudah mulai mengering, sudah habis.
1:20:57Buat teman-teman yang mau suggest tadi kayak misalkan ini.
1:21:01Mau suggest om Martin, boleh.
1:21:03Silakan kita terima, kita tampung dulu.
1:21:06Kalau misalkan nanti teman-teman.
1:21:08Atau mau nawarin diri seperti featuring, minta tampung.
1:21:11Boleh, dengan senang hati kita terima.
1:21:13Kalau namanya Martin, mungkin bisa cepet.
1:21:16Kalau namanya Martin, mungkin ada Mas Muhammad Martin.
1:21:22Boleh suggest ke kita, nanti kita tampung.
1:21:27Belum tentu diwujudkan semua, kalau bisa ya kita akan wujudkan.
1:21:31Bisa ke bit.ly/ngobrolinweb.
1:21:33Untuk malam ini kita udahan dulu berhubung kafenya Eka Dombu Tutup.
1:21:39Jadi kita udahan dulu, kita ketemu lagi minggu depan insyaallah.
1:21:45Di hari Selasa jam 8 malam, waktu Indonesia Barat.
1:21:48Sampai jumpa, selamat malam, bye bye.
1:21:53Ayo dadah terus, dadah terus.
1:21:55Belum, belum, belum.
1:21:57Mana ini bannernya?
1:21:58Bannernya mana?
1:21:59Kok nggak ada, oh brandnya.
1:22:00Closing, closing.
1:22:09Oke.
1:22:13Eh, ini nggak harus nunggu upload kan ya?
1:22:15Dadah.
1:22:16Ya ini live.
1:22:17Oke.
1:22:18Bye bye.
1:22:19Bye.
1:22:20Ya bye.
Suka episode ini?
Langganan untuk update episode terbaru setiap Selasa malam!
Episode Terkait
12 Mei 2026
Bedah Web - Ngobrolin WEB
Berhubung banyak yang submit, malam ini kita akan kembali membedah beberapa situs. Penasaran gimana pendapat para pakar ...
5 Mei 2026
Zona Waktu - Ngobrolin WEB
Salah satu topik yang sebagian besar dari kita banyak tergocek nih. Pernah tergocek dengan urusan timezone, dan daylight...
27 Apr 2026
Vite+ - Ngobrolin WEB
🕸️ Selasa malam waktunya #ngobrolinweb! Malam ini mari kita bedah vite+ sebuah produk baru dari void0, perusahaan yang...