WEBフロントエンドの自動化テスト-Yeti編
6590 ワード
いくつかのユニットテストを書いてコードの品質とメンテナンス性を保証することは私たちがしなければならないことです.通常、コードを書いて、テストを書くのは良い実践ですが、フロントエンドの私たちとして、書いたコードは多くの環境で実行する必要があるかもしれません.コードを少し書いて、IE 6789、Chrome、Firefox、Safari、パクリブラウザabcdで人肉テストをすると、本当に崩壊します.幸いなことに、大神たちは私たちにQUnit、YUITest、Jasmineなどのユニットテストフレームワークを提供したほか、jsTestDriver2Selenium(Selenium Grid 2)、本編で紹介するYetiなどの自動化テストツールを提供し、より効率的に「品質保証」のコードを書くことができます.
この3つの自動化テストツールの中で、ローカル自動化テストを提供することに専念しているのはYUIチームからのYetiで、Qunit、YUITest、Jasmine、Mochaが書いたユニットテストをサポートすることができ、コマンドラインを通じてHubサービスを簡単に構築することができ、WebStormなどのIDE環境に統合することができ、すべての環境をワンタッチでテストすることができる.GoogleからのjsTestDriverは全能型で、ローカル環境での迅速なテストにも適しているし、CIに統合され、コード提出後の自動化テストを実行することもでき、QUnitのAdapter(これは新しいQUnitAPIの分岐バージョンをサポートすることができ、jsTestDriver公式WikiのAdapterが古すぎる)がQunit APIの作成テストをサポートしているが、jsTestDriverは何かが少なく、選択されていないと思っていた.......ThoughtWorksのSeleniumはWeb自動化テストフレームワークであり、APIを提供して自動化されたインタフェーステストをサポートし、テストをする学生はよく知っているはずだ.YUIチームはYUITest Selenium Driverを提供し、SeleniumにYUITestのユニットテストを実行させることができる.Seleniumの実行には、ドライバブラウザが開くたびに閉じる必要があり、ローカル環境の迅速なフィードバックサイクルには適していません.『WEBフロントエンドの自動化テスト-selenium編』では、Selenium Grid 2でYUITestを実行する方法について説明します.
YetiはNodeJSのモジュールで、npmを使って簡単にインストールできます.
これにより、コマンドラインでyetiコマンドを直接使用してテストを実行できます.
このコマンドは、1回限りのハブサービスを作成します.http://localhost:9000/を選択すると、テストが必要なブラウザがサービスに接続され、コマンドラインがバックすると、各ブラウザで相対パス
デフォルトポートが9000のハブサービスが作成されますhttp://localhost:9000/、
別のコマンドラインでこのコマンドを実行すると、接続されたブラウザでテストできます.
WebStormはとても使いやすいフロントエンドIDEで、jetbrainsの他のIDEも神器のはずですが、売っているのは高いので、本キックアスはまずGoogleからの共有アカウントしか使えません.
WebStormの拡張ツールパネルで、ポイント選択で追加
WebStromの設定に拡張ツールを追加できます.File>Settings>External Toolsパネルで、黄色の+番号を選択します.
Yeti設定
主にProgram、Parameters、Working derectoryの3つを設定する必要があります:Programはコマンドラインを選択して実行するプログラムです.YetiはNodeJSモジュールなので、あなたのマシンのnodeが必要です.exeのパス;Parametersはnodeのパラメータです.ここではYetiのインストールディレクトリを見つける必要があります.具体的にどうやってgoogleを探してください.Yetiの実行可能ファイルの後ろにはYetiのパラメータが必要です.-hubはHubサービスアドレスを指定し、後ろにはテストが必要なページパスがあります.図の設定はWebStormが提供するパスパラメータです(これらのパラメータはInsert macroボタンをクリックして選択できます).$FileRelativePath$は、現在マウスで選択したファイルがProjectディレクトリに対するパスを指します.Working directoryは、現在のコマンドが動作しているディレクトリで、Projectルートディレクトリを指します.ここでのパスは、テストページに相対パスのjsまたは他のリソースがある場合、コマンドのテストページパスの最上位ディレクトリにこれらのリソースを含める必要があることに注意する必要があります.そうしないと、テスト時に404が生成されます.ここの表现はあまりはっきりしないで、更にスクリーンショットするのがおっくうです=.=!
設定が完了すると、プロジェクトのテストページを選択し、右クリックメニューから構成したyetiを見つけることができ、yetiオプションをクリックすると、そのページのテストを実行することができます.同様に、プロジェクト全体のユニットテストを実行するコマンドを再構成することもできます.
右クリックメニューでテストを実行
もちろん、yeti拡張にショートカットキーを設定することもできます.同じSettings>Keymapパネルで、External toolsの下のyetiを見つけて、Add Keyboard Shortcutをダブルクリックして選択すれば、コンビネーションキーで設定できます.
yetiにショートカットキーを設定する
テスト後に結果が返され、テストに失敗した場合は、不合格のテスト情報が印刷されます.しかしYUITestのみには良いサポートがあるようで、QUnitテストを使って、たまに未合格のテスト情報しか得られません-.
テストに成功したコマンドラインが返されます
テストに失敗したコマンドラインが返されます
yetiには、
コメント討論を歓迎します.
このブログ記事は、LiZnによって作成または共有され、共通CC氏名表示の作成-非商業性-3.0 Unportedライセンス条項を同じ方法で共有で共有されます.転載先:WEBフロントエンドの自動化テスト-Yeti編http://www.lizn.net/automated-testing-with-yeti/本文があなたに役に立つことを望んで、伝言の討論を歓迎して、もしあなたが当駅の文章が好きならば、このRSS購読アドレスを使って当駅を購読することができます.
この3つの自動化テストツールの中で、ローカル自動化テストを提供することに専念しているのはYUIチームからのYetiで、Qunit、YUITest、Jasmine、Mochaが書いたユニットテストをサポートすることができ、コマンドラインを通じてHubサービスを簡単に構築することができ、WebStormなどのIDE環境に統合することができ、すべての環境をワンタッチでテストすることができる.GoogleからのjsTestDriverは全能型で、ローカル環境での迅速なテストにも適しているし、CIに統合され、コード提出後の自動化テストを実行することもでき、QUnitのAdapter(これは新しいQUnitAPIの分岐バージョンをサポートすることができ、jsTestDriver公式WikiのAdapterが古すぎる)がQunit APIの作成テストをサポートしているが、jsTestDriverは何かが少なく、選択されていないと思っていた.......ThoughtWorksのSeleniumはWeb自動化テストフレームワークであり、APIを提供して自動化されたインタフェーステストをサポートし、テストをする学生はよく知っているはずだ.YUIチームはYUITest Selenium Driverを提供し、SeleniumにYUITestのユニットテストを実行させることができる.Seleniumの実行には、ドライバブラウザが開くたびに閉じる必要があり、ローカル環境の迅速なフィードバックサイクルには適していません.『WEBフロントエンドの自動化テスト-selenium編』では、Selenium Grid 2でYUITestを実行する方法について説明します.
インストール
YetiはNodeJSのモジュールで、npmを使って簡単にインストールできます.
$ npm install -g yetiこれにより、コマンドラインでyetiコマンドを直接使用してテストを実行できます.
クイックスタート
$ yeti test/*.htmlこのコマンドは、1回限りのハブサービスを作成します.http://localhost:9000/を選択すると、テストが必要なブラウザがサービスに接続され、コマンドラインがバックすると、各ブラウザで相対パス
test/*.htmlで指定されたユニットテストページのテストが開始されます.一般的に開発では、Yetiはこのように使用されず、サービスを作成するたびに時間がかかります.Hubサービスの作成
$ yeti --serverデフォルトポートが9000のハブサービスが作成されますhttp://localhost:9000/、
--portパラメータでポートを指定することもできます.このコマンドはコマンドライン端末を占有し、テストを実行するには新しいコマンドライン端末を開く必要があります.このハブサービスでテストが必要なブラウザをキャプチャでき、ローカルLANにWIFIがあればモバイル端末のブラウザも簡単にテストでき、WIFIがなければlocaltunelと組み合わせて使用すると、モバイル端末のテストが便利になります。を参照できます.$ yeti --hub http://localhost:9000/ test/*.html別のコマンドラインでこのコマンドを実行すると、接続されたブラウザでテストできます.
--hubパラメータは、Hubサービスのアドレスを指定する.1行のコマンドで自動的にテストを実行できますが、1行のコマンドも入力しないほうが早いでしょう.WebStormへの統合
WebStormはとても使いやすいフロントエンドIDEで、jetbrainsの他のIDEも神器のはずですが、売っているのは高いので、本キックアスはまずGoogleからの共有アカウントしか使えません.
WebStormの拡張ツールパネルで、ポイント選択で追加
WebStromの設定に拡張ツールを追加できます.File>Settings>External Toolsパネルで、黄色の+番号を選択します.
Yeti設定
主にProgram、Parameters、Working derectoryの3つを設定する必要があります:Programはコマンドラインを選択して実行するプログラムです.YetiはNodeJSモジュールなので、あなたのマシンのnodeが必要です.exeのパス;Parametersはnodeのパラメータです.ここではYetiのインストールディレクトリを見つける必要があります.具体的にどうやってgoogleを探してください.Yetiの実行可能ファイルの後ろにはYetiのパラメータが必要です.-hubはHubサービスアドレスを指定し、後ろにはテストが必要なページパスがあります.図の設定はWebStormが提供するパスパラメータです(これらのパラメータはInsert macroボタンをクリックして選択できます).$FileRelativePath$は、現在マウスで選択したファイルがProjectディレクトリに対するパスを指します.Working directoryは、現在のコマンドが動作しているディレクトリで、Projectルートディレクトリを指します.ここでのパスは、テストページに相対パスのjsまたは他のリソースがある場合、コマンドのテストページパスの最上位ディレクトリにこれらのリソースを含める必要があることに注意する必要があります.そうしないと、テスト時に404が生成されます.ここの表现はあまりはっきりしないで、更にスクリーンショットするのがおっくうです=.=!
設定が完了すると、プロジェクトのテストページを選択し、右クリックメニューから構成したyetiを見つけることができ、yetiオプションをクリックすると、そのページのテストを実行することができます.同様に、プロジェクト全体のユニットテストを実行するコマンドを再構成することもできます.
右クリックメニューでテストを実行
もちろん、yeti拡張にショートカットキーを設定することもできます.同じSettings>Keymapパネルで、External toolsの下のyetiを見つけて、Add Keyboard Shortcutをダブルクリックして選択すれば、コンビネーションキーで設定できます.
yetiにショートカットキーを設定する
テスト後に結果が返され、テストに失敗した場合は、不合格のテスト情報が印刷されます.しかしYUITestのみには良いサポートがあるようで、QUnitテストを使って、たまに未合格のテスト情報しか得られません-.
テストに成功したコマンドラインが返されます
テストに失敗したコマンドラインが返されます
yetiには、
--timeout、--query、configファイル、Junitフォーマットのレポートの出力などの他のパラメータもあります.具体的には、YetiのホームページまたはGithubのドキュメントを参照してください.コメント討論を歓迎します.
このブログ記事は、LiZnによって作成または共有され、共通CC氏名表示の作成-非商業性-3.0 Unportedライセンス条項を同じ方法で共有で共有されます.転載先:WEBフロントエンドの自動化テスト-Yeti編http://www.lizn.net/automated-testing-with-yeti/本文があなたに役に立つことを望んで、伝言の討論を歓迎して、もしあなたが当駅の文章が好きならば、このRSS購読アドレスを使って当駅を購読することができます.