Protracテストチュートリアル：自動化ツールフレームワーク

⚠️ 廃止のお知らせ: Protractorは 非推奨となり、アーカイブされましたサポートは2023年8月に終了し、Angular CLIはPro版を廃止しました。tracAngular 15 以降の tor builder。 劇作家, Cypress新規ユーザー向けには、WebdriverIO または TestCafe を使用してください。 エンドツーエンドのテスト以下の手順は、旧バージョンのスイートにも適用されます。

なぜプロが必要なのかtracTorフレームワーク？

Javaスクリプトはほぼすべてのウェブアプリケーションで使用されています。アプリケーションが成長するにつれて、 Javaスクリプト 規模と複雑さも増大する。そうなると、テスターがさまざまなシナリオでWebアプリケーションをテストすることは困難になる。

を使用して AngularJS アプリケーションの Web 要素をキャプチャすることが難しい場合があります。 JUnit or Selenium ウェブドライバー。

ProtractorはNode.jsで書かれたプログラムです。 Javaスクリプトを作成して Node で実行し、AngularJS アプリケーション内の Web 要素を識別します。また、WebDriver を使用してユーザーのアクションでブラウザーを制御します。

では、AngularJSアプリケーションとは一体何なのでしょうか？

AngularJS AngularJSアプリケーションは、拡張HTML構文を使用してWebアプリケーションコンポーネントを表現するWebアプリケーションです。主に動的なWebアプリケーションに使用されます。これらのアプリケーションは、通常のWebアプリケーションと比較して、コード量が少なく、柔軟性に優れています。なお、AngularJS 1.xは2021年12月31日に長期サポートが終了したため、現在ではこれらのアプリケーションはレガシーとなっています。

なぜ通常の方法でAngularJSのWeb要素を見つけることができないのか Selenium ウェブドライバー？

AngularJS アプリケーションには、ng-repeater、ng-controller、ng-model など、含まれていない追加の HTML 属性があります。 Selenium ロケーター。 Selenium を使用してこれらの Web 要素を識別できません Selenium コード。だから、プロtrac頂上のトール Selenium Webアプリケーションにおいて、これらの属性を処理および制御できます。

Protractor は AngularJS ベースのアプリケーション向けのエンドツーエンド テスト フレームワークです。ほとんどのフレームワークはテストの実施に重点を置いていますが、 単体テスト AngularJSアプリケーション向け、Protractorは、アプリケーションの実際の機能性をテストすることに重点を置いています。

プロを始める前にtracTorを使用するには、以下のものをインストールする必要があります。

1. Selenium: あなたは見つけることができます Selenium インストール手順 Selenium WebDriver インストールガイド.
2. NPM（Node.js）： ProをインストールするにはNode.jsをインストールする必要がありますtractor。これらのインストール手順は、 Node.jsのダウンロードとインストールガイド.

Protractorのインストール

ステップ1） コマンドプロンプトを開いて次のように入力します 「npm install -g pro」tracトール」 Enterキーを押します.

上記のコマンドを実行すると、必要なファイルがダウンロードされ、Proがインストールされます。trac以下に示すように、クライアントシステム上でtorを実行します。

ステップ2） を使用してインストールとバージョンを確認します "プロtractor –バージョン 成功すると、以下のスクリーンショットのようにバージョンが表示されます。 そうでない場合は、手順 1 を再度実行します。

(ステップ 3 と 4 はオプションですが、より良い練習のために推奨されます)

ステップ3） WebDriverマネージャーを更新します。WebDriverマネージャーは、特定のブラウザでAngular Webアプリケーションに対してテストを実行するために使用されます。Pro版以降tracTorがインストールされている場合、WebDriverマネージャを最新バージョンに更新する必要があります。これは、コマンドプロンプトで次のコマンドを実行することで実行できます。

webdriver-manager update

ドライババイナリは以下のようにダウンロードされます。

ステップ4） WebDriverマネージャーを起動します。この手順により、WebDriverマネージャーがバックグラウンドで実行され、pro経由で実行されるテストを監視します。tractor。

テストが実行されると、WebDriverは自動的に該当するブラウザにテストをロードします。以下のコマンドでマネージャーを起動してください。

webdriver-manager start

コンソールはリスニングアドレスを表示します。

さて、次の場所へ移動してください。 URL (http://localhost:4444/wd/hub/static/resource/hub.htmlブラウザで確認すると、WebDriver マネージャーがバックグラウンドで実行されているのが実際にわかります。

Proを使用したAngularJSアプリケーションのテスト例tracタ

ドライバーマネージャーが実行されている状態で、Protractorを実行するには2つのファイルが必要です。 当社は、シームレスなサービスと一流の旅行商品を専門としており、限界を押し広げ、常に時代の先を行くことでお客様に最高の体験を提供することに全力で取り組んでいます。 ファイルと の監視 ファイルにソフトウェアを指定する必要があります。

1. 設定ファイル: このファイルはプロに役立ちますtracテストファイルが配置されている場所 (specs.js) へ tor で通信し、 Selenium サーバー（Selenium アドレス）。ChromeはProのデフォルトブラウザです。tractor。
2. スペックファイル： このファイルには、アプリケーションと対話するためのロジックとロケーターが含まれています.

ステップ1） 開かなければならない https://angularjs.org 「ここに名前を入力」テキストボックスに「GURU99」というテキストを入力します。

ステップ2） このステップでは、

1. 名前を入力しました「Guru99 "
2. 出力テキスト「こんにちは」 Guru99インチが見える。

ステップ3） ここで、名前を入力した後に Web ページからテキストをキャプチャし、予想されるテキストで検証する必要があります。.

Code:

設定ファイルを準備する必要があります (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!');
  });
});

