UIlicious & AI Studio: Voice Alerts for Low Code Testing

Who likes to write software tests? Nobody! But recently I discovered an excellent low-code testing platform called UIlicious.

Uilicious has many features but doesn't have telephone alerts in case of failing tests. Good thing we can build an all-low-code solution integrating UIlicious with AI Studio. In this article, you’ll learn how to build UIlicious tests and create Voice (telephone) alerts in AI Studio. And you’ll do it all with friendly low-code UI platforms!

Prerequisites

• UIlicious Account

• Vonage Developer Account

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

How to Build Tests in UIlicious

Writing tests in software development is notoriously painful. It’s kind of like going to the dentist; everyone knows they need to do it, but nobody wants to do it. UIlicious is a great new platform that takes a lot of the pain out of writing automated tests.

First of all, you don’t need to download anything, UIlicious is hosted in the browser. So you can write your tests, run your tests, see the results, and even schedule regular monitoring all in the browser.

Second of all, writing tests with UIlicious doesn’t require experience writing tests or even writing software. The platform promises:

Just write your tests as if you are telling your dad how to log into Facebook over the phone.

Learn more about testing in UIlicious with the in-browser Editor.

Writing Our Tests

In the UIlicious Studio, add a new project. Create a new folder. Add a new test to your folder like this:

How to create a new test file in UIlicious

How to Set Up Voice Alerts for UIlicious

Mission: We want to test the UIlicious documentation site and make sure there is information about Vonage integrations.

For our test, we want to check if anything related to Vonage exists on the documentation site. For this, our test will visit the UIlicious site, go to the global search, and then check if a search for Vonage yields an empty result.

The testing looks remarkably similar to the human language I just wrote! Have a look:

// Start by going to the documentation, like this:
I.goTo("<https: uilicious.com="">")
I.see("Docs")
I.click("Docs")

// Perform a search for Vonage
I.see("Search")
I.click("Search")
I.fill("Search docs", "Vonage")

// Now we need to somehow evaluate that Vonage is not here. UIlicious allows us to write Javascript directly into our tests. We know that an empty search returns the words No results for "Vonage"', so we can use that to write a conditional:
if(I.see$('No results for "Vonage"')){ 
// Something will happen here
}
</https:>

How to Create a Voice AI Studio Agent

But what do we want to put to happen in our conditional? We need to trigger our AI Studio agent, who will, in turn, send the phone call. So we must head to the Vonage Developer Dashboard and create a new agent! We can follow the documentation instructions to create our Voice agent. There are three important options for our agent select:

• Type: Telephony

• Template: Start From Scratch

• Event: Outbound call

Our flow will be very simple as we’re just sending a single alert message. We’ll create a custom a custom parameter called $TestingError. Then, our single Speak node will send an audio message including our $TestingError, which will come from UIlicious. The node should look like this:

Send Alert Node in AI Studio

How to Trigger an AI Studio Voice Agent From UIlicious

Now that our agent is ready let’s trigger it from our test. UIlicious allows us to call HTTP requests exactly the way AI Studio instructs us to trigger an outbound agent. Inside our conditional, we need to add the following code:

if(I.see$('No results for "Vonage"')){
  let res = UI.httpPost("https://studio-api-eu.ai.vonage.com/telephony/make-call", {
    headers:{
      "X-Vgai-Key": "YOUR X-Vgai-Key"
    },
    // Instructions to send AI Studio
    data: { 
      "to": "TO_NUMBER", 
      "agent_id": "AGENT_ID", 
      "session_parameters": [{
        "name": "TestingError",
        "value": "Vonage not found in Global Search!"
      }]
    },
    // Expect the response to be JSON
    responseType: "json", 
  })
  //Log the response from the API
  TEST.log.info("Response from API is: " + JSON.stringify(res.data))
}

You’ll need to update the X-Vgai-Key, to, agent_id to your values.

• You can find the X-Vgai-Key on the top right of your canvas. Click on the "user" icon, and then "Generate API Key".

• The to number is the destination that alerts will go to, probably whoever is in charge of your DevOps.

• The agent_id can be found under your Agent Details:

AI Studio Agent Details

What does the code do?

• It sends a request to AI Studio, which triggers an agent.

• Which agent? The agent with agent_id then uses your X-Vgai-Key to make sure this is a legit request.

• We also tell it where to send the phone call.

• We supply the value for $TestingError parameter, so it knows what to tell the end user.

• And finally, we handle the response from AI Studio, which lets us know whether the request was successful or not.

Join the Conversation

Did you enjoy this article? What tools are you using for software testing? I'd love to hear about your preferred no-code and low-code tools. You can check out more of our low-code blog posts.

Are you using Voice for notifications or other channels? Head over to the Vonage Developer Community Slack and let us know what you're building.

I’d love to hear what you think about AI Studio and UIlicious. Shoot me a Tweet on X, formerly known as Twitter. And give VonageDev a follow while you’re at it!