Cara Menguji JavaScript Anda Dengan Selenium Webdriver dan Mocha

mata teras

mocha.js adalah kerangka ujian JavaScript yang kaya dengan ciri berdasarkan Node.js, yang boleh digunakan untuk menulis ujian fungsi JavaScript dalam kombinasi dengan Selenium WebDriver 3 dan NodeJS. Ini memerlukan kebiasaan dengan asas -asas bahasa pengaturcaraan NodeJs dan JavaScript.
Mocha menyediakan API untuk membina kod ujian ke dalam suite ujian dan modul kes ujian untuk membolehkan pelaksanaan dan laporan generasi. Ia menyokong persediaan suite ujian dan fungsi air mata, serta persediaan kes ujian dan fungsi air mata.
Selenium WebDriver adalah perpustakaan yang mengawal pelayar web dan mensimulasikan tingkah laku pengguna, dan boleh diintegrasikan dengan mochajs. Ia menyediakan API perpustakaan bahasa tertentu yang dipanggil "mengikat" untuk mengawal penyemak imbas.
fungsi async yang digunakan dengan mocha perlu dikendalikan dengan betul untuk mengelakkan hasil yang tidak dijangka. Ini boleh dilakukan dengan meluluskan fungsi "selesai" ke rantaian panggil balik atau mengembalikan janji.
Rangka kerja lain seperti WebDriverio, Protractor, dan CodeSeptJS menyediakan penyelesaian pembalut yang menyembunyikan beberapa konfigurasi untuk pengguna dan menyediakan pemprosesan janji yang dipertingkatkan untuk pengalaman skrip yang lebih baik.

Artikel ini pada asalnya diterbitkan pada TestProject.

Jika anda ingin menulis ujian fungsional dalam JavaScript, tutorial ini menyediakan jurutera automasi UI dengan bahan rujukan berstruktur yang sempurna untuk ujian JavaScript menggunakan Selenium WebDriver 3, Mocha, dan NodeJS.

JavaScript adalah bahasa web di mana -mana hari ini yang seolah -olah mengatasi masa lalu "terkenal" dan telah menjadi platform yang lebih dipercayai untuk bukan sahaja pelanggan tetapi juga pelayan. Mocha.js (atau Mocha untuk pendek) adalah rangka kerja ujian JavaScript yang kaya dengan Node.Js.

Nota: Untuk mula mempelajari tutorial JavaScript ini, anda perlu mengenali asas -asas bahasa pengaturcaraan NodeJs dan JavaScript.

Gambaran keseluruhan tutorial:

Mocha Test Build

Pengenalan
• Pemasangan
• Memasang modul penegasan chai
• ujian suite dan ujian kes ujian
• Bina ujian dengan mocha
• ujian suite dan kes ujian yang menjalankan mocha
• Mengurus Penyegerakan Kod Ujian Asynchronous

menggunakan API Selenium 3 JavaScript yang diintegrasikan dengan Mochajs

Pengenalan kepada Selenium

• Pemasangan Selenium
• WebDriver Construct
• Mengintegrasikan mochajs dengan selenium webdriver 3
versi yang digunakan:

• versi nod: 6.10.1 (LTS)
• mocha: 2.5.3
• WebDriverJS: 3.3.0

1. Bina ujian dengan mocha

Mocha PENGENALAN

Seperti yang disebutkan sebelumnya, Mocha adalah rangka kerja ujian JavaScript yang menjalankan ujian pada nod. Mocha disediakan dalam bentuk pakej nod (melalui npm), yang membolehkan anda menggantikan fungsi "menegaskan" standard nod dengan mana -mana perpustakaan penegasan, seperti Chaijs. Selain itu, Mocha mempunyai beberapa komponen yang serupa dengan Jasmine, satu lagi rangka kerja automasi ujian popular yang kami nyatakan dalam kajian trend automasi ujian front-end dan unit).

MOCHA menyediakan API yang menentukan cara untuk membina kod ujian ke dalam suite ujian dan modul kes ujian untuk pelaksanaan dan kemudian menghasilkan laporan ujian. Mocha menyediakan dua mod operasi: baris arahan (CLI) atau pengaturcaraan (Mocha API).

