Exécutez des flux de travail AskUI avec Pipedream pour les tests de fumée

Dylan Pierce a partagé une approche intéressante des tests de fumée lors de notre rencontre : remplissez un formulaire de contact à l'aide de la vision par ordinateur et des grands modèles linguistiques. La partie vision était particulièrement impressionnante, mais il lui manquait une fonctionnalité spécifique : l'interaction avec la forme. Comment pouvez-vous être sûr que votre formulaire fonctionne si vous n'essayez pas de le remplir et de l'envoyer ?

C'est là que j'ai pensé qu'une intégration d'AskUI dans le workflow Pipedream pourrait être utile. AskUI utilise des sélecteurs visuels au lieu de sélecteurs de code et peut interagir comme un humain avec un formulaire comme celui-là. Faites-nous un vrai test de fumée !

Dans ce blog, je décrirai comment j'ai intégré AskUI dans un flux de travail Pipedream, afin que nous bénéficiions de la sélection visuelle et de l'interaction utilisateur.

Conditions préalables

• AskUI Controller installé et configuré sur un système accessible à distance comme Gitpod ou une machine cloud. Vous pouvez utiliser notre dépôt d'essai ou installer sur votre propre système (Windows, Linux, macOS).
• Compte Pipedream et un workflow. Suivez leur introduction

Qu'allons-nous construire ? Aka le cas d'utilisation

Dylan Pierce a montré un cas d'utilisation génial avec Pipedream et Puppeteer, où il a implémenté un test de fumée avec l'aide de l'IA sans écrire lui-même de sélecteurs. Je recommande fortement de regarder l'enregistrement : https://youtu.be/o6hej9Ip2vs

Notre cas d'utilisation : test de fumée avec des sélecteurs visuels

Le cas d'utilisation de Dylan impliquait l'interrogation d'un modèle multimodal/grand langage pour implémenter le test de fumée. Nous allons modifier cela un peu pour utiliser les sélecteurs visuels d'AskUI, qui ne s'appuient pas sur la technologie d'interface utilisateur spécifique mais identifient les éléments grâce à leur apparence avec un modèle de vision IA.

Voici les étapes que nous mettrons en œuvre :

• Déclenchez le test de fumée une fois par jour
• Effectuez le test de fumée avec AskUI sur un système distant
• Envoyer un e-mail si le test de fumée a réussi ou non

1. Ajouter un déclencheur

La première chose que Pipedream souhaite que nous ajoutions est un déclencheur. Nous ajoutons un déclencheur Planification qui exécutera notre workflow tous les jours à 9h00.

2. Préparez une action de code personnalisée

AskUI n'a pas d'action dans Pipedream. Nous allons donc utiliser le package de nœuds AskUI et exécuter une action de code personnalisée. Pour cela nous avons une action _Code. Dans cette action, nous remplirons l'authentification simple à partir de https://authenticationtest.com/simpleFormAuth/. Si nous voyons la page de réussite, nous l'enverrons

Nous devons suivre les étapes suivantes :

• Ajoutez une propriété uiControllerUrl, pour ne pas avoir à la coder en dur dans le code
• Stocker nos informations d'identification dans des variables d'environnement
• Importer UiControlClient à partir du package de nœud asku
• Configurez AskUI UiControlClient pour utiliser les informations d'identification et le uiControllerUrl

La première chose que nous souhaitons ajouter à notre code personnalisé est le uiControllerUrl. Cliquez sur Actualiser les champs pour que l'onglet Configurer apparaisse au début de l'action. Voici l'extrait de code correspondant.

...
export default defineComponent({

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

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

Ensuite, rendez-vous sur les variables d'environnement et ajoutez-y votre workspaceId et votre accessToken. Vous les avez obtenus en suivant les instructions préalables ci-dessus. Vous pouvez maintenant configurer la connexion au contrôleur AskUI via le UiControlClient comme ceci. Remarquez à quel point il est facile d'utiliser des packages de nœuds arbitraires dans Pipedream ? J'avais seulement besoin d'importer UiControlClient et ça a fonctionné ?.

Remarque : le code suivant contient également le démontage.

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. Écrivez le flux de travail AskUI

Lorsque vous regardez notre exemple de formulaire que nous souhaitons remplir, vous remarquez que nous devons faire les choses suivantes :

• Écrivez simpleForm@authenticationtest.com dans le champ de texte Adresse e-mail
• Écrivez pa$$w0rd dans le champ de texte suivant
• Cliquez sur le bouton Connexion
• Valider le succès

Moins nous invoquons d'inférences, plus le flux de travail AskUI s'exécutera rapidement. Tout ce qui incite AskUI à rechercher un élément à l'écran invoque une inférence. Essayons donc d'invoquer l'inférence une seule fois en trouvant le premier champ de texte pour l'adresse e-mail. Ensuite, nous utiliserons des touches pour naviguer dans le formulaire. Voici le code pour y parvenir :

// 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. Envoyer un e-mail

Faire un test de fumée sans rendre compte de son état de réussite ne nous aiderait pas. Nous allons donc simplement nous envoyer un e-mail avec l'action Envoyez-vous un 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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!