使用 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中文网其他相关文章！