Cara menggunakan Selenium IDE dengan Skrip & Perintah (Tegaskan, Sahkan)

Kami akan menggunakan laman web Mercury Tours sebagai aplikasi web kami yang sedang diuji. Ini adalah sistem tempahan penerbangan dalam talian yang mengandungi semua elemen yang kami perlukan untuk tutorial ini. URL-nya adalah http://demo.guru99.com/test/newtours/, dan ini akan menjadi URL Pangkalan kami.

Buat Skrip dengan Merakam

Mari kita buat skrip ujian pertama kita di Selenium IDE menggunakan kaedah yang paling biasa - dengan merakam. Selepas itu, kami akan melaksanakan skrip kami menggunakan ciri main balik.

Langkah 1

Lancarkan Firefox dan Selenium IDE.
Taipkan nilai untuk URL Pangkalan kami: http://demo.guru99.com/test/newtours/.
Hidupkan butang Rekod dihidupkan (jika belum diaktifkan secara lalai).

Langkah 2 Di Firefox, arahkan ke http://demo.guru99.com/test/newtours/. Firefox akan membawa anda ke halaman yang serupa dengan yang ditunjukkan di bawah.
Langkah 3 Klik kanan pada mana-mana ruang kosong di halaman, seperti pada logo Mercury Tours di sudut kiri atas. Ini akan memaparkan menu konteks Selenium IDE. Catatan: Jangan klik pada objek atau gambar yang berangkai Pilih pilihan "Tunjukkan Perintah Yang Ada". Kemudian, pilih "assertTitle tepat: Selamat Datang: Mercury Tours." Ini adalah arahan yang memastikan tajuk halaman betul.

Langkah 4 Dalam kotak teks "Nama Pengguna" Mercury Tours, ketik nama pengguna yang tidak sah, "tidak sahUNN". Dalam kotak teks "Kata Laluan", ketik kata laluan yang tidak sah, "tidak sahPWD".

Langkah 5 Klik pada butang "Log Masuk". Firefox harus membawa anda ke halaman ini.
Langkah 6 Togol butang rakam untuk berhenti merakam. Skrip anda kini kelihatan seperti yang ditunjukkan di bawah.
Langkah 7 Sekarang setelah kita selesai dengan skrip ujian kita, kita akan menyimpannya dalam kes ujian. Dalam menu Fail, pilih "Simpan Uji Kes". Sebagai alternatif, anda hanya boleh menekan Ctrl + S.
Langkah 8 Pilih lokasi yang anda inginkan, dan kemudian beri nama Test Case sebagai "Invalid_login". Klik butang "Simpan".
Langkah 9. Perhatikan bahawa fail tersebut disimpan sebagai HTML.

Langkah 10.

Kembali ke Selenium IDE dan klik butang Main semula untuk melaksanakan keseluruhan skrip. Selenium IDE harus dapat meniru semuanya dengan sempurna.

Pengenalan Perintah Selenium - Selenese

Perintah Selenese dapat memiliki maksimal dua parameter: target dan nilai.
Parameter tidak diperlukan sepanjang masa. Ia bergantung pada berapa banyak arahan yang diperlukan.

3 Jenis Perintah

Tindakan

Ini adalah arahan yang berinteraksi secara langsung dengan elemen halaman.

Contoh: perintah "klik" adalah tindakan kerana anda berinteraksi secara langsung dengan elemen yang anda klik.

Perintah "type" juga merupakan tindakan kerana anda memasukkan nilai ke dalam kotak teks, dan kotak teks menunjukkannya kepada anda sebagai balasan. Terdapat interaksi dua hala antara anda dan kotak teks.

Aksesori

Ini adalah perintah yang membolehkan anda menyimpan nilai ke pemboleh ubah.

Contoh: perintah "storeTitle" adalah aksesor kerana hanya "membaca" tajuk halaman dan menyimpannya dalam pemboleh ubah. Ia tidak berinteraksi dengan unsur apa pun di halaman.

Ketegasan

Mereka adalah perintah yang mengesahkan jika syarat tertentu dipenuhi.

3 Jenis Teguran

