pertracTutorial Pengujian Tor: Kerangka Kerja Alat Otomatisasi

⚠️ Pemberitahuan penghentian penggunaan: pertractor adalah sudah usang dan diarsipkanDukungan berakhir pada Agustus 2023 dan Angular CLI menghentikan dukungan Pro-nya.tractor builder setelah Angular 15. Pilih Dramawan, Cypress, WebdriverIO atau TestCafe untuk yang baru pengujian ujung ke ujungPanduan di bawah ini tetap berlaku untuk versi lama.

Mengapa Kita Membutuhkan Profesional?tracKerangka kerja Tor?

JavaSkrip digunakan di hampir semua aplikasi web. Seiring berkembangnya aplikasi, JavaNaskah Selain itu, ukuran dan kompleksitasnya juga meningkat. 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.

pertracTor adalah program Node.js 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.

Jadi, sebenarnya apa itu aplikasi AngularJS?

AngularJS Aplikasi web adalah aplikasi yang menggunakan sintaks HTML yang diperluas untuk mengekspresikan komponen aplikasi web. Aplikasi ini terutama digunakan untuk aplikasi web dinamis. Aplikasi ini menggunakan kode yang lebih sedikit dan lebih fleksibel dibandingkan dengan aplikasi web biasa. Perlu dicatat bahwa AngularJS 1.x telah keluar dari Dukungan Jangka Panjang pada 31 Desember 2021, sehingga aplikasi semacam itu saat ini sudah ketinggalan zaman.

Mengapa kita tidak dapat menemukan elemen web AngularJS menggunakan cara biasa? Selenium Pengemudi Web?

Aplikasi AngularJS 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, Protractor di atas Selenium dapat menangani dan mengontrol atribut-atribut tersebut dalam Aplikasi Web.

pertracTor adalah kerangka kerja pengujian ujung ke ujung untuk aplikasi berbasis AngularJS. Sementara sebagian besar kerangka kerja berfokus pada pelaksanaan pengujian tes unit untuk aplikasi AngularJS, ProtracTor berfokus pada pengujian fungsionalitas sebenarnya dari sebuah aplikasi.

Sebelum kita mulai ProtracUntuk Tor, kita perlu menginstal yang berikut ini:

1. Selenium: Anda dapat menemukan Selenium langkah-langkah instalasi di Selenium Panduan instalasi WebDriver.
2. NPM (Node.js): Kita perlu menginstal Node.js untuk menginstal Pro.tracAnda dapat menemukan langkah-langkah instalasi ini di Panduan mengunduh dan menginstal Node.js.

pertracInstalasi tor

Langkah 1) Buka prompt perintah dan ketik “npm install -g protracuntuk” dan tekan Enter.

Perintah di atas akan mengunduh file yang diperlukan dan menginstal Pro.tractor pada sistem klien, seperti yang ditunjukkan di bawah ini.

Langkah 2) Periksa instalasi dan versi menggunakan "protractor –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 WebDriver. Pengelola WebDriver digunakan untuk menjalankan pengujian terhadap aplikasi web Angular di browser tertentu. Setelah ProtracSetelah Tor terinstal, WebDriver Manager perlu diperbarui ke versi terbaru. Ini dapat dilakukan dengan menjalankan perintah berikut di command prompt.

webdriver-manager update

File biner driver diunduh seperti yang ditunjukkan di bawah ini.

Langkah 4) Mulai pengelola WebDriver. Langkah ini akan menjalankan pengelola WebDriver di latar belakang dan akan mendengarkan setiap pengujian yang dijalankan melalui pro.tracuntuk.

Setelah pengujian dijalankan, WebDriver secara otomatis memuatnya di browser yang relevan. Mulai pengelola dengan perintah di bawah ini.

webdriver-manager start

Konsol tersebut melaporkan alamat yang sedang didengarkan.

Nah, jika Anda pergi ke yang berikut ini URL (http://localhost:4444/wd/hub/static/resource/hub.html) di browser Anda, Anda akan melihat pengelola WebDriver berjalan di latar belakang.

Pengujian aplikasi AngularJS sampel menggunakan Protractor

Dengan pengelola driver yang sedang berjalan, ProtracTor membutuhkan dua file untuk dijalankan, yaitu... spek file dan konfigurasi file.

1. konfigurasi fileFile ini membantu para profesional.tracuntuk menuju ke lokasi file pengujian (specs.js) dan untuk berkomunikasi dengan Selenium pelayan (Selenium Alamat). Chrome adalah browser default untuk Pro.tracuntuk.
2. File spesifikasi: File ini berisi logika dan pencari lokasi untuk berinteraksi dengan aplikasi.

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

Langkah 2) Pada langkah ini,

