Pipedream を使用して AskUI ワークフローを実行してスモーク テストを行う

Dylan Pierce は、ミートアップでスモーク テストへの興味深いアプローチを共有しました。それは、コンピューター ビジョンと大規模言語モデルを利用して問い合わせフォームに記入するというものでした。特にビジョンの部分は印象的でしたが、フォームとのインタラクションという 1 つの特徴が欠けていました。フォームに記入して送信しないで、フォームが機能することをどうやって確認できますか?

ここで、AskUI を Pipedream ワークフローに統合すると便利だと思いました。 AskUI はコード セレクターの代わりにビジュアル セレクターを使用し、そのようなフォームを使用して人間のように対話できます。 本物の煙テストをしてみましょう!

このブログでは、視覚的な選択とユーザー インタラクションの利点を得るために、AskUI を Pipedream ワークフローにどのように統合したかについて説明します。

前提条件

• AskUI コントローラーは、Gitpod やクラウド マシンなどのリモート アクセス可能なシステムにインストールされ、構成されています。 Try-Out-Repository を使用することも、独自のシステム (Windows、Linux、macOS) にインストールすることもできます。
• Pipedream アカウントとワークフロー。彼らの紹介に従ってください

何を構築しますか?別名ユースケース

Dylan Pierce は、Pipedream と Puppeteer を使用した素晴らしい使用例を示しました。そこでは、セレクターを自分で作成することなく、AI の助けを借りてスモーク テストを実装しました。録画を見ることを強くお勧めします: https://youtu.be/o6hej9Ip2vs

私たちのユースケース: ビジュアルセレクターを使用したスモークテスト

Dylans のユースケースには、大規模言語/マルチモーダル モデルをクエリしてスモーク テストを実装することが含まれていました。これを少し変更して、AskUI のビジュアル セレクターを使用します。このセレクターは、特定の UI テクノロジーに依存せず、AI ビジョン モデルによる外観を通じて要素を識別します。

実装する手順は次のとおりです:

• 1 日に 1 回スモークテストをトリガーします
• リモート システム上で AskUI を使用してスモーク テストを実行します
• 煙テストが成功したかどうかをメールで送信します

1. トリガーを追加する

Pipedream が最初に追加してほしいのはトリガーです。毎日午前 9 時にワークフローを実行する スケジュール トリガーを追加します。

2. カスタムコードアクションを準備する

AskUI には Pipedream のアクションがありません。そこで、AskUI ノード パッケージを利用して、カスタム コード アクションを実行します。このために、_コード アクションを実行します。このアクションでは、https://authenticationtest.com/simpleFormAuth/ から簡単な認証を入力します。成功ページが表示されたら、

を送信します。

次の手順を実行する必要があります:

• プロパティ uiControllerUrl を追加します。これにより、コードにハードコーディングする必要がなくなります
• 認証情報を環境変数に保存する
• askui ノード パッケージから UiControlClient をインポートします
• 資格情報と uiControllerUrl を使用するように AskUI UiControlClient
を構成します。

カスタム コードに最初に追加するのは、uiControllerUrl です。 フィールドを更新をクリックすると、アクションの開始時に設定タブが表示されます。関連するコード スニペットは次のとおりです。

...
export default defineComponent({

  props: {
    uiControllerUrl: { type: "string" }
  },

  async run({ steps, $ }) {
...

次に、環境変数に移動し、workspaceId と accessToken をそこに追加します。これらは、上記の前提条件の手順に従って取得したものです。これで、次のように UiControlClient 経由で AskUI コントローラーへの接続をセットアップできるようになりました。 Pipedream で任意のノード パッケージを使用することがいかに簡単であるかに注目してください。 UiControlClient をインポートするだけで済みましたが、うまくいきました ?.

注: 次のコードには分解も含まれています。

import { UiControlClient } from 'askui';

...
  async run({ steps, $ }) {
    const result = {};

    const aui = await UiControlClient.build({
      credentials: {
        workspaceId: process.env.workspaceId,
        token: process.env.token,
      },
      uiControllerUrl: this.uiControllerUrl
    });
    await aui.connect();

    // AskUI Workflow will be added here

    aui.disconnect();

    return result;
  },
})

3. AskUI ワークフローを作成する

記入したいフォームの例を見ると、次のことを行う必要があることがわかります:

• テキストフィールドに simpleForm@authenticationtest.com と入力します 電子メール アドレス
• 次のテキストフィールドに pa$$w0rd を書き込みます
• 「ログイン」ボタンをクリックします
• 成功を検証する

呼び出す推論が少なくなるほど、AskUI ワークフローの実行が速くなります。 AskUI に画面上の要素の検索を促すものはすべて、推論を呼び出します。そこで、電子メール アドレスの最初のテキストフィールドを見つけて、推論を 1 回だけ呼び出してみましょう。次に、キーを押してフォーム内を移動します。これを実現するコードは次のとおりです:

// This line only works with the Gitpod setup shown in the next section
// Select the browser url textfield for your use case with the appropriate instruction!
await aui.typeIn('https://authenticationtest.com/simpleFormAuth/')
         .textfield()
         .contains()
         .text()
         .containsText('docs.askui')
         .exec();
await aui.pressKey('enter').exec();

// Fill out the form
await aui.typeIn('simpleForm@authenticationtest.com')
         .textfield()
         .contains()
         .text('E-Mail Address')
         .exec();
await aui.pressKey('tab').exec();
await aui.type('pa$$w0rd').exec();
await aui.pressKey('tab').exec();
await aui.pressKey('enter').exec();

// Check if the the login succeeded: Login Success is shown on the page
// Pass result to next step
try {
  await aui.expect().text('Login Success').exists().exec();
  result.success = "Smoke Test successful!";
} catch(error) {
  result.success = "Smoke Test failed!";
}

aui.disconnect();

return result;

4.メールを送信する

成功状態について報告せずにスモークテストを実行しても、役に立ちません。したがって、自分にメールを送信 アクションを含むメールを送信するだけです。

As subject we choose Smoke Test State and for the text we reference our success variable we returned in our action above with {{steps.code.$return_value.success}}.

Gitpod As Remote Machine

If you do not have a remote machine ready-to-go you can use a service like Gitpod. We have a prepared Try-Out-Repository which comes with AskUI already setup and a VNC to observe the AskUI workflow. Start the repository in Gitpod over the Open in Gitpod-button and let it finish the predefined AskUI workflow. When it reached the AskUI Docs (docs.askui.com) maximize the browser window in the Simple Browser tab.

Switch to the TERMINAL tab and start the AskUI-Controller with the following command:

./node_modules/askui/dist/release/latest/linux/askui-ui-controller.AppImage

Also make sure that you expose the port to the AskUI Controller (open lock icon). Head to the PORTS tab and make the port 6769 public. Then copy the URL and add it as the property uiControllerUrl in the Pipedream action.

Conclusion

Building a smoke test with Pipedream and AskUI was a practical use case to see how both tools integrate. The simplicity of Pipedream and its ability to integrate JavaScript code and Node packages was helpful. With that AskUI could be setup seamlessly inside an action and connected to an external AskUI Controller.

以上がPipedream を使用して AskUI ワークフローを実行してスモーク テストを行うの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。