Ujian Fungsi JavaScript dengan Nightwatch.js

Eric Elliott telah menulis artikel mengenai ujian JavaScript: ujian JavaScript: ujian unit, ujian fungsional, dan ujian integrasi, yang menerangkan pelbagai jenis ujian dan kapan menggunakan ujian yang mana.

Artikel ini akan meneroka ujian fungsional JavaScript dengan lebih mendalam dan menunjukkan menggunakan Perpustakaan Nightwatch.js.

Sebelum kita mula, mari kita semak ujian fungsional dan mengapa ia penting. Ringkasnya, ujian fungsional direka untuk memastikan aplikasi berfungsi seperti yang diharapkan dari perspektif pengguna.

Kami tidak bercakap mengenai ujian teknikal seperti ujian unit atau ujian integrasi. Matlamat di sini adalah untuk memastikan pengguna dapat melaksanakan senario tertentu dengan lancar seperti log masuk ke platform, membeli produk, dan sebagainya.

mata utama

nightwatch.js adalah rangka kerja ujian akhir-ke-akhir berdasarkan Node.js. Ia bergantung kepada selenium untuk automasi pelayar web, yang membolehkan senario skrip ditulis dan kemudian dilaksanakan secara automatik oleh pelayar.
nightwatch.js memerlukan node.js untuk dipasang pada mesin, dan ia bergantung pada API Webdriver Selenium, yang memerlukan pelayan WebDriver Selenium yang berjalan di Java, jadi Kit Pembangunan Java (JDK 7) perlu dipasang persekitaran pengguna.
• Konfigurasi
nightwatch.js boleh diletakkan dalam fail
• atau fail nightwatch.json pada akar projek. persekitaran pengeluaran. nightwatch.conf.js
nightwatch.js menyokong kaedah objek halaman yang membungkus halaman yang diuji atau coretan halaman ke objek untuk abstrak HTML yang mendasari dan konfigurasi biasa, memudahkan senario dan menjadikan suite ujian lebih mudah untuk dikekalkan.

Nightwatch.js Pengenalan nightwatch.js menggambarkan dirinya sebagai rangka ujian akhir-ke-akhir berdasarkan Node.js. Ia bergantung kepada Selenium, sebuah projek yang direka untuk memudahkan automasi pelayar web.

dengan sintaks mesra pengguna, nightwatch.js boleh "skrip" senario dan kemudian dilaksanakan secara automatik oleh penyemak imbas (tidak semestinya tidak berkepala).

Pemasangan Nightwatch

NightWatch sendiri adalah modul Node.js, yang bermaksud anda perlu memasang Node.js pada mesin anda. Cara paling mudah ialah menggunakan pengurus versi, seperti NVM. Nightwatch diedarkan pada npm, jadi anda boleh memasangnya seperti anda akan memasang modul lain - pasangnya secara global dengan

atau pasangnya dalam projek semasa menggunakan

. -g --save-dev

NightWatch bergantung pada API WebDriver Selenium, jadi ia memerlukan pelayan WebDriver Selenium. Ia berjalan di Java, yang bermaksud anda juga harus memasang Kit Pembangunan Java (JDK 7) di persekitaran anda. Anda boleh memuat turun JDK dari laman web Oracle.

npm install --save-dev nightwatch

Selepas memuat turun dan pemasangan selesai, anda boleh menggunakan java -version untuk memastikan Java tersedia pada mesin anda. Langkah terakhir adalah untuk memuat turun Server Standalone Selenium yang dibungkus sebagai balang dari halaman muat turun Selenium. Saya cadangkan anda memasukkannya ke dalam folder bin dalam projek anda.

npm install --save-dev nightwatch

Baiklah, kami sudah bersedia sekarang. Mari bermula.

Konfigurasi Nightwatch

Seperti yang anda bayangkan, Nightwatch mempunyai banyak konfigurasi. Nasib baik, kita tidak perlu tahu segala -galanya untuk bermula. Konfigurasi boleh diletakkan dalam fail

atau fail nightwatch.json dalam direktori root projek. Saya cadangkan menggunakan yang terakhir kerana ia lebih fleksibel dan membolehkan anda menambah komen. nightwatch.conf.js

