Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular
Code

Memulai Pengujian End-to-End di Angular Menggunakan Protractor

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Ilham Saputra (you can also view the original English article)

Final product image
What You'll Be Creating

Protractor adalah framework pengujian end-to-end yang populer yang memungkinkan Anda menguji aplikasi Angular Anda pada browser nyata yang mensimulasikan interaksi browser seperti cara pengguna nyata berinteraksi dengannya. Pengujian end-to-end dirancang untuk memastikan bahwa aplikasi berfungsi sesuai harapan dari perspektif pengguna. Selain itu, tes tidak memperhatikan implementasi kode aktual.

Protractor berjalan di atas Selenium WebDriver yang populer, yang merupakan API untuk otomatisasi dan pengujian browser. Selain fitur yang disediakan oleh Selenium WebDriver, Protractor menawarkan pencari dan metode untuk menangkap komponen UI aplikasi Angular.

Dalam tutorial ini, Anda akan belajar tentang:

  • mengatur, mengkonfigurasi dan menjalankan Protractor
  • menulis tes dasar untuk Protractor
  • objek halaman dan mengapa Anda harus menggunakannya
  • pedoman yang harus dipertimbangkan saat menulis tes
  • menulis tes E2E untuk aplikasi dari awal hingga selesai

Bukankah itu terdengar menarik? Namun, hal pertama yang pertama.

Apakah Saya Perlu Menggunakan Protractor?

Jika Anda menggunakan Angular-CLI, Anda mungkin tahu bahwa secara default, ia dikirim dengan dua framework untuk pengujian. Mereka:

  • tes unit menggunakan Jasmine dan Karma
  • tes end-to-end menggunakan Protractor

Perbedaan yang jelas antara keduanya adalah bahwa yang pertama digunakan untuk menguji logika komponen dan layanan, sedangkan yang kedua digunakan untuk memastikan bahwa fungsionalitas tingkat tinggi (yang melibatkan elemen UI) dari aplikasi berfungsi seperti yang diharapkan.

Jika Anda baru menguji di Angular, saya akan merekomendasikan membaca Komponen Pengujian dalam seri Angular Using Jasmine untuk mendapatkan ide yang lebih baik tentang di mana menggambar garis.

Dalam kasus ini, Anda dapat memanfaatkan kekuatan utilitas pengujian Angular dan Jasmine untuk menulis tidak hanya tes unit untuk komponen dan layanan, tetapi juga tes UI dasar. Namun, jika Anda perlu menguji fungsionalitas front-end aplikasi Anda dari awal sampai akhir, Protractor adalah cara untuk pergi. Protractor API dikombinasikan dengan pola desain seperti objek halaman membuatnya lebih mudah untuk menulis tes yang lebih mudah dibaca. Berikut ini contoh untuk membuat semuanya berjalan lancar.

Mengkonfigurasi Protractor

Menyiapkan Protractor mudah jika Anda menggunakan Angular-CLI untuk menghasilkan proyek Anda. Struktur direktori yang dibuat oleh ng new adalah sebagai berikut.

Template proyek default yang dibuat oleh Protractor tergantung pada dua file untuk menjalankan tes: file spesifikasi yang berada di dalam direktori e2e dan file konfigurasi (protractor.conf.js). Mari kita lihat bagaimana protractor.conf.js dapat dikonfigurasi adalah:

Jika Anda baik-baik saja dengan menjalankan pengujian di browser web Chrome, Anda dapat membiarkannya seperti ini dan melewati sisa bagian ini.

Mengatur Protractor Dengan Selenium Standalone Server

directConnect: true memungkinkan Protractor terhubung langsung ke driver browser. Namun, pada saat menulis tutorial ini, Chrome adalah satu-satunya browser yang didukung. Jika Anda memerlukan dukungan multi-browser atau menjalankan browser selain Chrome, Anda harus menyiapkan server mandiri Selenium. Langkah-langkahnya adalah sebagai berikut.

Instal Protractor secara global menggunakan npm:

Ini menginstal alat baris perintah untuk webdriver-manager bersama dengan protractor. Sekarang perbarui webdriver-manager untuk menggunakan binari terbaru, dan kemudian jalankan server mandiri Selenium.

Akhirnya, atur directConnect: false dan tambahkan properti seleniumAddress sebagai berikut:

