Autifyをkintone環境で試してみたよ！

# はじめに

前々から気になっていたAutifyを試してみました。
「Autifyって何？」って方は[こちらのページ](https://autify.com/ja/)をご覧くださいー。

簡単に言うとテストツールです。でもAIによって色々と強化されているので、ホームページには、

```
AIによる自動メンテナンス
AIがリリースの度に変更されるUIの変化を監視し、影響のあるテストシナリオを自動的にアップデートします。
壊れたテストスクリプトを直す作業はもう必要ありません。
```

と書いてあります。ここは、気になるところですね。

特に、kintoneと言えば見た目などが簡単に変更できるのが特徴なので、
作ったテストがどこまで対応できるのか確認してみたかったんですよねー。

やり方としては、実際に操作するだけで必要な情報が記録されるので、
環境を整えたりコードを書いたりする必要はありません。

しかも、繰り返し処理とかはCSVデータをアップロードすると、データ数だけ繰り返してくれると言う便利機能もあります。
データ入力テストにも便利そうー。と言うことで、色々試してみましょう。

## 準備

まずは、デモをリクエストします。→[こちらからどうぞ](https://autify.com/ja/#requestdemo)
なんと、2020年5月20日までならキャンペーンもやってるようです。お得ですねー。→[キャンペーンの案内ページ](https://autify.com/ja/news/2020/04/14/freetrial.html)

その後、Autify側で諸々確認してOKならメールが届きます。
まぁ、テストツールなので色々と前提条件があって、それの確認に時間がかかるようですね。
メールが届いてアカウントを作成したら、Autify RecorderというChromeのエクステンションを入れます。

その辺の手順についてはユーザードキュメントがあるので[このページ](https://docs.autify.com/ja/getting-started)をご確認ください。

あとは作成するだけです！

## シナリオを作ってみよう
テストしたい内容をブラウザで操作します。
その際、Chromeのシークレットウィンドウで動作するためにログイン情報などは入力する必要があり、
さらにはログイン情報はAutify側で保存されるため、テスト用のアカウントを使用するのが望ましいかと思います。

まず、左の「シナリオ」を選び、「新規シナリオ」ボタンを押します。

![シナリオ_-_Autify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/975b12d0-6b65-fa1f-26a0-450bf245b6d2.png)

名前を変更し、開始URLを入力してから「レコーディングを開始」のボタンを押します。
![テスト_-_Autify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/d90347d0-2389-6cd5-62f3-96b4994c2674.png)

右下に操作パネルが出てくれば記録スタートです。
![Autify_オーティファイ___AIを用いたQA自動化プラットフォーム.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/4c8aea44-9ea1-140e-625b-00ea5ff6ae34.png)

操作が終わったら、操作パネルの「保存」を押します。
すると・・・・・

このように操作が記録されました。
![テスト_-_Autify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/7bc0f968-c046-2e0b-de21-083f33c6281d.png)

なお、ここの画像アイコンを押すと、操作した時の画面キャプチャが確認できます。
![テスト_-_Autify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/5b05279f-f628-5901-8a2b-c75afc8b6220.png)

![797980__1280×913_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/40b6beee-fc3b-c7fa-ab06-c6bdc8f922b1.png)

ゴミ箱アイコンを押すと操作を消せるので、操作ミスをした時とかは最初からやり直しではなく、操作し直して後から消すのが簡単です。

他にも、操作の途中に挿入できたり、
![テスト_-_Autify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/4da3c72f-de40-8c0a-17bb-7b8b9d137288.png)

入力値を変更できたり
![テスト_-_Autify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/f06498c9-81ed-386b-7f9c-b813eadb1d35.png)

と、誤操作しても後から変更できるのは安心ポイントですね。

なお、ブラウザ操作で対応していない動きは、[こちらのページ](https://docs.autify.com/ja/about-recorder)にまとまっています。reCAPTCHAとかは無理みたいですね（そりゃそうだ）

## ステップグループを作ってみよう
先ほどのシナリオ作成と同じような操作で、ステップグループというものが作成できます。
これは、ログイン操作みたいな「最初に必ず必要な操作」を登録しておくと、シナリオ作成時の最初に挿入できるというものです。

先ほどのシナリオ作成のページを再度見てみましょう。
![ステップグループテスト_-_Autify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/0c70c50a-feb1-fa40-4a6f-51edd9a9c7d0.png)

「新規作成」の右側に「ステップグループを使用」というのがあり、それを押すとステップグループが選択できます。
この時に「ステップグループの最後まで自動で進める」にチェックを入れておくと、その続きから記録できるので超便利です。

ただ、今のところ、ステップグループは最初のみで、途中に挿入とか最後に追加とかができないようです。
残念ですが、今後の課題としては[対応も検討している](https://intercom.help/autify/ja/articles/3826029)ようなので、期待ですね

## テストプラン
作成したシナリオをテストするにはテストプランを作成します。
![テスト_-_Autify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/4da2f759-4d36-8290-3d35-4d65cf3880cb.png)

動作環境（ChromeとかiPhoneとかAndroidとか選べます）と必要ならば定期実行（毎週の曜日とか時間が選べます）の設定をして、シナリオを選択します（複数選択可能です）。
あとは結果が出るのを待つだけ。しかも定期実行であれば勝手にテストしてくれます。結果も一覧で見れるのでわかりやすいですね。
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f35363836362f66376137346532652d333834382d613361312d383566642d3436323466623162316335352e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/b232edc3-d685-26dc-be40-5bb99dd9ec88.png)


## kintoneで試してみた
ここからが本番です（笑
kintoneでありがちな、UIというかアプリというか、いろいろな変更があった場合にテストが追随してくれるかを試します。

AIはどこまでいけるのか！
なお、ガチなので、結果がどうなるかは私にもわかりませんw

### スペースの位置が変わったらどうなる？
kintoneだとよくある話ですが、スペースを修正すると表示順が変わります。
無関係のスペースを変更された場合でも目的のスペースをクリックする位置がズレるのですが自動で追随しました。


![テスト結果_-_Autify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/1021150c-1d38-e001-cd44-55c69218d553.png)

「要確認」のところを見てみると。。。
![部屋割りアプリ表示_-_Autify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/85bf9785-e82e-9225-17fa-afa1eeaf9e49.png)

このように、「今回の結果」の方にはスペースが上に来ていて位置がズレてますね。
![アプリ表示_-_Autify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/9afbbfae-6d3b-e2d5-274c-3f20ad0ef5c5.png)

なお、この画面で「成功とする」を選んだ場合、情報が更新されて次回からは「要確認」は出ません。
![部屋割りアプリ表示_-_Autify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/dc9125e6-18df-dd27-27cf-0733d50f1564.png)
これはありがたい！

### アプリ名が変わったらどうなる？
アプリ名を変えても大丈夫でした。
![798007__1280×913_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/dcafc2b7-2d95-f6a4-b1bd-5d83d80e5283.png)→![test_result_screenshots__1280×908_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/07315992-29e2-f54e-f38d-10f02c5f2224.png)

さらには、テストには使わないアプリを消して位置がズレた場合でも、「要確認」になりましたが成功しました。
![アプリ選択_-_Autify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/35c41033-07cb-6e75-88e7-a42348c558a1.png)

### フィールドの位置が変わったらどうなる？
入力するフィールドをスクロールしないと見えないところに移動してみました。
<img width="751" alt="配属・異動管理_-_新しいレコード.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/377cc039-d6d9-56ee-2227-ed5231ad41aa.png">

これも、正しく「要確認」にはなって成功しました。
![フィールド位置変更_-_Autify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/594d6145-673a-575d-25db-a1f3cf2c080c.png)


### フィールド名やフィールドコードが変わったらどうなる？
入力していたルックアップのフィールド名とフィールドコードを変更してみました。
<img width="273" alt="アプリの設定.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/9a3776f2-3ac2-ae9a-9167-2b8e52b9c502.png">

こちらも、正しく「要確認」になって成功しました。
![フィールド位置変更_-_Autify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/ec055901-c462-6c29-115d-4735f5d08386.png)


### 一覧が入れ替わったり名称が変わったらどうなる？
一覧が入れ替わっただけだと「要確認」にはなりますが、正しく選択されていました。

ただ、一覧名を変えて更に位置も変えた場合は、間違った場所を選択しました。
![一覧選択_-_Autify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/e470c312-8377-0a78-1b38-c62c95a92071.png)→![一覧選択_-_Autify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/ab001a4b-d26c-c259-533f-1ced5a8e2e64.png)


### 一覧にフィールドが追加されたらどうなる？
一覧にフィールドを足したり位置を変えたりしましたが、これも「要確認」で成功しました。
![一覧にフィールド追加_-_Autify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/e633a662-ecb7-cda1-96de-869473f12dfc.png)


### ルックアップで取得した値などの確認はできる？
こちらにやり方が書いてありました。
[JavaScriptでのアサーションは行なえますか？](https://intercom.help/autify/ja/articles/3731647)

雑に値を取って比較して成功です。
![ルックアップ値確認_-_Autify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/029ce093-f31e-9d23-ea13-e86631131acb.png)

その他にもいろいろなチェックが可能みたいで、スニペットも用意されてました。基本的にJavaScriptで可能な処理であればなんでも出来そうな気もします。


### スマホの場合はテストできる？
kintoneの場合、スマートフォンでの表示がPC版と同じようになってきているのですが、完全に一致しているわけではないのでテストもPC版とは別に必要です。
Autifyの場合、シナリオ作成時にはスマートフォンの画面サイズを指定できないのですが、記録開始した後にサイズを変更することでスマートフォンでの記録が可能です。

そして、テスト時には、動作環境でスマートフォンを選んで実行します。
![新規実行環境_-_Autify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/4bacef10-fd0d-7309-4956-87a3de5d062f.png)

成功するとこんな感じ。
![スマホテスト_-_iPhone_X_-_Autify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/20f82ff1-f816-f4f2-e0f6-838c84178cec.png)

ヤバイな。。。。超便利じゃね？


## slack連携
テストの結果をslackに通知できます。設定方法は[こちらのページ](https://docs.autify.com/ja/integrate-with-slack)を参照してください。
定期実行の結果を通知するということができるので、エラー時には確認が簡単になりますね。
<img width="457" alt="Slack_____autify___ohks8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56866/7e31d642-9c49-f456-96f3-05551476ccef.png">

ヤバイな、設定超簡単だな。


## まとめ
いわゆるテストに関することが、画面見ながらマウス操作で出来ちゃうという簡単さです。
テストの回数とかテスト動作環境によって利用プランが決まるようなので、詳細はサポートに問い合わせましょう。

kintoneでの変更をイメージしてテストしてみましたが、大体大丈夫な感じですね。
面倒そうな「特定の値の時に背景色を変えるカスタマイズが正しく動作してるか」とかも、JSステップで対応可能なのでほぼ大丈夫でしょう。

kintoneの場合はユーザーがアプリを変更してカスタマイズが動かなくなるとかもあるので、
納品後に保守してるとかの場合は利用料分の価値はあるかも。
流石に納品先が１件だけだと無理だけど、１納品先で5アプリくらいを毎週テストで納品先が5件くらいあるならなんとかなりそうな予感。。。

いやまぁ、個人的に保守してるのはそんなにないんですけどね（^^;;;