Jalankan Aliran Kerja AskUI dengan Pipedream untuk Ujian Asap

Dylan Pierce berkongsi pendekatan menarik untuk ujian asap pada pertemuan kami: Isi borang hubungan dengan bantuan Computer Vision & Large Language Models. Terutama bahagian penglihatan itu mengagumkan tetapi ia tidak mempunyai satu ciri khusus: Interaksi dengan bentuk. Bagaimanakah anda boleh memastikan borang anda berfungsi jika anda tidak cuba mengisi dan menghantarnya?

Di sinilah saya fikir integrasi AskUI ke dalam aliran kerja Pipedream boleh berguna. AskUI menggunakan pemilih visual dan bukannya pemilih kod dan boleh berinteraksi seperti manusia dengan bentuk seperti itu. Memberi kami ujian asap sebenar!

Dalam blog ini saya akan menerangkan cara saya menyepadukan AskUI ke dalam aliran kerja Pipedream, jadi kami mendapat manfaat pemilihan visual dan interaksi pengguna.

Prasyarat

• AskUI Controller dipasang dan dikonfigurasikan pada sistem boleh diakses jauh seperti Gitpod atau mesin awan. Anda boleh menggunakan Try-Out-Repository kami atau memasang pada sistem anda sendiri (Windows, Linux, macOS).
• Akaun Pipedream dan aliran kerja. Ikuti Pengenalan mereka

Apa yang Akan Kami Bina? Aka Kes Penggunaan

Dylan Pierce menunjukkan kes penggunaan yang hebat dengan Pipedream dan Puppeteer, di mana dia melaksanakan ujian asap dengan bantuan AI tanpa menulis sebarang pemilih sendiri. Saya sangat mengesyorkan untuk menonton rakaman: https://youtu.be/o6hej9Ip2vs

Kes Penggunaan Kami: Ujian Asap dengan Pemilih Visual

Kes penggunaan Dylan melibatkan pertanyaan Model Bahasa/Multimodal Besar untuk melaksanakan ujian asap. Kami akan mengubah suai ini sedikit untuk menggunakan pemilih visual daripada AskUI, yang tidak bergantung pada teknologi UI tertentu tetapi mengenal pasti elemen melalui penampilannya dengan model penglihatan AI.

Berikut ialah langkah yang akan kami laksanakan:

• Cetuskan ujian asap sekali sehari
• Lakukan ujian asap dengan AskUI pada sistem jauh
• Hantar e-mel jika ujian asap berjaya atau tidak

1. Tambah Pencetus

Perkara pertama Pipedream mahu kami tambahkan ialah pencetus. Kami menambahkan Jadual pencetus yang akan menjalankan Aliran Kerja kami setiap hari pada 9:00 PG.

2. Sediakan Tindakan Kod Tersuai

AskUI tidak mempunyai tindakan dalam Pipedream. Jadi kami akan menggunakan pakej nod AskUI dan menjalankan tindakan kod tersuai. Untuk ini kami _Kod tindakan. Dalam tindakan ini kami akan mengisi pengesahan mudah daripada https://authenticationtest.com/simpleFormAuth/. Jika kami melihat halaman kejayaan kami akan menghantar

Kita perlu melakukan langkah berikut:

• Tambahkan harta uiControllerUrl, jadi kita tidak perlu mengekodkannya ke dalam kod
• Simpan bukti kelayakan kami dalam pembolehubah persekitaran
• Import UiControlClient daripada pakej nod askui
• Konfigurasikan AskUI UiControlClient untuk menggunakan bukti kelayakan dan uiControllerUrl

Perkara pertama yang ingin kami tambahkan pada kod tersuai kami ialah uiControllerUrl. Klik Muat semula medan supaya tab Konfigurasikan dipaparkan pada permulaan tindakan. Berikut ialah coretan kod yang berkaitan.

...
export default defineComponent({

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

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

Kemudian pergi ke pembolehubah persekitaran dan tambahkan workspaceId dan accessToken anda di sana. Anda memperolehnya dengan mengikuti arahan prasyarat di atas. Anda kini boleh menyediakan sambungan kepada Pengawal AskUI melalui UiControlClient seperti ini. Perhatikan betapa mudahnya menggunakan pakej nod sewenang-wenangnya dalam Pipedream? Saya hanya perlu mengimport UiControlClient dan ia hanya berjaya ?.

Nota: Kod berikut juga mengandungi 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. Tulis Aliran Kerja AskUI

Apabila anda melihat borang contoh kami, kami ingin mengisi, anda dapati bahawa kami perlu melakukan perkara berikut:

• Tulis simpleForm@authenticationtest.com ke dalam medan teks Alamat E-mel
• Tulis p$$w0rd ke dalam medan teks seterusnya
• Klik butang Log Masuk
• Sahkan kejayaan

Semakin sedikit inferens yang kami gunakan, semakin pantas aliran kerja AskUI akan dilaksanakan. Segala-galanya yang menggesa AskUI untuk mencari elemen pada skrin menimbulkan inferens. Jadi marilah kita cuba membuat inferens sekali sahaja dengan mencari medan teks pertama untuk Alamat E-Mel. Kemudian kami akan menggunakan tekan kekunci untuk menavigasi borang. Ini adalah kod untuk mencapai ini:

// 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. Hantar E-mel

Melakukan ujian asap tanpa melaporkan tentang keadaan kejayaannya tidak akan membantu kami. Jadi kami hanya akan menghantar e-mel kepada kami dengan tindakan Hantar E-mel Kepada Diri Anda.

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.

Atas ialah kandungan terperinci Jalankan Aliran Kerja AskUI dengan Pipedream untuk Ujian Asap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!