<code>your_project/
|
|– bin/
|   |– selenium-server-standalone-2.53.1.jar
|
`– package.json</code>

Nota: Saya secara peribadi fikir ia lebih mudah dibaca apabila fail konfigurasi dibahagikan kepada objek konfigurasi yang lebih kecil, dan fail JSON tidak membenarkan ini.

Dalam kes ini, kami memberitahu NightWatch bahawa ujian kami akan berada di folder

, menggunakan konfigurasi selenium tertentu dan tetapan ujian tertentu. Mari lihat satu demi satu: tests

var SELENIUM_CONFIGURATION = {
  start_process: true,
  server_path: 'bin/selenium-server-standalone-2.53.0.jar',
  host: '127.0.0.1',
  port: 4444
};

var FIREFOX_CONFIGURATION = {
  browserName: 'firefox',
  javascriptEnabled: true,
  acceptSslCerts: true
};

var DEFAULT_CONFIGURATION = {
  launch_url: 'http://localhost',
  selenium_port: 4444,
  selenium_host: 'localhost',
  desiredCapabilities: FIREFOX_CONFIGURATION
};

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

module.exports = {
  src_folders: ['tests'],
  selenium: SELENIUM_CONFIGURATION,
  test_settings: ENVIRONMENTS
};

Dengan objek konfigurasi ini, kami memberitahu Selenium untuk menjalankan

, yang menjadi nilai lalai Nightwatch. Kami juga memastikan ia bermula secara automatik menggunakan pelayan Selenium yang kami muat turun dan disimpan dalam folder 127.0.0.1:4444. bin

NOTA: Untuk penggunaan yang lebih maju, pastikan anda menyemak senarai semua pilihan selenium.

terus ke persediaan ujian sebenar:

Pilihan

var SELENIUM_CONFIGURATION = {
  start_process: true,
  server_path: 'bin/selenium-server-standalone-2.53.0.jar',
  host: '127.0.0.1',
  port: 4444
};

Nightwatch

mengharapkan objek yang kunci adalah nama setiap persekitaran, dipetakan ke objek konfigurasi yang lain. Dalam kes ini, kami belum menubuhkan persekitaran tersuai (belum), jadi kami menggunakan persekitaran lalai. Kemudian, kita boleh mempunyai persekitaran ujian pementasan atau pengeluaran. test_settings

Dalam konfigurasi persekitaran, kami memberitahu Nightwatch yang URL dibuka (contohnya, URL untuk persekitaran pementasan akan berbeza) dan pelayar yang harus digunakan untuk menjalankan ujian.

NOTA: Untuk penggunaan yang lebih maju, pastikan anda menyemak senarai semua pilihan ujian.

var DEFAULT_CONFIGURATION = {
  launch_url: 'http://localhost',
  selenium_port: 4444,
  selenium_host: 'localhost',
  desiredCapabilities: FIREFOX_CONFIGURATION
};

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

Dalam kes ini, kami akan menggunakan Firefox, membolehkan JavaScript, dan menerima sijil SSL. Kita boleh melangkah lebih jauh dan menentukan versi penyemak imbas tertentu (menggunakan

) atau sistem operasi (menggunakan version). platform

NOTA: Untuk penggunaan yang lebih maju, pastikan anda menyemak senarai semua pilihan ciri.

Baiklah, kami kini mempunyai konfigurasi yang betul. Sudah tiba masanya untuk menulis ujian pertama anda!

Menulis Ujian Nightwatch

Untuk ujian kami, kami akan mempertimbangkan halaman log masuk yang terletak di

dengan medan e -mel, medan kata laluan, dan butang hantar. Selepas menyerahkan borang, pengguna harus diarahkan ke halaman yang memaparkan "suapan berita". /login

Dalam konfigurasi kami, kami menyatakan bahawa ujian terletak dalam folder bernama tests. Mari buat folder tests ini, dan fail bernama login.js.

npm install --save-dev nightwatch

Fail ini akan mengeksport objek yang menggambarkan senario kami. Setiap kunci (jika terdapat banyak) adalah nama ujian, dipetakan ke fungsi yang mengandungi langkah -langkah yang akan dilakukan.

<code>your_project/
|
|– bin/
|   |– selenium-server-standalone-2.53.1.jar
|
`– package.json</code>

