You should go to developer conferences! Firstly, you get to go home with all kinds of cool free stuff. And second of all, you get to learn about new methodologies and software. Most importantly you get to speak with living humans who are building these awesome new tools.

When I was at the CityJS Singapore conference, I learned about an awesome new low-code platform called UIlicious. Yes, I was lured in by the chance to win a Nintendo Switch. The task was simple: build some cool tests with UIlicious. And in less than 30 minutes, I was able to write a pretty cool integration between UIlicious and Vonage’s AI Studio to build automated testing with alerts.

In this article, you’ll learn how to build some basic testing in UIlicious and how to create SMS alerts in AI Studio when your tests fail. 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 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, open up a new project. Create a new folder. Add a new test to your folder like this:

Create a new test file in UIlicious

How to Set Up SMS Alerts for UIlicious

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

We want to check if the docs site has a section on Integrations for Vonage. For this, our test will visit the UIlicious site, go to the documentation, and then look for the appropriate tab in the Integrations section.

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")

// Navigate to the Integrations section:
I.see("How to Guides")
I.click("How to Guides")
I.see("Integrations")
I.click("Integrations")

Now we need to somehow evaluate that Vonage is not here. UIlicious allows us to write Javascript directly into our tests. So we can use a conditional and check that we don’t see Vonage:

if(!(I.see$("Vonage"))){
  // Something will happen here
}

How to create an SMS AI Studio Agent

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

• Type: SMS

• Template: Start From Scratch

• Event: Outbound

As we’re just sending a single alert message, our flow will be very simple. We’ll create a custom parameter (of entity @sys.any) called $TestingError. Then our single Send Message node will send a message along with our $TestingError which will come from our test. The node should look like this:

Send Alert Node in AI Studio

To improve customer experience, close the flow with an End Conversation node.

How to Trigger an AI Studio SMS Agent From UIlicious

Now that our agent is ready, let’s trigger it from our test. UIlicious allows us to make 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$("Vonage"))){
  let res = UI.httpPost("https://studio-api-eu.ai.vonage.com/messaging/conversation", {
    headers:{ "X-Vgai-Key": "YOUR X-Vgai-Key"},
    // Instructions to send AI Studio
    data: { 
      "to": "TO_NUMBER", 
      "agent_id": "AGENT_ID", 
      "channel": "sms",
      "session_parameters": [{
        "name": "TestingError",
        "value": "Vonage not found in Integrations Section"
      }]
    },
    //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? Well, it should be an SMS agent and specifically the agent_id one and it uses your X-Vgai-Key to make sure this is a legit request.

• We also tell it where to should send the message. 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 SMS 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!