Use the Power Of TypeScript in AskUI

Optimizing UI Automation with Functions in TypeScript

In the past, we've discussed using if and else statements, try and catch blocks, and for loops in TypeScript for building UI automations.

However, to avoid repeating code and add real UI interactivity to your AskUI workflows, it's essential to harness the power of functions.

Functions can help create reusable and efficient code for checking if elements are present and reacting accordingly.

The Problem

When you want to check if an element is present on your UI you might do it like this and do something else when the element is not found

-- CODE language-ts line-numbers -- try { await aui.expect().text('').exists().exec(); } catch(error) { // Do something else }

This is totally fine, but once you create more sophisticated workflows you will notice that you need a variation of this code 1,2,3 ... x times.

You can do better if you extract this into a function!

Extract into a function

To get started, create a `util.ts` file in the same folder as your automation file. First, import the `UiControlClient` into this file:

-- CODE language-ts line-numbers -- import { aui } from './helper/jest.setup';

Then you can create a function in this file that takes a parameter `text` and returns `true` or `false` depending on if the element is present or not. This function is asynchronous and checks for the presence of a specific element on the screen. It returns a boolean value to indicate whether the element is present or not.

-- CODE language-ts line-numbers -- export async function checkSuccess(text: string) { try { await aui.expect().text().withText(text).exists().exec(); return true; } catch(error) { console.log(`${text} not found!`); } return false; }

The `export` keyword makes sure we can use it in our actual AskUI-workflow file.

-- CODE language-ts line-numbers -- // Do this in your actual AskUI workflow file at the start import {checkSuccess} from './utils'; // Usage if ((await checkSuccess('Success')) === false) { // React to text not being there };

Implementing it like this makes it possible to reuse the this functionality for all text you need. It also improves the readability of your workflow file 🥳

Endless Possibilities

You can wrap (nearly) any functionality you need in a handy function.

Here's an example of a `waitUntil()` function that you can use to wait for an element or an app to appear on the screen, even if it takes longer than a few seconds:

-- CODE language-ts line-numbers -- async function waitUntil(askuiCommand: Promise, maxTry = 5) { try { await askuiCommand; } catch (error) { if (maxTry == 0) { throw error; } console.log(`Retry predicting command, ${maxTry} tries left`); await aui.waitFor(2000).exec(); await waitUntil(askuiCommand, maxTry - 1); } } // Wait for the text 'Github' to be displayed await waitUntil( aui.expect().text().withText('Github').exists().exec(); )

Conclusion

Leveraging functions in TypeScript significantly streamlines your UI automation efforts and provides numerous opportunities for optimization.

More to explore

tutorials

Run AskUI Studio's Workflow on Your Local Windows Machine with Self-Hosted Runner

In this guide, we will walk you through the steps that you need for running an AskUI self-hosted runner on your local Windows machine. The AskUI self-hosted runner is a self-hosted component that downloads your workflows from AskUI Studio and runs them on the device it is hosted at. So this guide presumes that you already have an account for the AskUI Studio as well as know how to create a workflow in it.

tutorials

Upload PDF and Send E-Mail with AskUI Studio

In this part of the guide, we will use AskUI Studio to send an email with a PDF file attached. We will start with the condition where we already have a PDF file to send via email. In the example, we will use a gmail accout for the demonstration, but it would also work with any other email service.

tutorials

Download a Generated Printable PDF with AskUI Studio

This guide is designed to assist you to leverage our web-based automation environment, AskUI Studio. In particular, we will be focusing on generating a printable calendar, and downloading it in PDF from a dedicated website. By the end of this tutorial, you will be equipped with the basic knowledge to utilize AskUI Studio to interact with a website and handle pop-up dialogs for printing and downloading files.

Get in touch

For media queries, drop us a message at info@askui.com

Download Press Kit