Creating automated tests with TestNG

Size: px

Start display at page:

Download "Creating automated tests with TestNG"

あきみあみおか
5 years ago
Views:

1 Create Automated Tests with TestNG TestNG を使って自動テストを作成する目次 1 Introduction はじめに Prerequisites 準備 Creating a Java Project Java プロジェクトを作成する Create a TestNG File TestNG ファイルを作成する Creating a Test Case テストケースを作成する Add a WebDriver WebDriver を追加する Add a BeforeTest Method BeforeTest メソッドを追加する Add an AfterTest Method AfterTest メソッドを追加する Add the First Test Method 1 つ目のテストメソッドを追加する Add the Second Test Method 2 つ目のテストメソッドを追加する Add the Third Test Method 3 つ目のテストメソッドを追加する Add the Fourth Test Method 4 つ目のテストメソッドを追加する Add the Fifth Test Method 5 つ目のテストメソッドを追加する Run the Test テストを実行する Test Report テストレポート Creating a Test Suite テストスイートを作成する Run Your Test Suite on Multiple 複数のブラウザでテストスイートを実行する Related Content 関連するコンテンツ Create Automated Tests with TestNG 1

1 Introduction はじめに自動テストはテストの種類により様々なツールを使って作成することができます実装テストの作成には SoapUI ユニットテストには UnitTesting モジュールそして UI テストには Selenium IDE を使うことができます Selenium IDE を使えば自動化された探索型テストで使えるスクリプトを作成することが可能です

2 1 Introduction はじめに自動テストはテストの種類により様々なツールを使って作成することができます実装テストの作成には SoapUI ユニットテストには UnitTesting モジュールそして UI テストには Selenium IDE を使うことができます Selenium IDE を使えば自動化された探索型テストで使えるスクリプトを作成することが可能ですブラウザベースのロバストテストを作成するならば Selenium を使ったテストフレームワークを検討するべきです TestNG は Selenium の作動に使える Java のテストフレームワークですこの章では TestNG を使って自動テストを作成する方法を学習しますこの章では以下の内容を学習します TestNG テストファイルを作成する TestNG で自動テストを実行する TestNG でレポートを作成する 2 Prerequisites 準備この章の学習内容に進む前に必ず以下の作業を行ってください Eclipse をダウンロードおよびインストールする Selenium Client & WebDriver をダウンロードするモデラーで Company Expenses アプリを開きローカルで実行する Create Automated Tests with TestNG 2

3 Creating a Java Project Java プロジェクトを作成するこの節では TestNG プラグインをインストールし Eclipse で TestNG と Selenium ライブラリを含む Java プロジェクトを作成します 1. Eclipse を開き Help > Eclipse Marketplace を選択します 2.

3 3 Creating a Java Project Java プロジェクトを作成するこの節では TestNG プラグインをインストールし Eclipse で TestNG と Selenium ライブラリを含む Java プロジェクトを作成します 1. Eclipse を開き Help > Eclipse Marketplace を選択します 2. Eclipse Marketplace ダイアログボックスの Find フィールドに TestNG と入力し Go をクリックします検索結果に TestNG for Eclipse が表示されます 3. Install をクリックし Eclipse 用の TestNG プラグインをインストールします Create Automated Tests with TestNG 3

4 4. Confirm をクリックし機能を確認します 5. ライセンスをすべて確認し Finish をクリックしますプラグインがインストールされます Create Automated Tests with TestNG 4

5 6. Eclipse を再起動し変更を有効にします 7. New アイコンをクリックします 8. Java Project を選択し Next をクリックします 9. Project name に MyFirstTestNGProject と入力し Next をクリックします 10. Libraries タブを選択します 11. Add Library をクリックします 12. TestNG を選択し Next をクリックします 13. Finish をクリックしこのプロジェクトにデフォルトの TestNG ライブラリを設定しま Create Automated Tests with TestNG 5

Finish をクリックし Java プロジェクトを作成します Package Explorer に MyFirstTestNGProject が表示されますプロジェクトの設定が完了しました 4

6 す 14. Add External JARs をクリックし Selenium JAR ファイルを保存した場所に移動します 15. selenium-[version]と libs フォルダー内のすべての JAR ファイルを追加します 16. Finish をクリックし Java プロジェクトを作成します Package Explorer に MyFirstTestNGProject が表示されますプロジェクトの設定が完了しました 4 Create a TestNG File TestNG ファイルを作成する TestNG ファイルを新規作成するには以下の手順に従ってください 1. src フォルダーを右クリックし New > Other を選択します 2. TestNG class を選択し Next をクリックします Create Automated Tests with TestNG 6