Pemasangan mocha

Jika anda mahu menggunakan mocha di CLI, anda harus memasangnya secara global sebagai node.js.

<code>npm install -g mocha</code>

Memasang modul penegasan chai

Pilihan

<code>npm install --save chai</code>

-Save digunakan untuk memasang modul dalam skop projek, bukannya di seluruh dunia.

ujian suite dan ujian kes ujian

Di Mocha, suite ujian ditakrifkan oleh kata kunci "Huraikan", yang menerima fungsi panggil balik. Suite ujian boleh mengandungi suite ujian sub/dalaman, yang boleh mengandungi suite subtest mereka sendiri, dan sebagainya. Kes ujian diwakili oleh fungsi "IT", yang menerima fungsi panggil balik dan mengandungi kod ujian.

Mocha menyokong tetapan suite ujian dan fungsi tetapan kes ujian. "Sebelum" bermaksud tetapan Suite Ujian, manakala "Leakeach" bermaksud tetapan kes ujian. "Prevoureach" sebenarnya adalah persediaan biasa untuk setiap kes penggunaan dalam suite dan akan dilaksanakan sebelum setiap kes penggunaan.

Seperti persediaan, Mocha menyokong suite ujian dan kes ujian keseakangan. "Selepas" bermaksud ujian suite disassembly, dan "aftereach" bermaksud ujian kes disassembly, kedua -dua fungsi ini dilaksanakan selepas suite ujian dan setiap kes ujian, masing -masing.

Buat fail yang "menjadi tuan rumah" suite ujian, seperti test_suite.js, dan tulis yang berikut ke dalamnya;

Jalankan Mocha Test Suite and Test Cases

describe("Inner Suite 1", function(){

    before(function(){

        // 在测试套件执行之前执行某些操作
        // 无论是否有失败的用例

    });

    after(function(){

        // 测试套件执行完成后执行某些操作
        // 无论是否有失败的用例

    });

    beforeEach(function(){

        // 在测试用例执行之前执行某些操作
        // 无论是否有失败的用例

    });

    afterEach(function(){

        // 测试用例执行完成后执行某些操作
        // 无论是否有失败的用例

    });

    it("Test-1", function(){

        // 测试代码
        // 断言

    });

    it("Test-2", function(){

        // 测试代码
        // 断言

    });

    it("Test-3", function(){

        // 测试代码
        // 断言

    });

});

Mocha menyokong tiga kaedah pelaksanaan ujian: keseluruhan fail suite ujian, ujian yang ditapis dalam mod "GREP", dan carian ujian (pilihan rekursif) dalam penapisan grep pokok direktori

Jalankan keseluruhan fail Suite Ujian:

Jalankan suite atau ujian tertentu dari fail suite ujian tertentu.

mocha /path/to/test_suite.js

Jika kit dipilih, semua sub-kit dan/atau ujian akan dilakukan.

Jalankan fail suite atau ujian tertentu dengan mencari rekursif dalam pokok direktori.

mocha -g “Test-2” /path/to/test_suite.js

Pilihan CLI untuk Sambungan:

mocha --recursive -g “Test-2” /directory/

Mengurus Penyegerakan Kod Ujian Asynchronous

mocha --help

Jika anda menggunakan fungsi asynchronous dengan mocha dan tidak ditangani dengan betul, anda mungkin mendapati diri anda menghadapi masalah. Jika anda ingin menggunakan kod asynchronous dalam kes ujian anda (seperti permintaan HTTP, fail, selenium, dan lain -lain), ikuti garis panduan berikut untuk mengatasi hasil yang tidak dijangka:

1. fungsi yang dilakukan

Dalam fungsi ujian (IT), anda perlu lulus fungsi yang dilakukan ke dalam rantaian panggil balik - ini memastikan bahawa ia dilaksanakan selepas langkah terakhir anda.

Contoh berikut menekankan fungsi yang dilakukan. Dalam kes ini, tamat tempoh tiga saat akan berlaku pada akhir fungsi ujian.

<code>npm install -g mocha</code>

2. kembali ke janji

