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!
Working in What-You-See-Is-What-You-Get editors (WYSIWYG) can be very tiring and also taxing on your wrists. Things like highlighting the same thing over and over again can often not be done with search-and-replace, because there is just no button for it 😤 In this tutorial I will show you how I automated this task with AskUI and also how to work around some kinks of WYSIWIG-Editors like microanimations and strange behaviour.
Embrace Immersive and Interactive User Experiences: A Guide to Automating WebGL Websites with AskUI As web developers increasingly seek to captivate users with immersive experiences, WebGL-based websites have gained popularity. By harnessing the power of canvas to draw graphics and animations directly, they offer unparalleled creative control and dynamism in crafting user interfaces. The result? A more flexible and engaging platform for stunning graphical compositions, delivering real-time interactions that captivate visitors.
Visual Regression Testing (VRT) is a useful method to guard yourself against unwanted layout and visual changes that can occur with new version of a Graphical User Interface (GUI).AskUI is not a testing tool in the original sense but an automation tool for all GUIs that is platform-independent. Wouldn't it be nice to combine VRT with AskUI, so you do not have to maintain two different projects.Luckily you can do this because Jest - AskUIs favourite runner - can be extended to provide VRT, while AskUI delivers the screenshots to test on.