KatalonStudio シンプルなテストの作成

今回はシンプルなテストを作成して Katalonの使い方を覚えようと思います。

# 日本語が使えない
テストを作る前の注意です。
Katalon Studio 6.1.4 時点では、日本語を使えない場所が多々あります。
特に、WebRecorderなどを使用してクリックするコンポーネントに名前をつけるとき、日本語を入力してしまうと、保存時に日本語部分が消えてしまうので注意してください。

# 新プロジェクトの作成

## プロジェクトの作成
ここでは File - New - Project で新しいプロジェクトを作成します。
テストプロジェクトは API用やMobile用など、特定のサービスを対象にしたプロジェクトを作成することもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/96383007-aec4-11e7-e1a9-a797ce6080f6.png)

プロジェクトに名前を付けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/7ff9a827-34d6-eab0-fae3-7b9a7e8e6802.png)

## プロジェクト内のフォルダ
プロジェクトを作成するといくつかのフォルダが表示されます。
ここでは基本的な3つのフォルダについて確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/79e754dc-2741-3934-697f-41fa4af00f51.png)

* Profiles
環境別に設定値を変えたい場合、ここで設定値を登録しておきます。 開発環境、ステージング環境でログインURLが違い場合に、それぞれのURLを登録しておく、というような使い方ができます。

* Object Repository
画面上の項目を Object Repository として登録しておくことができます。WebRecorderで作成したり、自分で作成することもできます。

* Test Cases
ここにテストケース（シナリオ）を作成します。画面上でクリックできる項目は ObjectRepositoryから選択することができます。実際は Groovyスクリプトになっているので、スクリプト内で操作対象を定義することもできます。

# テストケースの作成
## 操作の記録
ここでは WebRecorderを使って、画面操作を録画してみます。
メニューバーにある WebRecorder のアイコンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/9359c149-8fd5-e01a-636e-56cdc2ebcce1.png)

ここではURLにQiitaのURL (https://qiita.com) を指定してみます。
次に、右のドロップダウンリストから chrome を選択します。
すると、Chromeが自動的に起動しQiitaのトップページが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/aa444910-d0c0-c27c-fb5d-087a175192ae.png)

自動テストの対象になっているブラウザには「Chromeは自動テスト ソフトウェアによって制御されていません」という表示があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/331ac8fc-f2a8-a27d-36a5-4c7b35d769a9.png)

このとき WebRecorderには2つの操作が記録されています。

**Open Browser**
Chromeブラウザを起動する

**Navigate To Url**
指定したURLを起動中のブラウザで開く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/ebf1b772-f4bf-48f6-7a7f-ffa4e4d69962.png)

次に、自動テスト中のブラウザで、右上にあるログインのリンクをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/350b0a6c-a3ae-6e06-f6a2-07e8d1eea64f.png)

画面はログイン画面に切り替わります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/85e0e7aa-cc58-4a2b-df63-9546c5ef8a27.png)

WebRecorderを確認すると、いまのクリック操作が登録されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/d607ea53-3f6f-c349-964d-e70c85e0a58f.png)

**Click**
指定したコンポーネントをクリックする


## 操作したコンポーネントの情報 (TestObject)
テスト中に操作したコンポーネントは TestObject を呼ばれます。
TestObjectはWebRecorder内でその位置情報をXPathとして確認することができます。

### SelectionMethod XPath

右上のRunボタンの上にある「Show Captured Objects」をクリックします。
すると、画面が右側に広がり、Aタグの情報が表示されます。
Selector Editor に表示されているXPathが、このコンポーネントを指定するときのパスになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/6ad3fec8-e797-9355-b32d-d3b7afe82e2e.png)

この画面では Selection Method として「XPath」が選択されていますが、「Attributes」を選択すると、タグやClass名などの属性を組み合わせたXpathを構築することができます。

※ xpath:neighborがたくさんありますが、これは [AutoHealing smart XPath](https://docs.katalon.com/katalon-studio/docs/auto-healing-smart-xpath.html#prepare-the-xpath-configuration) 機能で使われるようです 

### SelectionMethod Attribute

右端のチェックボックスをON/OFFすることで、属性の組み合わせを変更できるので、確実に一意になる組み合わせを定義することもできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/69c33be0-eff2-9926-7e44-dfb2774f3486.png)

## 操作記録の停止
WebRecorder右上の StopRecordingボタンをクリックして記録を停止し、OKボタンでRecorderを閉じると、これまでに操作したコンポーネントを保存する画面が表示されます。

このままOKをクリックした場合、Object Repository に Page_Qiita フォルダを作成し、このフォルダ内に a_ という名前で ログインリンクの位置情報(Xpath)が保存されます。
今回はこのままの状態でOKをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/59972eb1-528d-f479-87b6-691c5dc5d14a.png)

次に今の操作をテストケースとして保存するダイアログが表示されます。ここで任意のテストケース名を入力してOKをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/1a487170-957c-bf88-9f03-5e935c7f1019.png)

元の画面に戻ると、いま保存したテストケースが TestCases フォルダに表示され、操作したコンポーネントの情報は Object Repository に保存されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/28adf2a7-dd5b-6783-aba1-5a01c57f9548.png)

## 操作の再生
記録した操作を再生するには、メニューバーのRunボタンをクリックします。
この場合、Firefoxがデフォルトブラウザになっているので、記録の再生はFirefoxブラウザを起動して行われます。

ブラウザを指定したい場合は、Runボタンの横にある▼をクリックし、ブラウザを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/32534f13-be42-5b8b-b971-d4438cd4a598.png)

新しいブラウザが起動し、いま記録した操作が実行されます。
このときKatalonの画面では再生中のログが表示され、すべて正しく実行すると緑色のバーが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/ca52d6a1-ea2b-276f-1938-78a85c44111f.png)

# TestObject名に日本語が使えない
WebRecorderで操作コンポーネントを確認するとき、Object Name のところは編集可能なので、操作を記録しながら、コンポーネントに分かりやすい名前を付けることができます。

ここではAタグに「ログインリンクのAタグ」という名称を付けました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/ce59f01f-fdc7-3750-3203-fe916edc0b8e.png)

しかし、ここで日本語の名称を登録した場合、テストケースを保存してKatalonの画面に戻ると、日本語の部分がすべてなくなり「A」だけしか残りません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/9535ab76-0b2e-3bf9-ce32-9a0132f8027e.png)

現時点では日本語に対応していないため、名称を付ける場合はがんばって英語名称をつけましょう。

# TestObject名についての一考
テストする画面数が増えてくるとTestObjectも増えていきます。
WebRecorderでは自動的に名称を付けてくれますが、そのまま利用すると TestCaseの作成時に ObjectRepositoryから選択するのが難しい場合があります。
このため、プロジェクトメンバーと命名規則を決めておくと良いと思います。

たとえば、ObjectRepository内で

* 画面単位のフォルダを作成
* 画面内のパーツごとにフォルダを作成
* TestObject名は 「パーツ名\_Htmlタグ名\_名称」 とする

といったような規則を作っておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270324/27c29e07-e490-8118-b649-b45677a340c4.png)

私がTestObjectを作ったとき、はじめは htmlタグ名は不要かなと思っていたのですが、ObjectRepositoryを使ってテストケースを作成するとき、

* アプリケーションの画面を見る
* クリックしたいコンポーネントを確認する
* ObjectRepositoryを探す

という流れになり、コンポーネントを確認するときに Htmlタグを意識していたように思ったので、TestObjectに Htmlタグ名が入っていると探しやすい印象がありました。