Janji yang kembali adalah satu lagi cara untuk memastikan bahawa Mocha telah melaksanakan semua baris kod apabila menggunakan fungsi tak segerak (dalam hal ini fungsi "Selesai" tidak diperlukan.)

<code>npm install --save chai</code>

2. JavaScript Selenium 3 Integrasi dengan Mochajs

Pengenalan kepada Selenium

Selenium adalah perpustakaan yang mengawal penyemak imbas web dan mensimulasikan tingkah laku pengguna. Lebih khusus lagi, Selenium menyediakan pengguna dengan API perpustakaan bahasa tertentu yang dipanggil "mengikat". "Mengikat" bertindak sebagai pelanggan untuk melaksanakan permintaan pada komponen pertengahan dan bertindak sebagai pelayan untuk akhirnya mengawal penyemak imbas.

selenium API atau mengikat kini wujud dalam semua bahasa pembangunan yang popular. Semua pelaksanaan bahasa kini bersetuju untuk mengekalkan konsistensi dalam konvensyen penamaan fungsi API.

Komponen perantaraan mungkin merupakan webdriver sebenar, selenium-state-server yang ditemui secara tempatan dalam setiap pakej selenium, serta pemandu kawalan penyemak imbas vendor-seperti Geckodriver Mozilla, Chromedriver Chrome, dan lain-lain. Di samping itu, Selenium Webdriver berkomunikasi dengan pemandu penyemak imbas melalui "protokol jsonwired" dan menjadi standard web W3C.

Pemasangan Selenium

Kami akan dengan cepat belajar tentang pelaksanaan selenium dan NodeJS sebelum menyelidiki integrasi selenium dan mochajs.

Untuk menggunakan selenium API JavaScript (atau selenium JavaScript mengikat), kita harus memasang modul yang sepadan:

describe("Inner Suite 1", function(){

    before(function(){

        // 在测试套件执行之前执行某些操作
        // 无论是否有失败的用例

    });

    after(function(){

        // 测试套件执行完成后执行某些操作
        // 无论是否有失败的用例

    });

    beforeEach(function(){

        // 在测试用例执行之前执行某些操作
        // 无论是否有失败的用例

    });

    afterEach(function(){

        // 测试用例执行完成后执行某些操作
        // 无论是否有失败的用例

    });

    it("Test-1", function(){

        // 测试代码
        // 断言

    });

    it("Test-2", function(){

        // 测试代码
        // 断言

    });

    it("Test-3", function(){

        // 测试代码
        // 断言

    });

});

Pada ketika ini, harus jelas bahawa JavaScript Selenium WebDriver juga boleh dipanggil WebDriverJS (walaupun tidak dalam NPM). WebDriveJS berbeza daripada perpustakaan/modul lain (seperti WebDriverio, protractor, dan lain -lain). Selenium-WebDriver adalah Sumber Terbuka Rasmi Basic JavaScript Selenium Perpustakaan, manakala perpustakaan lain adalah perpustakaan/kerangka pembungkus yang dibina di atas API WebDriverJS, yang mendakwa untuk meningkatkan ketersediaan dan penyelenggaraan.

Dalam kod NodeJS, modul digunakan dengan cara berikut:

mocha /path/to/test_suite.js

WebDriver Construct

Untuk dapat menggunakan selenium, kita harus membina objek "WebDriver" yang sepadan, yang kemudiannya akan mengawal penyemak imbas kami. Di bawah, kita dapat melihat bagaimana kita menggunakan corak "pembina" untuk membina objek webdriver dengan menghubungkan pelbagai fungsi.

pembina dengan pilihan

mocha -g “Test-2” /path/to/test_suite.js

Dalam kod di atas, kami telah berjaya membina objek WebDriver yang mengagregatkan konfigurasi pelbagai pelayar (perhatikan kaedah "pilihan"), walaupun kaedah Forbrowser () secara eksplisit menetapkan Firefox.

Pengguna boleh menetapkan pembolehubah persekitaran selenium_browser semasa runtime untuk menetapkan penyemak imbas yang dikehendaki. Ia akan menimpa sebarang pilihan yang ditetapkan oleh Forbrowser kerana kami telah menetapkan beberapa ciri penyemak imbas melalui pilihan

