自動テストプロジェクトのビルドプロセスの展開後のフロントページ上の録音ノード環境ナイトウォッチ、セレンサーバー、chromedriver。
1.目的
自動的に、ページ要素を決定するために、ログイン、サイトを開く]ボタンをクリックし、ログ、スクリーンショットなどを確認することができ、導入後にフロントエンドのテストプロジェクトを自動化することができます。
2.プロジェクトの構造
次のように図全体的な構造は次のとおりです。
node_modulesは依存関係です。
テストレポートの出力があります。
スペックは、複数のファイルを置くことができ、コンテンツルールを、テストします。
nightwatch.conf即ち夜警構成。
入学テストプロジェクトファイルをrunner.js。
package.jsonプロジェクトパッケージ情報。
README.mdプロジェクトの説明。
以下は、ビルドプロセスの詳細を示します。
2.1、プロジェクトディレクトリの自動テストを作成する仕様を追加して、レポートのサブディレクトリ
次のように、ルートディレクトリにpackage.jsonを追加します。
1 { 2 "名前"： "自動テスト" 、 3 "バージョン"： "1.0.0" 、 4 "著者"： "wangshiyuan" 、 5 "説明"： "自動的depolyment後のフロントエンドプロジェクトをテスト" 、 6 "スクリプト" ：{ 7 "テスト"： "ノード./runner.js" 8 }、 9 "キーワード" ： 10 "E2E" 、 11 "自動テスト" 12 ]、 13 "エンジン" 。 { 14 "ノード"： "> = 6.0.0" 、 15 "NPM"： "> = 3.0.0" 16 }、 17 "devDependencies" ：{ 18 "chromedriver"： "^ 78.0.1" 、 19 "クロススポーン"： "^ 5.0.1" 、 20 "夜警" ： "^ 0.9.12" 、 21 "セレンサーバ"： "^ 3.0.1" 22 } 23 }
なお、ノードおよびNPM環境、chromedriverの必要性、一貫性のブラウザのバージョン、
2.2の追加nightwatch.conf.jsファイル
1 // http://nightwatchjs.org/gettingstarted#settings-file 2 // 設定項目を確認するために公式サイトに行くことができ、特定のナイトウォッチ 3 // chormedriverアドレス 4 // http://chromedriver.storage.googleapis.com/index .htmlの 5 module.exportsは= { 6 src_folders：[ 'スペック' ]、 7。 output_folder： 'レポート' 、 8。 custom_assertions_path： "" 、 9。 セレン：{ 10 start_process：trueに、 11。 SERVER_PATH：必要（ 'セレンサーバー'） .path、 // セレンサーバーの提供のjarパッケージパス 12 ホスト： '127.0.0.1' 、 13 ポート：9009 、 14 cli_args：{ 15 'webdriver.chrome.driver'：（ 'chromedriver'）必要パス // 设置chromedriver的ジャー包路径 16 } 17 } 18 test_settings ：{ 19 デフォルト：{ 20 selenium_port：9009 、 21 selenium_host： 'ローカルホスト' 、 22 サイレント：真、 23の グローバル： "" 24 }、 25 クロム：{ 26 desiredCapabilities：{ 27 browserName 'クロム' 、 28 javascriptEnabled：真、 29 acceptSslCerts：真 30 } 31 } 32 Firefoxの：{ 33 desiredCapabilities：{ 34 browserName： 'Firefoxの' 、 35 javascriptEnabled：真、 36 acceptSslCerts：真 37 } 38 } 39 } 40 } 41
注意：
src_folders：[「スペック」]、//テストはルールディレクトリ、ディレクトリを追加する必要があり
output_folder：[レポート]、//テスト出力ディレクトリのニーズをディレクトリに追加します
2.3追加runner.js
1 process.env.NODE_ENV = 'テスト' 2つの LETのOPTS = process.argv.slice（2 ） 3 4の 場合（opts.indexOf（ ' -設定'）=== -1 ）{ 5 OPTS = opts.concat（ [ '--config'、 'nightwatch.conf.js' ]） 6 } 7 場合（opts.indexOf（ ' - ENV'）=== -1 ）{ 8つの OPTS = opts.concat（[ ' - ENV ' 'クロム' ]） 9 } 10 11 CONSTスポーン=（必要'クロススポーン' ） 12 CONSTランナー=スポーン（' ./ node_modules /の.bin /夜警」、OPTS、{標準入出力： '継承'}） 13 14 runner.on（ '出口'、機能（コード）{ 15 process.exit（コード） 16 }） 17 18 runner.on（ 'エラー'、関数（ERR）{ 19 投ERR 20 }）
configにファイル名ことに注意してください：
OPTS = opts.concat（[ ' -設定'、 'nightwatch.conf.js' ]）
スペックで2.4 demo.jsファイルを追加します（ここではランダムな名前）、複数のファイルを追加することができます
1 module.exportsは= { 2 'テストデモ'：機能（ブラウザ）{ 3 4 LETのURL = 'https://192.168.3.13/demo' 5 6 // 启动浏览器并打开页面 7 browser.maximizeWindow（） 8 browser.url（URL） 9 browser.waitForElementVisible（ 'div.login'、3000 ） 10 browser.assert.elementPresent（ 'input.el-input__inner' ） 11 browser.assert.elementPresent（ 'input.el-input__inner' ） 12 13 browser.click（ 'button.el-button.elボタン-プライマリ' ） 14 browser.pause（3000 ） 15 browser.waitForElementVisible（ '＃アプリ'、3000 ） 16 browser.assert.visible（ 'div.layerコントロール' ） 17 browser.click（ 'div.layer制御.EL-チェックボックス' ） 18 browser.pause（3000 ） 19 'ヘッダ-RT' 20 browser.click（ 'ul.header-RT>リチウム：n番目の子（3）'）。ポーズ（4000 ） 21 browser.back（） 22 browser.click （ 'ul.header-RT>リチウム：n番目の子（4）'）。ポーズ（4000 ） 23 browser.back（） 24 browser.click（ 'ul.header-RT>リチウム：n番目の子（5）' ）。一時停止（4000 ） 25 browser.getLog（ 'ブラウザ'、機能（ログ）{ 26 console.info（ログ） 27 }） 28 browser.pause（3000 ） 29 browser.saveScreenshot（ 'レポート/ smrt.png' ） 30 browser.end（） 31 } 32 }
API（特定のルールナイトウォッチを参照することができ、開口部のページにあること、などのログインボタン、いくつかのボタンの可視性の判断、出力ログ、スクリーンショットを、クリック効果https://nightwatchjs.org/api）
2.4テストの実行
プロジェクトディレクトリにCMD、依存関係をインストールインストールNPM入力し、増加は、インストール後にフォルダをnode_modules。
cmdを入力ノードrunner.jsテストを自動的にスペックの実行、cmdの結果出力アサーションのルールの下にインストールされているブラウザを開いて実行され、ディレクトリがテスト結果とスクリーンショットを持っています報告します。
3.ノート
再インストール後chromedriverバージョンは一貫して、ブラウザのバージョン、あなた自身の確認の構成項目のpackjson.json chromedriver変更する必要があります。
参考：
ナイトウォッチ： https://nightwatchjs.org/api
セレン： https://github.com/SeleniumHQ/selenium/wiki/Logging