1. Nama dimasukkanGuru99 "
2. Dalam teks keluaran ” Halo GuruAngka 99″ terlihat.

Langkah 3) Sekarang kita harus mengambil teks dari halaman web setelah memasukkan nama dan perlu memverifikasi dengan teks yang diharapkan.

Code:

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!');
  });
});

Code Penjelasan tentang spec.js:

1. menggambarkan('Masukkan Nama GURU99', fungsi() Sintaks deskripsi berasal dari Kerangka kerja JasmineDi sini, "describe" ('Masukkan Nama GURU99') biasanya mendefinisikan komponen-komponen aplikasi, yang bisa berupa kelas atau fungsi, dan lain sebagainya. Dalam rangkaian kode yang disebut "Masukkan GURU99," itu hanyalah 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 instance browser baru dengan yang disebutkan URL.
4. elemen(oleh.model('NamaAnda')).kirimKunci('GURU99') Di sini kita mencari elemen web menggunakan nama Model sebagai “yourName,” yang merupakan nilai dari “ng-model” di halaman web. Lihat 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']
};

Code Penjelasan tentang conf.js

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

Eksekusi dari Code

Pertama, masuk ke folder tempat file conf.js dan spec.js berada, lalu ikuti langkah-langkah di bawah ini..

Langkah 1) Buka prompt perintah.

Langkah 2) Memastikan Selenium WebDriver manager sudah aktif dan berjalan. Untuk itu, berikan perintah "webdriver-manager start" dan tekan Enter..

(Jika Selenium WebDriver tidak aktif dan berjalan, kami tidak dapat melanjutkan pengujian sebagai Pro.trac(Tor tidak dapat menemukan WebDriver untuk menangani aplikasi web)

Langkah 3) Buka command prompt baru dan berikan perintah sebagai "protractor conf.js” untuk menjalankan file konfigurasi. Proses eksekusi selesai seperti yang ditunjukkan di bawah ini.

Penjelasan:

• Di sini ProtracTor akan mengeksekusi file konfigurasi yang berisi file spesifikasi yang diberikan.
• Kita bisa melihat Selenium server 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.

Hasil lulus telah diverifikasi. Selanjutnya, mari kita lihat hasil yang gagal.

Langkah 1) Buka dan ubah yang diharapkan akan menghasilkan spec.js menjadi “'Hello change 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-langkah di atas pada bagian “Eksekusi”. Codebagian

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 juga menunjukkan berapa banyak kegagalan yang ditemui saat mengeksekusi kode.

Bisakah kita mencapai hal yang sama dengan Selenium Pengemudi Web?

Terkadang elemen AngularJS dapat ditemukan dengan XPath atau pemilih CSS dari Selenium WebDriver. Namun, elemen-elemen tersebut dihasilkan dan diikat ulang secara dinamis, jadi ProtracTor adalah pilihan yang lebih aman untuk rangkaian aplikasi AngularJS.

Hasilkan Laporan menggunakan Jasmine Reporter

pertracTor mendukung reporter Jasmine. Bagian ini menggunakan JUnitGunakan XmlReporter untuk menghasilkan laporan eksekusi pengujian secara otomatis dalam format XML, ikuti langkah-langkah di bawah ini.

Pemasangan Reporter Jasmine

Ada dua pilihan, 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 menginstal jasmine-reporters secara lokal, di dalam direktori tempat perintah tersebut dijalankan.

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

npm install –g jasmine-reporters@^2.0.0

Di sini, para reporter ditempatkan 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 untuktractor conf.js.

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 Aktual dari halaman Web.

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

pertracTor vs Alternatif Otomasi Pengujian Modern

Sejak ProtracKarena Tor tidak lagi menerima pembaruan, tim yang merencanakan rangkaian framework baru perlu mengetahui bagaimana performanya dibandingkan dengan framework yang kini digunakan oleh proyek Angular. Tabel di bawah ini membandingkan Pro dan Tor.tracdengan tiga alternatif yang paling sering muncul dalam FAQ di bawah ini.

Tim yang sudah memiliki pemain profesional.tracTor Suite umumnya bergerak paling cepat ke WebdriverIO, karena gaya perintahnya dan Seleniummanajemen pengemudi berbasis tetap dekat dengan apa yang ProtracPara penguji Tor sudah mengetahuinya. Tim yang memulai dari awal, atau membutuhkan uji coba tercepat, lebih sering memilih Cypress atau lebih tepatnya, Penulis Drama.

Pertanyaan Umum Demo Slot