UI Automation for Flutter Apps

In today's tutorial we will show how to automate Flutter applications with askui. Please also find a video tutorial here.

We assume that askui is already installed in a clean state, see here

What is Flutter?

Flutter is an open-source UI development kit from Google available since 2017. The special feature of Flutter is the possibility of cross-platform development of applications for Android, iOS, Linux, macOS, Windows, Google Fuchsia and web.

Due to this advantage, it quickly became known as a popular framework and various companies are already using it.

If you follow the interest over time, it quickly becomes clear that Flutter will probably be one of the most popular frameworks in the future.

Setting up the Flutter App

Since this tutorial is about automating flutter apps and not about development, we use the Health.ai Flutter Demo App as from Flutterflow.io as an example. The startup from Silicon Valley offers a low-code builder for creating Flutter Apps.

In principle, however, it does not matter how the Flutter app is developed and hosted. Since askui only accesses the operating system and not the application itself, we can implement a true black box test.
If you want to test a mobile application, you start it on an emulator on the test system. As soon as the emulator is visually visible, it can be controlled with askui.

Tip: Using the adb shell, the askui runner can also be installed on Android and thus run on a real device. More about this in a later tutorial.

The Health.ai app under test looks like this:

As a simple test, we would like to test the login process.

Automating with askui

The login process basically consists of the following three steps:

• Entering the username, in our case an account has already been created at "info@askui.com",
• Entering the password, in this case "test123",
• Click on the login button.

Besides that, it matters how and the app is hosted. In our case in a web browser, so an open browser is the precondition for running the test. We can start the app using the following code in the my-first-askui-test-suite.test.ts file:

await aui.typeIn("https://app.flutterflow.io/run/1E6pv4HAPn7zBGaHYtMx").url().exec();
await aui.pressKey('enter').exec();

After running, the browser should look something like this:

If a mobile emulator is used, the app must be launched in it beforehand and the emulator must be visually visible on the screen.

Next we want to automate the filling of the text fields. To better understand how these elements are recognized, we add a help test case, which saves the screenshots with the recognized elements in a separate folder, we add the following lines:

  it('Annotation', async () => {
    await aui.annotate();
  });

With each new test run, a new html document is now stored in the report folder. If we copy the relative path of this file into our browser, we can check what the askui AI has recognized.

Now, to fill in the actual text fields, we use the following code after starting the application:

await aui.typeIn("info@askui.com").textfield().contains().withText("Email Address").exec();
await aui.typeIn("test123").textfield().contains().withText("Password").exec();

The following command is used to perform the login:

await aui.click().text().withText("Login").exec();

The subsequent verification of the successful login is checked by the appearance of the Good Morning text, which appears after the successful login:

await aui.expect().text().withText("Good Morning").exists();

Adding all up

The complete test file should now look like this:

import { aui } from './helper/jest.setup';

describe('jest with askui', () => {
  it('Flutter App Login Form', async () => {

//Open Flutter App
await aui.typeIn("https://app.flutterflow.io/run/1E6pv4HAPn7zBGaHYtMx").url().exec();
await aui.pressKey('enter').exec();

//Fill In Form
await aui.typeIn("info@askui.com").textfield().contains().withText("Email Address").exec();
await aui.typeIn("test123").textfield().contains().withText("Password").exec();

//Login
await aui.click().text().withText("Login").exec();

//Verify Login
await aui.expect().text().withText("Good Morning").exists();

  });

  it('Annotation', async () => {
    await aui.annotate();
  });

});

You can now run the whole file with the command npx jest --config ./test/jest.config.ts;. Just make sure the app is visible on the test system (in this case your screen).

You can also find the complete project here on Github.

Happy testing!