TestNGを使用した自動テストの作成

1はじめに

自動テストは、テストの種類に応じて異なるツールで作成できます。 統合テストは、SoapUI、単体テストモジュールを使用した単体テスト、Selenium IDEを使用したUIテストで作成できます。 Selenium IDEを使用すると、自動化支援の探索的テストを支援するスクリプトを作成できます。 堅牢なブラウザベースのテストを作成する場合は、Seleniumを使用したテストフレームワークの使用を検討する必要があります。

TestNGは、Seleniumを駆動するために使用できるJavaテストフレームワークです。 このハウツーでは、TestNGを使用して自動テストを作成する方法を学びます。

このハウツーは、次のことを行う方法をお教えします:

• TestNGテストファイルの作成
• TestNGを使用した自動テストの実行
• TestNGを使用したレポートの生成

2 前提条件

このハウツーを開始する前に、次の前提条件を完了していることを確認してください:

• Eclipseのダウンロードとインストール
• Seleniumクライアントのダウンロード&WebDriver for Java

3 Javaプロジェクトの作成

この章では、TestNGプラグインをインストールし、TestNGおよびSeleniumライブラリを含むEclipseでJavaプロジェクトを作成します:

1. Eclipseを開きます。
2. TestNGのダウンロードのEclipseプラグイン>update siteからのインストールセクションの指示に従います。
3. 変更を有効にするためにEclipseを再起動します。
4. “ファイル”>”新規”>”Javaプロジェクト”を選択します。
5. プロジェクト名に”MyFirstTestNGProject”と入力し、”次へ”をクリックします。
6. ライブラリタブを選択し、ライブラリの追加をクリックします。
7. TestNGを選択し、次へをクリックします。
8. 完了をクリックして、デフォルトのTestNGライブラリをこのプロジェクトに設定します。[外部Jarの追加…]をクリックし、Selenium JARファイルを保存した場所に移動します。

9. すべてのJARファイルをselenium-およびlibsフォルダ内に追加します:

   

10. “終了”をクリックして、Javaプロジェクトを作成します。 MyFirstTestNGProjectがパッケージエクスプローラに表示されます:

    

これで、プロジェクトの設定が完了しました！

4TestNGファイルの作成

新しいTestNGファイルを作成するには、次の手順に従います:

1. srcフォルダを右クリックし、新規>その他を選択します…:

2. “TestNGクラス”を選択し、”次へ”をクリックします:

   

3. 参照…をクリックしてソースフォルダを選択し、MyFirstTestNGProject>srcを選択し、OKをクリックします。

4. 次の情報を入力します:

   • パッケージ名:myfirsttestngpackage
   • クラス名:MyFirstTestNGFile
   • @BeforeTest:true
   • @AfterTest: 真

   

5. 「完了」をクリックします。 最初のTestNGファイルのテンプレートが自動的に作成されます:

   

   @Test注釈は、その下のメソッドがテストケースであることを示すために使用されます。 この場合、メソッドfはテストケースです。 @BeforeTest注釈は、その下のメソッドが最初のテストケースの前に実行されることを示すために使用されます。 @AfterTest注釈は、その下のメソッドが最後のテストケースの後に実行されることを示すために使用されます。

5 テストケースの作成

テストケースのコードを作成しましょう。5.1WebDriverの追加

WebDriverに使用する変数を作成するには、次の手順に従います:

1. 以下を検索します:

   public class MyFirstTestNGFile {

2. 次の行に以下のコードを追加します。 これにより、WebDriverタイプのdriver変数が作成されます:

   public WebDriver driver;

3. Ctrl+Shift+Oキーを押して、インポートを整理します。 これにより、不足している文がインポートされ、未使用のimport文が削除されます。 次のステートメントがインポートされます:

   import org.openqa.selenium.WebDriver;

5.2 BeforeTestメソッドの追加

@BeforeTest注釈は、その下のメソッドが最初のテストケースの前に実行されることを示すために使用されます。 最初のテストケースの前に、次の手順に従ってFirefoxブラウザを開きます:

1. 次のコードを変更します:

   @BeforeTestpublic void beforeTest() {}

   に:

   @BeforeTestpublic void beforeTest() { driver = new FirefoxDriver();}

   これにより、Firefoxドライバの新しいインスタンスが作成され、Firefoxブラウザが開きます。

2. CTRL+SHIFT+Oを押します。:

   import org.openqa.selenium.firefox.FirefoxDriver;

5.3AfterTestメソッドの追加

@AfterTest注釈は、その下のメソッドが最後のテストケースの後に実行されることを示すために使用されます。 最後のテストケースの後、次のコードを変更してブラウザーを閉じます:

@AfterTestpublic void afterTest() {}

に:

@AfterTestpublic void afterTest() {driver.close();}

これにより、Firefoxブラウザが閉じます。

5.4最初のテストメソッドの追加

最初のテストメソッドを追加するには、ブラウザでURLを開き、次のコードを変更します:

@Testpublic void f() {}

に:

@Test(priority=1)public void openApp() {driver.get("http://localhost:8080/index.html");}

このテストメソッドは、FirefoxブラウザでURLhttp://localhost:8080/index.htmlを開きます。 既定では、@Testで注釈が付けられたメソッドはアルファベット順に実行されます。 パラメーターを使用して、注釈の関数を変更できます。 priorityパラメーターを使用すると、メソッドを別の順序で実行できます。 TestNGは@Testアノテーションを実行し、優先度が最も低い値から最大値までを指定します。

5.5第二のテストメソッドを追加

今、あなたはログインウィンドウ上にあることを、あなたはサインインしたいと思うでしょう。 2番目のテスト方法を追加するには、次の手順を実行します:

1. Firefoxを開き、http://localhost:8080/index.htmlに移動します。
2. 開発者ツールを使用して要素を検査します。

3. ユーザー名入力フィールドをクリックします。 このフィールドのIDはusernameInputです。 IDのCSSセレクタは、ハッシュタグ（#）+IDの名前です。 ユーザー名フィールドの場合、これは#usernameInputになります。 同じ原理が他のステップにも使用されます。 CSSセレクタ#usernameInputは一意です。 一致するノードが1つあります:

   

4. パスワード入力フィールドとサインインボタンについて、手順5-6を繰り返します:

   要素	CSSセレクタ
   パスワード入力欄	#passwordInput
   サインインボタン	#loginButton

5. loginという新しいテストメソッドを追加します。 次のコードを使用します:

   @Test(priority=2)public void login() { driver.findElement(By.cssSelector("#usernameInput")).sendKeys("MxAdmin"); driver.findElement(By.cssSelector("#passwordInput")).sendKeys("1"); driver.findElement(By.cssSelector("#loginButton")).click();}

このテスト方法には、次のテスト手順が含まれています:

1. ユーザー名として”MxAdmin”と入力します。
2. パスワードに1を入力します。
3. ログインボタンをクリックします。

5.6 3番目のテストメソッドの追加

3番目のテストメソッドを追加するには、次の手順に従います:

1. アプリを開き、アプリエクスプローラーでProgramDetailページを開きます。

2. 経費タブを選択します:

   

   経費タブの名前はtabpage4です。 すべての要素は自動的にCSSクラスmx-name-を取得するため、アプリの実行中にexpensesタブはCSSクラスmx-name-tabPage4を取得します。

   

3. Eclipseに戻ります。

4. openExpensesTabという新しいテストメソッドを追加します。 次のコードを使用します:

   @Test(priority=3)public void openExpensesTab() { WebDriverWait wait = new WebDriverWait(driver, 10); wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector(".mx-name-tabPage4"))).click();}

   このテストメソッドは、正常に戻るか10秒が経過するまで、500ミリ秒ごとにExpectedConditionを呼び出します。 10秒が経過し、要素が見つからない場合、TimeoutExceptionがスローされます。 要素が10秒以内に配置されている場合、メソッドはクラス名mx-name-tabPage4の要素をクリックします。 経費タブのクラスはmx-name-tabPage4です。 クラスのCSSセレクタはドット（.）+クラス名なので、経費タブでは.mx-name-tabPage4になります。

5.7第四のテスト方法を追加

これで、経費タブに移動したので、新しい経費を作成します。 4番目のテストメソッドを追加するには、次の手順を実行します:

1. Studio Proを開き、Desktop_Adminmenuページを開きます。

2. 新しい経費ボタンを選択します:

   

   新しい経費ボタンの名前はnewButton3なので、ボタンにはmx-name-newButton3CSSクラスがあります:

   