.

Ciri -ciri penyemak imbas boleh mengandungi pelbagai jenis maklumat, bergantung kepada penyemak imbas yang diuji. Sebagai contoh, dalam sifat Mozilla, kita boleh menetapkan konfigurasi "profil" yang diperlukan seperti berikut:

<code>npm install -g mocha</code>

Kemudian, dalam coretan pembina di atas, kita boleh menambah:

<code>npm install --save chai</code>

pembina dengan ciri

Dokumentasi API JavaScript Selenium Webdriver menerangkan beberapa cara untuk membina webdriver. Satu lagi pendekatan yang mungkin adalah untuk menetapkan semua konfigurasi pemandu yang diperlukan untuk berfungsi:

describe("Inner Suite 1", function(){

    before(function(){

        // 在测试套件执行之前执行某些操作
        // 无论是否有失败的用例

    });

    after(function(){

        // 测试套件执行完成后执行某些操作
        // 无论是否有失败的用例

    });

    beforeEach(function(){

        // 在测试用例执行之前执行某些操作
        // 无论是否有失败的用例

    });

    afterEach(function(){

        // 测试用例执行完成后执行某些操作
        // 无论是否有失败的用例

    });

    it("Test-1", function(){

        // 测试代码
        // 断言

    });

    it("Test-2", function(){

        // 测试代码
        // 断言

    });

    it("Test-3", function(){

        // 测试代码
        // 断言

    });

});

Perhatikan bahawa jika setOptions ditetapkan selepas dengan kebolehan, konfigurasi akan ditimpa (contohnya, konfigurasi proksi).

aliran kawalan webdriver selenium dan pengurusan janji

Selenium Webdriver berkelakuan sama kerana JavaScript dan NodeJs berdasarkan prinsip tak segerak. Untuk mengelakkan piramid panggilan balik dan membantu jurutera ujian meningkatkan pengalaman skrip dan kebolehbacaan kod dan kebolehkerjaan, objek selenium webdriver mengandungi pengurus janji menggunakan "aliran kawalan". "Controlflow" adalah kelas yang bertanggungjawab untuk pelaksanaan perintah WebDriver Asynchronous.

Malah, setiap arahan dilaksanakan pada objek pemandu dan mengembalikan janji. Kecuali anda perlu memproses nilai janji yang dihuraikan, anda tidak perlu bersarang perintah seterusnya dalam "kemudian" seperti yang ditunjukkan di bawah:

mocha /path/to/test_suite.js

Petua untuk ujian JavaScript Selenium Webdriver dan Mocha

1. Pemandu adalah objek WebDriver, bukan objek janji
2. driver.gettitle () atau driver.get (url) atau mana -mana perintah selenium lain mengembalikan objek janji!

ini bermakna kita boleh melakukan perkara berikut:

mocha -g “Test-2” /path/to/test_suite.js

1. Di samping itu, kerana pemandu itu sendiri tidak segerak, operasi berikut tidak akan berfungsi:

mocha --recursive -g “Test-2” /directory/

Nota: Tajuk adalah objek janji, bukan nilai parsed sebenar.

mochajs selenium webdriver

Secara umum, selenium webdriver boleh diintegrasikan dengan mochaj kerana ia digunakan untuk sebarang skrip NodeJS biasa. Walau bagaimanapun, sejak Mocha tidak tahu apabila fungsi tak segerak selesai sebelum memanggil () atau mengembalikan janji, kita perlu mengendalikannya dengan sangat berhati -hati.

berasaskan janji

Perintah Selenium didaftarkan secara automatik untuk memastikan perintah WebDriver dilaksanakan dalam urutan yang betul dan harus mengembalikan janji.

Kod berikut menunjukkan (sebelum, sebelum ini, aftereach) atau badan ujian badan ia cangkuk.

mocha --help

Berikut akan dilakukan:

