KatalonStudio テストケースの手動作成

WebRecorderを使わないでテストケースを作成してみます。

# テストの手動作成

## TestCaseの作成
まず新しいテストケースを作成します。
TestCasesを右クリックし、New > Test Case を選択するとTestCaseの名称設定ダイアログが表示されるので、任意の名称を入力してOKボタンをおします。
ここでは Test Case 2 という名称を設定しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/5a69e9a7-e27b-973d-dde6-9abf584365cc.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/23c969ec-05df-22a2-8112-9990dfb4a6ee.png)


## TestObjectの作成
前回は操作したいコンポーネントをWebRecorderを使ってTestObjectとして作成しました。
今回は先にTestObjectを作成し、このTestObjectに自分でXPathを指定します。Chromeの開発者ツールを使うとXPathを調べることができます。

## ObjectRepositoryにTestObjectを追加
ObjectRepositoryを右クリックし、New > Test Object をクリックします。

TestObjectの名称設定ダイアログが表示されるので、ここではログインのAタグという意味で a_login という名称を設定しておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/255b925d-0429-34ed-b590-0917204fc540.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/03e542f0-738c-c193-6524-cf88c73ed47d.png)

ダイアログを閉じると、画面右側にこのTestObjectの設定画面が表示されます。ここではいったん SelectionMethod として XPath を選択しておき、次の作業に進みます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/200a3524-122a-c063-7284-224611fc0c51.png)



## 開発者ツールによるXPathの調査
ChromeではF12キーを押すと DevTools という開発者ツールが表示されます。

前回のようにQiitaのTOPページを表示してF12キーを押すと、以下のようなDevTool画面が表示されます。
次に、DevToolの左上にある四角に矢印が付いたボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/9411da73-9ef6-9cd4-ec17-2e2e3355497f.png)

そして、Qiitaトップページ右上のログインリンクをクリックします。すると、DevTooliに表示されたソースコードの中で、ログインリンクに該当する部分が選択されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/d70ed380-e8a5-9b3c-d8cf-245a4813395f.png)

選択されたHtmlソース部分を右クリックしてコンテキストメニューを表示します。Copy > Copy XPath をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/3427bf8a-4792-42a4-635d-867499b16922.png)


## TestObjectにXPathを設定
DevToolでコピーしたXPathをTestObjectの SelectorEditor に貼り付けます。
SelectionMethodで XPathを選択していることも確認してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/ee0f32bf-dba8-e149-d573-4231c21f2c6e.png)

その後、タブを閉じるか、Ctrl+S を押すなどして設定を保存します。


## テストシナリオの作成
さきほど作成したTestCaseを表示します。
前回と同じ操作を手動で作成してみます。

まず、Addボタンをクリックします。
Addの横の▼をクリックすると、別のメニューが表示されてしまいますので、Addのほうをクリックします。

すると、下の表に Accept Alert と表示されるので、ドロップダウンリストを表示して Open Browser を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/aa3d6fb1-3ad0-4fcf-3824-979bfa9b836f.png)

同じ手順で Navigate To Url も追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/c5c793ca-b2a7-815a-a998-c3a39a7b8d2a.png)

Navigate To Url の行の Input列のセルをダブルクリックすると、Navigate To Url のパラメータである rawUrlの値を設定するダイアログが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/582b268a-59d8-833e-e8a7-b79e7e8c2ac4.png)

Value列のセルをクリックすると入力モードになるので、https://qiita.com と入力しOKをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/68b70598-3bda-ffac-c336-8c5496cc5b5f.png)

続いて、ログインリンクをクリックする操作を追加します。
同じ手順で Click を追加します。
Clickの対象になるObjectがnullと表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/34ebb81a-ca87-2bf4-918a-1963ba640764.png)

nullと表示されているセルをダブルクリックすると、Object RepositoryにあるTestObjectを選択するダイアログが表示されます。
先ほど作成した TestObject である、a_login を選択して OKをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/3616de3e-8e51-f1e5-955a-aa3f647df953.png)

前回は WebRecorderを終了したときに、最後に Close Browser の操作も追加されましたが、今回は追加しないで ここまでをテストシナリオとします。

## テストの実行
テストの実行は前回と同じです。
メニューバーのRunボタンで実行するブラウザを選択して実行します。

# WebRecorderとの使い分け
このように、すべて自分でテストを組み立てることも可能です。

WebRecorderとの使い分けをどうするかということですが、私の場合は以下の場合はWebRecorderを使っています。

* 新しい画面のテストを作成するとき
TestObjectを手動で作るのが面倒なので、WebRecorderでまとめて作ります。そのあと KatalonStudioでTestObject名を編集して、フォルダに振り分けて整理します。

* 作成済みのテストを編集するとき
これは当たり前ですが、操作を追加・削除するときに使います。

* XPathの指定がうまくいかないとき
ChromeのDevToolで取得したXPathではクリックなどの操作がうまくいかない場合は、WebRecorderでクリック位置を確認しています。

# Groovyスクリプトでさらに手早く
ここまでGUIを使ってテストを作成しましたが、このテストの実体はGroovyスクリプトです。テストケース画面の下にある Script タブを選択すると、スクリプトが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/32c65173-e453-0854-6172-ae11aa1d1b67.png)

Groovyがわかる人は、ここでスクリプトを書いたほうが早いです。
スクリプトで書いた内容は元のManualタブにある表にも反映されるので、2つのタブを使ってテストを作成すると効率よく進められます。

## importの追加は Ctrl+shift+O
スクリプトを書いたときにクラスがimportされていないと実行時にエラーになります。スクリプト画面で Ctrl+shift+O（オー）を押すと、必要なimportが自動追加されます。