Pipedream を使用して AskUI ワークフローを実行してスモークテストを行う-jsチュートリアル-php.cn

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

PHPz

リリース： 2024-08-08 07:23:32

オリジナル

1223 人が閲覧しました

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 時にワークフローを実行する スケジュール トリガーを追加します。

Run AskUI Workflows with Pipedream for Smoke Testing

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.

Run AskUI Workflows with Pipedream for Smoke Testing

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 サイトの他の関連記事を参照してください。