Flutter: Automated End-to-End Testing

03.05.2023

Optimize your testing workflow with Flutter and Gherkin: here's how to automate E2E tests

Problem

One of the main differences between mobile applications and web applications concerns the update process.

In the case of mobile apps, in fact, it is necessary to upload the new version to the relevant store and wait for the review times, which usually require one or two days.

But this is not the only obstacle: once the update is done, it is necessary for it to reach all users, but some of them may choose not to update the app automatically and, as a result, may not receive it immediately.

These factors make the mobile application update process particularly lengthy and delicate.

QA Process

To prevent such problems, a QA (Quality Assurance) process is essential, aimed at identifying and correcting any defects, bugs or issues that may compromise the app's quality.

It is particularly important to test applications as a whole, examining their behavior in various flows, from graphics to underlying functionalities.

However, relying on a person who manually tests the application can result in an inefficient and time-consuming process.

The solution: End-to-End Test

End-To-End (E2E) is a testing technique that verifies the complete functioning of an application, from its user interface to the backend infrastructure.

In practice, E2E testing simulates the behavior of end-users through a series of test scenarios that cover different aspects of the application.

These tests verify whether the application works correctly from the end-user's perspective, such as whether pages load correctly, whether data changes as expected by tapping a button, or whether functionalities work as intended.

How to write these tests in Flutter?

The integration_test package in Flutter provides a framework for defining, executing, and automating integration (E2E) tests.

This testing framework is based on the Flutter Driver library, which allows controlling the application from the outside, simulating user actions such as pressing a button or entering text into an input field.

https://docs.flutter.dev/cookbook/testing/integration/introduction
docs.flutter.dev

There are several Flutter libraries that can be useful for writing and executing tests, greatly simplifying the application testing process:

https://pub.dev/packages/flutter_gherkin
pub.dev
https://pub.dev/packages/bdd_widget_test
pub.dev

What if we automated the test writing process too?

Writing tests can take time for developers, who often find themselves repeating the same test parts for different flows.

To solve this problem, we are helped by Gherkin!

🥒 Gherkin

Gherkin is a specification language that describes the behavior of software in a format that is readable by both humans and computers.

The Gherkin format is based on simple text, structured into scenarios, that describe the actions and reactions of the system in a clear and concise way. An example of a Gherkin scenario could be the following:

In this example, the test describes the scenario of a registered user who wants to log into his account. The test describes the initial state of the system, the action performed by the user, and the expected result of the action.

Gherkin and automated testing processes!

The process of automating tests from Gherkin files is made possible by Oleksandr Leushchenko, a Google Dev Expert in Flutter and Dart.

Not only has he developed the package bdd_widget_test, but he has also given a talk on the topic at FlutterVikings.

N.B. For a better understanding, I recommend watching these videos:

https://www.youtube.com/watch?v=Kwvsc31FE_8&t=1317s
www.youtube.com
https://www.youtube.com/watch?v=oLFVcUqVV28
www.youtube.com
https://www.youtube.com/watch?v=7c5xy6ltjFQ&t=262s
www.youtube.com

To sum up, it is possible to automate even the test writing process using 3 Flutter packages together:

  1. integration_test: allows us to run tests

  2. bdd_widget_test: allows us to write tests with Gherkin syntax

  3. build_runner:generates tests and steps from Gherkin files

Andiamo a vedere il nostro processo di scrittura ed automazione dei test E2E. Come esempio utilizzeremo l’app di default di Flutter CounterApp.

Per prima cosa definiamo il nostro scenario in Gherkin:

The Gherkin files

In this example, the test describes the scenario in which, after making sure that the app is running, the user taps 3 times on the addButton widget and should then see the text "3" displayed on the screen (the last instruction, in which it waits for 1 second, is optional).

From this Gherkin file, a Test file will be automatically generated which we will execute:

The steps executed in the tests are automatically generated and can be reused in multiple different tests without having to define them each time

At this point, all that's left is to run the test. We can check its progress directly on the simulator:

The app is testing itself, without the need for any action from the developer

We can see the steps being executed, exactly as in the Gherkin:

  1. We start the app

  2. We wait for the addButton widget to appear

  3. Once it is visible, we tap it 3 times

  4. Once tapped, the user should see the text 3 displayed on the screen

And there we have our fully automated Integration Test, ready to be executed every time a change is made to verify that the flow still works correctly!


Thank you for taking the time to read this article. I hope I have provided interesting insights on the topic and not been boring. If you need further advice or wish to deepen your knowledge of this testing methodology, do not hesitate to contact us. We will be happy to help you. 😄 See you soon! 👋🏻

Any idea or do you want to know us better?

Otherwise we can play table football or have a ping-pong match in the office. We have a slush machine, too. Well, contact us for anything, except for telemarketing.

Subscribe to the newsletter

No Spam! Once in a while we will share blog articles, playlists, photos and stories about our office life.

By sharing your email address you are agreeing on our privacy policy and allowing us to update you for marketing purposes as described in the policy.

Where we are

Via Cadorna 2,
Albignasego Padova,
35020 Italia

Copyright 2024 - Mabiloft SRL - WAT number 05157070284 - Share capital €10.000