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:
- askui assertions
- Jest assertions
Explaining the Use Case
When you open the page linked above it takes you to an interactive login form.
We will do the following steps to create a real end-user workflow:
- Enter the E-Mail and Password
- Extract the captcha value
- Enter it into the designated captcha textfield
- Click the Login-button
- Verify the login succeeded by searching for the text Login Success
Enter E-Mail and Password
The first thing we need to do is enter the given values for E-Mail and Password.
Extract the CAPTCHA Value
Now we start with the interactive part 🥳. Extract the value of the text CAPTCHA with get(). We find the text above the textfield that contains the value 123456 and match the CAPTCHA with some TypeScript-RegEx-magic.
Enter the CAPTCHA Value Into the Designated Textfield
Feed the extracted value back to the textfield designated for it. Also lose the focus so we do not interfere with Optical Character Recognition (OCR) when we want to assert the value is really there.
Assert with Jest-Assertions That the Value was Entered Correctly
To assert if the CAPTCHA was entered successfully we will show you two approaches to find the correct textfield and extract its value:
Click the Login-Button
If the assertions do not fail we get to click the Log in-button.
Verify Success with askui Assertions
When developing the code we noticed that sometimes the success window opened in a new browser tab. But sometimes not 😋
So we had to wrap our assertion in a try/catch-block to account for this scenario. If the Success-Page shows in the same browser tab the first instruction will succeed. If not it will throw an error.
In the catch-clause we will then try to switch to the next browser tab and find the Success-message there. If we fail again the login must have failed.
In this tutorial, you learned how to assert values in your UI
With this knowledge, you can now craft your own interactive UI-workflows 😎.
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.