Tegaskan . Apabila arahan "menegaskan" gagal, ujian dihentikan serta-merta.
Sahkan . Apabila arahan "verifikasi" gagal, Selenium IDE mencatat kegagalan ini dan dilanjutkan dengan pelaksanaan ujian.
Tunggu . Sebelum meneruskan ke perintah seterusnya, perintah "waitFor" akan terlebih dahulu menunggu keadaan tertentu menjadi kenyataan.
- Sekiranya keadaan menjadi kenyataan dalam tempoh menunggu, langkahnya akan berlalu.
- Sekiranya keadaan tidak menjadi kenyataan, langkahnya gagal. Kegagalan dicatat, dan pelaksanaan ujian diteruskan ke perintah berikutnya.
- Secara lalai, nilai timeout ditetapkan pada 30 saat. Anda boleh mengubahnya dalam dialog Selenium IDE Options di bawah tab General.

Tegaskan vs Sahkan

Perintah Biasa

Perintah	Bilangan Parameter	Penerangan
buka	0 - 2	Membuka halaman menggunakan URL.
klik / klikAndWait	1	Klik pada elemen yang ditentukan.
type / typeKeys	2	Menaip urutan watak.
verifikasiTitle / assertTitle	1	Membandingkan tajuk halaman sebenar dengan nilai yang diharapkan.
mengesahkanTeksPresent	1	Memeriksa apakah teks tertentu dijumpai di dalam halaman.
sahkanElementPresent	1	Memeriksa kehadiran unsur tertentu.
mengesahkan Jadual	2	Membandingkan isi jadual dengan nilai yang diharapkan.
waitForPageToLoad	1	Menjeda pelaksanaan sehingga halaman dimuat sepenuhnya.
waitForElementPresent	1	Menjeda pelaksanaan sehingga elemen yang ditentukan menjadi wujud.

Buat Skrip Secara Manual dengan Firebug

Sekarang, kita akan membuat semula kes ujian yang sama secara manual, dengan memasukkan arahan. Kali ini, kita perlu menggunakan Firebug.

Langkah 1