3. デスクトップ_Expense_Newedit_Adminページを開きます。

4. 次の要素の名前を検索します（手順3で行ったように）。:

   要素	名前
   金額フィールド	textBox6
   説明ドロップダウン	referenceSelector1
   保存ボタン	saveButton1

   The name of an element in your app may be different than the name shown in the Name column. In step 7, use the name of the element of your app.

5. Eclipseに戻ります。

6. createExpenseという新しいテストメソッドを追加します。 次のコードを使用します:

   @Test(priority=4)public void createExpense() { driver.findElement(By.cssSelector(".mx-name-newButton3")).click(); driver.findElement(By.cssSelector(".mx-window-active .mx-name-textBox6 input")).clear(); driver.findElement(By.cssSelector(".mx-window-active .mx-name-textBox6 input")).sendKeys("15.00"); driver.findElement(By.cssSelector(".mx-window-active .mx-name-referenceSelector1 option:nth-child(2)")).click(); driver.findElement(By.cssSelector(".mx-window-active .mx-name-saveButton1")).click();}

   このテスト方法には、次のテスト手順が含まれています:

   1. [新規経費]をクリックします。
   2. 金額フィールドをクリアします。
   3. 15を入力します。[金額]フィールドに00を入力します。
   4. 説明ドロップダウンメニューから2番目のオプションを選択します。
   5. 保存をクリックします。

   新規経費(.mx-name-newButton3)をクリックするとポップアップウィンドウが表示されます。 アクティブなページの要素（この場合はポップアップ）を確実に取得するには、ポップアップ内の要素のCSSセレクタに.mx-window-activeを追加する必要があります。

   すべての入力フィールドに対して、CSSセレクタの最後にinputを追加する必要があります。

   amountフィールドのデフォルト値は0.00です。 新しい値を入力するには、最初にフィールドをクリアする必要があります。

   リファレンスセレクタには、空、宿泊、食事、その他、消耗品、輸送の六つのオプションがあります。 宿泊施設（2番目のオプション）を選択するには、CSSセレクタの最後にoption:nth-child(2)を追加する必要があります。

5.8 5番目のテスト方法を追加する

経費を作成した後、サインアウトする必要があります。 5番目のテストメソッドを追加するには、次の手順を実行します:

1. Studio Proを開き、Desktop_Myinfoスニペットを開きます。

2. 次の要素の名前を検索します:

   要素	名前
   サインアウトボタン	signOutButton1

3. signOutという新しいテストメソッドを追加します。 次のコードを使用します:

   @Test(priority=5)public void signOut() { driver.findElement(By.cssSelector(".mx-name-signOutButton1")).click();}

   このテストメソッドは、mx-name-signOutButton1クラス名を持つ要素をクリックします。

6 テストを実行する

これで、テストを実行する準備が整いました。 テストを実行するには、次の手順を実行します:

1. MyFirstTestNGProjectフォルダーを右クリックします。

2. >TestNGテストとして実行を選択します:

   

   テストの結果は、コンソールウィンドウとTestNG結果ウィンドウに表示されます:

   

   

7 テストレポート

TestNGはHTML形式でレポートを生成します。 レポートをテストするには、次の手順を実行します:

1. MyFirstTestNGProjectフォルダーを右クリックし、”更新”を選択します。 テスト出力フォルダが作成されます:

   

2. test-outputフォルダを開きます。

3. インデックスを右クリックします。htmlファイル。

4. >Webブラウザで開くを選択します。 レポートは次のようになります:

   

5. （表示）をクリックします。 テスト方法はアルファベット順に示されています:

   

6. 時系列ビューをクリックします。 メソッドの概要が時系列順に表示されます:

   

8 テストスイートの作成

“テストの実行”で行ったようにテストを実行すると、テストスイートが自動的に作成されます。 このテストスイートには、プロジェクト内にあるすべてのtestNGファイルが含まれています。 しかし、特定のテストのみを実行したい場合はどうなりますか？ 自分でテストスイートを作成する必要があります。

1. srcフォルダを右クリックし、新規>その他を選択します。

2. XMLフォルダを開き、XMLファイルを選択します:

   

3. [次へ]をクリックします。

4. ファイル名をMyFirstTestSuiteに変更します。xml。

