Merencanakan pengujian UI

Selesai

Di bagian ini, Anda akan mengikuti Amita dan Andy saat mereka berbicara tentang cara menggabungkan tes UI Selenium ke dalam alur rilis. Mereka mulai dengan menelusuri pengujian yang biasanya dilakukan Amita secara manual. Kemudian mereka memetakan langkah manual Amita ke kasus pengujian otomatis.

Menjalankan pengujian UI secara manual

Amita sedang menunggu Andy muncul. Andy akan membantu Amita menulis pengujian UI yang akan ditambahkan ke tahap Uji alur. Saat dia tiba, Andy melihat Amita menulis di buku catatannya, mencoret sesuatu, bergumam, dan kemudian merobek halaman.

Andy: Hai. Anda tidak terlihat senang.

Amita: Saya sedang tidak senang. Saya mencoba mencari tahu cara menulis pengujian otomatis, tetapi saya tidak tahu harus mulai dari mana. Saya tidak bisa membuat kode. Saya merasa saya ketinggalan zaman.

Andy: Wow, saya rasa tidak seburuk itu. Utamanya, kita akan membutuhkan seseorang yang memiliki perspektif pengguna. Tidak ada cara untuk mengotomatiskannya. Selain itu, tidak ada orang yang tiba-tiba mengetahui cara mengotomatiskan pengujian. Kita semua adalah pemula di satu titik. Mudah-mudahan, saya bisa membuat proses belajar sedikit lebih mudah.

Saya pikir cara terbaik untuk memulai adalah mengotomatiskan sesuatu yang Anda lakukan secara teratur secara manual. Memilih pengujian UI. Jadi, mari kita memulai dan menuliskan langkah-langkahnya. Selanjutnya kita akan mencari tahu cara mengotomatiskan langkah-langkah tersebut. Pengujian apa yang harus kita pilih?

Amita mengambil napas dalam-dalam.

Amita: Mari kita otomatiskan pengujian jendela modal. Saat saya mengeklik hal tertentu, seperti tombol Unduh game misalnya, saya ingin memverifikasi bahwa jendela modal yang benar muncul. Kemudian saat saya mengeklik selain jendela modal, saya ingin memverifikasi bahwa jendela modal menghilang dan bahwa jendela utama aktif lagi.

Andy: Kedengarannya seperti titik yang bagus untuk memulai. Anda menjalankan pengujiannya. Saya akan menulis prosedurnya.

Amita membuka laptop Windows dan meluncurkan Google Chrome. Dia membuka aplikasi web dan memverifikasi bahwa halaman beranda terbuka.

Tip

Jika Anda ingin mengikuti tes manual Amita, Anda dapat menjalankan salinan lokal situs web Space Game. Di terminal Visual Studio Code, jalankan perintah berikut lalu klik tautan yang terlihat seperti Now listening on: http://localhost:5000.

git fetch upstream selenium
git checkout -B selenium upstream/selenium
dotnet build --configuration Release
dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web

Andy: Oke. Apa yang Anda periksa selanjutnya?

Amita: Saya memeriksa bahwa saat saya mengeklik tombol Unduh game, jendela modal yang benar muncul.

Amita mengklik tombol Unduh game. Jendela modal muncul.

Andy: Hebat. Jendela modal apa yang Anda periksa selanjutnya?

Amita: Selanjutnya saya memeriksa empat layar permainan. Setelah itu, saya mengeklik pemain teratas di papan peringkat. Saya memverifikasi bahwa profil pemain muncul.

Amita mengeklik masing-masing dari empat gambar kecil untuk menampilkan contoh layar game.

Selanjutnya Amita mengeklik pemain teratas di papan peringkat. Profil pemain muncul.

Amita: Jendela tersebut menutupi pengujian jendela modal. Saya menjalankan pengujian ini pada Windows karena OS itu yang digunakan sebagian besar pemain untuk mengunjungi situs kami. Saya menjalankan pengujian di Chrome, dan saat saya punya waktu, saya juga menjalankannya di Firefox dan Microsoft Edge.

Jika saya punya waktu, saya akan menjalankan semua pengujian lagi di macOS dan Linux, hanya untuk memastikan game kami kompatibel dengan sistem operasi apa pun yang digunakan pemain untuk mengunjungi situs. Tapi saya perlu menjalankan banyak pengujian lainnya.

Apa itu pencari lokasi di Selenium?

Dalam pengujian Selenium, pencari lokasi memilih elemen HTML dari DOM (Model Objek Dokumen) untuk ditindak. Anggap DOM sebagai representasi pohon atau grafik dari dokumen HTML. Setiap node dalam DOM mewakili bagian dari dokumen.

