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.
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
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 :
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.
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 :
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; }, })
Lorsque vous regardez notre exemple de formulaire que nous souhaitons remplir, vous remarquez que nous devons faire les choses suivantes :
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;
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}}.
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.
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!