File konfigurasi di GitHub menyediakan informasi lebih lanjut tentang opsi konfigurasi yang tersedia di Protractor. Saya akan menggunakan opsi default untuk tutorial ini.

Menjalankan Pengujian

ng e2e adalah satu-satunya perintah yang Anda perlukan untuk mulai menjalankan tes jika Anda menggunakan Angular-CLI. Jika tes tampak lambat, itu karena Angular harus mengkompilasi kode setiap kali Anda menjalankan ng e2e. Jika Anda ingin mempercepatnya, inilah yang harus Anda lakukan. Sajikan aplikasi menggunakan ng serve.

Kemudian jalankan tab konsol baru dan jalankan:

Tes harus memuat lebih cepat sekarang.

Tujuan Kami

Kami akan menulis tes E2E untuk aplikasi dasar Pastebin. Klon proyek dari repo GitHub.

Baik versi, versi starter (yang tanpa tes) dan versi final (yang dengan tes), tersedia di cabang terpisah. Mengkloning cabang pemula untuk saat ini. Secara opsional, layani proyek dan ikuti kode untuk berkenalan dengan aplikasi yang ada di tangan.

Mari kita gambarkan aplikasi Pastebin kita sebentar. Aplikasi ini awalnya akan memuat daftar pastes (diambil dari server tiruan) ke dalam tabel. Setiap baris dalam tabel akan memiliki tombol View Paste yang, ketika diklik, membuka jendela modal bootstrap. Jendela modal menampilkan data paste dengan opsi untuk mengedit dan menghapus paste. Menjelang ujung meja, ada tombol Create Paste yang dapat digunakan untuk menambahkan pastes baru.

End-to-End testing using protractor Sample pastebin application
Contoh Aplikasi.

Sisa dari tutorial ini didedikasikan untuk menulis tes Protractor di Angular.

Dasar Protractor

File spek, yang diakhiri dengan .e2e-spec.ts, akan menghosting tes yang sebenarnya untuk aplikasi kita. Kami akan menempatkan semua spesifikasi pengujian di dalam direktori e2e karena itulah tempat kami mengkonfigurasi Protractor untuk mencari spesifikasi.

Ada dua hal yang perlu Anda pertimbangkan saat menulis tes Protractor:

  • Sintaks Jasmine
  • Protractor API

Sintaks Jasmine

Buat file baru bernama test.e2e-spec.ts dengan kode berikut untuk memulai.

Ini menggambarkan bagaimana pengujian kami akan diatur di dalam file spesifikasi menggunakan sintaks Jasmine. describe(), beforeEach() dan it() adalah fungsi Jasmine global.

Jasmine memiliki sintaks yang bagus untuk menulis tes, dan bekerja sama dengan Protractor. Jika Anda baru mengenal Jasmine, saya akan merekomendasikan untuk menelusuri halaman GitHub Jasmine terlebih dahulu.

describe blok digunakan untuk membagi tes menjadi rangkaian uji logis. Setiap describe blok (atau rangkaian tes) dapat memiliki it beberapa blok (atau uji spesifikasi). Tes yang sebenarnya didefinisikan di dalam spesifikasi tes.

"Mengapa saya harus menyusun tes saya dengan cara ini?" Anda mungkin bertanya. Sebuah rangkaian tes dapat digunakan untuk secara logis menggambarkan fitur tertentu dari aplikasi Anda. Misalnya, semua spesifikasi yang berkaitan dengan komponen Pastebin idealnya harus dibahas di dalam blok mendeskripsikan berjudul Halaman Pastebin. Meskipun ini dapat menghasilkan tes yang berlebihan, tes Anda akan lebih mudah dibaca dan dipelihara.

Blok mendeskripsikan dapat memiliki metode beforeEach() yang akan dijalankan satu kali, sebelum setiap spesifikasi di blok itu. Jadi, jika Anda perlu browser untuk menavigasi ke URL sebelum setiap tes, menempatkan kode untuk navigasi di dalam beforeEach() adalah hal yang benar untuk dilakukan.

Ekspektasikan pernyataan, yang menerima nilai, dirangkai dengan beberapa fungsi matcher. Baik nilai nyata dan nilai yang diharapkan dibandingkan, dan boolean dikembalikan yang menentukan apakah pengujian gagal atau tidak.

