🛠️

Autify APIとRetoolで自分用の「今すぐ実行」ボタンを作る

2022/12/06に公開

retool

Autify

tech

この記事はAutifyアドベントカレンダー2022の6日目の記事です。

こんにちは！AutifyでカスタマーサポートサポートエンジニアをしているHirokiです。
今回は業務で使おうとしたものの結局断念し放置していたRetoolというツールを使って、Autifyに関連したちょっとだけ便利なツールを作成してみようと思います。

Autifyにはシナリオをサクッと実行できる「今すぐ実行」というボタンが存在します。

imasugu-jikkou

「今すぐ実行」は Chrome/Linux と iPhoneX(Emulator) に対応しており、その他の環境で実行したい場合はテストプランを作成する必要があります。
現在はテストプランを作成せずにシナリオを実行できる便利なAPIやCLIが用意されているのですが、今回はこのAPIとRetoolを使って、Chrome/Linux と iPhoneX(Emulator) 以外の環境の「今すぐ実行」ボタンを作ってみたいと思います。

Retoolとは

RetoolのWEBサイトに行ってみると、「Build internal tools, remarkably fast」とあります。主に社内ツールの構築を得意としたローコードツールのようです。実際に使ってみたところ、UIの構築をドラッグアンドドロップで行うことができ、非常に直感的に画面を作成できました。
また、RetoolはデータベースやAPIなどのさまざまな外部システムとの連携にも対応しています。そのため、今回私が作成しようとしている「今すぐ実行」ボタンのように、ボタンをクリックしたらAPIを実行するといった画面を作成することも可能です。

早速実装してみよう

Retoolの説明はこれくらいにしておいて、早速実装してみましょう。ちなみにFreeプランで問題なく実装が可能でした。

Appを作成する

Retoolにログインが完了したら、まずは「App」を作成します。

create_new_app

するとAppの編集画面に遷移します。

app_edit

右側には画面を構成するための入力欄やボタンの部品がありますね。この部品を真ん中の「Main」欄にドラッグアンドドロップし、画面を組み立てていきます。

下側にはResourceといってデータベースやAPIなどの外部システムとの設定をする箇所があります。ここでAutify APIを実行するための設定をします。

Autify API用のResourceを作成する

画面を作成する前にAutify APIを実行するためのResourceを作成しましょう。
画面下部にあるResourceのプルダウンを開き、「Create a new resource」をクリックします。

create_new_resource

「Select a resourece type」が表示されるので、REST APIを選択します。
以下の画面が表示されるので、Base URLにproject idを含んだAPIのURLとHeadersにAPIのパーソナルアクセストークンを設定します(パーソナルアクセストークンは個人設定画面より作成してください)。この記事では execute_scenarios APIしか使用しませんが、今後他のAPIをRetoolで使用する場合はこのResourceを流用できます。

configure_rest_api

設定後「Create resource」が成功すると、App編集画面の下部で、作成したAutify APIのResourceが選択できるようになっています。

created_resource

画面を作成する

APIのResourceが作成できたので、次はいよいよ画面を作っていきましょう！
ここでは「Edge / Windows Server」環境で実行できるボタンを作っていこうと思います。
画面に必要な部品として以下のものがあります。

シナリオIDの入力欄
テスト実行時の名前
「今すぐ実行」ボタン
実行したテスト結果のURLの表示欄

1はシナリオIDなので、「Number Input」Componentを使います。2は名前なので「Text Input」、3は「Button」、4は「Text」を使います。とりあえずドラッグアンドドロップでざっと組み立てると以下のようになります。

mock

ラベルとテキストを編集する

ラベルとボタンのテキストがデフォルトのままで寂しいので編集しましょう。ComponentをクリックするとInspectが開くので編集します。

movkv2

まだ何も動きませんが、ちょっとだけ様になりましたね😎

バリデーション

Retoolではバリデーションが可能です。バリデーションをしなくても動くものは作れますが、せっかくなので追加しましょう。
シナリオIDを「Number Input」にしましたが、マイナスの値はあり得ないので、一応minimumを0にしておきます。また、シナリオを実行するにはシナリオIDとテスト実行名が必須なので、requiredにしておきましょう。

input_validation

さらに言えば、この2つが入力されるまでボタンは非活性にしておきたいところです。RetoolではDisabledの条件を設定することが可能です。

button_validation

numberInput1.valueというのはシナリオID、textInput1.valueというのはテスト実行名に設定された値を指しています(numberInput1やtextInput1はデフォルトの値なので任意の値に変更可能です)。
シナリオIDはデフォルトが0なので0以外が設定されていればOK、テスト実行名は何かしらが設定されていればOKというざっくりなバリデーションを設定しました。

ここでもう一度ボタンを見ると、非活性になっていることがわかります。

disable_button

これでシナリオIDとテスト実行名が正しく入力されない限りはボタンをクリックすることができなくなりました👍

ボタンにResourceを紐づける

次にボタンにResourceを紐づけましょう。現在ボタンはクリックしても何も起きない状態です。そこでボタンに作成したAPI Resourceを紐づけて、クリックしたらAPIが呼び出されるようにしましょう。
ボタンComponentをクリックしInspectを開き、Event Handlersの隣の「+Add」をクリックします。するとEdit click handlerが開きQueryが選択状態になります。これでAutify APIのResourceが選択されている状態になり、クリックをした時にAutify APIが呼び出されるようになります。

event_handlers

ちなみにOnly run whenという項目があり、この設定でもシナリオIDとテスト実行名が設定されている時だけ実行するようなバリデーションをかけることが可能ですが、ここでは割愛します。

Resourceにbodyを設定する

あと少しです！
これでボタンをクリックしたらAPIを呼び出す準備が整いましたが、このままだとAPIのエンドポイントが不十分です。また、設定したシナリオIDとテスト実行名がAPI実行時に使われていない状態です。再び、ページ下部のResourceを編集しましょう。

query_settings

編集点は以下です。

Action typeをPOSTにする
Autify APIのResourceでBase URLは設定されている状態なので、execute_scenariosを追加する
Headersに'Content-Type: application/json'を設定する
BodyをRawにし、以下を設定する

{
  "name": {{ textInput1.value }},
  "execution_type": "sequential",
  "capabilities": [
    {
      "os": "Windows Server",
      "os_version": "2019",
      "browser": "Edge",
      "browser_version": "107.0",
      "device": null,
      "device_type": null
    }
  ],
  "scenarios": [
    {
      "id": {{ numberInput1.value }}
    }
  ]
}

nameにはテスト実行名に入力された値、scenariosのidにはシナリオIDに入力された値を設定します。直列/並列(execution_type)と実行環境(capabilities)は今回は直列と Edge/Windows Server を設定します。編集が終わったら「保存」しましょう。

「今すぐ実行 Edge/Windows Server」ボタンを押してみよう！！！

これで準備は整いました！
早速「今すぐ実行 Edge/Windows Server」ボタンを押してみましょう！

エラーが発生せず、Responseにresult_idが返ってきていますね。

api_response

これでボタンクリックでテスト実行ができるようになりました。

テスト結果URLを作成する

テスト実行をすることはできましたが、テスト結果を確認するにはAutifyに戻ってテスト結果を開く必要があります。これは手間なので、Responseで返ってきたresult_idを元にテスト結果URLを生成・画面上に表示し、クリックで画面遷移できるようにしましょう！
実行したテスト結果のURLの表示欄ように作成しておいた「Text」ComponentをクリックしてInspectを開きます。

text_inspect