No items found.
tutorials

Take a Screenshot with askui - Also on Fail!

Take a Screenshot with askui - Also on Fail!
Johannes Dienst
February 13, 2024
Share
linkedin iconmail icon

When you develop UI-Automations you often run into the problem that they fail inexplicably đŸ˜„.

This leads to frustration and oftentimes stops the effort entirely!

We will show you how can level up your debugging skills by teaching you a way to take screenshots during an askui execution and when on fail of an execution.

With this knowledge you can lower your frustration and become faster when developing UI-Workflows because you see what askui sees.

Prerequisites

That is it 😉

Take a Screenshot with annotate()

Do you want to know what askui sees at a specific point in time when executing your code?

Luckily the image can be obtained by using askuis built-in method annotate() and a little bit of TypeScript.

First you need to import the fs module at the start of your automation file. You will use it to save the file to a specific place on your disc.

After you called annotate() you save the returned object into a variable. This object contains the image encoded in base64.

You can extract it with a Buffer and write it to your disc with fs.writeFileSync(<path to file>, buffer)

-- CODE language-ts line-numbers -- // Add this to the start of your askui-file containing your workflows/instructions import * as fs from 'fs'; // First, get all the information from the annotation // This will also save an interactive HTML // file to the 'report/' folder const annotation = await aui.annotate(); // The screenshot is contained as a string in 'base64' format // Create a buffer with the base64 image let buffer = Buffer.from(annotation.image.split('base64,')[1], 'base64'); // Write the file // Name as you want // (./ is your project folder) fs.writeFileSync("./test.png", buffer);

Take a Screenshot on Fail

Normally you do not take a screenshot if nothing fails. But in case your UI-Automations fails at some point it is helpful to know Why it might have failed. Was an element missing? Or was the UI just too slow to render?

You can enable this behavior by enabling a setting in your askui UI Control Client. For the default Jest setup, you have to go to the file test/helper/jest.setup.ts.

There you have to set annotationLevel property of the UiControlClient to ON_FAILURE as shown in the following code:

-- CODE language-ts line-numbers -- aui = await UiControlClient.build({ annotationLevel: AnnotationLevel.ON_FAILURE });

A more detailed explanation is documented in the API Docs of the askui UI Control Client.

Conclusion

With these two methods you can see what askui sees at any given point of your UI-Automation. This will speed up your debugging.

Get Support

If you have a recurring or persisting issue, don’t hesitate to ask the Discord community for help!

‍

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