Protractor API

Sekarang, mari taruh daging di atasnya.

browser.get('/') dan element(by.css('.pastebin')).getText() adalah bagian dari Protractor API. Mari dapati tangan kita kotor dan melompat tepat ke apa yang ditawarkan Protractor.

Komponen utama yang diekspor oleh Protractor API tercantum di bawah ini.

  1. browser(): Anda harus memanggil browser() untuk semua operasi tingkat browser seperti navigasi, debugging, dll.
  2. element(): Ini digunakan untuk mencari elemen di DOM berdasarkan kondisi pencarian atau rantai kondisi. Ini mengembalikan objek ElementFinder, dan Anda dapat melakukan tindakan seperti getText() atau click() pada mereka.
  3. element.all(): Ini digunakan untuk mencari berbagai elemen yang cocok dengan beberapa rantai kondisi. Ini mengembalikan objek ElementArrayFinder. Semua tindakan yang dapat dilakukan pada ElementFinder dapat dilakukan pada ElementArrayFinder juga.
  4. locators: Locators menyediakan metode untuk menemukan elemen dalam aplikasi Angular.

Karena kami akan menggunakan pencari sangat sering, berikut adalah beberapa pencari yang umum digunakan.

  • by.css('selector-name'): Ini sejauh ini adalah pencari yang umum digunakan untuk menemukan elemen berdasarkan nama selector CSS.
  • by.name('name-value'): Menempatkan elemen dengan nilai yang cocok untuk atribut nama.
  • by.buttonText('button-value'): Menempatkan elemen tombol atau array elemen tombol berdasarkan teks bagian dalam.

Catatan: Locators by.model, by.binding dan by.repeater tidak bekerja dengan aplikasi Angular 2+ pada saat menulis tutorial ini. Gunakan pencari berbasis CSS sebagai gantinya.

Mari tulis lebih banyak tes untuk aplikasi Pastebin kami.

Kode di atas berfungsi, dan Anda dapat memverifikasi sendiri. Namun, tidakkah Anda merasa lebih nyaman menulis tes tanpa kosakata Protractor-spesifik dalam file spesifikasi Anda? Inilah yang saya bicarakan:

Spesifikasi tampak lebih jelas tanpa bagasi Protractor ekstra. Bagaimana saya melakukannya? Izinkan saya memperkenalkan Anda ke Halaman Objek.

Halaman Objek

Halaman Objek adalah pola desain yang populer di lingkaran otomatisasi pengujian. Sebuah objek halaman memodelkan suatu halaman atau bagian dari aplikasi yang menggunakan kelas berorientasi objek. Semua objek (yang relevan dengan pengujian kami) seperti teks, judul, tabel, tombol, dan tautan dapat ditangkap dalam objek halaman. Kami kemudian dapat mengimpor objek halaman ini ke dalam file spesifikasi dan menjalankan metode mereka. Ini mengurangi duplikasi kode dan membuat pemeliharaan kode lebih mudah.

Buat direktori bernama page-objects dan tambahkan file baru di dalamnya yang disebut pastebin.po.ts. Semua objek yang berkaitan dengan komponen Pastebin akan ditangkap di sini. Seperti yang disebutkan sebelumnya, kami membagi seluruh aplikasi menjadi tiga komponen yang berbeda, dan setiap komponen akan memiliki objek halaman yang didedikasikan untuk itu. Skema penamaan .po.ts adalah murni konvensional, dan Anda dapat menamainya apa pun yang Anda inginkan.

Ini adalah cetak biru dari halaman yang sedang kami uji.

End-to-End Testing in Angular Blueprint for the Pastebin component

Ini kodenya.

pastebin.po.ts

Mari kita bahas apa yang telah kita pelajari sejauh ini. API Protractor mengembalikan objek, dan kami telah menemukan tiga jenis objek sejauh ini. Mereka:

  • promise.Promise
  • ElementFinder
  • ElementArrayFinder

Singkatnya, element() mengembalikan ElementFinder, dan element().all mengembalikan ElementArrayFinder. Anda dapat menggunakan locators (by.css, by.tagName, dll.) Untuk menemukan lokasi elemen di DOM dan meneruskannya ke element() atau element.all().

