In this tutorial, we will automate web browser searching on Android devices. This tutorial assumes that you have already set up your Android test device, alongside the Android Development Environment. If you haven't set it up yet, you can check out our previous tutorial.
1. Prepare the askui Test Environment
Install and initialize askui
First, go to the directory where you have your npm project. If you don't have one, you can create it with npm init
Then, use the commands below to install askui alongside a few additional tools:
After creating the askui test suite, add your credentials in helper/jest.setup.ts:
💡 askui credentials: You can get your askui credentials from the askui user portal for free.
Configure askui for Android
We need to run the UiController manually with an extra argument to specify the runtime mode, as the current version of askui(ver. 0.4) doesn't provide the API for running it with the runtime option yet.
Thereafter, we have to change a few lines of the generated test code, as the code ships with the code that creates another UiController instance.
Go to helper/jest.setup.ts and deactivate every line that is using uiController:
2. Try Annotating
Make sure that your Android device is connected, or if you are using the Android Emulator, make sure that it is open and running on your computer.
askui provides a feature where you can monitor how the visible elements are understood by askui.
Try to change the code within test/my-first-askui-test-suite.test.ts:
💡 Annotation is Interactive
Try to hover your mouse on the red bounding box. It will let you know how to manipulate that element via askui
3. Automate Web Searching
Now we are good to go for the actual automation process.
The automation consist of three steps:
- Open Chrome
- Select the search bar and type 'spacecraft'
- Click on the desired search result
1) Open Chrome
To open Chrome, we first have to figure out how we can let askui know where to click on.
As we can see in the annotated information, the Chrome icon is recognized as an icon: undo. Indeed, we could also tell askui to select the icon: undo, but we will try to do it in a more precise way.
What we gonna do is:
(1) Select the search bar
(2) Type 'chrome'
(3) Select the icon above the text 'chrome'
This sideway approach will give us a more consistent result because typing chrome in the search bar will give us a more clearly understandable visual element.
Try to change your code according to this:
Now you will be able to see that Chrome has been opened.
2) Select the Search Bar and Type 'spacecraft'
Let's select the search bar of chrome, and type our desired keyword in there.
Add this code block to the bottom of our code:
In some cases, when searching in Google, you will be asked to give consent for the cookies.
To avoid our test from failing, we have to examine whether we got a pop-up for the cookie consent or not:
3) Click on the Desired Search Result
After clearing the cookie consent pop-up, we can see and click our desired search result. In our test case, we will look for the result from Wikipedia:
Pay attention to the command nearestTo() that is interconnecting two different text elements.
askui offers several Relational commands, which enable you to select the desired element in an intuitively understandable way:
💡 About withText() and containsText()
You might wonder how withText() and containsText() differ. withText() tries to match the given text as the whole sequence, whereas containsText() tries to match the given text as a sub-text within the elements. Generally speaking, containsText() can be handier to match the text roughly, but you might face a test case where you want to find a specific text as a whole sequence.
4. Complete Test Code
We have covered a use case of askui to automate web searching in Android devices. If you got any issues while following the instruction, feel free to ask in our Discord!
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.
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.