分度器テストのチュートリアル: 自動化ツールのフレームワーク
分度器試験とは何ですか?
分度器 は、自動化およびエンドツーエンドの動作駆動型テスト ツールであり、 テスト AngularJS アプリケーションの開発をサポートし、次のような強力なテクノロジーを組み合わせたソリューション インテグレーターとして機能します。 Selenium、Jasmine、Web ドライバーなど。分度器テストの目的は、AngularJS アプリケーションをテストするだけでなく、通常の Web アプリケーションの自動回帰テストを作成することでもあります。
なぜ分度器フレームワークが必要なのでしょうか?
JavaスクリプトはほぼすべてのWebアプリケーションで使用されています。アプリケーションが成長するにつれて、 Javaスクリプト また、サイズと複雑さも増大します。このような場合、テスターにとって、さまざまなシナリオで Web アプリケーションをテストすることは困難な作業になります。
を使用して AngularJS アプリケーションの Web 要素をキャプチャすることが難しい場合があります。 JUnit or Selenium ウェブドライバー。
ProtractorはNodeJSで書かれたプログラムです。 Javaスクリプトを作成して Node で実行し、AngularJS アプリケーション内の Web 要素を識別します。また、WebDriver を使用してユーザーのアクションでブラウザーを制御します。
さて、それでは AngularJS アプリケーションとは正確には何なのかについて説明しましょう。
AngularJS アプリケーションは、拡張 HTML 構文を使用して Web アプリケーション コンポーネントを表現する Web アプリケーションです。 主に動的 Web アプリケーションに使用されます。 これらのアプリケーションは、通常の Web アプリケーションと比較して、使用するコードが少なく柔軟です。
Normal を使用して Angular JS Web 要素を見つけられないのはなぜですか Selenium ウェブドライバー?
Angular JS アプリケーションには、ng-repeater、ng-controller、ng-model などの追加の HTML 属性があり、これらは ng-repeater、ng-controller、ng-model などに含まれていません。 Selenium ロケーター。 Selenium を使用してこれらの Web 要素を識別できません Selenium コード。それで、上部にある分度器は、 Selenium Web アプリケーションでこれらの属性を処理および制御できます。
分度器は、Angular JS ベースのアプリケーションのエンドツーエンドのテスト フレームワークです。 ほとんどのフレームワークは Angular JS アプリケーションの単体テストの実施に重点を置いていますが、Protractor はアプリケーションの実際の機能のテストに重点を置いています。
Protractor を起動する前に、以下をインストールする必要があります。
- Selenium見つけることができます Selenium インストール手順は以下のリンク先をご覧ください。(https://www.guru99.com/installing-selenium-webdriver.html )
- NPM (Node.js)NodeJS のインストールでは、Protractor をインストールするには NodeJS をインストールする必要があります。このインストール手順は次のリンクで確認できます。( https://www.guru99.com/download-install-node-js.html )
分度器の設置
ステップ1) コマンドプロンプトを開いて次のように入力します 「npm install –g 分度器」 Enterキーを押します.
上記のコマンドは必要なファイルをダウンロードし、クライアント システムに Protractor をインストールします。
ステップ2) を使用してインストールとバージョンを確認します 「分度器 - バージョンに設立された地域オフィスに加えて、さらにローカルカスタマーサポートを提供できるようになります。」 成功すると、以下のスクリーンショットのようにバージョンが表示されます。 そうでない場合は、手順 1 を再度実行します。
(ステップ 3 と 4 はオプションですが、より良い練習のために推奨されます)
ステップ3) Web ドライバー マネージャーを更新します。Web ドライバー マネージャーは、特定のブラウザーで Angular Web アプリケーションに対してテストを実行するために使用されます。Protractor をインストールしたら、Web ドライバー マネージャーを最新バージョンに更新する必要があります。これは、コマンド プロンプトで次のコマンドを実行することで実行できます。
webdriver-manager update
ステップ4) Webドライバーマネージャーを起動します。 このステップでは、Web ドライバー マネージャーをバックグラウンドで実行し、分度器を介して実行されるテストをリッスンします。
Protractor を使用してテストを実行すると、Web ドライバーが自動的に読み込まれ、関連するブラウザーでテストが実行されます。Web ドライバー マネージャーを起動するには、コマンド プロンプトから次のコマンドを実行する必要があります。
webdriver-manager start
さて、次のURLにアクセスすると(http://localhost:4444/wd/hub/static/resource/hub.html) ブラウザーで、実際にバックグラウンドで Web ドライバー マネージャーが実行されているのが表示されます。
Protractor を使用したサンプル AngularJS アプリケーションのテスト
分度器を実行するには XNUMX つのファイルが必要です。 スペック ファイルと の監視 ファイルにソフトウェアを指定する必要があります。
- 設定ファイル: このファイルは、テスト ファイル (specs.js) が配置されている場所を分度器で示し、対話するのに役立ちます。 Selenium サーバー(Selenium 住所)。 Chrome は Protractor のデフォルトのブラウザです。
- スペックファイル: このファイルには、アプリケーションと対話するためのロジックとロケーターが含まれています.
ステップ1) ログインする必要があります https://angularjs.org 「ここに名前を入力」テキストボックスに「GURU99」というテキストを入力します。
ステップ2) このステップでは、
- 「Guru99」という名前を入力しました
- 出力テキストには「Hello Guru99」が表示されます。
ステップ3) ここで、名前を入力した後に Web ページからテキストをキャプチャし、予想されるテキストで検証する必要があります。.
コード:
設定ファイルを準備する必要があります (conf.js) そしてスペックファイル (spec.js) 上記のように。
spec.js のロジック:
describe('Enter GURU99 Name', function() { it('should add a Name as GURU99', function() { browser.get('https://angularjs.org'); element(by.model('yourName')).sendKeys('GURU99'); var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')); expect(guru.getText()).toEqual('Hello GURU99!'); }); });
spec.jsのコード説明:
- 説明する('Enter GURU99 Name', function()describe 構文は Jasmine フレームワークからのものです。ここでの「describe」('Enter GURU99 Name') は通常、クラスや関数などのアプリケーションのコンポーネントを定義します。コードスイートではこれは「Enter GURU99」と呼ばれますが、これは単なる文字列であり、コードではありません。
- it(「GURU99 として名前を追加する必要があります」、function()
- ブラウザ.get('https://angularjs.org')のように Selenium Webdriver browser.get は、指定された URL で新しいブラウザー インスタンスを開きます。
- 素子(by.model('yourName'))。キーの送信('GURU99') ここでは、モデル名を「yourName」として使用して Web 要素を検索しています。これは、Web ページ上の「ng-model」の値です。 以下のスクリーンショットを確認してください。
- var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')) ここでは、次を使用して Web 要素を見つけています。 XPath そしてその値を変数「guru」に保存します.
- 期待する(guru.getText())。等しい('Hello GURU99!') 最後に、Web ページから取得したテキスト ( gettext() を使用) が期待されるテキストであることを確認します。
conf.js のロジック:
exports.config = { seleniumAddress: 'http://localhost:4444/wd/hub', specs: ['spec.js'] };
conf.jsのコード説明
- セレンアドレス: 'http://localhost:4444/wd/hub'設定ファイルはProtractorに Selenium 話し合うアドレス Selenium ウェブドライバー。
- spec: ['spec.js']この行は、Protractor にテスト ファイル spec.js の場所を伝えます。
コードの実行
ここではまず、ディレクトリ パスを変更するか、システム内で confi.js と spec.js が配置されているフォルダーに移動します。.
以下の手順に従ってください。
ステップ1) コマンドプロンプトを開きます。
ステップ2) Selenium Web Driver Managerが起動していることを確認します。そのためには、「webdriver-manager start」というコマンドを入力してEnterを押します。.
(Selenium Web ドライバーが起動して実行されていない場合、Protractor は Web アプリケーションを処理する Web ドライバーを見つけることができないため、テストを続行できません)
ステップ3) 新しいコマンド プロンプトを開き、次のようにコマンドを入力します。 「分度器conf.js」 設定ファイルを実行します。
説明:
- ここで、Protractor は指定された仕様ファイルを含む構成ファイルを実行します。
- セレンサーバーが「http://localhost:4444/wd/hub」を conf.js ファイルに指定しました。
- また、上記のスクリーンショットのように、合格した数と失敗した数の結果を確認できます。.
わかりました。結果が合格または期待通りであることを確認しました。 次に、失敗の結果も見てみましょう。
ステップ1) 開いて変更すると、以下のように spec.js が「'Hello Change GURU99」に変更されることが予想されます。
spec.jsの変更後 :
describe('Enter GURU99 Name', function() { it('should add a Name as GURU99', function() { browser.get('https://angularjs.org'); element(by.model('yourName')).sendKeys('GURU99'); var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')); expect(guru.getText()).toEqual('Hello change GURU99!'); }); });
ステップ2) spec.js ファイルを保存し、「コードの実行」セクションの上記の手順を繰り返します。
ここで、上記の手順を実行します。
結果:
スクリーンショットでは結果が「F」で示されており、その理由が失敗として表示されています。 「『こんにちは、GURU99!』を期待しています!」 「Hello Change GURU99!」と等しくなります。 また、コードの実行時に発生した失敗の数も表示されます。
同じことを達成できますか Selenium ウェブドライバー?
XPath または CSS セレクターを使用して、AngularJS アプリケーションの Web 要素を識別できる場合があります。 Selenium ウェブドライバー。ただし、AngularJS アプリケーションでは、要素は動的に生成および変更されます。したがって、AngularJS アプリケーションを操作するには分度器を使用することをお勧めします。
Jasmine Reporters を使用してレポートを生成する
Protractor は、テスト レポートを生成するための Jasmine レポーターをサポートしています。このセクションでは、JunitXMLReporter を使用して、テスト実行レポートを XML 形式で自動的に生成します。
XML 形式でレポートを生成するには、次の手順に従います。
Jasmine Reporterのインストール
これを行うには、ローカルまたはグローバルの XNUMX つの方法があります
- コマンドプロンプトを開き、次のコマンドを実行してローカルにインストールします。
npm install --save-dev jasmine-reporters@^2.0.0
上記のコマンドは、コマンド プロンプトでコマンドを実行しているディレクトリから、ジャスミン レポート ノード モジュールをローカルにインストールします。
- コマンドプロンプトを開き、グローバルインストールのために次のコマンドを実行します。
npm install –g jasmine-reporters@^2.0.0
このチュートリアルでは、ジャスミン レポーターをローカルにインストールします。.
ステップ1) コマンドを実行します。
npm install --save-dev jasmine-reporters@^2.0.0
コマンドプロンプトからは以下のようになります。
ステップ2) ディレクトリ内のインストールフォルダーを確認してください. 以下のスナップショットのように、正常にインストールされれば「Node_modules」が利用可能になるはずです。
ステップ3) 既存のconf.jsファイルに次の色付きコードを追加します。
exports.config = { seleniumAddress: 'http://localhost:4444/wd/hub', capabilities: { 'browserName': 'firefox' }, specs: ['spec.js'], framework: 'jasmine2' , onPrepare: function() { var jasmineReporters = require('C:/Users/RE041943/Desktop/guru/node_modules/jasmine-reporters'); jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter(null, true, true) ); } };
コードの説明:
コードでは、レポートを生成しています。JUnitXmlレポーター」とレポートを保存するパスを指定します。
ステップ4) コマンドプロンプトを開いてコマンドを実行する 分度器conf.js。
ステップ5) 上記のコードを実行すると、指定されたパスに junitresults.xml が生成されます。
ステップ6) XML を開いて結果を確認します。 失敗メッセージは結果ファイルに次のように表示されます。 テストケース 失敗しました。 「spec.js」からの期待される結果が Web ページからの実際の結果と一致しないため、テスト ケースは失敗します。
ステップ7) 証拠または結果ファイルには junitresult.xml ファイルを使用します。
まとめ
しかし Selenium 分度器が行うことの一部は実行できます。分度器は業界標準であり、AngularJS アプリケーションをテストするためのベスト プラクティスです。分度器は、その中の複数の機能を管理し、次を使用して Web 要素の動的な変更を処理することもできます。 ng-モデル、 ng-click など (これは Selenium では実行できません)。