Buka Firefox dan Selenium IDE.
Taipkan URL asas (http://demo.guru99.com/test/newtours/).
Butang rakaman harus MATI.

Langkah 2: Klik pada baris kosong paling atas di Editor.

Ketik "buka" di kotak teks Perintah dan tekan Enter.

Langkah 3

Navigasi Firefox ke URL asas kami dan aktifkan Firebug
Dalam panel Selenium IDE Editor, pilih baris kedua (baris di bawah perintah "buka") dan buat perintah kedua dengan menaip "assertTitle" pada kotak Perintah.
Jangan ragu untuk menggunakan ciri pelengkap automatik.

Langkah 4

Di Firebug, luaskan tag untuk memaparkan tag .</li> <li>Klik pada nilai tag <title> (iaitu "Welcome: Mercury Tours") dan tampalkannya ke medan Target di Editor.</li> </ul> </td> </tr> <tr> <td><strong>Langkah 5</strong> <ul> <li>Untuk membuat perintah ketiga, klik pada baris kosong ketiga di Editor dan masukkan "taip" pada kotak teks Perintah.</li> <li>Di Firebug, klik pada butang "Periksa".</li> </ul> </td> </tr> <tr> <td>Klik pada kotak teks Nama Pengguna. Perhatikan bahawa Firebug secara automatik menunjukkan kod HTML untuk elemen tersebut.</td> </tr> <tr> <td><strong>Langkah 6</strong> <p>Perhatikan bahawa kotak teks Nama Pengguna tidak mempunyai ID, tetapi mempunyai atribut NAMA. Oleh itu, kami akan menggunakan NAMA sebagai pencari. Salin nilai NAMA dan tampal ke medan Target di Selenium IDE.</p> <p>Masih dalam kotak teks Sasaran, awalan "userName" dengan "name =", menunjukkan Selenium IDE harus menargetkan elemen yang atribut NAME adalah "userName."</p> <p>Ketik "validUN" di kotak teks Nilai Selenium IDE. Skrip ujian anda sekarang harus seperti gambar di bawah. Kami selesai dengan perintah ketiga. Catatan: Daripada tidak sahUN, anda boleh memasukkan rentetan teks yang lain. Tetapi Selenium IDE peka huruf besar kecil, dan anda menaip nilai / atribut seperti dalam aplikasi.</p> </td> </tr> <tr> <td><strong>Langkah 7</strong> <ul> <li>Untuk membuat perintah keempat, masukkan "type" pada kotak teks Command.</li> <li>Sekali lagi, gunakan butang "Inspect" Firebug untuk mendapatkan pencari kotak teks "Kata Laluan".</li> </ul> <ul> <li> <p>Tampalkan atribut NAME ("kata laluan") ke medan Sasaran dan awalkannya dengan "name ="</p> </li> <li> <p>Taip "tidak sahPW" di medan Nilai di Selenium IDE. Skrip ujian anda sekarang harus seperti gambar di bawah.</p> </li> </ul> </td> </tr> <tr> <td><strong>Langkah 8</strong> <ul> <li>Untuk perintah kelima, ketik "clickAndWait" pada kotak teks Perintah di Selenium IDE.</li> <li>Gunakan butang "Periksa" Firebug untuk mendapatkan pencari butang "Log Masuk".</li> </ul> <ul> <li>Tampalkan nilai atribut NAME ("login") ke kotak teks Sasaran dan awalannya dengan "name =".</li> <li>Skrip ujian anda sekarang harus seperti gambar di bawah.</li> </ul> </td> </tr> </tbody> </table> <p><strong>Langkah 9:</strong> Simpan kes ujian dengan cara yang sama seperti yang kita lakukan di bahagian sebelumnya.</p> <a id="menu-6"></a> <h2>Menggunakan Butang Cari</h2> <p><strong>Butang Cari di Selenium IDE digunakan untuk mengesahkan jika apa yang kami masukkan ke dalam kotak teks Sasaran memang merupakan elemen UI yang betul.</strong></p> <p>Mari kita gunakan kes ujian Invalid_login yang kita buat di bahagian sebelumnya. Klik pada mana-mana arahan dengan entri Sasaran, katakan, perintah ketiga.</p> <p>Klik pada butang Cari. Perhatikan bahawa kotak teks Nama Pengguna dalam halaman Mercury Tours akan diserlahkan sebentar.</p> <p>Ini menunjukkan bahawa Selenium IDE dapat mengesan dan mengakses elemen yang diharapkan dengan betul. Sekiranya butang Cari menyoroti elemen yang berbeza atau tidak ada unsur sama sekali, maka pasti ada yang tidak kena dengan skrip anda.</p> <a id="menu-7"></a> <h2>Laksanakan Perintah</h2> <p><strong>Ini membolehkan anda melaksanakan satu perintah tanpa menjalankan keseluruhan kes ujian</strong> . Cukup klik pada baris yang ingin anda laksanakan dan kemudian klik "Tindakan> Jalankan perintah ini" dari bar menu atau tekan "X" pada papan kekunci anda.</p> <p><strong>Langkah 1.</strong> Pastikan penyemak imbas anda berada di laman utama Mercury Tours. Klik pada arahan yang ingin anda laksanakan. Dalam contoh ini, klik pada baris "type | userName | validUN".</p> <p><strong>Langkah 2.</strong> Tekan "X" pada papan kekunci anda.</p> <p><strong>Langkah 3.</strong> Perhatikan bahawa kotak teks untuk nama pengguna diisi dengan teks "tidak sahUN"</p> <p><strong>Melaksanakan perintah dengan cara ini sangat bergantung pada halaman yang sedang dipaparkan oleh Firefox</strong> . Ini bermaksud bahawa jika anda mencuba contoh di atas dengan halaman utama Google yang dipaparkan dan bukannya Mercury Tours ', langkah anda akan gagal kerana tidak ada kotak teks dengan atribut "userName" di laman utama Google.</p> <a id="menu-8"></a> <h2>Titik permulaan</h2> <p><strong>Titik permulaan adalah petunjuk yang memberitahu Selenium IDE garis mana pelaksanaan akan dimulakan</strong> . <strong>Kekunci pintasannya adalah "S".</strong></p> <p>Dalam contoh di atas, main balik akan bermula pada baris ketiga (taip | kata laluan | tidak sahPW). <strong>Anda hanya boleh mempunyai satu titik permulaan dalam satu skrip ujian.</strong></p> <p>Titik permulaannya mirip dengan Execute Command sehingga bergantung pada halaman yang sedang ditampilkan. Titik permulaan akan gagal jika anda berada di halaman yang salah.</p> <a id="menu-9"></a> <h2>Titik putus</h2> <p>Breakpoints adalah petunjuk yang memberitahu Selenium IDE di mana jeda ujian secara automatik. <strong>Kekunci pintasan adalah "B".</strong></p> <p>Sorotan kuning bermaksud bahawa langkah semasa belum selesai. Ini membuktikan bahawa Selenium IDE telah menghentikan pelaksanaan pada langkah tersebut. <strong>Anda boleh mempunyai beberapa titik putus dalam satu kes ujian.</strong></p> <a id="menu-10"></a> <h2>Langkah</h2> <p>Ini memungkinkan anda untuk melaksanakan perintah yang berjaya satu demi satu setelah menjeda kes ujian. Mari kita gunakan senario di bahagian sebelumnya "Breakpoints."</p> <table> <tbody> <tr> <td width="50%"> </td> <td> <p><strong>Sebelum mengklik "Langkah."</strong></p> <p>Kes ujian berhenti di baris "clickAndWait | login".</p> </td> </tr> <tr> <td width="50%"> </td> <td> <p><strong>Selepas mengklik "Langkah."</strong></p> <p>Baris "clickAndWait | login" dijalankan dan berhenti pada arahan seterusnya (verifikasiTitle | Log masuk: Mercury Tours).</p> <p>Perhatikan bahawa baris seterusnya dijeda walaupun tidak ada titik putus di sana. Ini adalah tujuan utama fitur Langkah - ia melaksanakan perintah yang berjaya satu demi satu untuk memberi anda lebih banyak masa untuk memeriksa hasilnya setelah setiap langkah.</p> </td> </tr> </tbody> </table> <a id="menu-11"></a> <h2>Perkara Penting Yang Perlu Diperhatikan Semasa Menggunakan Format Lain dalam Paparan Sumber</h2> <p><strong>Selenium IDE berfungsi dengan baik hanya dengan HTML - format lain masih dalam mod eksperimen</strong> . Ia adalah <strong>TIDAK dinasihatkan</strong> untuk membuat atau mengedit ujian menggunakan format lain di Source Lihat kerana masih banyak kerja yang diperlukan untuk membuat ia stabil. Berikut adalah pepijat yang diketahui pada versi 1.9.1.</p> <ul> <li>Anda tidak akan dapat melakukan main balik atau beralih kembali ke Jadual Lihat melainkan anda kembali ke HTML.</li> <li>Satu-satunya cara untuk menambahkan perintah dengan selamat pada kod sumber adalah dengan merekodkannya.</li> <li>Apabila anda mengubah kod sumber secara manual, semuanya akan hilang apabila anda beralih ke format lain.</li> <li>Walaupun anda dapat menyimpan kes ujian anda semasa di Source View, Selenium IDE tidak akan dapat membukanya.</li> </ul> <p><strong>Cara yang disyorkan untuk menukar ujian Selenese adalah dengan menggunakan pilihan "Export Test Case As…" di bawah menu File, dan bukan melalui Source View.</strong></p> <a id="menu-12"></a> <h2>Ringkasan</h2> <ul> <li>Skrip ujian boleh dibuat sama ada dengan merakam atau mengetik perintah dan parameter secara manual.</li> <li>Semasa membuat skrip secara manual, Firebug digunakan untuk mendapatkan pencari.</li> <li>Butang Cari digunakan untuk memeriksa bahawa perintah dapat mengakses elemen yang betul.</li> <li>Tampilan Jadual memaparkan skrip ujian dalam bentuk tabel sementara Tampilan Sumber memaparkannya dalam format HTML.</li> <li>Menukar Paparan Sumber ke format bukan HTML masih eksperimen.</li> <li>Jangan gunakan Paparan Sumber dalam membuat ujian dalam format lain. Sebagai gantinya, gunakan ciri Eksport.</li> <li>Parameter tidak diperlukan sepanjang masa. Itu bergantung pada perintah.</li> <li>Terdapat tiga jenis perintah:</li> <ul> <li>Tindakan - berinteraksi secara langsung dengan elemen halaman</li> <li>Aksesor - "membaca" harta elemen dan menyimpannya dalam pemboleh ubah</li> <li>Tegasan - membandingkan nilai sebenar dengan yang diharapkan</li> </ul> <li>Tegasan mempunyai tiga jenis:</li> <ul> <li>Tegaskan - apabila gagal, langkah-langkah yang berjaya tidak lagi dilaksanakan</li> <li>Sahkan - apabila gagal, langkah-langkah yang berjaya masih dilaksanakan.</li> <li>WaitFor - lulus jika keadaan yang ditentukan menjadi kenyataan dalam jangka masa tamat; jika tidak, ia akan gagal</li> </ul> <li>Perintah yang paling biasa adalah:</li> <ul> <li>buka</li> <li>klik / klikAndWait</li> <li>type / typeKeys</li> <li>verifikasiTitle / assertTitle</li> <li>mengesahkanTeksPresent</li> <li>sahkanElementPresent</li> <li>mengesahkan Jadual</li> <li>waitForPageToLoad</li> <li>waitForElementPresent</li> </ul> </ul> </div> </article> <div id="container-5533149ee6411a5f99b370c693e87966"></div> </div> </div> </div> </div> </div> <aside class="col-lg-4 sidebar sidebar--right"> <div class="widget widget-popular-posts"> <h2 class="widget-title">Jawatan Popular</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003955-get-users-ip-address" title="Dapatkan Alamat IP Pengguna - Trik CSS" rel="bookmark"><img src="https://cdn.css-code.org/6077363/get_users_ip_address_css-tricks.png.webp" loading="lazy" alt="Dapatkan Alamat IP Pengguna - Trik CSS" title="Dapatkan Alamat IP Pengguna - Trik CSS" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003955-get-users-ip-address" title="Dapatkan Alamat IP Pengguna - Trik CSS" rel="bookmark">Dapatkan Alamat IP Pengguna - Trik CSS 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003956-get-widthheight-of-image" title="Dapatkan Lebar / Tinggi Gambar - Trik CSS" rel="bookmark"><img src="https://cdn.css-code.org/1804205/get_widthheight_of_image_css-tricks.png.webp" loading="lazy" alt="Dapatkan Lebar / Tinggi Gambar - Trik CSS" title="Dapatkan Lebar / Tinggi Gambar - Trik CSS" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003956-get-widthheight-of-image" title="Dapatkan Lebar / Tinggi Gambar - Trik CSS" rel="bookmark">Dapatkan Lebar / Tinggi Gambar - Trik CSS 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003957-get-suffix-of-given-numberdate" title="Dapatkan Akhiran Nombor / Tarikh Diberi - Trik CSS" rel="bookmark"><img src="https://cdn.css-code.org/6394759/get_suffix_of_given_numberdate_css-tricks.png.webp" loading="lazy" alt="Dapatkan Akhiran Nombor / Tarikh Diberi - Trik CSS" title="Dapatkan Akhiran Nombor / Tarikh Diberi - Trik CSS" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003957-get-suffix-of-given-numberdate" title="Dapatkan Akhiran Nombor / Tarikh Diberi - Trik CSS" rel="bookmark">Dapatkan Akhiran Nombor / Tarikh Diberi - Trik CSS 2025</a></h3> </div> </div> </li> </ul> </div> <div class="widget widget-popular-posts"> <h2 class="widget-title">ulasan terbaik di bulan</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8224399-difference-between-system-software-and-application-software" title="Perbezaan antara Perisian Sistem dan Perisian Aplikasi" rel="bookmark">Perbezaan antara Perisian Sistem dan Perisian Aplikasi</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8224400-k-means-clustering-in-r-with-example" title="K-bermaksud Penggabungan dalam R dengan Contoh" rel="bookmark">K-bermaksud Penggabungan dalam R dengan Contoh</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8224401-top-50-unix-interview-questions-and-answers" title="50 Soalan Temuduga Unix Teratas & Jawapan" rel="bookmark">50 Soalan Temuduga Unix Teratas & Jawapan</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8224402-sap-sd-module-pdf-sales-and-distribution-free-download" title="Modul SAP SD PDF: Jualan & Pengedaran (Muat turun PERCUMA)" rel="bookmark">Modul SAP SD PDF: Jualan & Pengedaran (Muat turun PERCUMA)</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8224403-hadoop-tutorial-pdf-basics-of-big-data-analytics-for-beginners" title="Hadoop Tutorial PDF: Asas Analisis Data Besar untuk Pemula" rel="bookmark">Hadoop Tutorial PDF: Asas Analisis Data Besar untuk Pemula</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8224404-21-best-typing-tutor-software-in-2021" title="21 Perisian Pengetik Jenis Terbaik pada tahun 2021" rel="bookmark">21 Perisian Pengetik Jenis Terbaik pada tahun 2021</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8224405-top-27-sdlc-interview-questions-and-answers" title="27 Soalan dan Jawapan Temuduga SDLC Teratas" rel="bookmark">27 Soalan dan Jawapan Temuduga SDLC Teratas</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8224406-what-is-angularjs-architecture-and-features" title="Apa itu AngularJS? Senibina & ciri-ciri" rel="bookmark">Apa itu AngularJS? Senibina & ciri-ciri</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8224407-web-server-vs-application-server-key-differences" title="Pelayan web vs Pelayan aplikasi: Perbezaan Utama" rel="bookmark">Pelayan web vs Pelayan aplikasi: Perbezaan Utama</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8224408-15-best-cpanel-alternatives-in-2021-freepaid" title="15 Alternatif cPanel TERBAIK pada tahun 2021 (Percuma / Berbayar)" rel="bookmark">15 Alternatif cPanel TERBAIK pada tahun 2021 (Percuma / Berbayar)</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8224409-angularjs-hello-world-application-your-first-example-program" title="Aplikasi AngularJS Hello World: Program Contoh Pertama Anda" rel="bookmark">Aplikasi AngularJS Hello World: Program Contoh Pertama Anda</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8224411-what-is-scope-in-angularjs-tutorial-with-example" title="Apakah Skop $ di AngularJS? Tutorial dengan Contoh" rel="bookmark">Apakah Skop $ di AngularJS? Tutorial dengan Contoh</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8224412-angularjs-controller-tutorial-with-example" title="Tutorial Pengawal AngularJS dengan Contoh" rel="bookmark">Tutorial Pengawal AngularJS dengan Contoh</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8224413-angularjs-ng-repeat-directive-with-example" title="Arahan ng-ulangan AngularJS dengan Contoh" rel="bookmark">Arahan ng-ulangan AngularJS dengan Contoh</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8224414-how-to-use-and-quotng-model-and-quot-in-angularjs-with-examples" title="Cara menggunakan 'ng-model' di AngularJS dengan CONTOH" rel="bookmark">Cara menggunakan 'ng-model' di AngularJS dengan CONTOH</a></h3> </div> </div> </li> </ul> </div> <div id="container-5533149ee6411a5f99b370c693e87966"></div> <div class="widget widget-popular-posts"> <h2 class="widget-title">Artikel Top</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003959-get-latest-twitter-status" title="Dapatkan Status Twitter Terkini - Trik CSS" rel="bookmark"><img src="https://cdn.css-code.org/4457115/get_latest_twitter_status_css-tricks.png.webp" loading="lazy" alt="Dapatkan Status Twitter Terkini - Trik CSS" title="Dapatkan Status Twitter Terkini - Trik CSS" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003959-get-latest-twitter-status" title="Dapatkan Status Twitter Terkini - Trik CSS" rel="bookmark">Dapatkan Status Twitter Terkini - Trik CSS 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003960-highlight-a-substring" title="Serlahkan Substring - Trik CSS" rel="bookmark"><img src="https://cdn.css-code.org/5810525/highlight_a_substring_css-tricks.png.webp" loading="lazy" alt="Serlahkan Substring - Trik CSS" title="Serlahkan Substring - Trik CSS" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003960-highlight-a-substring" title="Serlahkan Substring - Trik CSS" rel="bookmark">Serlahkan Substring - Trik CSS 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003961-html-tidy" title="HTML kemas - Trik CSS" rel="bookmark"><img src="https://cdn.css-code.org/1248226/html_tidy_css-tricks.png.webp" loading="lazy" alt="HTML kemas - Trik CSS" title="HTML kemas - Trik CSS" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003961-html-tidy" title="HTML kemas - Trik CSS" rel="bookmark">HTML kemas - Trik CSS 2025</a></h3> </div> </div> </li> </ul> </div> </aside> </div> </div> <footer class="footer footer--dark"> <div class="container"> <div class="footer__widgets"> <div class="row"> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Jawatan Popular</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224215-how-to-delete-payroll-results-in-sap-pu01" title="Cara Menghapus Hasil Gaji di SAP: PU01" rel="bookmark">Cara Menghapus Hasil Gaji di SAP: PU01</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224216-what-is-matchcode-w-in-sap-hr" title="Apa itu Matchcode W dalam SAP HR?" rel="bookmark">Apa itu Matchcode W dalam SAP HR?</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224217-how-to-check-payroll-results-using-pc-payresult-in-sap" title="Cara Memeriksa Hasil Gaji menggunakan PC_PAYRESULT di SAP" rel="bookmark">Cara Memeriksa Hasil Gaji menggunakan PC_PAYRESULT di SAP</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224218-how-to-audit-payroll-in-sap-rpuaud00" title="Cara Mengaudit Gaji dalam SAP: RPUAUD00" rel="bookmark">Cara Mengaudit Gaji dalam SAP: RPUAUD00</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224219-sap-wage-types-tutorial-primary-secondary-dialog-time" title="Tutorial Jenis Upah SAP: Utama, Menengah, Dialog, Masa" rel="bookmark">Tutorial Jenis Upah SAP: Utama, Menengah, Dialog, Masa</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Pilihan Editor</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003402-123-building-the-videos-archive-part-2-navigation" title="# 123: Membina Arkib Video, Bahagian 2 (Navigasi) - Trik CSS" rel="bookmark"># 123: Membina Arkib Video, Bahagian 2 (Navigasi) - Trik CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003403-122-building-the-videos-archive-part-1" title="# 122: Membina Arkib Video, Bahagian 1 - Trik CSS" rel="bookmark"># 122: Membina Arkib Video, Bahagian 1 - Trik CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003404-125-photoshopping-the-single-video-page" title="# 125: Photoshopping Laman Video Tunggal - Trik CSS" rel="bookmark"># 125: Photoshopping Laman Video Tunggal - Trik CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003405-127-building-the-single-video-page-part-2" title="# 127: Membangun Laman Video Tunggal, Bahagian 2 - Trik CSS" rel="bookmark"># 127: Membangun Laman Video Tunggal, Bahagian 2 - Trik CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003406-126-building-the-single-video-page-part-1" title="# 126: Membangun Halaman Video Tunggal, Bahagian 1 - Trik CSS" rel="bookmark"># 126: Membangun Halaman Video Tunggal, Bahagian 1 - Trik CSS</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Artikel Top</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8226153-big-data-testing-tutorial-what-is-strategy-how-to-test-hadoop" title="Tutorial Pengujian Data Besar: Apa itu, Strategi, Cara menguji Hadoop" rel="bookmark">Tutorial Pengujian Data Besar: Apa itu, Strategi, Cara menguji Hadoop</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8226154-20-best-digital-marketing-courses-in-2021" title="20 Kursus Pemasaran Digital Terbaik pada tahun 2021" rel="bookmark">20 Kursus Pemasaran Digital Terbaik pada tahun 2021</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8226155-14-best-web-crawler-tools-in-2021" title="14 Alat Perayap Web TERBAIK pada tahun 2021" rel="bookmark">14 Alat Perayap Web TERBAIK pada tahun 2021</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8226156-what-is-software-engineering-definition-basics-characteristics" title="Apa itu Kejuruteraan Perisian? Definisi, Asas, Ciri" rel="bookmark">Apa itu Kejuruteraan Perisian? Definisi, Asas, Ciri</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8226157-90-best-social-media-marketing-courses-in-2021" title="90 Best Social Media Marketing Courses in 2021" rel="bookmark">90 Best Social Media Marketing Courses in 2021</a></h3> </div> </div> </li> </ul> </div> </div> </div> <p>© Copyright ms.css-code.org, 2025 Mungkin | <a href="https://ms.css-code.org/about-site" title="Mengenai laman web">Mengenai laman web</a> | <a href="https://ms.css-code.org/contacts" title="Kenalan">Kenalan</a> | <a href="https://ms.css-code.org/privacy-policy" title="Dasar Privasi.">Dasar Privasi.</a>. </p> </div> </div> </footer> <link href="https://css-code.org/template/css/style.min.css" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" /> </body> </html>