ElementFinder dan ElementArrayFinder kemudian dapat dikaitkan dengan tindakan, seperti isPresent(), getText(), click(), dll. Metode-metode ini mengembalikan promise yang akan diselesaikan ketika tindakan tertentu telah selesai.

Alasan mengapa kita tidak memiliki rantai then() dalam pengujian kami adalah karena Protractor mengurusnya secara internal. Tes tampak sinkron meskipun tidak; oleh karena itu, hasil akhirnya adalah pengalaman pengkodean linier. Namun, saya sarankan menggunakan sintaks async/await untuk memastikan bahwa kode tersebut adalah bukti masa depan.

Anda dapat menukar beberapa objek ElementFinder, seperti yang ditunjukkan di bawah ini. Ini sangat membantu jika DOM memiliki banyak pemilih dengan nama yang sama dan kita harus menangkap yang benar.

Sekarang kita memiliki kode untuk objek halaman siap, mari kita impor ke spec kami. Ini kode untuk tes awal kami.

Mengorganisir Tes dan Refactoring

Tes harus diatur sedemikian rupa sehingga struktur keseluruhan tampak bermakna dan lugas. Berikut adalah beberapa panduan yang dianjurkan yang harus Anda ingat saat mengatur tes E2E.

  • Tes E2E terpisah dari tes unit.
  • Kelompokkan tes E2E Anda dengan bijaksana. Atur tes Anda dengan cara yang sesuai dengan struktur proyek Anda.
  • Jika ada beberapa halaman, objek halaman harus memiliki direktori terpisah sendiri.
  • Jika objek halaman memiliki beberapa metode yang sama (seperti navigasiToHome()), buat objek halaman dasar. Model halaman lain dapat mewarisi dari model halaman dasar.
  • Buat tes Anda independen satu sama lain. Anda tidak ingin semua tes Anda gagal karena perubahan kecil di UI, bukan?
  • Jaga definisi objek halaman bebas dari assertions/expectations. Pernyataan harus dibuat di dalam file spesifikasi.

Mengikuti panduan di atas, inilah hirarki objek halaman dan organisasi file yang akan terlihat.

Page object hierarchy and e2e test structure in Protractor

Kami sudah membahas pastebin.po.ts dan mainPage.e2e-spec.ts. Berikut ini file-file sisanya.

Objek Halaman Dasar

Tambahkan Paste Objek Halaman

End-to-End Testing in Angular Blueprint for the AddPaste component
Cetak biru untuk komponen AddPaste

Tambahkan file Paste Spec

Latihan

Ada beberapa hal yang hilang, meskipun: tes untuk tombol View Paste dan jendela modal yang muncul setelah mengklik tombol. Saya akan meninggalkan ini sebagai latihan untuk Anda. Namun, saya akan memberi Anda petunjuk.

Struktur objek halaman dan spesifikasi untuk ViewPastePage mirip dengan yang ada pada AddPastePage.

End-to-End Testing in Angular Blueprint for ViewPaste component
Cetak biru untuk komponen ViewPaste

Berikut adalah skenario yang perlu Anda uji:

  1. Halaman ViewPaste harus memiliki sebuah tombol, dan pada klik, itu akan memunculkan jendela modal.
  2. Jendela modal harus menampilkan data tempel dari paste yang baru ditambahkan.
  3. Jendela modal harus membiarkan Anda memperbarui nilai.
  4. Tombol hapus seharusnya berfungsi.

Cobalah untuk tetap berpegang pada pedoman sedapat mungkin. Jika Anda ragu, alihkan ke cabang terakhir untuk melihat draf terakhir dari kode.

Membungkusnya

Jadi begitulah. Dalam artikel ini, kami telah membahas penulisan tes end-to-end untuk aplikasi Angular kami menggunakan Protractor. Kami memulai dengan diskusi tentang tes unit vs. tes e2e, dan kemudian kami belajar tentang pengaturan, konfigurasi dan menjalankan Protractor. Sisa dari tutorial berkonsentrasi pada penulisan tes yang sebenarnya untuk aplikasi demo Pastebin.

Tolong beri tahu saya pemikiran dan pengalaman Anda tentang menulis tes menggunakan Protractor atau tes tertulis untuk Angular secara umum. Saya akan senang mendengarnya. Terima kasih sudah membaca!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.