Smoke 테스트를 위해 Pipedream을 사용하여 AskUI 워크플로 실행

Dylan Pierce는 모임에서 연기 테스트에 대한 흥미로운 접근 방식을 공유했습니다. 컴퓨터 비전 및 대형 언어 모델의 도움을 받아 문의 양식을 작성하세요. 특히 비전 부분이 인상적이었지만 한 가지 구체적인 특징이 부족했습니다. 바로 형태와의 상호작용이었습니다. 양식을 작성하여 보내지 않고 양식이 제대로 작동하는지 어떻게 확신할 수 있습니까?

여기서 AskUI를 Pipedream 워크플로에 통합하는 것이 유용할 수 있다고 생각했습니다. AskUI는 코드 선택기 대신 시각적 선택기를 사용하며 그러한 양식을 사용하여 사람처럼 상호 작용할 수 있습니다. 진짜 연기 테스트를 드려요!

이 블로그에서는 AskUI를 Pipedream 워크플로에 통합하여 시각적 선택과 사용자 상호 작용의 이점을 얻는 방법을 설명하겠습니다.

전제 조건

• AskUI 컨트롤러는 Gitpod 또는 클라우드 머신과 같은 원격 액세스 시스템에 설치 및 구성됩니다. Try-Out-Repository를 사용하거나 자체 시스템(Windows, Linux, macOS)에 설치할 수 있습니다.
• Pipedream 계정 및 워크플로. 소개를 따르세요

우리는 무엇을 만들 것인가? 일명 유스 케이스

Dylan Pierce는 Pipedream 및 Puppeteer를 사용하여 선택기를 직접 작성하지 않고 AI의 도움으로 연기 테스트를 구현한 멋진 사용 사례를 보여주었습니다. 녹화 시청을 적극 권장합니다: https://youtu.be/o6hej9Ip2vs

사용 사례: 시각적 선택기를 사용한 연기 테스트

Dylan의 사용 사례에는 연기 테스트를 구현하기 위해 대규모 언어/다중 모드 모델을 쿼리하는 것이 포함되었습니다. 특정 UI 기술에 의존하지 않고 AI 비전 모델을 사용하여 외관을 통해 요소를 식별하는 AskUI의 시각적 선택기를 사용하도록 이를 약간 수정하겠습니다.

우리가 구현할 단계는 다음과 같습니다.

• 하루에 한 번씩 연기 테스트를 실행하세요
• 원격 시스템에서 AskUI를 사용하여 연기 테스트 수행
• 스모크 테스트 성공 여부를 이메일로 보내주세요

1. 트리거 추가

Pipedream이 가장 먼저 추가하길 원하는 것은 트리거입니다. 매일 오전 9시에 워크플로를 실행하는 일정 트리거를 추가합니다.

2. 사용자 정의 코드 작업 준비

AskUI는 Pipedream에서 작업을 수행하지 않습니다. 따라서 AskUI 노드 패키지를 사용하고 사용자 정의 코드 작업을 실행하겠습니다. 이를 위해 우리는 _코드 작업을 수행합니다. 이 작업에서는 https://authenticationtest.com/simpleFormAuth/에서 간단한 인증을 작성합니다. 성공 페이지를 보면

을 보내드립니다.

다음 단계를 수행해야 합니다.

• 속성 uiControllerUrl을 추가하면 이를 코드에 하드코딩할 필요가 없습니다
• 환경 변수에 자격 증명을 저장합니다.
• asku 노드 패키지에서 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가 화면의 요소를 검색하도록 요청하는 모든 항목은 추론을 호출합니다. 따라서 이메일 주소에 대한 첫 번째 텍스트 필드를 찾아 한 번만 추론을 실행해 보겠습니다. 그런 다음 키 누르기를 사용하여 양식을 탐색합니다. 이를 달성하기 위한 코드는 다음과 같습니다.

// 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.

위 내용은 Smoke 테스트를 위해 Pipedream을 사용하여 AskUI 워크플로 실행의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!