Apa itu Ujian Protraktor?
PROTRACTOR adalah alat ujian automasi dan tingkah laku end-to-end yang memainkan peranan penting dalam pengujian aplikasi AngularJS dan berfungsi sebagai penyatu Penyelesaian yang menggabungkan teknologi yang kuat seperti Selenium, Jasmine, pemacu Web, dll. Tujuan Ujian Protraktor bukan hanya untuk menguji aplikasi AngularJS tetapi juga untuk menulis ujian regresi automatik untuk Aplikasi Web biasa juga.
Dalam tutorial pemula ini, anda akan belajar-
- Mengapa Kita Memerlukan Rangka Kerja Protraktor?
- Pemasangan Protraktor
- Contoh ujian aplikasi AngularJS menggunakan Protractor
- Pelaksanaan Kod
- Hasilkan Laporan menggunakan Pelapor Melati
Mengapa Kita Memerlukan Rangka Kerja Protraktor?
JavaScript digunakan di hampir semua aplikasi web. Seiring berkembangnya aplikasi, JavaScript juga meningkat dalam ukuran dan kerumitan. Dalam kes sedemikian, menjadi tugas yang sukar bagi Penguji untuk menguji aplikasi web untuk pelbagai senario.
Kadang-kadang sukar untuk menangkap elemen web dalam aplikasi AngularJS menggunakan JUnit atau Selenium WebDriver.
Protractor adalah program NodeJS yang ditulis dalam JavaScript dan berjalan dengan Node untuk mengenal pasti elemen web dalam aplikasi AngularJS, dan juga menggunakan WebDriver untuk mengawal penyemak imbas dengan tindakan pengguna.
Baiklah, mari kita bincangkan apa sebenarnya aplikasi AngularJS?
Aplikasi AngularJS adalah Aplikasi Web yang menggunakan sintaks HTML yang diperluas untuk mengekspresikan komponen aplikasi web. Ia digunakan terutamanya untuk aplikasi web yang dinamik. Aplikasi ini menggunakan kod yang kurang dan fleksibel dibandingkan dengan Aplikasi Web biasa.
Mengapa kita tidak dapat menemukan elemen web Angular JS menggunakan pemacu Web Selenium Normal?
Aplikasi JS sudut mempunyai beberapa atribut HTML tambahan seperti ng-repeater, ng-controller, ng-model…, dll. Yang tidak termasuk dalam pencari Selenium. Selenium tidak dapat mengenal pasti elemen web tersebut menggunakan kod Selenium. Jadi, Protractor di bahagian atas Selenium dapat menangani dan mengawal atribut tersebut dalam Aplikasi Web.
Protraktor adalah kerangka ujian ujung ke akhir untuk aplikasi berasaskan JS Angular. Walaupun kebanyakan kerangka fokus pada menjalankan ujian unit untuk aplikasi Angular JS, Protractor memberi tumpuan untuk menguji fungsi sebenar aplikasi.
Sebelum memulakan Protractor, kita perlu memasang yang berikut:
- Selenium
Anda boleh mendapatkan langkah-langkah Pemasangan Selenium dalam pautan berikut, (https://www.guru99.com/installing-selenium-webdriver.html)
- NPM (Node.js)
Pemasangan NodeJS, kita perlu memasang NodeJS untuk memasang Protractor. Anda boleh mendapatkan langkah pemasangan ini di pautan berikut. (https://www.guru99.com/download-install-node-js.html)
Pemasangan Protraktor
Langkah 1) Buka command prompt dan ketik "npm install -g protractor" dan tekan Enter .
Perintah di atas akan memuat turun fail yang diperlukan dan memasang Protractor pada sistem pelanggan.
Langkah 2) Periksa pemasangan dan versi menggunakan " Protractor --version ." Sekiranya berjaya, ia akan menunjukkan versi seperti pada tangkapan skrin di bawah. Sekiranya tidak, lakukan langkah 1 sekali lagi.
(Langkah 3 dan 4 adalah Pilihan tetapi disyorkan untuk latihan yang lebih baik)
Langkah 3) Kemas kini pengurus pemacu Web. Pengurus pemacu web digunakan untuk menjalankan ujian terhadap aplikasi web sudut dalam penyemak imbas tertentu. Selepas Protractor dipasang, pengurus pemacu web perlu dikemas kini ke versi terkini. Ini dapat dilakukan dengan menjalankan perintah berikut di command prompt.
webdriver-manager update
Langkah 4) Mulakan pengurus pemacu web. Langkah ini akan menjalankan pengurus pemacu web di latar belakang dan akan mendengar sebarang ujian yang dijalankan melalui protraktor.
Setelah Protractor digunakan untuk menjalankan sebarang ujian, pemacu web akan memuat dan menjalankan ujian secara automatik di penyemak imbas yang berkenaan. Untuk memulakan pengurus pemacu web, arahan berikut perlu dilaksanakan dari command prompt.
webdriver-manager start
Sekarang, jika anda pergi ke URL berikut ( http: // localhost: 4444 / wd / hub / static / resource / hub.html ) di penyemak imbas anda, anda sebenarnya akan melihat pengurus pemacu Web berjalan di latar belakang.
Contoh ujian aplikasi AngularJS menggunakan Protractor
Protractor memerlukan dua fail untuk dijalankan, fail spesifikasi dan fail konfigurasi .
- Fail konfigurasi : Fail ini membantu berlarutan ke tempat fail ujian diletakkan (specs.js) dan bercakap dengan pelayan Selenium (Alamat Selenium). Chrome adalah penyemak imbas lalai untuk Protractor.
- Fail spesifikasi: Fail ini mengandungi logik dan pencari untuk berinteraksi dengan aplikasi .
Langkah 1) Kita mesti log masuk https://angularjs.org dan memasukkan teks sebagai "GURU99" di kotak teks "Masukkan nama di sini".
Langkah 2) Dalam langkah ini,
- Masukkan nama "Guru99"
- Dalam teks output "Hello Guru99" dilihat.
Langkah 3) Sekarang kita harus menangkap teks dari laman web setelah memasukkan nama dan perlu mengesahkan dengan teks yang diharapkan .
Kod:
Kita harus menyiapkan file konfigurasi (conf.js) dan file spec (spec.js) seperti yang disebutkan di atas.
Logik 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 Kod spec.js:
- huraikan ('Masukkan Nama GURU99', fungsi ()
Sintaks huraian adalah dari kerangka Melati. Di sini "huraikan" ('Masukkan Nama GURU99') biasanya mendefinisikan komponen aplikasi, yang boleh menjadi kelas atau fungsi dll. Dalam rangkaian kod yang disebut sebagai "Masukkan GURU99," itu hanya rentetan dan bukan kod.
- itu ('harus menambah Nama sebagai GURU99', fungsi ()
- browser.get ('https://angularjs.org')
Seperti di Selenium Webdriver browser.get akan membuka contoh penyemak imbas baru dengan URL yang disebutkan.
- elemen (oleh.model ('yourName')). sendKeys ('GURU99')
Di sini kita menjumpai elemen web menggunakan nama Model sebagai "nama anda", yang merupakan nilai "ng-model" di laman web. Lihat tangkapan skrin di bawah-
- var guru = elemen (by.xpath ('html / body / div [2] / div [1] / div [2] / div [2] / div / h1'))
Di sini kita menjumpai elemen web menggunakan XPath dan menyimpan nilainya dalam "guru" pemboleh ubah .
- harapkan (guru.getText ()). toEqual ('Hello GURU99!')
Akhirnya kami mengesahkan teks yang kami dapat dari laman web (menggunakan gettext ()) dengan teks yang diharapkan.
Logik conf.js:
exports.config = {seleniumAddress: 'http://localhost:4444/wd/hub',specs: ['spec.js']};
Penjelasan Kod conf.js
- seleniumAddress: 'http: // localhost: 4444 / wd / hub'
Fail Konfigurasi memberitahu Protractor lokasi Alamat Selenium untuk bercakap dengan Selenium WebDriver.
- spesifikasi: ['spec.js']
Garis ini memberitahu Protractor lokasi spesifikasi fail ujian
Pelaksanaan Kod
Di sini pertama, kita akan mengubah jalan direktori atau menavigasi ke folder di mana confi.js dan spec.js diletakkan di dalam sistem kami .
Ikuti langkah berikut.
Langkah 1) Buka arahan arahan.
Langkah 2) Pastikan pengurus pemacu web selenium berfungsi dan berjalan. Untuk itu berikan arahan sebagai "webdriver-manager start" dan tekan Enter .
(Sekiranya pemacu web selenium tidak aktif dan tidak dapat dijalankan, kami tidak dapat meneruskan ujian kerana Protractor tidak dapat mencari pemacu web untuk menangani aplikasi web)
Langkah 3) Buka command prompt baru dan berikan perintah sebagai "protractor conf.js" untuk menjalankan fail konfigurasi.
Penjelasan:
- Di sini Protractor akan melaksanakan fail konfigurasi dengan fail spesifikasi yang diberikan di dalamnya.
- Kita dapat melihat pelayan selenium berjalan di " http: // localhost: 4444 / wd / hub " yang telah kita berikan dalam fail conf.js.
- Juga, di sini dapat melihat hasilnya berapa banyak yang lulus dan kegagalan seperti pada tangkapan skrin di atas .
Baiklah, kami telah mengesahkan hasilnya apabila ia lulus atau seperti yang diharapkan. Sekarang mari kita melihat hasil yang gagal juga.
Langkah 1) Buka dan ubah yang diharapkan akan menghasilkan spec.js kepada "'Hello ubah GURU99" seperti di bawah.
Selepas perubahan dalam 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 fail spec.js dan ulangi langkah di atas "Pelaksanaan Kod" bahagian
Sekarang, jalankan langkah di atas.
Keputusan:
Kami dapat melihat hasilnya yang gagal ditunjukkan dengan 'F' di tangkapan skrin dengan alasan sebagai "Diharapkan" Hello GURU99! ' untuk sama dengan 'Hello change GURU99!'. Juga, menunjukkan berapa banyak kegagalan yang dihadapi ketika menjalankan kod.
Bolehkah kita mencapai yang sama dengan pemacu web Selenium?
Kadang kala kita dapat mengenal pasti elemen web aplikasi AngularJS menggunakan pemilih XPath atau CSS dari pemacu web Selenium. Tetapi dalam aplikasi AngularJS, elemen akan dihasilkan dan diubah secara dinamik. Jadi Protractor adalah amalan yang lebih baik untuk bekerja dengan aplikasi AngularJS.
Hasilkan Laporan menggunakan Pelapor Melati
Protractor menyokong pemberita Jasmine untuk menghasilkan laporan ujian. Di bahagian ini, kami akan menggunakan JunitXMLReporter untuk menghasilkan laporan pelaksanaan Ujian secara automatik dalam format XML.
Ikuti langkah-langkah berikut untuk menghasilkan laporan dalam format XML.
Pemasangan Wartawan Melati
Terdapat dua cara untuk melakukan ini, secara tempatan atau global
- Buka command prompt laksanakan perintah berikut untuk dipasang secara tempatan
npm install --save-dev jasmine-reporters@^2.0.0
Perintah di atas akan memasang laporan melati node-modul bermaksud secara lokal dari direktori di mana kita menjalankan perintah di command prompt.
- Buka arahan arahan laksanakan perintah berikut untuk pemasangan global
npm install -g jasmine-reporters@^2.0.0
Dalam tutorial ini, kami akan memasang wartawan melati secara tempatan .
Langkah 1) Jalankan arahan.
npm install --save-dev jasmine-reporters@^2.0.0
dari command prompt seperti di bawah.
Langkah 2) Periksa folder pemasangan di direktori . "Node_modules" harus tersedia jika berjaya dipasang seperti dalam gambar di bawah.
Langkah 3) Tambahkan kod berwarna berikut ke fail 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 kod:
Dalam kod, kami menghasilkan laporan " JUnitXmlReporter " dan memberikan Jalan tempat menyimpan laporan.
Langkah 4) Buka command prompt dan jalankan perintah protraktor conf.js.
Langkah 5) Apabila anda melaksanakan kod di atas, junitresults.xml akan dihasilkan di jalan yang disebutkan.
Langkah 6) Buka XML dan sahkan hasilnya. Mesej kegagalan ditunjukkan dalam fail hasil kerana Kes Ujian kami gagal. Kes Ujian gagal kerana Hasil yang Diharapkan dari "spec.js" tidak dipadankan dengan hasil Sebenar dari laman Web
Langkah 7) Gunakan fail junitresult.xml untuk bukti atau fail hasil.
Ringkasan:
Walaupun Selenium dapat melakukan beberapa perkara yang dilakukan oleh protraktor, protraktor itu adalah standard industri dan amalan terbaik untuk menguji aplikasi AngularJS. Protraktor juga dapat menguruskan beberapa kemampuan di dalamnya dan menangani perubahan dinamis elemen web menggunakan model ng, klik-ng…, dll… (Selenium mana yang tidak dapat dilakukan).
Artikel ini disumbangkan oleh Ranjith Kumar Enishetti