Kataron Project v7 プロジェクト作成手順 

# 1. ダウンロード

## 環境情報

* ローカルPC OS：Windows10 Home 64bit
* Katalon Studioバージョン：7.2.1

## ダウンロード

(1) [公式サイトにアクセス](https://www.katalon.com/) > [Download Katalon Studio]
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363690/a71a5de0-3638-9104-9117-1a55a270921f.png" width="50%">

(2) アカウント作成してサインイン Or Sign in

(3) 再度、[Download Katalon Studio]

(4) 環境に合わせたzipファイルをダウンロード
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363690/9c6318d1-d40a-a6d3-41d2-138caafe57a9.jpeg" width="50%">

(5) 解凍して適当な場所に配置（解凍のみでインストール不要）

(6) 解凍したフォルダのkatalon.exeをダブルクリックして起動。

# 2. 初回起動作業

(1) アクティベーション（作成したアカウント情報を入力）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363690/6d8f83b4-3b2a-fb5b-0643-536f6c7c4e7a.jpeg" width="50%">

(2) インフォメーション確認
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363690/819d3b8d-1567-32a7-a4b9-5e4460a40832.jpeg" width="50%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363690/c57543ee-f77a-7270-3789-8930464bd43a.jpeg" width="50%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363690/6ceb6844-35f6-5b85-87ff-2e4d5b534827.jpeg" width="50%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363690/c69b4899-c1cc-42b6-ddde-23712f43eb95.jpeg" width="50%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363690/9d881378-6dab-8dc0-9786-e964c7da3723.jpeg" width="50%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363690/391887b8-6512-6099-2bc9-fe7e8838e080.jpeg" width="50%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363690/3a3b10ff-5946-b7c6-bc06-a71d8f539ce3.jpeg" width="50%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363690/68ca0f6a-b3eb-f64c-4dbd-73ca2e9e8127.jpeg" width="50%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363690/017f0bd3-a6a9-cf32-b80f-6bdc859556e1.jpeg" width="50%">


# 3. プロジェクトの新規作成とベース準備

(1) [File] > [New] > [Project] 
![01.newproject.png](https://qiita-image-store.s3.amazonaws.com/0/363690/188baa3f-45c2-b334-6578-d8bc33ce87bd.png)

(2) 左メニューから「Tests Explorer」を表示させる。
※表示されている場合は不要
![02.test Explorer.png](https://qiita-image-store.s3.amazonaws.com/0/363690/c1c12c1e-8fbe-b252-c48c-c328f81dae61.png)

(3) build.gradle ファイルの内容を以下に上書き
※[こちらのサイトを参照](https://qiita.com/kazurayam/items/7da4bd82b52fe18209db)

``` 
plugins {
  id "com.github.kazurayam.visualtestinginks" version "0.1.21"
}
vt.version = '1.13.0'
```

(4) Visual Testingのリソースを取り込む
※[こちらのサイトを参照](https://qiita.com/kazurayam/items/7da4bd82b52fe18209db)
コマンドラインで下記の操作をします。

``` 
$ cd <Katalonプロジェクトのディレクトリ>
$ gradle enableVisualTesting
``` 
(5) KatalonプロジェクトをRefleshする
Katalon Studioのウインドウを開いていた場合は一度Katalon Studioを閉じて再起動する。

(6) .gitignoreファイルを修正する

```
（下部に以下を追加）
/Libs/Temp*
/Reports/

/Drivers/
/Materials/
/Storage/
```

(7) [Test Cases] [Object Repository] [Test Suites] の下にサブフォルダを作成する
※[こちらのサイトを参照](https://qiita.com/kazurayam/items/7da4bd82b52fe18209db)
![41.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363690/340f740e-fad7-5cef-b495-9b4d278f3309.jpeg)


(8) [Project] > [Settings] > [External Libraries] > [add]

以下の２つのjarを登録
・[Materials](https://github.com/kazurayam/Materials/releases)…今回バージョン：0.73.3
・[aShot](https://github.com/pazone/ashot) …今回バージョン：1.6.0

以下の２つのjarを削除
・VT-ashot-1.5.4.jar
・VT-Materials-0.73.2.jar
![42.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363690/7fc55649-1266-609e-086a-e472e4d37ff6.jpeg)

(9) Test Cases/XXXX の配下にベース資産をコピーする
※[こちらのサイトを参照](https://qiita.com/kazurayam/items/7da4bd82b52fe18209db)

|コピー元ファイル|新しく作るファイル|コードをどう修正するか|
|:-------------------|:--------------------|:--------------------|
|Test Cases/CURA/ImageDiff_chronos|Test Cases/XXXX/ImageDiff_chronos|CURAの文字２箇所をXXXXに書きかえる|
|Test Cases/CURA/ImageDiff_twins|Test Cases/XXXX/ImageDiff_twins|CURAの文字２箇所をXXXXに書きかえる|
|Test Cases/CURA/restorePreviousScreenshots|Test Cases/XXXX/restorePreviousScreenshots|CURAをXXXXに書きかえる|

# 4. キャプチャーサンプルのテスト追加

(1) サンプルのテストケースを追加
[Test Explorer] > [Test Cases] > [サブフォルダ] > [右クリック] > [New] > [Test Case]
![43.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363690/25ab99f4-06f9-7ec0-c4cf-af94d2dcac1b.jpeg)
![44.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363690/f8a03a60-399f-b71a-d74e-bf3b1e81f228.jpeg)

(2) 下部の[Script] をクリック
![45.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363690/4ba68fb0-001f-6340-1943-83759059dc61.jpeg)

(3) 以下のコードを張り付け

```
(import部の下に追加)

import java.nio.file.Path as Path
import org.openqa.selenium.WebDriver as WebDriver
import com.kazurayam.materials.MaterialRepository as MaterialRepository
import com.kazurayam.visualtesting.ManagedGlobalVariable as MGV
import com.kms.katalon.core.webui.driver.DriverFactory as DriverFactory
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI

WebUI.comment("*** GlobalVariable[${MGV.CURRENT_TESTSUITE_ID.getName()}]=${GlobalVariable[MGV.CURRENT_TESTSUITE_ID.getName()]}")
WebUI.comment("*** GlobalVariable[${MGV.CURRENT_TESTSUITE_TIMESTAMP.getName()}]=${GlobalVariable[MGV.CURRENT_TESTSUITE_TIMESTAMP.getName()]}")

MaterialRepository mr = ((GlobalVariable[MGV.MATERIAL_REPOSITORY.getName()]) as MaterialRepository)

assert mr != null

Path png = null

// ブラウザを起動
WebUI.openBrowser('')
WebUI.setViewPortSize(1280, 768)
WebDriver driver = DriverFactory.getWebDriver()

'ページを開く'
URL url = new URL("http://www.google.co.jp")
WebUI.navigateToUrl(url.toExternalForm())

'capture'
png = mr.resolveMaterialPath(GlobalVariable[MGV.CURRENT_TESTCASE_ID.getName()], 'google.png')

'capture'
CustomKeywords.'com.kazurayam.ksbackyard.ScreenshotDriver.takeEntirePage'(driver, png.toFile(), 500)


```

(4) テストスイートを追加
![51.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363690/fec7ec65-ff02-8ac0-1cbc-db04005ee6f5.jpeg)
![52.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363690/0f368431-f88f-fee5-9ef1-05308aa7b0a2.jpeg)

[Add]を押して以下の３つを登録
![53.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363690/3341acfc-359a-9fa2-0ef0-efc3374d696a.jpeg)

# 5. 実行と確認

(1) 実行
![61.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363690/b94e216c-fb77-e96c-cfe5-efb15bcff35e.jpeg)

(2) １回目はエラーがでるので２回実行

(3) 確認

①成功していることを確認
![62.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363690/de46c214-43e5-b77c-358e-aa1aa44777f3.jpeg)
②キャプチャーが保存されていることを確認
![63.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363690/212166f6-e99a-57d3-fe63-d7f91cc69067.jpeg)