Code spec.jsの説明：

1. 説明する('GURU99 名前を入力してください', function()describe 構文は Jasmineフレームワークここで「describe」（「Enter GURU99 Name」）は通常、アプリケーションの構成要素（クラスや関数など）を定義します。「Enter GURU99」というコードスイートでは、これは単なる文字列であり、コードではありません。
2. it(「GURU99 として名前を追加する必要があります」、function()
3. ブラウザ.get('https://angularjs.org')のように Selenium WebDriver browser.get は、前述の新しいブラウザインスタンスを開きます。 URL.
4. 素子(by.model('yourName'))。キーの送信('GURU99') ここでは、モデル名「yourName」を使用してウェブ要素を検索しています。これは「ng-モデルウェブページ上で「」を確認してください。以下のスクリーンショットをご覧ください。

5. var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')) ここでは、次を使用して Web 要素を見つけています。 XPath そしてその値を変数「guru」に保存します.
6. 期待する(guru.getText())。等しい('Hello GURU99!') 最後に、Web ページから取得したテキスト ( gettext() を使用) が期待されるテキストであることを確認します。

conf.js のロジック:

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js']
};

Code conf.jsの説明

1. seleniumAddress: 'http://localhost:4444/wd/hub'設定ファイルはProに指示しますtrac場所 Selenium 話し合うアドレス Selenium ウェブドライバー。
2. specs: ['spec.js']この行はProに伝えますtracテストファイルspec.jsの場所

の実行 Code

まず、conf.jsとspec.jsが配置されているフォルダに移動し、以下の手順に従ってください。.

ステップ1） コマンドプロンプトを開きます。

ステップ2） ことを確認してください Selenium WebDriverマネージャが起動しました。起動するには、「webdriver-manager start」と入力してEnterキーを押してください。.

（If Selenium WebDriverが起動していないため、Proとしてテストを進めることができません。tractor は Web アプリケーションを処理する WebDriver を見つけることができません。

ステップ3） 新しいコマンド プロンプトを開き、次のようにコマンドを入力します。 "プロtractor conf.js” 設定ファイルを実行します。実行は以下のように終了します。

説明：

• こちらプロtractorは、指定された仕様ファイルを含む設定ファイルを実行します。
• 私たちは見ることができます Selenium サーバーは「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 ファイルを保存し、「実行」の上記の手順を繰り返します。 Code" セクション

ここで、上記の手順を実行します。

結果：

スクリーンショットでは結果が「F」で示されており、その理由が失敗として表示されています。 「『こんにちは、GURU99！』を期待しています！」 「Hello Change GURU99!」と等しくなります。 また、コード実行時に発生したエラーの数も表示されます。

同じことを達成できますか Selenium ウェブドライバー？

AngularJS 要素は、XPath または CSS セレクタを使用して特定できる場合があります。 Selenium WebDriver。ただし、これらの要素は動的に生成および再バインドされるため、ProtracAngularJSスイートにとっては、torの方がより安全な選択肢だった。

Jasmine Reporters を使用してレポートを生成する

Protractor は Jasmine レポーターをサポートしています。このセクションでは、 JUnit以下の手順に従って、XmlReporterを使用してテスト実行レポートをXML形式で自動的に生成します。

Jasmine Reporterのインストール

選択肢は2つあります。ローカルかグローバルかです。

1. コマンドプロンプトを開き、次のコマンドを実行してローカルにインストールします。

npm install --save-dev jasmine-reporters@^2.0.0

上記のコマンドは、jasmine-reportersをローカルに、実行されたディレクトリ内にインストールします。

2. コマンドプロンプトを開き、グローバルインストールのために次のコマンドを実行します。

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） コマンドプロンプトを開いてコマンドを実行する 以下のためにtractor conf.js

ステップ5） 上記のコードを実行すると、指定されたパスに junitresults.xml が生成されます。

ステップ6） XML を開いて結果を確認します。 失敗メッセージは結果ファイルに次のように表示されます。 テストケース テストケースは失敗しました。「spec.js」からの期待される結果と、Webページからの実際の結果が一致しないため、テストケースは失敗しました。

ステップ7） 証拠または結果ファイルには junitresult.xml ファイルを使用します。

ProtracTorと最新のテスト自動化代替手段の比較

プロ以来tracTor はもはやアップデートを受け取っていないため、新しいスイートを計画しているチームは、Angular プロジェクトが現在移行しているフレームワークと比較して、Tor がどのような位置づけにあるのかを知る必要があります。以下の表は Pro と Tor を比較しています。trac以下のFAQで最もよく出てくる3つの代替案とともに、torについて説明します。

既存のプロ選手がいるチームtractorスイートは一般的に最も速く移動します ウェブドライバーIO指揮スタイルと Selenium-ベースのドライバー管理は、Proに近いものを維持するtracTorのテスト担当者は既に知っている。新規にチームを立ち上げたり、最速のテスト実行が必要なチームは、より頻繁に Cypress あるいは劇作家でもいいでしょう。

よくあるご質問