7 3. Browse をクリックしてソースフォルダーを選択し MyFirstTestNGProject > src を選択して OK をクリックします 4. 以下の情報を入力します Package name: myfirsttestngpackage Class name: true( チェック true( チェック ) Create Automated Tests with TestNG 7

5. Finish をクリックしますはじめての TestNG ファイル用テンプレートが自動的に作成されます @Test アノテーションはその下のメソッドがテストケースであることを宣言するために使いますここでは f メソッドがテストケースです @BeforeTest

8 5. Finish をクリックしますはじめての TestNG ファイル用テンプレートが自動的に作成さアノテーションはその下のメソッドがテストケースであることを宣言するために使いますここでは f アノテーションはアノテーションは最後のテストケースの後にこの下のメソッドを実行することを宣言するために使います Create Automated Tests with TestNG 8

9 5 Creating a Test Case テストケースを作成するそれではテストケースをコーディングしましょう 5.1 Add a WebDriver WebDriver を追加する WebDriver で使う変数を作成するには以下の手順に従ってください 1. 以下を検索します public class MyFirstTestNGFile { 2. 次の行に以下のコードを追加しますこれにより以下の WebDriver 型の driver 変数が作成されます public class WebDriver driver; 3. Ctrl+Shift+O を押しインポートを編成しますこれにより不足しているインポート文がインポートされ未使用のインポート文が削除されます以下の命令文がインポートされます import org.openqa.selenium.webdriver; 5.2 Add a BeforeTest Method BeforeTest アノテーションは最初のテストケースの前にこの下のメソッドを実行するように宣言するために使用します最初のテストケースの前に以下の手順に従って Firefox ブラウザを開きます 1. public void beforetest() { を以下のコード: Create Automated Tests with TestNG 9

10 @BeforeTest public void beforetest() { driver = new FirefoxDriver(); に変更しますこれにより Firefox ドライバーの新規インスタンスが作成され Firefox ブラウザが開きます 2. CTRL+SHIFT+O を押します以下のインポート文がインポートされます import org.openqa.selenium.firefox.firefoxdriver; 5.3 Add an AfterTest Method(AfterTest メソッドを追加するアノテーションは最後のテストケースの後にこの下のメソッドを実行するように宣言するために使用します以下のコード public void aftertest() { を以下のコード public void aftertest() { driver.close(); に変更することで最後のテストケースの後にブラウザを閉じることができますこれで Firefox ブラウザが閉じます 5.4 Add the First Test Method(1 つ目のテストメソッドを追加する ) 最初のテストメソッドブラウザで URL を開くを追加するには以下のコード : Create Automated Tests with TestNG 10

11 @Test public void f() { を以下のコード public void openapp() { driver.get(" に変更しますこのテストメソッドは Firefox ブラウザでを開きますアノテーションが使われているメソッドはアルファベット順に実行されますパラメーターを使ってアノテーション関数を変更することが可能です Priority パラメーターを使えば別の順番でメソッドを実行できます TestNG はアノテーションを実行します 5.5 Add the Second Test Method(2 つ目のテストメソッドを追加する ) ログイン画面に遷移したらログインを行います 2 つ目のテストメソッドを追加するには以下の手順に従ってください 1. Firefox を開きに移動します 2. Firefox のツールバーから firebug ボタンをクリックします 3. FirePath タブをクリックします 4. inspect element ボタンをクリックします 5. User name 入力フィールドをクリックしますこのフィールドの ID は Create Automated Tests with TestNG 11

usernameinput です ID の CSS セレクタはハッシュタグ ( # )+ID 名です User name フィールドの CSS セレクタは #usernameinput です他の手順でも同様の原理です #usernameinput はユニークな CSS セレクタです一致するノードは 1 つしかありません 6.

12 usernameinput です ID の CSS セレクタはハッシュタグ ( # )+ID 名です User name フィールドの CSS セレクタは #usernameinput です他の手順でも同様の原理です #usernameinput はユニークな CSS セレクタです一致するノードは 1 つしかありません 6. Password 入力フィールドと Sign in ボタンについて手順 5~6 を繰り返します要素 Password 入力フィールド Sign in ボタン CSS セレクタ #passwordinput #loginbutton 7. Login という新規のテストメソッドを追加します public void login() { driver.findelement(by.cssselector("#usernameinput")).sendkeys("mxadmin "); driver.findelement(by.cssselector("#passwordinput")).sendkeys("1"); driver.findelement(by.cssselector("#loginbutton")).click(); Create Automated Tests with TestNG 12

13 このテストメソッドには以下のテスト手順が含まれています 1. ユーザー名として MxAdmin を入力する 2. パスワードとして 1 を入力する 3. ログインボタンをクリックする 5.6 Add the Third Test Method(3 つ目のテストメソッドを追加する ) ログインが完了したら Expenses タブに遷移します 3 つ目のテストメソッドを追加するには以下の手順に従います 1. Mendix Modeler を開き Desktop_AdminMenu ページを開きます 2. Expenses タブを選択します 3. Expenses タブ名は tabpage4 ですすべての要素は自動的に mx-name-[name] という CSS クラスを取得するのでこのアプリの実行中 Expenses タブは mx-name-tabpage4css クラスを取得します Create Automated Tests with TestNG 13

4. Eclipse に戻ります 5. openexpensestab という新規のテストメソッドを追加します以下のコードを使用します @Test(priority=3) public void openexpensestab() { WebDriverWait wait = new WebDriverWait(driver, 10); wait.

14 4. Eclipse に戻ります 5. openexpensestab という新規のテストメソッドを追加します 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 のクラス名を持つ要素をクリックします Expenses タブのクラスは mx-name-tabpage4 ですクラスの CSS セレクタはドット (.)+クラス名なので Expenses タブの CSS セレクタは.mx-name-tabPage4 となります 5.7 Add the Fourth Test Method(4 つ目のテストメソッドを追加する ) Expenses タブに遷移したので Expense レコードを新規作成します 4 つ目のテストメソッドを追加するには以下の手順に従ってください 1. モデラーを開き Desktop_AdminMenu ページを開きます 2. New Expense ボタンを選択します Create Automated Tests with TestNG 14

Eclipse に戻ります 7. createexpense という新規のテストメソッドを追加します以下のコードを使用します @Test(priority=4) public void createexpense() { driver.findelement(by.cssselector(".mx-name-newbutton3")).

15 3. New Expense ボタン名は newbutton3 なのでこのボタンの CSS クラスは mx-name-newbutton3 になります 4. Desktop_Expense_NewEdit_Admin ページを開きます 5. 以下の要素の名前を探します ( 手順 3 と同様 ) 要素 Amount フィールド Description dropdown Save ボタン名前 textbox6 referenceselector1 savebutton1 アプリ内の要素名は名前欄に記載されるものと異なるかもしれません手順 6 ではアプリの要素名を使用してください 6. Eclipse に戻ります 7. createexpense という新規のテストメソッドを追加します public void createexpense() { driver.findelement(by.cssselector(".mx-name-newbutton3")).click(); driver.findelement(by.cssselector(".mx-window-active.mx-name-textbox6 in put")).clear(); driver.findelement(by.cssselector(".mx-window-active.mx-name-textbox6 in put")).sendkeys("15.00"); Create Automated Tests with TestNG 15

16 driver.findelement(by.cssselector(".mx-window-active.mx-name-referencese lector1 option:nth-child(2)")).click(); driver.findelement(by.cssselector(".mx-window-active.mx-name-savebutton1 ")).click(); このテストメソッドには以下のテスト手順が含まれています 1 New Expense をクリックする 2 Amount フィールドをクリアする 3 Amount フィールドにと入力する 4 Description dropdown メニューから 2 番目のオプションを選択する 5 Save をクリックする New Expense(.mx-name-newButton3) をクリックするとポップアップウィンドウが開きますアクティブなページ ( ここではポップアップ ) の要素が読み取られることを確かなものにするにはポップアップ内の要素の CSS セレクタに.mx-window-active を追加する必要がありますすべての入力フィールドに CSS セレクタの末尾に input を追加する必要があります Amount フィールドのデフォルト値は 0.00 です別の値を入力するにはまずそのフィールドをクリアする必要があります Reference selector には 6 つのオプション (empty Accomodation Meal Other Supplies Transport) が含まれています Accomodation(2 番目のオプション ) を選択するには CSS セレクタの末尾に option:nth-child(2) を追加する必要があります 5.8 Add the Fifth Test Method(5 つ目のテストメソッドを追加する ) Expense レコードを作成したら次はサインアウトです 5 つ目のテストメソッドを追加するには以下の手順に従ってください 1. モデラーを開き Desktop_MyInfo スニペットを開きます 2. 以下の要素の名前を探します Create Automated Tests with TestNG 16

要素名前 Sign out ボタン signoutbutton1 3. signout という新しいテストメソッドを追加します以下のコードを使用します @Test(priority=5) public void signout() { driver.findelement(by.cssselector(".mx-name-signoutbutton1")).click(); 4.

17 要素名前 Sign out ボタン signoutbutton1 3. signout という新しいテストメソッドを追加します public void signout() { driver.findelement(by.cssselector(".mx-name-signoutbutton1")).click(); 4. このテストメソッドは mx-name-signoutbutton1 のクラス名を持つ要素をクリックします 6 Run the Test テストを実行するこれでテストを実行する準備が整いましたテストを実行するには以下の手順に従ってください 1. MyFirstTestNGProject フォルダーを右クリックします 2. Run as > TestNG Test を選択しますテストの結果がコンソールウィンドウと TestNG 結果ウィンドウに表示されます Create Automated Tests with TestNG 17

18 7 Test Report テストレポート TestNG は HTML 形式のレポートを生成しますレポートをテストするには以下の手順に従 Create Automated Tests with TestNG 18

フォルダーが作成されます 2. test-output フォルダーを開きます 3. index.html ファイルを右クリックします 4.

19 ってください 1. MyFirstTestNGProject フォルダーを右クリックし Refresh を選択します Test-output フォルダーが作成されます 2. test-output フォルダーを開きます 3. index.html ファイルを右クリックします 4. Open with > Web Browser を選択します以下のようなレポートが表示されるはずです 5. (show) をクリックしますテストメソッドがアルファベット順に表示されます Create Automated Tests with TestNG 19

6. Chronological view をクリックしますメソッドが日付順に表示されます 8 Creating a Test

スイートが作成されますこのテストスイートにはプロジェクト内の testng ファイルがすべて含まれていますしかし

20 6. Chronological view をクリックしますメソッドが日付順に表示されます 8 Creating a Test Suite テストスイートを作成する Run the Test で行ったようにテストを実行する場合は自動的にテストスイートが作成されますこのテストスイートにはプロジェクト内の testng ファイルがすべて含まれていますしかし特定のテストのみを実行したい場合はどうでしょうかその場合は自分でテストスイートを作成しなければなりません 1. src フォルダーを右クリックし New > Other を選択します 2. XML フォルダーを開き XML File を選択します 3. Next をクリックします 4. ファイル名を MyFirstTestSuite.xml に変更します Create Automated Tests with TestNG 20

21 5. Finish をクリックし XML ファイルを作成します 6. Source タブをクリックします 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> に変更します Create Automated Tests with TestNG 21

22 これにより MyFirstTestSuite という新しいテストスイートが作成されますテストスイートには Test1 というテストしか含まれていませんこのテストには myfirsttestngpackage.myfirsttestngfile という testng ファイルしか含まれていません 8. MyFirstTestSuite.xml ファイルを右クリックし Run as > 1 TestNG Suite を選択しますよくできましたはじめての TestNG スイートが出来上がりました 9 Run Your Test Suite on Multiple 複数のブラウザでテストスイートを実行する現時点では作成したテストは Firefox でしか実行されていません他のブラウザでも機能性を確認するにはマルチブラウザテストを実行する必要があります TestNG ならばとても簡単に様々なブラウザで同じテストを行うことが可能です 1. こちらから ChromeDriver をダウンロードします 2. こちらから IEDriver をダウンロードします 3. Eclipse で MyFirstTestNGFile を開き public void beforetest() { driver = new FirefoxDriver(); public void beforetest(string browser) { Create Automated Tests with TestNG 22

23 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.ex e"); driver = new InternetExplorerDriver(); else{ driver = new FirefoxDriver(); を使ってテストスイート XML からパラメーター ( ここでは browser) を挿入しますブラウザのパラメーターが chrome の場合 Chrome ドライバーが起動しますこの節では C://Selenium に chromedriver.exe が保存されますこのコードのパスが正しいことを確認してください 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> Create Automated Tests with TestNG 23

24 <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> に変更します Create Automated Tests with TestNG 24

25 最初のテスト ChromeTest と呼ばれるもののブラウザパラメーターは chrome ですこのパラメーターは MyFirstTestNGFile メソッドに使用されます 6. MyFirstTestSuite.xml ファイルを右クリックし Run as > TestNG Suite を選択しますよくできました TestNG を使ってはじめてのクロスブラウザ自動テストが出来上がりましたこれで TestNG テストファイルの作成方法テストスイートの作成方法そしてマルチブラウザ自動テスト実行方法を理解できましたがんばってテストしてください 10 Related Content 関連するコンテンツ 10_2Selenium_IDE を使って Mendixu アプリケーションをテストする 10_3UnitTesting モジュールを使ってマイクロフローをテストする Create Automated Tests with TestNG 25

26 This Japanese translation is provided for by Buildsystem Co. Ltd., based on Mendix copyrighted documentation and materials which can be found here as licensed under CC BY 4.0 Create Automated Tests with TestNG 26

Testing Mendix applications using Selenium IDE

Testing Mendix applications using Selenium IDE Selenium IDE を使って Mendixu アプリケーションをテストする目次 1 Preparation 準備... 2 2 Install and run the Company Expenses App Company Expenses アプリをインストールおよび実行する... 2 3 Create