##概要
ここでは初めてのテスト自動化でもKatalonStudioを使ってWEBサイトでの動作を記録・実行できるようにインストールから実行までの流れを紹介します。

####動作環境

mac Mojave
ブラウザ：chrome
Windows10
ブラウザ：chrome

##ダウンロード・インストール

####無料で利用開始後課金要素有り
KatalonStudioで全機能を継続して利用するにはライセンスの購入が必要になりますが、
最初の1ヶ月間はトライアル無料になっています。
また、トライアル期間を終了した場合は一部の無料機能に制限された状態で利用可能となります。

####ダウンロードへのリンク
公式ダウンロードページ
https://www.katalon.com/homepage/

早速ダウンロードページに移動し「Get Katalon Free」をクリック

####アカウント登録が必要
最初にサインアップが必要になるので登録しましょう。

ローマ字で名前、メールアドレス、パスワードを設定してGet Startedします

次にあなたの担当とこれまでのテストソリューションの経験を聞かれます。
ダウロードできるかには全く関係ないですが、Katalon開発チームが利用ユーザーの傾向を把握したいということでしょうから、可能ならサービス向上のために貴方の状況に近いものを回答をしましょう。

####サインアップ完了後にダウンロードできる
回答を選択してDownloadをクリックすると、以下の画面に遷移して利用中のOSに沿ったアプリがダウンロードされます

####インストール
macの場合はdmgファイルがダウンロードされると思うのでダブルクリックしてインストールしましょう。

windowsの場合はzipファイルがダウンロードされると思うので任意の場所に解凍するとすぐ使えます。実行するときには解凍後のフォルダに入っているkatalon.exeを開くので、デスクトップなどにショートカットを作成すると便利です。

##早速 Katalon Studio を開く

windowsの場合はスタートメニューから検索できないので、katalon.exeをダブルクリックするかデスクトップにショートカットを作って開くようにしましょう。

初めてKatalon Studioを開くと以下のようにサインインでのアクティブ化を求められます。
ダウンロード時に作成したサインアップ情報を入力しましょう。

サインインしたあとは質問がやチップスが表示されたりするので、無視して閉じてもいいです

##プロジェクトをつくる
まだプロジェクトを１度も作成したことがない場合は以下のようなところから「new project」選択でプロジェクト作成ができます

既にプロジェクトがある場合はメニューからFile > New > Project を選択しましょう

作成するプロジェクトを設定します

Name : お好きなプロジェクト名を半角英数で記載してください
Type : 今回はWebサイトのテストを作るので[web]か[Generic]を選択
Repository URL : Git利用の場合に設定しますが空けててOKです
Location : プロジェクトの保存先を指定してください(ワークスペース)
Description : プロジェクトの説明文を記載する場所ですが記載不要

設定したらOKで作成します

プロジェクトを作成すると上記のようなファイル群が確認できます。
それぞれの説明は今回知らなくても大丈夫なので抜粋します。

##テストケースを作ってみる
###テストケースファイルの作成
テストケースを作成するには
Test Casesフォルダを右クリック > New > TestCaseを選択します

設定画面が表示されるので任意で設定して「OK」をクリックください

Name : 任意の名前を半角英数で記載
Description : テストケースの説明があれば記載(空白OK)
Tag : テストケースを探すときに使えるように任意のタグを設定できます(空白OK)

空のテストケースが作成されました

###画面操作を記録(レコード)する
作ったテストケースにテスト内容を追加します。
動作内容を手打ちのコマンド指定で書くこともできますが、今回は画面で行った操作を記録できる機能を使いましょう。

画面左上の地球儀のようなマークに赤い印のあるアイコンをクリックしてください

Web Recorder のウィンドウが開きます

URL欄には最初にアクセスする対象URLを記載しています。
今回はKatalon開発チームで用意してくれているデモサイトのURLを設定します

URL : https://katalon-demo-cura.herokuapp.com/

新しくブラウザを開いて記録したいので、chrome アイコンの隣の▼メニューからChrome(Recommended)を選択します。
※GoogleChromeをインストール済みである必要があります

選択に応じて、ブラウザが立ち上がります。