1. Memuatkan halaman penyemak imbas "my_service"
2. Cari medan teks dengan id "nama pengguna"
3. isi medan teks dengan id "nama pengguna" dengan "my_username"
4. Cari tajuk halaman dan periksa sama ada ia sama dengan "my_title"
5. WebDriver Exit dan tetingkap penyemak imbas ditutup. Proses penyemak imbas tamat.

Sokongan Webdriver Selenium untuk Mochajs

Untuk melaksanakan ujian JavaScript menggunakan selenium WebDriver dan Mocha dengan cara yang mudah, WebDriver menggalakkan penggunaan mochajs dengan membungkus fungsi ujian mochajs (sebelum, sebelum ini, dan sebagainya) menggunakan objek ujian. Ini mewujudkan skop yang memberikan kesedaran tentang penggunaan WebDriver. Oleh itu, tidak perlu kembali janji.

Pertama, modul yang sepadan harus dimuatkan:

<code>npm install -g mocha</code>

semua fungsi mocha bermula dengan "ujian."

<code>npm install --save chai</code>

dan sebagainya. Kemudian, kod di atas ditulis semula sebagai:

describe("Inner Suite 1", function(){

    before(function(){

        // 在测试套件执行之前执行某些操作
        // 无论是否有失败的用例

    });

    after(function(){

        // 测试套件执行完成后执行某些操作
        // 无论是否有失败的用例

    });

    beforeEach(function(){

        // 在测试用例执行之前执行某些操作
        // 无论是否有失败的用例

    });

    afterEach(function(){

        // 测试用例执行完成后执行某些操作
        // 无论是否有失败的用例

    });

    it("Test-1", function(){

        // 测试代码
        // 断言

    });

    it("Test-2", function(){

        // 测试代码
        // 断言

    });

    it("Test-3", function(){

        // 测试代码
        // 断言

    });

});

Kesimpulan

Dalam tutorial ini, kami mempunyai peluang untuk mengalami ujian JavaScript menggunakan Selenium Webdriver dan Mochajs. Kita harus ingat bahawa terdapat perbezaan utama disebabkan sifat asynchronous NodeJs, Mochajs, dan Selenium Webdriver berbanding dengan pengikatan bahasa pengaturcaraan yang lain.

Selagi kita terus mengembalikan janji dalam apa -apa fungsi yang mewujudkan janji (fungsi perpustakaan ujian tersuai atau kes cangkuk/ujian mochajs), Mocha akan melaksanakannya dalam urutan yang betul.

Rangka kerja lain seperti WebDriverio, Protractor, dan CodeSeptJS menyediakan penyelesaian pembalut yang dapat menyembunyikan beberapa konfigurasi untuk pengguna dan menyediakan beberapa pemprosesan janji yang dipertingkatkan untuk pengalaman skrip yang lebih baik, yang banyak pakar ujian automasi dapat mendapati ini berguna.

FAQs (FAQs) Mengenai ujian JavaScript dengan selenium webdriver dan mocha

Bagaimana untuk menyediakan selenium webdriver untuk ujian JavaScript?

Menyediakan selenium webdriver untuk ujian JavaScript termasuk beberapa langkah. Pertama, anda perlu memasang Node.js dan NPM (Pengurus Pakej Node) pada sistem anda. Selepas pemasangan selesai, anda boleh menggunakan NPM untuk memasang Selenium WebDriver dengan menjalankan perintah NPM Pasang Selenium-WebDriver. Anda juga perlu memasang pemacu penyemak imbas, seperti Chromedriver untuk Google Chrome, yang boleh dilakukan dengan menjalankan NPM pemasangan Chromedriver. Sebaik sahaja pemasangan ini selesai, anda boleh mula menulis skrip ujian dalam JavaScript menggunakan selenium WebDriver.

Apa itu mocha dan mengapa menggunakannya dengan selenium webdriver?

Mocha adalah kerangka ujian JavaScript yang popular yang menyediakan cara yang mudah dan fleksibel untuk menulis dan mengatur kes ujian. Ia sering digunakan dengan Selenium Webdriver kerana ia menyediakan ciri -ciri seperti ujian tak segerak, yang penting untuk mengendalikan operasi yang tertunda seperti permintaan rangkaian dan operasi penyemak imbas. Mocha juga menyediakan sintaks ringkas dan jelas untuk menjadikan kes ujian anda lebih mudah ditulis dan difahami.

