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.
- askui installed: Follow our Getting started or try it in Gitpod
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)
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:
A more detailed explanation is documented in the API Docs of the askui UI Control Client.
With these two methods you can see what askui sees at any given point of your UI-Automation. This will speed up your debugging.
If you have a recurring or persisting issue, don’t hesitate to ask the Discord community for help!
More to explore
Automating WebGL-/Canvas-based Website
WebGL-based websites are becoming increasingly popular among web developers looking to create immersive and interactive user experiences. By drawing graphics and animations directly on the canvas, they offer developers a high degree of creative control over the user interface, providing a more flexible and dynamic platform for graphical compositions. They also offer a more interactive user experience, allowing users to interact with graphics and animations in real-time.
How to Do Assertions in askui
Real interactivity is what characterizes what an end-user is doing on a User Interface (UI). This is why it is important to extract data from your UI into your tool and use it later, for assertions for example 🔧.We will show two ways to use askui for real interactivity by extracting text out of your UI and use it for assertions.