Apa itu Pengujian Busur Derajat?
PROTRACTOR adalah otomatisasi dan alat pengujian berbasis perilaku ujung ke ujung yang memainkan peran penting dalam Pengujian aplikasi AngularJS dan berfungsi sebagai integrator Solusi yang menggabungkan teknologi canggih seperti Selenium, Jasmine, Web driver, dll. Tujuan Pengujian Busur Derajat tidak hanya untuk menguji aplikasi AngularJS tetapi juga untuk menulis tes regresi otomatis untuk Aplikasi Web normal juga.
Dalam tutorial pemula ini, Anda akan belajar-
- Mengapa Kita Membutuhkan Kerangka Busur Derajat?
- Pemasangan Busur Derajat
- Contoh pengujian aplikasi AngularJS menggunakan Busur derajat
- Eksekusi Kode
- Hasilkan Laporan menggunakan Jasmine Reporters
Mengapa Kita Membutuhkan Kerangka Busur Derajat?
JavaScript digunakan di hampir semua aplikasi web. Seiring berkembangnya aplikasi, JavaScript juga meningkat dalam ukuran dan kompleksitas. Dalam kasus seperti itu, menjadi tugas yang sulit bagi Penguji untuk menguji aplikasi web untuk berbagai skenario.
Terkadang sulit untuk menangkap elemen web di aplikasi AngularJS menggunakan JUnit atau Selenium WebDriver.
Protractor adalah program NodeJS yang ditulis dalam JavaScript dan dijalankan dengan Node untuk mengidentifikasi elemen web dalam aplikasi AngularJS, dan juga menggunakan WebDriver untuk mengontrol browser dengan tindakan pengguna.
Ok, baiklah sekarang mari kita bahas apa sebenarnya aplikasi AngularJS itu?
Aplikasi AngularJS adalah Aplikasi Web yang menggunakan sintaks HTML yang diperluas untuk mengekspresikan komponen aplikasi web. Ini terutama digunakan untuk aplikasi web dinamis. Aplikasi ini menggunakan kode yang lebih sedikit dan fleksibel dibandingkan dengan Aplikasi Web biasa.
Mengapa kita tidak dapat menemukan elemen web Angular JS menggunakan driver Normal Selenium Web?
Aplikasi Angular JS memiliki beberapa atribut HTML tambahan seperti ng-repeater, ng-controller, ng-model…, dll. Yang tidak termasuk dalam pencari Selenium. Selenium tidak dapat mengidentifikasi elemen web tersebut menggunakan kode Selenium. Jadi, Busur derajat di atas Selenium dapat menangani dan mengontrol atribut tersebut di Aplikasi Web.
Busur derajat adalah kerangka pengujian ujung ke ujung untuk aplikasi berbasis JS Angular. Sementara sebagian besar kerangka kerja fokus pada melakukan pengujian unit untuk aplikasi JS Angular, Protractor berfokus pada pengujian fungsionalitas aplikasi yang sebenarnya.
Sebelum kita memulai Protractor, kita perlu menginstal yang berikut ini:
- Selenium
Anda dapat menemukan langkah-langkah Instalasi Selenium di tautan berikut, (https://www.guru99.com/installing-selenium-webdriver.html)
- NPM (Node.js)
Instalasi NodeJS, kita perlu menginstal NodeJS untuk menginstal Protractor. Anda dapat menemukan langkah-langkah penginstalan ini di tautan berikut. (https://www.guru99.com/download-install-node-js.html)
Pemasangan Busur Derajat
Langkah 1) Buka command prompt dan ketik "npm install -g busur derajat" dan tekan Enter .
Perintah di atas akan mengunduh file yang diperlukan dan menginstal Protractor pada sistem klien.
Langkah 2) Periksa instalasi dan versinya menggunakan " Protractor --version ." Jika berhasil maka akan tampil versinya seperti gambar di bawah ini. Jika tidak, lakukan langkah 1 lagi.
(Langkah 3 dan 4 bersifat Opsional tetapi disarankan untuk praktik yang lebih baik)
Langkah 3) Perbarui manajer driver Web. Manajer driver web digunakan untuk menjalankan pengujian terhadap aplikasi web sudut di browser tertentu. Setelah Busur Derajat diinstal, manajer driver web perlu diperbarui ke versi terbaru. Ini dapat dilakukan dengan menjalankan perintah berikut di command prompt.
webdriver-manager update
Langkah 4) Mulai manajer driver web. Langkah ini akan menjalankan pengelola driver web di latar belakang dan akan mendengarkan semua tes yang dijalankan melalui busur derajat.
Setelah Busur Derajat digunakan untuk menjalankan tes apa pun, driver web akan secara otomatis memuat dan menjalankan tes di browser yang relevan. Untuk memulai manajer driver web, perintah berikut harus dijalankan dari prompt perintah.
webdriver-manager start
Sekarang, jika Anda membuka URL berikut ( http: // localhost: 4444 / wd / hub / static / resource / hub.html ) di browser Anda, Anda sebenarnya akan melihat manajer driver Web berjalan di latar belakang.
Contoh pengujian aplikasi AngularJS menggunakan Busur derajat
Busur derajat membutuhkan dua file untuk dijalankan, file spesifikasi dan file konfigurasi .
- File konfigurasi : File ini membantu busur derajat ke tempat file uji ditempatkan (specs.js) dan untuk berbicara dengan server Selenium (Alamat Selenium). Chrome adalah browser default untuk Busur derajat.
- File spesifikasi: File ini berisi logika dan pelacak untuk berinteraksi dengan aplikasi .
Langkah 1) Kita harus masuk ke https://angularjs.org dan memasukkan teks sebagai "GURU99" di kotak teks "Masukkan nama di sini".
Langkah 2) Pada langkah ini,
- Memasukkan nama "Guru99"
- Dalam teks keluaran "Hello Guru99" terlihat.
Langkah 3) Sekarang kita harus menangkap teks dari halaman web setelah memasukkan nama dan perlu memverifikasi dengan teks yang diharapkan .
Kode:
Kita harus menyiapkan file konfigurasi (conf.js) dan file spesifikasi (spec.js) seperti yang disebutkan di atas.
Logika spec.js:
describe('Enter GURU99 Name', function() {it('should add a Name as GURU99', function() {browser.get('https://angularjs.org');element(by.model('yourName')).sendKeys('GURU99');var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));expect(guru.getText()).toEqual('Hello GURU99!');});});
Penjelasan Kode spec.js:
- deskripsikan ('Masukkan Nama GURU99', fungsi ()
Sintaks mendeskripsikan berasal dari kerangka Jasmine. Di sini "menjelaskan" ('Masukkan Nama GURU99') biasanya mendefinisikan komponen aplikasi, yang dapat berupa kelas atau fungsi, dll. Dalam rangkaian kode yang disebut sebagai "Masukkan GURU99," ini hanya berupa string dan bukan kode.
- it ('harus menambahkan Nama sebagai GURU99', fungsi ()
- browser.get ('https://angularjs.org')
Seperti di Selenium Webdriver browser.get akan membuka browser baru dengan URL yang disebutkan.
- elemen (by.model ('yourName')). sendKeys ('GURU99')
Di sini kami menemukan elemen web menggunakan nama Model sebagai "yourName," yang merupakan nilai "ng-model" di halaman web. Periksa tangkapan layar di bawah-
- var guru = elemen (by.xpath ('html / body / div [2] / div [1] / div [2] / div [2] / div / h1'))
Di sini kita menemukan elemen web menggunakan XPath dan menyimpan nilainya dalam variabel "guru" .
- harapkan (guru.getText ()). toEqual ('Halo GURU99!')
Akhirnya kami memverifikasi teks yang kami dapatkan dari halaman web (menggunakan gettext ()) dengan teks yang diharapkan.
Logika conf.js:
exports.config = {seleniumAddress: 'http://localhost:4444/wd/hub',specs: ['spec.js']};
Penjelasan Kode conf.js
- alamat selenium: 'http: // localhost: 4444 / wd / hub'
File Konfigurasi memberi tahu Protractor lokasi Alamat Selenium untuk berbicara dengan Selenium WebDriver.
- spesifikasi: ['spec.js']
Baris ini memberi tahu Protractor lokasi file uji spec.js
Eksekusi Kode
Di sini pertama, kami akan mengubah jalur direktori atau menavigasi ke folder tempat confi.js dan spec.js ditempatkan di sistem kami .
Ikuti langkah berikut ini.
Langkah 1) Buka command prompt.
Langkah 2) Pastikan manajer driver web selenium aktif dan berjalan. Untuk itu berikan perintah sebagai "webdriver-manager start" dan tekan Enter .
(Jika driver web selenium tidak aktif dan berjalan, kami tidak dapat melanjutkan tes karena Busur derajat tidak dapat menemukan driver web untuk menangani aplikasi web)
Langkah 3) Buka prompt perintah baru dan berikan perintah sebagai "busur derajat conf.js" untuk menjalankan file konfigurasi.
Penjelasan:
- Di sini Protractor akan menjalankan file konfigurasi dengan file spesifikasi yang diberikan di dalamnya.
- Kita bisa melihat server selenium berjalan di " http: // localhost: 4444 / wd / hub " yang telah kita berikan di file conf.js.
- Selain itu, disini bisa dilihat hasilnya berapa banyak yang lolos dan gagal seperti pada screenshot di atas .
Baik, kami telah memverifikasi hasilnya saat lulus atau sesuai harapan. Sekarang mari kita lihat hasil yang gagal juga.
Langkah 1) Buka dan ubah diharapkan menghasilkan spec.js menjadi "'Hello change GURU99" seperti di bawah ini.
Setelah perubahan spec.js :
describe('Enter GURU99 Name', function() {it('should add a Name as GURU99', function() {browser.get('https://angularjs.org');element(by.model('yourName')).sendKeys('GURU99');var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));expect(guru.getText()).toEqual('Hello change GURU99!');});});
Langkah 2) Simpan file spec.js dan ulangi langkah-langkah di atas dari bagian "Eksekusi Kode"
Sekarang, jalankan langkah-langkah di atas.
Hasil:
Kita dapat melihat hasilnya sebagai gagal ditunjukkan dengan 'F' di screenshot dengan alasan sebagai "Diharapkan 'Hello GURU99!' menjadi sama dengan 'Halo, ubah GURU99!'. Juga, ini menunjukkan berapa banyak kegagalan yang ditemui saat menjalankan kode.
Bisakah kita mencapai hal yang sama dengan driver web Selenium?
Terkadang kami dapat mengidentifikasi elemen web aplikasi AngularJS menggunakan XPath atau pemilih CSS dari driver web Selenium. Namun dalam aplikasi AngularJS, elemen akan dibuat dan diubah secara dinamis. Jadi Busur derajat adalah praktik yang lebih baik untuk bekerja dengan aplikasi AngularJS.
Hasilkan Laporan menggunakan Jasmine Reporters
Busur derajat mendukung reporter Jasmine untuk menghasilkan laporan pengujian. Di bagian ini, kita akan menggunakan JunitXMLReporter untuk menghasilkan laporan eksekusi Uji secara otomatis dalam format XML.
Ikuti langkah-langkah di bawah ini untuk menghasilkan laporan dalam format XML.
Pemasangan Reporter Jasmine
Ada dua cara untuk melakukannya, secara lokal atau global
- Buka command prompt, jalankan perintah berikut untuk menginstal secara lokal
npm install --save-dev jasmine-reporters@^2.0.0
Perintah di atas akan menginstal laporan jasmine node-modules secara lokal berarti dari direktori tempat kita menjalankan perintah di command prompt.
- Buka command prompt, jalankan perintah berikut untuk instalasi global
npm install -g jasmine-reporters@^2.0.0
Dalam tutorial ini, kami akan menginstal reporter melati secara lokal .
Langkah 1) Jalankan perintah.
npm install --save-dev jasmine-reporters@^2.0.0
dari command prompt seperti di bawah ini.
Langkah 2) Periksa folder instalasi di direktori . "Node_modules" harus tersedia jika berhasil diinstal seperti pada snapshot di bawah ini.
Langkah 3) Tambahkan kode berwarna berikut ke file conf.js yang ada
exports.config = {seleniumAddress: 'http://localhost:4444/wd/hub',capabilities: {'browserName': 'firefox'},specs: ['spec.js'],framework: 'jasmine2' ,onPrepare: function() {var jasmineReporters = require('C:/Users/RE041943/Desktop/guru/node_modules/jasmine-reporters');jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter(null, true, true));}};
Penjelasan kode:
Dalam kode, kami membuat laporan " JUnitXmlReporter " dan memberikan Jalur tempat menyimpan laporan.
Langkah 4) Buka command prompt dan jalankan perintah busur derajat conf.js.
Langkah 5) Saat Anda menjalankan kode di atas, junitresults.xml akan dibuat di jalur yang disebutkan.
Langkah 6) Buka XML dan verifikasi hasilnya. Pesan kegagalan ditampilkan di file hasil karena Kasus Uji kami gagal. Kasus Uji gagal karena Hasil yang Diharapkan dari "spec.js" tidak cocok dengan hasil Aktual dari halaman Web
Langkah 7) Gunakan file junitresult.xml untuk bukti atau file hasil.
Ringkasan:
Meskipun Selenium dapat melakukan beberapa hal seperti yang dilakukan busur derajat, busur derajat adalah standar industri dan praktik terbaik untuk menguji aplikasi AngularJS. Busur derajat juga dapat mengelola beberapa kapabilitas di dalamnya dan menangani perubahan dinamis elemen web menggunakan ng-model, ng-click…, dll… (Yang tidak dapat dilakukan oleh selenium).
Artikel ini dikontribusikan oleh Ranjith Kumar Enishetti