 Jadi hari ini, saya ingin bercakap tentang bagaimana untuk mencari ui tesibul. Kerana, saya rasa masalah yang saya nampak apabila saya bertemu banyak orang yang mencari ui tesibul. Sebenarnya, mereka ada masalah mencari ui tesibul kerana tidak mencari cara yang terdapat. Jadi, saya rasa banyak orang menyebabkan bagaimana untuk membuat ui tesibul di tempat pertama. Dan jawabannya sangat mudah, yang saya akan beritahu anda dalam sejauh sekejap dan melakukan permintaan. Tetapi, sekejap sedap, nama saya Shilin. Dan apa yang saya lakukan adalah saya seorang co-founder dan CEO ui tesibul. Sebelum saya bekerja di ui tesibul, saya sebenarnya membuat pembangunan sebuah pembangunan di dalam startup lainnya. Sebelum itu, saya telah membuat aplikasi untuk sebuah masa yang panjang. Saya melihat era jadekari. Saya telah menulis kode ui tersebut di jadekari. Dan itu adalah masa semasa banyak orang mencari framework baru seperti AngularJS. Sebelum jadekari, saya rasa sebelum jadekari, ada jadekari knockout dan MLJS. Dan beberapa perkara lain. Jadi, saya ingat mempunyai ui tesibul yang saya mencari kerana kode ui tersebut seperti spaghetti. Sebenarnya, kode ui tersebut adalah bahawa saya pernah menulis kode ui tersebut. Sebenarnya, saya sebenarnya menulis kode ui tersebut dengan kecemasan sebelumnya. Sebelum saya kembali dari malam, saya baru mencari kode ui tersebut. Jadi, itu sebabnya saya melakukan banyak test sekarang. Jadi, itu adalah lelaki yang saya belajar. Tolong menulis kode ui tersebut. Sebelum saya menulis kode ui tersebut dengan banyak test-nya. Saya kembali node-developer saya mendengar ada ui tersebut. Sebenarnya saya melukis kode runas, dan banyak yang di universiti atau mempunyai pemutusan dengan orang sendiri. Banyak orang misal membuat kode runas. Menurut saya, jika kita melihat banyak peraturan industri, Mereka mempunyai kode yang mempunyai selama 30% Sebelumnya, mereka berlainan, mempunyai, mempunyai, atau mempunyai kode yang buruk Jadi sesuatu yang kuat di sini, kita patut mempunyai lebih banyak kode yang lebih buruk dan mempunyai kode yang berlainan Apabila ia berlainan, bagaimana orang berfikir tentang penggantar di depan dan di depan, saya percaya ia sangat berbeza Jadi bagaimana orang berfikir tentang penggantar di depan, apabila kita mempunyai penggantar di depan, walaupun penggantar itu sama kadang-kadang Oh, sepanjang masa apabila saya melihat kode saya, saya akan melihatnya dan kata, hey, ini kode, bagaimana saya dapat membuatnya lebih baik? Bagaimana saya dapat membuatnya lebih baik? Bagaimana saya dapat membuat kode yang lebih berlainan? Jadi ini adalah cara kita biasanya berfikir tentang kode untuk penggantar Tetapi apabila anda melihat, apabila anda bekerja di depan dan kadang-kadang, ia adalah penggantar yang berlainan Seperti tidak adalah masalah saya Mereka boleh hanya mempunyai botan, ia sangat mudah Sebenarnya, ia tidak adalah sebuah kode yang lebih sulit untuk melihat penggantar QA, penggantar Front-end kode, untuk melihat penggantar UI Jadi, mari kita melihat bagaimana banyak penggantar UI yang berlainan Jadi ini adalah penggantar UI yang saya melihat dan ia biasanya berlainan dari XPUB Ada banyak kode yang boleh digunakan di sana, tetapi saya hanya akan menggunakan penggantar selanium Jadi jika anda melihat ini, ia menggunakan banyak XPUB Ya, tentu saja, ia berlainan jika penggantar akan berlainan sekarang Dan apa yang akan berlainan tiga minggu nanti? Apa yang dia lakukan lagi? Itu berlainan Kenapa? Apa yang dia lakukan? Mari kita melihat apa yang dia lakukan lagi Saya tak ingat Jadi itu adalah hari yang biasa untuk penggantar UI Kualiti QA yang menulis penggantar UI Biasanya, dia akan kembali ke penggantar UI untuk melihat penggantar berlainan dan melihat apa yang dia lakukan Mungkin anda menulis komentar untuk melihat Tetapi menggunakan XPUB untuk menggantar UI Ia bukan praktis yang baik Saya biasanya menyebabkan orang tidak untuk melakukan itu Kerana XPUB berlainan, terutamanya jika anda menggunakan penggantar Dengan mengambil posisi penggantar untuk penggantar Apabila penggantar berlainan, membuat perubahan kepada kode Mungkin ia akan berlainan, ia sangat berlainan Jadi kita patut menggunakan penggantar XPUB Kadang-kadang jika saya tanya penggantar Boleh anda tidak menggunakan penggantar XPUB? Bagaimana perlainan yang anda boleh menggunakan untuk menggunakan penggantar Mereka berkata, tidak, ini kita menggunakan icon yang tidak ada perlainan Jadi jika icon ini ada ID yang anda boleh menggunakan untuk menggunakan Kerana penggantar tidak mengubah ID yang banyak Mereka berkata tidak, penggantar tidak menggunakan ID untuk menggunakan ID Bagaimana anda dapat menggunakan penggantar yang sangat unik untuk menggunakan Untuk pakaian yang anda mahu menggunakan icon yang anda mahu menggunakan? Pernah, penggantar tidak menggunakan penggantar unik untuk menggunakan ID Pada pakaian yang tidak menggunakan login, button, menu di hamburger Mereka menggunakan menu, hanya penyakit icon hamburger Jadi saya tidak boleh menggunakan untuk menggunakan Jadi di India, ini cara mereka selalu menggunakan X-Power untuk menggunakan penggantar Dan menggunakan banyak masa menggantar penggantar yang berlainan Kerana UI tidak diperlainan dalam cara yang diperlainan Jadi bagaimana kita menggunakan penggantar UI yang diperlainan? Jika anda ingin mengenai Kenapa banyak penggantar UI berlainan dalam cara ini? Kerana penggantar UI tidak diperlainan dalam cara yang diperlainan Dan saya rasa penggantar penyakit penyakit mengenai cara kita menggunakan penggantar UI yang lebih terlainan Jadi mungkin ada beberapa orang pada merasakan Macam mana penggantar berlainan berlainan ke penggantar UI? Jika anda ingin mengenai Seperti perbezaan kita di antara penyakit kanan yang saya Sym seraitat Dan pun dengan perbezaan penyakit penyakit kanan Kerana merasakan penggantar kanan yang mengenai ia berguna pada web page. Ia mengawal barna navigasi anda. Mungkin ia mengawal apa yang ada di dalamnya. Dan ia beritahu penggunaan, penggunaan yang dapat diperlihatkan atau mungkin seseorang yang hanya menghubungkan screens sehari-hari dan perlu menggunakan screen reader untuk mengawal web page. Screen reader ialah melakukan perkara yang sama sebagai penggunaan UI untuk mengawal web page anda untuk mencari apa yang ia buat untuk menginterpret dan beritahu penggunaan apa yang perlu dilakukan dengannya. Jika anda mengawal penggunaan UI anda, penggunaan UI anda lebih mengawal sebab ia mengawal penggunaan. Bagaimana anda mengawal penggunaan UI anda? Dan ia sangat mudah untuk mengawal penggunaan UI yang lebih mengawal. Saya akan memberikan beberapa contoh untuk anda. Ini boleh menjadi sedikit penyakit, tetapi saya akan memberikan beberapa contoh yang penting untuk mengawal penggunaan UI yang sangat mengawal sebab ia telah dikawal. Jadi, penggunaan penggunaan saya telah mengawal banyak penggunaan yang beritahu saya bagaimana saya mengawal penggunaan ini di sini dan apabila penggunaan penggunaan tidak dikeluarkan, saya tidak tahu kenapa. Dan kelihatan adalah sebab penggunaan tidak mengawal sebab penggunaan tidak mengawal penggunaan HTML. Mereka mengawal penggunaan atau penggunaan untuk kelihatan yang patut dikeluarkan. Jadi, jika anda mahu memastikan yang anda mahu mengawal yang anda mahu mengawal, anda patut mengawal penggunaan HTML. Jadi, mengawal bahagian yang sepatutnya adalah bahagian atau jika sepatutnya adalah sebuah link, mengawal sebuah tag angkat. Jadi, Tokopedia sebenarnya melakukannya dengan baik. Jadi, jika anda melihat kelihatan di sini yang mempunyai produk, anda mungkin tidak fikir itu adalah link kerana ia tidak hanya menghubungi saya, tetapi itu sebenarnya kelihatan di dalam diri. Tetapi, membuat kelihatan untuk kelihatan ini, yang saya telah lakukan semasa saya menjadi kelihatan yang lebih nafis kelihatan di depan, saya hanya membuat kelihatan di dalam diri. Tetapi di sini, mereka sangat senar. Mereka sebenarnya membuat kelihatan di dalam diri dan kelihatan di dalam diri adalah kelihatan angkat. Jadi, ia membuat kelihatan yang mungkin untuk kelihatan kelihatan untuk membuat sebuah kelihatan yang boleh dibuat. Jika anda kata, saya klik di tumbuh, anda akan cuba mencari kelihatan ini untuk mengklik. Jadi, terdapat banyak komponen kelihatan yang diperlukan. Jadi, orang biasanya suka mengusahkan botan radio anda, botan selebih, botan cek anda, kerana ia nampak berbeda dan botan radio akan berbeda daripada botan radio krona. Kami mahu botan radio mempunyai konsisten supaya ia mempunyai konsisten brand. Kemudian, banyak pembangunan UI mereka menulis komponen kelihatan mereka dengan javascript. Jadi, itu membuatnya sangat susah untuk mencari kelihatan kelihatan. Kerana tidak ada kelihatan natif. Tanpa kelihatan natif, ia juga sangat susah untuk pembangunan kelihatan dan memperkenalkan kelihatan. Jadi, ia sangat susah untuk kelihatan pada masa yang sama. Jadi, apa yang anda patut lakukan adalah, ada banyak cara yang anda dapat membuat kelihatan kelihatan anda lebih kelihatan. Jadi, jika anda mahu memperkenalkan, anda patut memperkenalkan kelihatan natif untuk kelihatan anda. Jadi, setiap MB sebenarnya ada salah satu kelihatan yang terbaik untuk kelihatan. Sebenarnya, mereka mempunyai kelihatan hanya untuk kelihatan dan kelihatan sendiri. Untuk kelihatan tersebut, saya hanya menggunakan kelihatan tersebut untuk memperkenalkan kelihatan tersebut untuknya. Jadi, mereka bermula salah dengan sebuah kota. Sebenarnya, anda boleh hanya memperkenalkan kelihatan. Sekarang, satu-satunya kelihatan yang lain untuk banyak kelihatan tersebut adalah kelihatan tersebut. Jadi, jika anda tidak mempunyai kelihatan ini sendiri, bagaimana saya akan mempunyai 1991, April 3, saya akan mempunyai Pada Januari 2019, saya akan memperkenalkan kembali ke lamppapun. Mungkin saya akan mempunyai kelihatan. Assalamu'ala, saya harus memperkenalkan kelihatan untuk memperkenalkan kelihatan 1900 atau melepaskan kembali ke dalam 1991. Sekarang, saya akan memperkenalkan kelihatan sepanjang bulan April yang akan memperkenalkan saya dan saya perlu mempunyai. Jadi,syumpa anda, saya akan memperkenalkan kelihatan ini. Dan ia seperti 3 April 1991. Apa jika saya mahu memperkenalkan kelihatan tersebut? Saya akan memperkenalkan kelihatan yang lain, ada yang lain untuk menggunakan kesejaian jika ada keadaan lain, hanya untuk mengajar keadaan lain. Jadi, ia tidak sangat praktikal untuk pembangunan atau memperkenalkan keadaan, untuk menggantikan masa untuk mengajar keadaan. Jadi, apa yang anda patut lakukan sebagai pembangunan keadaan atau untuk mengadakan pembangunan keadaan, adalah, tolonglah, menambah keadaan, sebab ia hanya memasang keadaan yang sama dengan keadaan untuk pembangunan keadaan. Jadi, saya dapat mengajar keadaan. Dan orang yang sedang dapat juga memasang keadaan untuk memasang keadaan sehingga mempunyai keadaan. Jadi, satu lagi perkara yang kita boleh membuatkan untuk memasangkan, adalah jika anda ingin memasangkan keadaan radio dan memasangkan keadaan, anda boleh memasangkan keadaan yang sepatutnya. Jadi, saya tidak mempunyai sebuah contoh yang dapat memasangkan keadaan terutama dari MDN. Jadi, MDN adalah sebuah contoh yang baik. Jadi, mari kita lihat anda mempunyai menu keadaan. Dan anda tidak mahu memasangkan keadaan dan memasangkan keadaan. Mungkin anda akan mempunyai satu lagi perkara. Jadi, anda mempunyai UI, UI, UI, listan yang dikejar, dan keadaan listan yang berbeda. Jadi, listan yang dikejar sepatutnya mempunyai keadaan. Jadi, anda harus menggunakan roda raya untuk mengindikannya ini adalah keadaan yang orang boleh memasangkan keadaan yang secara kelihatan yang orang boleh memasangkan. Jadi, beberapa test dan jens dapat memasangkan keadaan dan memasangkan, Ini adalah bagaimana ui ini sepatutnya berjaga-jaga. Jadi penyelesaian yang terdapat, saya juga dapat mengambil keadaan ini juga. Jadi, ada satu yang sangat komong yang orang akan mencubanya adalah menggabungi ikon. Macam mana saya mencubanya ikon? Jadi, jika anda... Jadi, dalam penyelesaian yang awal, saya akan bercakap tentang menu hamburger. Ia adalah salah satu ikon yang paling komong. Dan juga ikon model yang terdapat. Ia adalah sebuah ikon yang lain yang orang lupakan untuk menggabungi ikon. Ia sebenarnya sangat mudah untuk mengambil ikon untuk ikon ini. Jadi, apa yang saya boleh lakukan adalah... anda boleh menggunakan attribute titik atau attribute area. Dan ada beberapa attribute area yang lain anda boleh menggunakan untuk menggabungi ikon. Jadi, Google sebenarnya melakukannya sepatutnya. Jika anda melihat ikon Google yang membuat ini, ada 9 sepatutnya di sini. Apa yang mereka lakukan adalah menulis pembentangan Google App di sini. Jadi, jika anda mempunyai ikon, jika anda mempunyai ikon, anda boleh mengenai... apa yang ini ada 9 sepatutnya? Anda akan memberikan dua tibet untuk mempunyai Google App. Saya akan melihat dan mempunyai apa yang ia sebenarnya lakukan. Sekarang, screen reader juga tahu bahawa ini adalah Google App. Test Engine juga tahu bahawa ini adalah Google App. Jadi, anda boleh menyebabkan Google App untuk mencoba kode anda. Jadi, bagaimana anda dapat memperbaiki test selenium anda? Jika anda ingin melihat sebuah contoh, ia berkompat dengan pembentangan yang sangat berlaku, pembentangan yang kami lakukannya. Anda boleh memperbaiki dan membuat test ini lebih berlaku di selenium dengan menggunakan titik Google App untuk menggunakan titik yang anda ingin test oleh X-parg. Walaupun anda hanya menggunakan X-parg, ini masih lebih berlaku. Jika saya balik ke test saya lagi, 3 bulan lagi atau 3 bulan lagi, saya akan berkata, Ya, saya tahu apa yang ia lakukan. Saya mencoba Google App ikon untuk membuka menu sendiri. Jadi, ada beberapa test engine yang dapat mencoba kode anda. Jadi, saya sebenarnya akan menunjukkan bagaimana anda mencoba untuk membuka menu sendiri. Jadi, ini adalah test yang cukup mudah. Saya sudah mencoba. Biar saya melihat jika saya dapat mencoba. Jadi, URlicious juga sangat berlaku pada menu sendiri. Jadi, tanpa menggunakan X-parg yang sangat berlaku, URlicious boleh membuka, jika saya tidak dapat mencoba Google App di deskripsi sendiri, saya akan mencoba jika ia boleh menjadi ikon. Jadi, ia akan mencoba membuka, anda menggunakan area, label, anda menggunakan tool tip, anda menggunakan AngularJS, atau sebagian yang lain. Mereka mengawal titik anda dengan titik original, titik data. Jadi, ia benar-benar menjadikannya supaya anda dapat mencoba dengan cara yang sangat mudah. Jadi, di sini, saya hanya perlu mencoba Google Apps, saya melihat bapak. Jadi, di sini, ia mencoba, okey, Google Apps, saya tidak melihat Google Apps di deskripsi sendiri, tapi terlihat seperti ini ada dua titik yang di Google Apps, saya akan mencoba itu dengan kemungkinan. Jadi, kemungkinan itu adalah sesuatu yang tidak hanya mencoba pergerakan pergerakanan, atau mencoba... ia juga mencoba orang yang ingin menggunakan kemungkinan juga. Jadi, seluruhnya, saya dapat mencoba banyak komponen UI yang dapat dibuat dengan cara yang lebih terbaik. Tapi seluruhnya, kemungkinan itu adalah sama. Sama, mencoba menggunakan kemungkinan yang lebih mudah menggunakan kemungkinan atau kemungkinan untuk menggunakan kemungkinan sendiri dan mencoba. Dan jika anda ingin mencoba komponen anda, kemungkinan, menjelaskan kemungkinan yang lebih mudah untuk menjadi kemungkinan. Jadi, deskripsi dan pergerakanan yang dapat mencoba. Sekarang, untuk kemungkinan icon, gunakan server- IMAJicks yaitu memanjakan label-4 dan menjelaskan label ARAR. Tiada banyak cara dan kemungkinan dia dust scoop pergerakanan dan masalah dapat Just make your UI more accessible. So let's go back to this very, very nasty piece of test. I'm sorry to say that this is actually the best way I could think of to test Carousel's login page, which I hope that they will take some advice from today's talk. Yeah, so let's take a look at Carousel's login page itself, which I took a look over here. So they have this login button over here that opens up the login page. So I was trying to figure out, okay, how can I test this with Selenium itself? So it would be a good example for writing an accessible test itself, but turns out it wasn't very accessible. Let's take a look at the username field. Let me see if I can zoom in. Okay, so normally if you want to get a tester to figure out, okay, how am I going to pick the username field just to click on it and then send some keys to it. What they would think first say, okay, is there an ID I can use? Don't have. Okay, is there, can I use a class or not? Like a CSS class to pick this up. Class equals to styles, underscore, underscore, input, underscore. This doesn't look very readable, right? Actually, you can use the username field, but if it's used anywhere else in your form itself, it's not very unique anymore. Sometimes you might have the login form and the registration form side-by-side. So if you have these two, this name equals to username might conflict with each other. So the most non-conflicting way for us to pick this up and test it is to actually use XPub. So that's a little bit unfortunate. You have to go and copy XPub and put it in there. So that's not very good. So I would recommend actually trying to use some labels to label, use an input ID and label for to label the element itself. So actually, you can also use UILicious, which is pretty smart at figuring out some of these not very accessible websites to test as well. So we can take a look at how this works. Oh, already have it ran. Ya, but even if UILicious can pick it up, I would still recommend following through on some of these practices because it not only helps test, makes the UI more testable, but it also helps screen readers to pick it up as well. So that's pretty much all I have to recommend and I hope that you can also bring this recommendation to your UI developers, your friend developers and say, hey, please, can you write your UI test in a way that makes my life easier? I want to be able to understand the code that I read three months, the test that I read three weeks later so that I don't like look at it. Oh, what's this, vomit? Ya, so that's all. Thank you. Let me know if you have any questions. Ya, so I guess we're good here. This is the home extension of our language. So UILicious is a web app so you don't have to install it and basically what it does is you can think of it as if you ever experience using JSspeeder itself before. You don't have to set up any web application. You don't have to sell any servers. What you have to do is to think about, okay, what is the test that I want to test? Then you just write it down here. Then you select which browser you want to test, which resolution you want to test and you just press the run button. So I can run, we run this carousel test again so I can run it again. And if something goes wrong, I could just press, I could send it to our developer for example. Say, I cannot find, the login button is not clickable for example or it redirected me to the wrong page for example so it's not valid. Then I could send it to the developers and they will see like, okay, this is the steps to replicate the test. They can quickly see the screenshots on what is being interactive with and to fix it. So once they fix it, they can just run the test all over again. They don't have to wait for the testers say, oh, could you run the test again? Like, ah, I'm busy as a developer. Can just like get a link and run it again. Yeah. It will be using the browser which is there on the machine. So you... So these browsers, they are available on our cloud infrastructure itself. So you could just run any test itself. So you can choose, so you run Firefox test, Safari test, Microsoft H test as well as IE11 test. So you can run multiple Chrome versus multiple... Right now, we don't actually support for the cloud version of our application being able to select multiple versions. But let's say if you want to look at an on-premise deployment of your malicious, then that's where you can see more versions. But that means it will be using the latest Chrome data? Yeah, so over here on the cloud version, it's usually using the latest version of each browser. SFI 11, it's just IE11. Yeah, we don't offer the older ones. Yeah. Okay. Okay, I think we're done here. Thank you.