Tutorial Pengujian Busur Derajat: Kerangka Alat Otomasi

Mengapa Kita Membutuhkan Kerangka Busur Derajat?

JavaScript digunakan di hampir semua aplikasi web. Seiring dengan berkembangnya aplikasi, JavaNaskah 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 dalam aplikasi AngularJS menggunakan JUnit or Selenium Pengemudi Web.

Busur derajat adalah program NodeJS yang ditulis dalam JavaSkrip dan berjalan 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 normal.

Mengapa kami tidak dapat menemukan elemen web Angular JS menggunakan Normal Selenium Pengemudi web?

Aplikasi Angular JS memiliki beberapa atribut HTML tambahan seperti ng-repeater, ng-controller, ng-model.., dll. yang tidak termasuk dalam Selenium pencari lokasi. Selenium tidak dapat mengidentifikasi elemen web yang digunakan Selenium kode. Jadi, Busur Derajat di atas Selenium dapat menangani dan mengontrol atribut-atribut tersebut di Aplikasi Web.

Busur derajat adalah kerangka pengujian ujung ke ujung untuk aplikasi berbasis Angular JS. Meskipun sebagian besar kerangka kerja berfokus pada pengujian unit untuk aplikasi Angular JS, Busur Derajat berfokus pada pengujian fungsionalitas sebenarnya dari suatu aplikasi.

Sebelum kita memulai Protractor, kita perlu menginstal yang berikut ini:

1. SeleniumAnda dapat menemukan Selenium Langkah-langkah instalasi ada di tautan berikut, (https://www.guru99.com/installing-selenium-webdriver.html )
2. NPM (Node.js)Instalasi NodeJS, kita perlu menginstal NodeJS untuk menginstal Protractor. Anda dapat menemukan langkah-langkah instalasi ini di tautan berikut. ( https://www.guru99.com/download-install-node-js.html )

Pemasangan Busur Derajat

Langkah 1) Buka prompt perintah dan ketik “npm install –g busur derajat” dan tekan Enter.

Perintah di atas akan mengunduh file yang diperlukan dan menginstal Busur Derajat pada sistem klien.

Langkah 2) Periksa instalasi dan versi menggunakan "Busur derajat –versi. " Jika berhasil maka akan muncul versinya seperti gambar di bawah ini. Jika tidak, lakukan langkah 1 lagi.

(Langkah 3 dan 4 bersifat Opsional tetapi disarankan untuk latihan yang lebih baik)

Langkah 3) Perbarui pengelola driver web. Pengelola driver web digunakan untuk menjalankan pengujian terhadap aplikasi web angular di browser tertentu. Setelah Protractor diinstal, pengelola 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 manajer driver web di latar belakang dan akan mendengarkan tes apa pun yang dijalankan melalui busur derajat.

Setelah Protractor digunakan untuk menjalankan pengujian apa pun, driver web akan secara otomatis memuat dan menjalankan pengujian di browser yang relevan. Untuk memulai pengelola driver web, perintah berikut perlu dijalankan dari command prompt.

webdriver-manager start

Sekarang, jika Anda pergi ke URL berikut (http://localhost:4444/wd/hub/static/resource/hub.html) di browser Anda, Anda akan melihat manajer driver Web berjalan di latar belakang.

Contoh pengujian aplikasi AngularJS menggunakan Busur Derajat

Busur derajat membutuhkan dua file untuk dijalankan, a spek file dan konfigurasi file.

1. konfigurasi file: File ini membantu busur derajat ke tempat file pengujian ditempatkan (specs.js) dan untuk diajak bicara Selenium pelayan (Selenium Alamat). Chrome adalah browser default untuk Busur Derajat.

2. File spesifikasi: File ini berisi logika dan pencari lokasi untuk berinteraksi dengan aplikasi.

Langkah 1) Kita harus masuk https://angularjs.org dan masukkan teks sebagai “GURU99” di kotak teks “Masukkan nama di sini”.

Langkah 2) Pada langkah ini,

1. Memasukkan nama “Guru99”
2. Dalam teks keluaran “Halo Guru99″ terlihat.

Langkah 3) Sekarang kita harus mengambil 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 (spesifikasi.js) seperti 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:

