自動テストツールKatalon Studioでテスト自動化 vol.01


> ここではKatalon Studio Verion 7.1.1を使ってる前提で話しを進めます。


<h2>Katalon Studioとは何か？

ひとことで言うと、自動テストをサクッと作れるソフトウェア。
Seleniumを使って自動テストを行う場合、まず環境構築から始めなければならず、
それが色々と面倒ですが・・・

自動テストしたい。という時に環境構築のこととか考えず、サクッとKatalon Studioインストールしたら環境作れるので楽。
他、検索すると、日本語で解説してくれてる方がいるので、そちらをご参照ください。
だいたいのことは無料版で可能、一部、有料版にしないとできない機能もある。

> オフィシャルサイト https://www.katalon.com/

ざっくり言うと、テストで実行したい操作をRecordして、
自動でテストスクリプトを作成させ、テストを実行する。というやり方や、
テストコードを普通に自分で書いて、テストを実行する。
みたいな、ことなど、
コードなんて書けない！って人も使えるし、
コード書いて、細かいことまでやりたい！って人も使えます。
って感じでしょうか。


<h2>Katalon Studioの基本概念

まず基本概念、全体像を理解する為に、インストール後、起動し、サンプルProjectが最初から用意されているので、
適当なサンプルProjectを開く(とりあえずここでは、ジョッピングカート機能を備えたWebサイトをテストするサンプルを開く）
メニューより、File -> New Sample Project -> Sample Web UI Tests Project (Shopping Cart) を選択。
![スクリーンショット 2020-02-21 10.56.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148127/7e7a0c2b-a455-1270-91bd-aace931c2b78.png)

Test Explorer のウィンドウを見てみましょう、
![スクリーンショット 2020-02-21 11.05.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148127/8c4310a7-6817-4eb4-47b1-62d77f719e40.png)
<b>Test Cases</b> や <b>Test Suites</b> , <b>Object Repository</b> 
などのフォルダが見えます、まず、これらのフォルダの中に入っているファイルがどんな役割か？？
を理解するだけで、だいたいの全体像の察しがつくようになります。

<h3> Test Cases

短いテストケースを作り、入れておく場所です。
(Test Casesの直下にフォルダを作ることは任意の名前で、任意に作ることができます）

例えば

- カートに商品を入れるTest Case
    - 商品Aのページへアクセスする
    - カートへ入れるボタンをクリックする
    - カート画面で商品Aが表示していることをチェックする

とか、、、

- ログインTest Case
    - id のフィールドにidを入力する
    - passwordのフィールドにパスワードを入力する
    - ログインボタンをクリックする
    - マイページが表示していることをチェックする

とか、、、
こんな感じの塊がTest Caseファイルを作って入れておく場所です。

<h3> Test Suites

テストケースを並べて、1つの塊にしたもの、それが Test Suite です。
Test Suitesの中に任意の Test Suite ファイルを作り、入れておく場所です。
このTest Suiteを使いテストを実行できます。

例えば、
ECサイトでログインして、商品をカートへ入れる流れをテストしたい場合、
任意のTest Suite名でファイルを作り、
Test Case のとこで作った

- ログインTest Case
- カートに商品を入れるTest Case

を選択し、Test Suite を作ると
ログインTest Caseを実行 -> その後、カートに商品を入れるTest Case を実行
といったような流れでテストを実行します。

<h3> Object Repository

Test Caseを作る時、例えば「ログインボタンをクリックする」という操作をしたい時、
「ログインボタン」は画面の中の「コレ！！」です。というのを示してあげる必要があります。

画面の中の「コレ！！」という情報が、このファイルの中で、
- XPath (画面の中の特定の部分を抽出する住所みたいなもの)
- Attributes (htmlのid属性など)
- CSS(idやclassなど)

により、「コレ！！」という場所が特定されてます。

最初に紹介した、
Sample Web UI Tests Project (Shopping Cart) を例に考えると、

まず Test Cases / Common Test Cases / Login のファイルで
「4 Click」 のステップは、ログインボタンをクリックしているステップですが、
そこに注目すると、Object の列で「btn_Login」となっていることが見えると思います。
![スクリーンショット 2020-02-24 13.37.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148127/de9ad331-ddcf-e594-e332-481636cca436.png)

つまり、ここでクリックしているボタンは「コレ！！」と特定しているのは、
Objetct Repositoryの中の「btn_Login」というファイルです。

実際に、Test Explorer で見ると、そのファイルが存在しているのがわかるかと思います。
![スクリーンショット 2020-02-24 13.54.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148127/8df5298d-8e67-49a3-5ef3-a1ed6b65cdf8.png)

そして、その
Objetct Repository / Page_Login/ btn_Login ファイルを開くと、
以下のように、Attributes の idでログインボタンを特定していることがわかります。
![スクリーンショット 2020-02-24 13.56.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148127/07e1082f-0b42-2dfc-91ff-b6c17cb93f8f.png)


<h2>まずはここまで

ひとまず、この3つの概念を理解するだけでも、
どうやってKatalon Studioで自動テストを作っていくか、、
全体像がなんとなく察しがついてくると思います。

次回はもっと細かい部分を解説。
つづく・・・・(たぶん、、）


>追記
続いた
[自動テストツールKatalon Studioでテスト自動化 vol.02](https://qiita.com/McLaren/items/1148452f629a179386c8)

* 関連資料
[Test-Hack | 3分で理解するIT/テスト技術/ テスト自動化](https://test-hack.com/category/test-automation/)