Fungsi ujian

mendedahkan objek yang menyediakan API yang diperlukan untuk menggambarkan tempat kejadian. Perkara pertama yang perlu dilakukan ialah menavigasi ke url log masuk. Kemudian, isikan medan dan tekan butang. Akhirnya, periksa sama ada kita dapat melihat teks "suapan berita".

var SELENIUM_CONFIGURATION = {
  start_process: true,
  server_path: 'bin/selenium-server-standalone-2.53.0.jar',
  host: '127.0.0.1',
  port: 4444
};

var FIREFOX_CONFIGURATION = {
  browserName: 'firefox',
  javascriptEnabled: true,
  acceptSslCerts: true
};

var DEFAULT_CONFIGURATION = {
  launch_url: 'http://localhost',
  selenium_port: 4444,
  selenium_host: 'localhost',
  desiredCapabilities: FIREFOX_CONFIGURATION
};

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

module.exports = {
  src_folders: ['tests'],
  selenium: SELENIUM_CONFIGURATION,
  test_settings: ENVIRONMENTS
};

Nota: Sentiasa gunakan .end() untuk menamatkan senarai arahan supaya sesi selenium ditutup dengan betul.

Ini sangat mudah! Kami kini boleh menjalankan ujian kami untuk melihat apakah ia berfungsi:

var SELENIUM_CONFIGURATION = {
  start_process: true,
  server_path: 'bin/selenium-server-standalone-2.53.0.jar',
  host: '127.0.0.1',
  port: 4444
};

ini harus memberi kita hasil seperti ini:

Nota: Dengan pembebasan Firefox 47, versi FirefoxDriver berasaskan sambungan telah berhenti berfungsi. Ini telah ditetapkan dalam Firefox 47.1 dan Selenium 2.53.1. Untuk menjalankan ujian menggunakan penyemak imbas yang berbeza, periksa wiki projek.

Perkara terakhir yang boleh kita lakukan adalah untuk mengelakkan mengakses binari malam setiap kali, buat skrip NPM kecil sebagai alias dalam

: package.json

var DEFAULT_CONFIGURATION = {
  launch_url: 'http://localhost',
  selenium_port: 4444,
  selenium_host: 'localhost',
  desiredCapabilities: FIREFOX_CONFIGURATION
};

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

Meningkatkan Ujian Nightwatch

Mempunyai banyak ujian fungsional menghasilkan banyak maklumat pendua, yang membuat penyelenggaraan (ya, suite ujian juga memerlukan penyelenggaraan). Untuk mengelakkan ini, kita boleh menggunakan objek

objek .

Di dunia ujian akhir-ke-akhir, pendekatan objek halaman adalah corak popular yang melibatkan pembungkus halaman (atau fragmen halaman) ke objek. Matlamatnya adalah untuk abstrak HTML yang mendasari dan konfigurasi biasa untuk memudahkan senario.

bernasib baik, Nightwatch mempunyai cara mudah untuk mengendalikan objek halaman. Perkara pertama yang perlu kita lakukan ialah menambah pilihan

ke konfigurasi. Saya fikir page_objects_path masuk akal; tests/pages

var FIREFOX_CONFIGURATION = {
  browserName: 'firefox',
  javascriptEnabled: true,
  acceptSslCerts: true
};

Sekarang, kita boleh membuat fail

dalam folder ini. Nama fail akan digunakan sebagai kunci untuk mengambil semua konfigurasi yang ditentukan dalam fail ini, jadi saya cadangkan memberikan nama yang bermakna. login.js

Dalam fail ini, kami akan menentukan URL dan alias beberapa elemen HTML dengan nama yang mesra untuk membuat senario masa depan lebih mudah.