Bagaimana menulis kes ujian asas menggunakan selenium webdriver dan mocha?

Menulis kes ujian asas menggunakan selenium webdriver dan mocha termasuk membuat fail JavaScript baru dan kes ujian menulis di Mocha menggambarkan dan ia blok. Di blok ini, anda boleh menggunakan API Selenium Webdriver untuk berinteraksi dengan penyemak imbas, seperti menavigasi ke laman web, berinteraksi dengan unsur -unsur, dan memeriksa sifat mereka. Berikut adalah contoh asas:

<code>npm install -g mocha</code>

Bagaimana menangani operasi tak segerak dalam kes ujian saya?

Anda boleh menggunakan sintaks Async/menunggu JavaScript untuk mengendalikan operasi tak segerak dalam kes ujian. Ini membolehkan anda menulis kod tak segerak secara serentak, menjadikannya lebih mudah untuk dibaca dan difahami. Dalam konteks selenium webdriver, operasi seperti menavigasi ke laman web, berinteraksi dengan unsur -unsur, dan keadaan menunggu tidak segerak dan boleh diproses menggunakan async/menunggu.

Bagaimana untuk menjalankan kes ujian saya menggunakan mocha?

Untuk menjalankan kes ujian dengan mocha, anda boleh menggunakan perintah mocha diikuti dengan laluan ke fail ujian. Sebagai contoh, jika fail ujian anda dinamakan test.js, anda boleh menjalankannya menggunakan command mocha test.js. Mocha secara automatik akan mencari dan menjalankan semua kes ujian dalam fail ini.

Bagaimana menggunakan pernyataan dalam kes ujian saya?

Pernyataan dalam kes ujian boleh digunakan untuk mengesahkan bahawa syarat -syarat tertentu dipenuhi. Sebagai contoh, anda mungkin ingin menegaskan bahawa tajuk laman web memenuhi jangkaan anda selepas melakukan carian. Pernyataan boleh ditulis menggunakan modul menegaskan terbina dalam JavaScript atau perpustakaan pihak ketiga seperti Chai.

Bagaimana menangani kesilapan dalam kes ujian saya?

JavaScript Try/Catch Syntax boleh digunakan untuk mengendalikan kesilapan dalam kes ujian. Ini membolehkan anda menangkap sebarang kesilapan yang berlaku semasa pelaksanaan kes ujian dan mengendalikannya dengan sewajarnya, contohnya dengan kesilapan pembalakan dan gagal kes ujian.

Bagaimana untuk berinteraksi dengan unsur -unsur di laman web?

Anda boleh menggunakan API Selenium Webdriver untuk berinteraksi dengan unsur -unsur di laman web. Ini termasuk mengklik pada elemen, menaip dalam medan input, dan membaca sifat elemen. Operasi ini dilakukan dengan menggunakan kaedah pemacu.findelement, yang mengembalikan objek Webelement yang boleh anda berinteraksi.

bagaimana untuk menunggu keadaan dalam kes ujian saya?

Anda boleh menunggu keadaan dalam kes ujian saya menggunakan pemacu selenium webdriver.wait. Kaedah ini mengambil masa bersyarat dan pilihan dan menunggu sehingga keadaan dipenuhi atau tamat masa dicapai. Anda boleh menggunakan modul sehingga untuk membuat keadaan, seperti sehingga.Titleis menunggu tajuk laman web menjadi nilai.

Bagaimana untuk menjalankan kes ujian saya dalam penyemak imbas yang berbeza?

anda boleh menjalankan kes ujian dalam pelayar yang berbeza dengan menentukan penyemak imbas apabila membuat contoh webdriver. Sebagai contoh, anda boleh menjalankan kes ujian di Firefox menggunakan pembina baru (). Anda perlu memasang pemacu penyemak imbas yang sesuai untuk menjadikannya berfungsi.

Atas ialah kandungan terperinci Cara Menguji JavaScript Anda Dengan Selenium Webdriver dan Mocha. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!