5. “終了”をクリックしてXMLファイルを作成します:

   

6. [ソース]タブをクリックします。:

   

7. 次のコードを変更します:

   <?xml version="1.0" encoding="UTF-8"?>

   を

   <?xml version="1.0" encoding="UTF-8"?><suite name="MyFirstTestSuite"> <test name="Test1"> <classes> <class name="myfirsttestngpackage.MyFirstTestNGFile" /> </classes> </test></suite>

   にすると、新しいテストスイートMyFirstTestSuiteが作成されます。 テストスイートにはTest1という1つのテストが含まれています。 テストには1つのtestNGファイルmyfirsttestngpackage.MyFirstTestNGFileが含まれています。

8. MyFirstTestSuiteを右クリックします。xmlファイルを選択し、Run as>1TestNG Suiteを選択します。

よくやった！ あなたの最初のTestNGスイートを作成しました！

9@Parameters

を使用して複数のブラウザでテストスイートを実行します作成したテストはFirefoxでのみ実行されます。 他のブラウザで機能が期待どおりに動作することを確認する場合は、マルチブラウザテストを実行する必要があります。 TestNGを使用すると、異なるブラウザで同じテストを実行するのは非常に簡単です。

1. ChromeDriverのダウンロードはこちら：https://sites.google.com/a/chromium.org/chromedriver/downloads。
2. IEDriverのダウンロードはこちら：http://selenium-release.storage.googleapis.com/index.html。

3. Eclipseで、MyFirstTestNGFileを開き、次のコードを変更します:

   @BeforeTestpublic void beforeTest() { driver = new FirefoxDriver();}

   に:

   @Parameters("browser")@BeforeTestpublic void beforeTest(String browser) { if(browser.equalsIgnoreCase("chrome")){ System.setProperty("webdriver.chrome.driver", "C://Selenium/chromedriver.exe"); driver = new ChromeDriver(); } else if(browser.equalsIgnoreCase("ie")){ System.setProperty("webdriver.ie.driver", "C://Selenium/IEDriverServer.exe"); driver = new InternetExplorerDriver(); } else{ driver = new FirefoxDriver(); }}

   @Parameters テストスイートXMLからパラメータ(この場合はbrowser)を挿入するために使用されます。 Browserパラメータがchromeの場合、Chromeドライバが起動します。

   exeが格納されていますが、C://Selenium フォルダ。 このコードでは正しいパスを使用してください。

4. Ctrl+Shift+Oキーを押すと、次のステートメントがインポートされます:

   import org.openqa.selenium.chrome.ChromeDriver;import org.openqa.selenium.ie.InternetExplorerDriver;import org.testng.annotations.Parameters;

5. MyFirstTestSuiteを開き、次のコード

   <?xml version="1.0" encoding="UTF-8"?><suite name="MyFirstTestSuite"> <test name="Test1"> <classes> <class name="myfirsttestngpackage.MyFirstTestNGFile" /> </classes> </test></suite>

   を次のコードに変更します:

   <?xml version="1.0" encoding="UTF-8"?><suite name="MyFirstTestSuite"> <test name="ChromeTest"> <parameter name="browser" value="chrome" /> <classes> <class name="myfirsttestngpackage.MyFirstTestNGFile" /> </classes> </test> <test name="IETest"> <parameter name="browser" value="ie" /> <classes> <class name="myfirsttestngpackage.MyFirstTestNGFile" /> </classes> </test> <test name="FirefoxTest"> <parameter name="browser" value="firefox" /> <classes> <class name="myfirsttestngpackage.MyFirstTestNGFile" /> </classes> </test></suite>

   最初のテスト(ChromeTestと呼ばれる)には、ブラウザパラメータchromeがあります。 このパラメーターは、MyFirstTestNGFileの@BeforeTestメソッドで使用されます。

6. MyFirstTestSuiteを右クリックします。xmlファイルを選択し、>TestNG Suiteとして実行を選択します:

   

よくやった！ あなたはTestNGであなたの最初の自動化されたクロスブラウザテストを作成しました！

これで、TestNGテストファイルの作成方法、テストスイートの作成方法、および複数のブラウザで自動テストを実行する方法がわかりました。

10続きを読む

• Selenium IDEを使用したMendixアプリケーションのテスト
• 単体テストモジュールを使用したマイクロフローのテスト