<code>your_project/
|
|– bin/
|   |– selenium-server-standlone-2.53.1.jar
|
|– tests/
|   |– login.js
|
|- nightwatch.conf.js
`– package.json</code>

Sila ambil perhatian bahawa kami tidak mempunyai URL yang dikodkan. Sebaliknya, kami menjadikannya bergantung kepada pilihan

yang ditakrifkan dalam konfigurasi persekitaran. Dengan cara ini, objek halaman kami tidak mempunyai konteks dan ia berfungsi tanpa mengira persekitaran. launchUrl

Mengubah ujian kami untuk menggunakan objek halaman kini sangat mudah. Pertama, kita perlu mengambil halaman dari objek halaman melalui klien. Setiap objek halaman didedahkan sebagai fungsi yang dinamakan selepas nama fail objek halaman (mis. ). login()

kemudian kita boleh menggantikan pemilih CSS kami dengan alias dan awalan kami dengan simbol

untuk menunjukkan bahawa kami merujuk kepada nama tersuai. Itu sahaja. @

npm install --save-dev nightwatch

Perhatikan bagaimana kami menamatkan sesi pada klien itu sendiri, bukan pada halaman.

Menggunakan pelbagai persekitaran

Keupayaan untuk menjalankan ujian fungsional dalam persekitaran yang berbeza sangat berguna untuk memastikan kerja tempatan tidak memecahkan sebarang laluan pengguna, atau persekitaran pementasan dan pengeluaran berfungsi dengan cara yang sama.

Untuk menjalankan ujian dalam persekitaran tertentu, kita boleh menggunakan pilihan

di CLI. Apabila kita menghilangkan pilihan ini, persekitaran lalai (sudah dalam konfigurasi kita) akan digunakan. --env

Mari tambahkan persekitaran pementasan ke konfigurasi kami.

<code>your_project/
|
|– bin/
|   |– selenium-server-standalone-2.53.1.jar
|
`– package.json</code>

Sekarang, apabila kita menjalankan ujian, pilihan

akan berubah mengikut persekitaran. launch_url

var SELENIUM_CONFIGURATION = {
  start_process: true,
  server_path: 'bin/selenium-server-standalone-2.53.0.jar',
  host: '127.0.0.1',
  port: 4444
};

var FIREFOX_CONFIGURATION = {
  browserName: 'firefox',
  javascriptEnabled: true,
  acceptSslCerts: true
};

var DEFAULT_CONFIGURATION = {
  launch_url: 'http://localhost',
  selenium_port: 4444,
  selenium_host: 'localhost',
  desiredCapabilities: FIREFOX_CONFIGURATION
};

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

module.exports = {
  src_folders: ['tests'],
  selenium: SELENIUM_CONFIGURATION,
  test_settings: ENVIRONMENTS
};

Ringkasan

mari kita meringkaskan semua ini. Nightwatch.js adalah rangka kerja JavaScript untuk menulis ujian fungsi akhir-ke-akhir. Ia bergantung pada API Webdriver Selenium dan dapat menjalankan pelayar yang berbeza secara automatik.

Ujian menulis terutamanya melibatkan menentukan senario pengguna biasa. Untuk tujuan ini, terdapat API yang mudah tetapi sangat lengkap.

dari sini saya akan menyerahkannya kepada anda dan menggalakkan anda untuk mula menulis ujian fungsional untuk projek terbesar anda untuk memastikan anda tidak pernah memecahkan ciri pengguna lagi!

Nightwatch.js FAQ (FAQ)

Apakah tujuan utama nightwatch.js dalam ujian JavaScript?

nightwatch.js adalah aplikasi web yang kuat dan mudah digunakan dan penyelesaian ujian laman web yang ditulis dalam node.js. Ia memudahkan proses menubuhkan integrasi berterusan dan menulis ujian automatik. Nightwatch.js juga boleh digunakan untuk menulis ujian unit Node.js. Ia menyediakan sintaks bersih yang membolehkan anda menulis ujian dengan cepat, dan ia mempunyai pelari ujian baris komando terbina dalam yang membolehkan anda menjalankan ujian secara berurutan atau selari, dikelompokkan atau tersendiri.

bagaimana nightwatch.js berbanding dengan kerangka ujian JavaScript yang lain?

nightwatch.js menonjol kerana kesederhanaan dan kemudahan penggunaannya. Ia mempunyai sintaks ringkas dan jelas yang membuat ujian menulis kurang rumit. Tidak seperti kerangka ujian lain, Nightwatch.js dilengkapi dengan pelari ujian, tiada alat lain diperlukan. Ia juga menyokong pemilih CSS dan XPath, menjadikannya lebih universal apabila berurusan dengan pelbagai jenis elemen di laman web.

