使用 Pipedream 執行 AskUI 工作流程進行冒煙測試

Dylan Pierce 在我們的聚會上分享了一種有趣的煙霧測試方法：在電腦視覺和大型語言模型的幫助下填寫聯絡表單。尤其是視覺部分令人印象深刻，但它缺乏一個具體功能：與形式的互動。如果您不嘗試填寫並發送表格，如何確定您的表格有效？

這是我認為將 AskUI 整合到 Pipedream 工作流程中可能有用的地方。 AskUI 使用視覺選擇器而不是程式碼選擇器，並且可以像人類一樣與類似的表單進行互動。給我們一個真正的煙霧測試！

在這篇部落格中，我將描述如何將 AskUI 整合到 Pipedream 工作流程中，以便我們獲得視覺選擇和使用者互動的好處。

先決條件

• AskUI 控制器在 Gitpod 或雲端電腦等遠端可存取系統上安裝和設定。您可以使用我們的試用儲存庫或在您自己的系統（Windows、Linux、macOS）上安裝。
• Pipedream 帳戶和工作流程。關注他們的介紹

我們將建造什麼？又稱用例

Dylan Pierce 使用 Pipedream 和 Puppeteer 展示了一個很棒的用例，他在 AI 的幫助下實現了冒煙測試，而無需自己編寫任何選擇器。強烈建議觀看錄音：https://youtu.be/o6hej9Ip2vs

我們的用例：使用視覺選擇器進行煙霧測試

Dylan 使用案例涉及查詢大型語言/多模式模型來實現冒煙測試。我們將對此進行一些修改，以使用 AskUI 中的視覺選擇器，它不依賴特定的 UI 技術，而是透過 AI 視覺模型透過外觀來識別元素。

以下是我們將要實施的步驟：

• 每天觸發一次煙霧測試
• 在遠端系統上使用 AskUI 執行冒煙測試
• 冒煙測試是否成功發送郵件

1. 新增觸發器

Pipedream 希望我們添加的第一件事是觸發器。我們新增了一個 Schedule 觸發器，它將在每天上午 9:00 運行我們的工作流程。

2. 準備自訂程式碼操作

AskUI 在 Pipedream 中沒有操作。因此，我們將利用 AskUI 節點包並執行自訂程式碼操作。為此，我們執行 _Code 操作。在此操作中，我們將從 https://authenticationtest.com/simpleFormAuth/ 填寫簡單驗證。如果我們看到成功頁面，我們將發送

我們必須執行以下步驟：

• 新增屬性uiControllerUrl，這樣我們就不必將其硬編碼到程式碼中
• 將我們的憑證儲存在環境變數中
• 從asgui節點包導入UiControlClient
• 設定 AskUI UiControlClient 以使用憑證和 uiControllerUrl

我們要加入自訂程式碼中的第一件事是 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 在螢幕上搜尋元素的內容都會呼叫推理。因此，讓我們嘗試透過查找電子郵件地址的第一個文字欄位來僅呼叫一次推理。然後我們將使用按鍵來導航表單。這是實現此目的的程式碼：

// 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中文網其他相關文章！