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.

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

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:

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! 👋🏻