1. menggambarkan('Masukkan Nama GURU99', function()Sintaks deskripsi berasal dari kerangka Jasmine. Di sini "deskripsikan" ('Masukkan Nama GURU99') biasanya mendefinisikan komponen aplikasi, yang dapat berupa kelas atau fungsi, dll. Dalam rangkaian kode disebut sebagai “Masukkan GURU99,” itu hanya sebuah string dan bukan kode.
2. it('harus menambahkan Nama sebagai GURU99', function()
3. browser.dapatkan('https://angularjs.org') Seperti di Selenium Webdriver browser.get akan membuka contoh browser baru dengan URL yang disebutkan.
4. elemen(oleh.model('NamaAnda')).kirimKunci('GURU99') Di sini kita menemukan elemen web menggunakan nama Model sebagai “NamaAnda”, yang merupakan nilai “ng-model” pada halaman web. Periksa tangkapan layar di bawah ini-

5. var guru= element(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”.
6. mengharapkan(guru.getText()).untuk Setara('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

1. seleniumAddress: 'http://localhost:4444/wd/hub'File Konfigurasi memberi tahu Protractor lokasi Selenium Alamat untuk diajak bicara Selenium Pengemudi Web.
2. spesifikasi: ['spec.js']Baris ini memberitahu Busur Derajat lokasi file pengujian spec.js

Eksekusi Kode

Di sini pertama, kita akan mengubah jalur direktori atau menavigasi ke folder tempat confi.js dan spec.js ditempatkan di sistem kita.

Ikuti langkah berikut.

Langkah 1) Buka prompt perintah.

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 pengujian karena Busur Derajat tidak dapat menemukan driver web untuk menangani aplikasi web)

Langkah 3) Buka command prompt baru dan berikan perintah sebagai "conf.js busur derajat" untuk menjalankan file konfigurasi.

Penjelasan:

• Di sini Busur Derajat akan mengeksekusi file konfigurasi dengan file spesifikasi tertentu di dalamnya.
• Kita dapat melihat server Selenium berjalan di “http://localhost:4444/wd/hubyang telah kami berikan di file conf.js.
• Di sini juga dapat dilihat hasil berapa banyak yang lolos dan gagal seperti pada gambar di atas.

Baik, hasilnya sudah kami verifikasi apakah lolos atau sesuai harapan. Sekarang mari kita lihat hasil kegagalannya juga.

Langkah 1) Buka dan ubah diharapkan menghasilkan spec.js menjadi “'Halo ubah GURU99” seperti di bawah ini.

Setelah perubahan di 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 di atas pada bagian “Eksekusi Kode”.

Sekarang, jalankan langkah-langkah di atas.

Hasil:

Kita bisa melihat hasilnya gagal yang ditunjukkan dengan 'F' di screenshot dengan alasan sebagai “Diharapkan 'Halo GURU99!' untuk sama dengan 'Halo ubah GURU99!'. Selain itu, ini menunjukkan berapa banyak kegagalan yang ditemui saat mengeksekusi kode.

Bisakah kita mencapai hal yang sama dengan Selenium pengemudi web?

Terkadang kita dapat mengidentifikasi elemen web aplikasi AngularJS menggunakan XPath atau pemilih CSS dari Selenium pengemudi web. Namun dalam aplikasi AngularJS, elemen akan dihasilkan dan diubah secara dinamis. Jadi Busur Derajat adalah praktik terbaik untuk bekerja dengan aplikasi AngularJS.

Hasilkan Laporan menggunakan Jasmine Reporter

Busur derajat mendukung reporter Jasmine untuk membuat laporan pengujian. Di bagian ini, kita akan menggunakan JunitXMLReporter untuk menghasilkan laporan eksekusi pengujian secara otomatis dalam format XML.

Ikuti langkah-langkah di bawah ini untuk menghasilkan laporan dalam format XML.

Pemasangan Reporter Jasmine

Ada dua cara untuk melakukan ini, secara lokal atau global

1. Buka command prompt dan jalankan perintah berikut untuk menginstal secara lokal

npm install --save-dev jasmine-reporters@^2.0.0

Perintah di atas akan menginstal laporan melati node-modul secara lokal berarti dari direktori tempat kita menjalankan perintah di command prompt.

2. Buka command prompt dan jalankan perintah berikut untuk instalasi global

npm install –g jasmine-reporters@^2.0.0

Dalam tutorial ini, kita 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” akan tersedia jika berhasil diinstal seperti pada cuplikan 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 Path tempat menyimpan laporan.

Langkah 4) Buka command prompt dan jalankan perintah conf.js busur derajat.

Langkah 5) Saat Anda menjalankan kode di atas, junitresults.xml akan dihasilkan di jalur yang disebutkan.

Langkah 6) Buka XML dan verifikasi hasilnya. Pesan kegagalan ditampilkan di file hasil sebagai milik kita Uji Kasus gagal. Kasus Uji gagal karena Hasil yang Diharapkan dari “spec.js” tidak sesuai dengan hasil Sebenarnya dari halaman Web

Langkah 7) Gunakan file junitresult.xml untuk file bukti atau hasil.

Ringkasan

Meskipun Selenium dapat melakukan beberapa hal yang dilakukan busur derajat, busur derajat adalah standar industri dan praktik terbaik untuk menguji aplikasi AngularJS. Busur Derajat juga dapat mengelola berbagai kemampuan di dalamnya dan menangani perubahan dinamis elemen web yang digunakan ng-model, ng-klik.., dll.. (Yang tidak bisa dilakukan Selenium).