Dalam pengujian Selenium, Anda dapat menemukan elemen HTML dengan:

• Atribut id.
• Atribut name.
• Ekspresi JalurX.
• Teks tautan atau teks tautan sebagian.
• Nama tag, seperti body atau h1.
• Nama kelas CSS.
• Pemilih CSS.

Pencari lokasi yang Anda gunakan bergantung pada cara kode HTML ditulis dan jenis kueri yang ingin Anda lakukan.

Dalam dokumen HTML, atribut id menentukan pengidentifikasi unik untuk elemen HTML. Di sini, Anda akan menggunakan id atribut untuk mengkueri elemen di halaman karena setiap pengidentifikasi harus unik. Ini menjadikan atribut id sebagai salah satu cara termudah untuk mengkueri elemen dalam pengujian Selenium.

Dapatkan ID untuk setiap elemen HTML

Di sini, Anda mengikuti Amita dan Andy saat mereka mengumpulkan ID untuk setiap tombol yang diklik Amita dan untuk setiap jendela modal yang dihasilkan.

Andy: Saya tahu mengapa pengujian ini memakan waktu lama dan bisa sangat membuat frustrasi. Anda akan senang jika pengujian dapat berjalan secara otomatis. Saya jamin.

Inilah yang akan kita lakukan. Kita akan mendapatkan atribut id untuk setiap tombol yang Anda klik dan untuk jendela modal yang muncul. Pengujian otomatis yang kita tulis dapat menggunakan ekspresi ini untuk mengetahui tombol yang harus diklik dan jendela modal yang diharapkan.

Mari kita mulai dengan mendapatkan atribut id untuk tombol Unduh game.

Catatan

Anda dapat mengikuti langkah ini jika Anda ingin, atau tetap membaca bersama. Bagian berikutnya menyediakan semua atribut id yang Anda butuhkan saat menjalankan pengujian otomatis.

1. Di Google Chrome, buka beranda Space Game.

2. Klik kanan tombol Unduh game , lalu pilih Periksa.

   Jendela alat pengembang terbuka. Kode HTML untuk tombol Unduh game disorot.

3. Periksa kode yang disorot dan catat atribut id. Salin id untuk nanti.

   

4. Pilih tombol Unduh game. Kemudian ulangi langkah 2 dan 3 guna mendapatkan atribut id untuk jendela modal yang muncul.

5. Ulangi proses untuk empat layar game dan pemain teratas di papan peringkat.

Amita membuka Microsoft Word dan menambahkan tabel. Tabel berisi atribut id untuk setiap tautan dan atribut id untuk jendela modal yang sesuai. Untuk menjaga tabel agar tetap sederhana, Amita merekam:

• Tombol Unduh game.
• Hanya salah satu layar permainan.
• Pemain teratas di papan peringkat.

Berikut tampilan tabel Amita:

Fitur	Tautan id	Modal id
Tombol Unduh permainan	download-btn	pretend-modal
Layar game pertama	screen-01	screen-modal
Pemain papan peringkat teratas	profile-1	profile-modal-1

Merencanakan pengujian otomatis

Amita: Oke. Kita memiliki atribut id untuk setiap tombol yang saya klik. Kita juga memiliki jendela modal yang dihasilkan. Apa selanjutnya?

Andy: Sepertinya kita siap untuk menulis pengujian. Inilah yang akan kita lakukan:

1. Membuat proyek NUnit yang mencakup Selenium. Proyek akan disimpan di direktori bersama dengan kode sumber aplikasi.
2. Menulis kasus pengujian yang menggunakan otomatisasi untuk mengeklik tautan yang ditentukan. Kasus pengujian memverifikasi bahwa jendela modal yang diharapkan muncul.
3. Gunakan atribut id yang kita simpan untuk menentukan parameter ke metode kasus pengujian. Tugas ini membuat urutan, atau rangkaian pengujian.
4. Konfigurasikan pengujian untuk dijalankan di Chrome, Firefox, dan Microsoft Edge. Tugas ini membuat matriks pengujian.
5. Jalankan pengujian dan lihat setiap browser web muncul secara otomatis.
6. Lihat Selenium menjalankan serangkaian pengujian untuk setiap browser secara otomatis.
7. Di jendela konsol, verifikasi bahwa semua pengujian lulus.

Amita: Saya akan senang melihat seberapa cepat pengujian berjalan. Bisakah kita mencoba pengujian sekarang?

Andy: Tentu saja. Mari kita pindah ke laptop saya. Saya sudah menyiapkan kode aplikasinya.