contoh ujian e2e dalam angularjs_AngularJS

Dalam artikel sebelum ini, kita bercakap tentang ujian unit ng hari ini, mari kita bincangkan tentang ujian e2e (hujung ke hujung).

Apabila kami menguji satu titik fungsi modul, ujian unit adalah paling sesuai Namun, apabila pepijat berlaku apabila pengguna berinteraksi dengan berbilang halaman, ujian unit tidak akan berfungsi pada masa ini, e2e mesti digunakan untuk mensimulasikan pengguna. Operasi memulihkan tapak bermasalah Sudah tentu, ujian e2e juga boleh digunakan untuk menguji keteguhan program yang tidak dapat dilakukan oleh ujian unit, ujian e2e boleh lakukan.

Sebelum ini, ng menggunakan Angular Scenario Runner untuk menjalankan ujian e2e, tetapi kini ia telah digantikan dengan Protractor untuk menjalankan e2e.

Protraktor

Protractor ialah rangka kerja yang digunakan dalam Angularjs untuk menguji e2e Ia sendiri ialah modul npm dan dibina secara dalaman pada WebDriverJS benar-benar membolehkan kes ujian anda dijalankan pada penyemak imbas sepenuhnya tingkah laku pengguna.

Beberapa alamat sumbernya disiarkan di bawah:

1.Ujian api disediakan oleh Protractor
2.ProtractorContoh penggunaan mudah
3.WebDriverJs panduan, ini adalah teras yang Protractor bergantung pada, modul npm dipanggil selenium-webdriver

Prinsip pengendalian protraktor

Protractor bergantung terutamanya pada perkara berikut untuk menjalankan ujian e2e:

1.WebDriver API, WebDriverJs yang dinyatakan di atas, adalah apis js berkaitan yang disediakan oleh Selenium untuk ujian front-end
2. Pelayan Selenium, pakej balang belakang yang digunakan untuk berkomunikasi dengan pemacu penyemak imbas
3. Pemacu penyemak imbas WebDriver, digunakan untuk memaparkan kandungan tapak web sebenar dan berkomunikasi dengan Pelayan Selenium Di sinilah operasi penyemak imbas sebenar dihantar

Keseluruhan proses operasi adalah seperti yang ditunjukkan di bawah

Jika anda ingin mengetahui lebih lanjut tentang interaksi sebelumnya antara komponen ini, anda boleh Klik di sini

Gunakan projek benih ng untuk menerangkan e2e

Kami menggunakan projek benih yang disediakan oleh pegawai ng untuk menerangkan contoh e2e sebenar Pertama, gunakan arahan berikut untuk mendapatkan projek benih

Salin kod Kod adalah seperti berikut:

git klon https://github.com/angular/angular-seed.git

Kemudian lari

Salin kod Kod adalah seperti berikut:

npm install

Pasang semua fail pergantungan

Di sini kita mula-mula bercakap tentang fail konfigurasi yang diperlukan untuk menjalankan ujian e2e Anda boleh melihat bahawa fail test/protractor-conf.js digunakan untuk mengkonfigurasi fungsi yang berkaitan

1.specs mewakili laluan fail ujian untuk dijalankan, ini ialah e2e/*.js
2.baseUrl mewakili alamat akar halaman lompat antara penyemak imbas dalam fail ujian
3.Keupayaan mewakili penyemak imbas yang hendak digunakan untuk menjalankan kes ujian Contohnya, jika anda menggunakan chrome, anda boleh menetapkannya seperti ini

Salin kod Kod adalah seperti berikut:

keupayaan: {
'browserName': 'chrome'
}

rangka kerja mewakili rangka kerja ujian yang digunakan, yang digunakan di sini ialah melati

Jika anda ingin mengetahui lebih lanjut tentang fail konfigurasi ini, anda boleh Klik di sini untuk melihat

Selepas bercakap tentang fail konfigurasi, mari kita lihat cara menulis kes ujian Mula-mula, tampal contoh daripada tapak web rasmi

Salin kod Kod adalah seperti berikut:

'gunakan ketat';

/* https://github.com/angular/protractor/blob/master/docs/getting-started.md */

huraikan('apl saya', fungsi() {

  browser.get('index.html');
  it('sepatutnya mengubah hala secara automatik ke /view1 apabila cincang/serpihan lokasi kosong', function() {
    expect(browser.getLocationAbsUrl()).toMatch("/view1");
  });

  describe('view1', function() {

    sebelumSetiap(fungsi() {
      browser.get('index.html#/view1');
    });

    it('sepatutnya memaparkan view1 apabila pengguna menavigasi ke /view1', function() {
      expect(element.all(by.css('[ng-view] p')).first().getText()).
        toMatch(/sebahagian untuk paparan 1/);
    });

  });

  describe('view2', function() {

    sebelumSetiap(fungsi() {
      browser.get('index.html#/view2');
    });

    it('sepatutnya memaparkan view2 apabila pengguna menavigasi ke /view2', function() {
      expect(element.all(by.css('[ng-view] p')).first().getText()).
        toMatch(/sebahagian untuk paparan 2/);
    });

  });
});

 
首先上面的语法是jasmine框架支持的写法,不了解它的用法的可以点击这里  >这里只说下上面例子里关于protractor提供的一些常用方法与属性

1.browser,全局对象,代表当前浏览器的一个实例,常用的get方法用来实现浏览器地浏览器城 2.elemen,全局对象,提供像jquery里负责查找文档元素的功能,常于oleh对象联合使用

3.by, 全局对象,提供一个选择器类型,比如可以通过css,model,bind等特性来查批性来查找一紜个
关于element与oleh的方法可以参考上面的
protractor api文档

说了这么多,该跑一跑上面的测试用例了,命令比较简单

复制代码 代码如下: npm run update-webdriver

这个负责下载相关的浏览器驱动与selenium-server 本地jar包,一般情况下这个都昐会天都在google服务器那,所以可以利用浏览器翻墙单独下载,地址如下:

1.

Pemandu Chrome

地址,一般下载chromedriver_2.9.zip这个文件.

2.selenium-server

本地jar包 下载,一般下载selenium-server-standalone-2.40.0.jar这个文件.

然后把selenium-server拷到protractor包里的selenium文件夹里去,假如上面的命令超时之后,这里庇也缺的,直接替换就可以;还要把chromedriver_2.9.zip解压之后的文件拷到这里

最后运行下面的命令可以看到测试结果了

复制代码 代码如下: npm run protractor

想了解更多关于ng种子项目里的命令行,可以

点击这里查看

总结

ng的e2e测试要比单元测试配置要繁琐的多,不过它能做的事情也很多,非帀也的试,非帀也的过它能做的事情也很多,非帀也的词问题可以回复到评论里去.