How to write integration tests in Flutter like no other, using the Robot Pattern

Published in

Flutter Community

5 min readJul 15, 2023

If you want to write integration tests in Flutter, then look no further! I am going to show you exactly how to write integrations like a pro, using the Robot Pattern.

If you prefer to follow along with the tutorial in a video format, please check out this video

Same tutorial but in video

Let’s dive right in!

In order to write integration tests, we must first learn what integration tests are.

Integration tests are used to test different modules of software as a group. They are also known as End to End (E2E) tests.

In our case, we will be testing two modules of the app as a group. The login module and the home module.

I intended to make this a code-along tutorial, so, I have uploaded a template here: https://github.com/Coffiie/personal_projects/tree/develop/code_along/robot_testing_flutter_gh

You can clone the project and implement integration testing step by step with me!

If I reach 50 followers on Medium, I will release the complete source code with both integration flows for this on my github!

Before we get started. Let’s have a look at the app we are about to write integration tests for and the pattern in which we will implement those tests.

Our app is called the “1234” app because with these magic numbers, you can gain access to the home page.

But if you enter the wrong credentials, a snack bar with the message “Wrong credentials” will be shown at the bottom of the screen.

This is a photo of the app, it has two textfields, the username textfield is filled with “1234" and the password textfield is filled with “1234”. A login button is placed below the fields so that we can log into the app by pressing the button. — 1234 app

Robot pattern is a way of writing integration tests, where we would perform the same actions through our robots, as a normal user would.

This ensures that we are focusing on WHAT we are testing rather than HOW we test it. It also makes our code more readable and reusable.

Now that we have a general understanding of integration testing, the app, and the robot pattern, we can start writing integration tests!

Step 1: Import the integration test package

A picture showing the import of integration_test in pubspec.yaml file — Importing the integration_test package

Step 2: Create Login Robot

Create a folder called integration_test at the root of your Flutter project, then create a folder called robots inside of that folder.

All our integration test flows will become children of the integration_test folder, while all our robots will become children of the robots folder.

Now let’s create a robot inside the robots directory and call it login_robot.dart

We will implement the LoginRobot class inside this file, and it will be responsible for interacting with the test framework, and performing the same actions a user would, to test the Login Screen.

So we can now go ahead and add the WidgetTester dependency to our class like this:

Step 3: Analyze Login Page

Take a look at the source code, you will see many widgets assigned with the WidgetKeys class, these keys are assigned to better identify widgets for the test framework, and will be advantageous when looking for widgets in our tests.

Step 4: Implement Login Robot

Add the following methods to the LoginRobot class.

verify(): will test whether we are present at the login screen.
enterPassword, enterUsername, and tapLoginButton are self-explanatory
verifyError(): This is used to test the snack bar that comes up when we enter the wrong credentials.

Step 5: Create unauthenticated flow

This app has 2 major flows.

One flow is the unauthenticated flow, where the user is unable to log in and a snack bar is shown to the user for entering wrong credentials.

The other flow is where the user can authenticate with the correct credentials and navigate to the home screen.

To keep this tutorial short, we will be focusing on only the unauthenticated flow.

To start implementing it, create a file called e2e_unauth_test.dart in integration_test folder.

Start by creating a main() method. Then ensure that the integration test framework is ready, by calling IntegrationTestWidgetsFlutterBinding.ensureInitialized() .

Once this is done, we can call the LoginRobot methods to quickly implement our test flow.

Notice the import on line 3. We are intuitively calling the MyApp constructor on line 14 so that we can pump the actual app that we have developed.

Step 6: Run the test

Tadaaa. By pressing the Run option, you can run the test and watch it pass!
You have successfully written code that will make your app more robust!

A few takeaways to keep in mind

Integration tests are used to test different modules of software as a group. They are also known as End to End (E2E) tests.
In the Robot pattern, we write robots for each screen and use the WidgetTester to write tests similar to what a user would do.
After implementing Robots, we can easily create complex flows, since all the implementation is abstracted inside the Robots and we only call their methods whenever we need to execute a certain action.

A fun activity

There is one more flow left, which is the authenticated flow. I would like you to create it, and send me a DM on LinkedIn once you’re done. I would love to see your solutions! :)