エラーが出る場合
自動テストでブラウザを動かすためには内部的にはdriverというものをつかっています。
そのdriverのバージョンとブラウザのバージョンが合わないときに以下のようなエラーがでます。

親切にもアップグレードしてくれるようなので、「OK」クリックでdriverをアップグレードしましょう。
アップグレードが完了すると、再度Chrome(Recommended)の選択でブラウザが立ち上がるはずです。

ブラウザが立ち上がり、動作の記録が始まる

ブラウザが立ち上がると、Web RecorderのItemに
Open Browser (ブラウザを開く動作)
Navigate To URL (指定URLに遷移する動作)
が記録されていることが確認できます。

ここでデモサイトに表示されている[Make Appointment]をクリックしましょう
[Login]の画面に遷移し、Web Recorderには[Click]の動作が記録されました

画面上に表示されているDemo account通りにログイン情報を入力して[Login]をクリックします

Usernameは[Set Text]動作が記録されましたが
Passwordの入力は[Set Encrypted Text]が記録されました
これはPassword入力の際、暗号化したテキストを入力する動作記録になっているためです。賢い。

ログイン後の画面でせっかくなのでプルダウンなども動作記録を試します

上から一通り触って記録しました

プルダウン選択
チェックボックス選択
ラジオボタン選択
カレンダーアイコンから日付入力
テキストエリアへ入力
ボタンクリック

###記録の終了
動作の記録を終了するには Web Recorder 右上の停止ボタンをクリックします

クリックすると [Close Browser] ブラウザを閉じる動作が追加されて終了します

保存前に記録した動作に日本語の説明をつけましょう
Descriptionの欄をダブルクリックすると入力欄を表示します

ここに動作の説明を書くことができるので、後で確認したときに何をしているかわかりやすいです

私はとりあえず全部の動作に説明をつけました（後から変更可能です）

これだけではテストケースに保存されていない状態なので、 [ Save Script ]をクリックして保存しましょう

[Add Element to Object Repository]の画面が表示されます。
次の項目「テストオブジェクトの保存」で確認してください。

###テストオブジェクトの保存
テストオブジェクトとは、クリックしたりテキスト入力した際に対象となった「ボタン」や「テキストエリア」を指す座標のようなもので、XpathやCSS Selectorで指定されています。
Xpath , CSS がわからない人も今回は気にしなくて大丈夫です。

こちらの画面は今回の動作記録で必要になったテストオブジェクトをどのフォルダに保存するか聞いています

ここでは細かい指定ができないので、Create new folder as structure belowにチェックを入れて、全て選択中の状態でOKします。

Object Repositoryに新たにフォルダが作成されて、今回追加したオブジェクトを確認できます。
オブジェクトは画面ごとに分けたいのでObject Repository右クリック＞New > Folderでフォルダ作成します。

フォルダを作ったあとはドラッグ&ドロップでオブジェクトを移動できます
私は以下のようにフォルダ分けしました

また、右クリック＞Rename　することで名前の変更ができます。
テストオブジェクトはテストケースを複数跨いで共通で使うので、後で何のオブジェクトか迷わないように以下を心がけましょう

わかりやすい名前にする
画面毎,サイト毎にフォルダを作成する

###テストケースの確認
Test Cases > 作成したケース名にて今回の動作記録が確認できます

Manual タブから Script タブに切り替えてみましょう

プログラムっぽいことが書かれています（というかGroovy言語のプログラムです)

プログラム開発に慣れている方はこちらの画面からソースを直接編集できます。
プログラムできない人でも、これが自動で記録できるというのはとってもありがたいです。

テストケースの作成は完了です。

##テスト実行してみる
作ったテストケースを実行するにはテストケースを開いている画面で右上の再生ボタンをクリックするとデフォルトで指定されているブラウザで実行されます。
再生ボタン隣の▼をクリックした場合はブラウザを選択して実行できます。
Chromeを選択して実行してみましょう

ブラウザが立ち上がって記録した動作が自動実行されます

実行が終了するとLog Viewerで書く動作の実行結果が確認できます。
緑のチェックマークが動作成功しましたの印です。
逆に失敗すると赤の×が表示され、右側に失敗のエラー内容が記載されます

以上がKatalon Studioでの簡単なWebサイトのテスト作成でした。
お疲れ様です。