bolehkah nightwatch.js digunakan untuk ujian akhir-ke-akhir?

Ya, Nightwatch.js adalah alat yang sangat baik untuk ujian akhir-ke-akhir. Ia membolehkan anda menulis ujian yang mensimulasikan interaksi pengguna dengan aplikasi web anda, memastikan semua komponen berfungsi bersama seperti yang diharapkan. Dengan Nightwatch.js, anda boleh mensimulasikan pelbagai senario seperti penyerahan bentuk, navigasi halaman, dan juga proses yang kompleks.

Bagaimana menangani ujian tak segerak?

nightwatch.js menggunakan mekanisme panggilan balik mudah untuk mengendalikan ujian tak segerak. Setiap arahan ujian di nightwatch.js berjalan secara asynchronously dalam urutan yang ditetapkan. Pelari ujian menunggu setiap arahan selesai sebelum meneruskan dengan arahan seterusnya. Ini memastikan bahawa semua arahan dilaksanakan dalam urutan yang betul, walaupun mereka tidak segerak.

Bolehkah saya menggunakan nightwatch.js dengan perpustakaan ujian lain?

Ya, nightwatch.js boleh digunakan dengan perpustakaan ujian lain. Ia direka untuk bekerja dengan lancar dengan perpustakaan lain seperti Mocha, Jasmine, dan Qunit. Ini membolehkan anda memanfaatkan pelbagai perpustakaan ujian untuk membuat suite ujian yang komprehensif untuk aplikasi web anda.

bagaimana untuk menetapkan nightwatch.js untuk projek saya?

Menyediakan Nightwatch.js termasuk beberapa langkah. Pertama, anda perlu memasang Node.js dan NPM pada mesin anda. Anda kemudian boleh memasang Nightwatch.js menggunakan NPM. Selepas pemasangan selesai, anda perlu membuat fail konfigurasi untuk nightwatch.js di mana anda menentukan tetapan dan pilihan ujian anda. Selepas itu, anda boleh mula menulis ujian.

bolehkah nightwatch.js digunakan untuk ujian silang penyemak imbas?

Ya, nightwatch.js menyokong ujian silang penyemak imbas. Ia mengintegrasikan dengan lancar dengan Selenium WebDriver, alat untuk pelayar automatik. Ini bermakna anda boleh menulis ujian yang boleh dijalankan pada pelbagai pelayar menggunakan Nightwatch.js untuk memastikan aplikasi web anda berfungsi dengan baik pada platform yang berbeza.

bagaimana untuk debug ujian di nightwatch.js?

nightwatch.js menyediakan beberapa pilihan ujian debugging. Anda boleh menggunakan debugger terbina dalam node.js atau menggunakan alat luaran seperti Chrome Devtools. Nightwatch.js juga menyediakan mesej ralat terperinci dan jejak timbunan untuk memudahkan untuk mengenal pasti dan menyelesaikan masalah apabila ujian gagal.

Bolehkah saya menggunakan nightwatch.js untuk ujian mudah alih?

Walaupun nightwatch.js terutamanya digunakan untuk ujian web, ia juga boleh digunakan untuk ujian mudah alih dengan mengintegrasikan dengan Appium, kerangka ujian mudah alih yang popular. Ini membolehkan anda menulis ujian untuk aplikasi mudah alih menggunakan sintaks dan alat yang sama seperti ujian web.

bagaimana menjalankan ujian selari menggunakan nightwatch.js?

nightwatch.js secara asli menyokong pelaksanaan ujian selari. Anda boleh menentukan ujian untuk dijalankan selari dalam fail konfigurasi. Apabila anda menjalankan ujian, nightwatch.js secara automatik menyerahkan ujian kepada pelbagai program pekerja, mempercepat masa pelaksanaan ujian keseluruhan.

Output mengekalkan pemformatan dan penempatan imej asal.

Atas ialah kandungan terperinci Ujian Fungsi JavaScript dengan Nightwatch.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!