Führen Sie AskUI-Workflows mit Pipedream für Rauchtests aus

Dylan Pierce hat bei unserem Treffen einen interessanten Ansatz für Rauchtests vorgestellt: Füllen Sie ein Kontaktformular mit Hilfe von Computer Vision und Large Language Models aus. Besonders der Vision-Teil war beeindruckend, aber es fehlte eine Besonderheit: die Interaktion mit der Form. Wie können Sie sicher sein, dass Ihr Formular funktioniert, wenn Sie nicht versuchen, es auszufüllen und abzusenden?

Hier dachte ich, dass eine AskUI-Integration in den Pipedream-Workflow nützlich sein könnte. AskUI verwendet visuelle Selektoren anstelle von Code-Selektoren und kann mit einem solchen Formular wie ein Mensch interagieren. Geben Sie uns einen echten Rauchtest!

In diesem Blog beschreibe ich, wie ich AskUI in einen Pipedream-Workflow integriert habe, damit wir von der visuellen Auswahl und Benutzerinteraktion profitieren.

Voraussetzungen

• AskUI Controller installiert und konfiguriert auf einem remote zugänglichen System wie Gitpod oder einer Cloud-Maschine. Sie können unser Try-Out-Repository nutzen oder auf Ihrem eigenen System (Windows, Linux, macOS) installieren.
• Pipedream-Konto und ein Workflow. Folgen Sie ihrer Einführung

Was werden wir bauen? Auch bekannt als der Anwendungsfall

Dylan Pierce zeigte einen tollen Anwendungsfall mit Pipedream und Puppeteer, bei dem er mithilfe von KI einen Rauchtest implementierte, ohne selbst Selektoren zu schreiben. Ich empfehle dringend, sich die Aufzeichnung anzusehen: https://youtu.be/o6hej9Ip2vs

Unser Anwendungsfall: Rauchtest mit visuellen Selektoren

Dylans Anwendungsfall umfasste die Abfrage eines großen sprachlichen/multimodalen Modells zur Implementierung des Rauchtests. Wir werden dies ein wenig modifizieren, um die visuellen Selektoren von AskUI zu verwenden, die nicht auf der spezifischen UI-Technologie basieren, sondern Elemente durch ihr Aussehen mit einem KI-Vision-Modell identifizieren.

Hier sind die Schritte, die wir umsetzen werden:

• Lösen Sie den Rauchtest einmal täglich aus
• Führen Sie den Rauchtest mit AskUI auf einem Remote-System durch
• Senden Sie eine E-Mail, ob der Rauchtest erfolgreich war oder nicht

1. Fügen Sie einen Auslöser hinzu

Das erste, was Pipedream von uns erwartet, ist ein Auslöser. Wir fügen einen Zeitplan-Trigger hinzu, der unseren Workflow jeden Tag um 9:00 Uhr ausführt.

2. Bereiten Sie eine benutzerdefinierte Codeaktion vor

AskUI hat in Pipedream keine Aktion. Daher werden wir das AskUI-Knotenpaket verwenden und eine benutzerdefinierte Codeaktion ausführen. Dafür haben wir eine _Code Aktion durchgeführt. In dieser Aktion füllen wir die einfache Authentifizierung von https://authenticationtest.com/simpleFormAuth/ aus. Wenn wir die Erfolgsseite sehen, senden wir

Wir müssen die folgenden Schritte ausführen:

• Fügen Sie eine Eigenschaft uiControllerUrl hinzu, damit wir sie nicht fest in den Code codieren müssen
• Speichern Sie unsere Anmeldeinformationen in Umgebungsvariablen
• UiControlClient aus dem Askui-Knotenpaket importieren
• Konfigurieren Sie den AskUI UiControlClient, um die Anmeldeinformationen und die uiControllerUrl
zu verwenden

Das erste, was wir unserem benutzerdefinierten Code hinzufügen möchten, ist die uiControllerUrl. Klicken Sie auf Felder aktualisieren, damit die Registerkarte Konfigurieren zu Beginn der Aktion angezeigt wird. Hier ist der entsprechende Codeausschnitt.

...
export default defineComponent({

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

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

Gehen Sie dann zu den Umgebungsvariablen und fügen Sie dort Ihre workspaceId und accessToken hinzu. Sie haben diese erhalten, indem Sie die oben genannten Voraussetzungen befolgen. Sie können nun die Verbindung zum AskUI Controller über den UiControlClient wie folgt einrichten. Ist Ihnen aufgefallen, wie einfach es ist, beliebige Knotenpakete in Pipedream zu verwenden? Ich musste nur UiControlClient importieren und es hat einfach funktioniert?.

Hinweis: Der folgende Code enthält auch den Teardown.

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. Schreiben Sie den AskUI-Workflow

Wenn Sie sich unser Beispielformular ansehen, das wir ausfüllen möchten, bemerken Sie, dass wir folgende Dinge tun müssen:

• Schreiben Sie simpleForm@authenticationtest.com in das Textfeld E-Mail-Adresse
• Schreiben Sie pa$$w0rd in das nächste Textfeld
• Klicken Sie auf die Schaltfläche Anmelden
• Bestätigen Sie den Erfolg

Je weniger Rückschlüsse wir aufrufen, desto schneller wird der AskUI-Workflow ausgeführt. Alles, was AskUI dazu veranlasst, auf dem Bildschirm nach einem Element zu suchen, löst eine Schlussfolgerung aus. Versuchen wir also, die Inferenz nur einmal aufzurufen, indem wir das erste Textfeld für die E-Mail-Adresse suchen. Dann verwenden wir Tastendrücke, um durch das Formular zu navigieren. Dies ist der Code, um dies zu erreichen:

// 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. Senden Sie eine E-Mail

Einen Rauchtest durchzuführen, ohne über den Erfolgsstatus zu berichten, würde uns nicht helfen. Deshalb senden wir uns einfach eine E-Mail mit der Aktion Senden Sie sich selbst eine E-Mail.

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.

Das obige ist der detaillierte Inhalt vonFühren Sie AskUI-Workflows mit Pipedream für Rauchtests aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!