Take a Screenshot with AskUI - Also on Fail!
Tags: tutorial, typescript, askui, programming
Published: 2023-05-02 12:47:16

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
* AskUI SDK installed: [[Windows](https://docs.askui.com/docs/general/Getting%20Started/Installing%20AskUI/getting-started), [Linux](https://docs.askui.com/docs/general/Getting%20Started/Installing%20AskUI/getting-started-linux), [macOS](https://docs.askui.com/docs/general/Getting%20Started/Installing%20AskUI/getting-started-macos)

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 AskUI's 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)`

```typescript
// 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:

```typescript
aui = await UiControlClient.build({
  annotationLevel: AnnotationLevel.ON_FAILURE
});
```

A more detailed explanation is documented in the [API Docs of the AskUI UI Control Client](https://docs.askui.com/docs/api/Configuration/askui-ui-control-client#annotationlevel).

## 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](https://discord.gg/Gu35zMGxbx) for help!