Writing UI tests using integration_test package for Flutter Web

Photo by JJ Ying on Unsplash

Writing integration tests using Flutter framework has undergone some changes recently, such as, instead of flutter_driver that provides api to test Flutter applications and to write end to end UI automated tests, has made way to integration_test .

From the official integration_test documentation:

In this article, we will take a look at how to setup integration_test to execute tests on Web platform and most importantly how to run these tests for a sampleun échantillon Flutter web app so that we can see the actual testtester execution happening in a browser.

Test setup / configuration:

First and foremost, adding the integration_test as a dependency in pubspec.yaml , but since Flutter 2.0, the dependency is to be added as a package rather than a plugin, ie, this dependency is now integrated as a Flutter SDK and need to be added as below under dependency section:

Next, we will add two folders at the root of our project, namely, integration_test and test_driver .

Under integration_test folder, create a dart file (app_test.dart) which will have actual tests that we are going to write and execute.

Under flutter_driver folder, create a dart file (integration_test.dart) which will contain one liner code that acts as an entryune entrée point for integration_test to kick-start the execution. (will come back to this later).

Since we will be running our tests on web, ie, in a browser, we need a kind of a bridge to connect our tests to the browser that is going to run our tests. This bridge is chromedriver , which is nothing but a WebDriver to run automated tests on Chrome browser (we will focus our testing on Chrome browser for this article).

We first need to download it from here. Depending upon the OS and Chrome browser version you are using (on Mac, Windows), download the required version. Since I am on Chrome version 91.0.4472.77, I downloaded `ChromeDriver 91.0.4472.19`.

Once you download the driver, we need to run it in a separate terminal session by passing a port number to it, as below:

1. Open a new terminal window and go to the path where you have downloaded the chromedriver. (Ex: documents/flutterapps/chromedriver)
2. Run ./chromedriver — port=4444 which will show below message indicating the chrome driver has started on port 4444.

If you are on macOS Catalina, trying to run above command may show a popup saying the program cannot be run, since it’s source is unidentified, like below:

Error: “chromedriver” cannot be opened because the developer cannot be verified. Unable to launch the chrome browser

To resolve above error, follow this SO link and give the required permission.

After giving the permission and running the command in stepétape 2 should start the chromedriver as shown below:

Keep this terminal window open till you are executing your tests.

Writing UI tests

We will write UI tests for a simple login screen that has two TextFields to accept email and password and a Button and will verify below scenarios:

1. Verify if email and password fields are not empty before tapping Login button.
2. Verify login functionality works after entering correct email and password and tapping Login button which shows a snackbar indicating login successful .

Sample Login Screen:

Under test_driver/integration_test.dart , write a main() method that calls the IntegrationDriver(), which is an adaptor to run integration test using flutter drive . So the code goes like this:

Under integration_test/app_test.dart , we’ll make use of WidgetTester api that works in sync with integration_test package.

The look / structure / formatforma of our tests will be very much same as the widget_test.dart tests that are generated with each new Flutter project we create, so we start with main() method and call IntegrationTestWidgetsFlutterBinding.ensureInitialized(); which basically confirms that the integration_test package is properly initialised before we execute tests, followed by testWidgets method that is similar to what we see in widget_test.dart .

This is one of the advantage of using integration_test package which allows us to leverage WidgetTester api under flutter_test package and its methods and properties to write our tests.

After declaring variables to identify email, password and login widgets, we proceed to tap and then entering an email id followed by verifying if the entered email id is indeed present in the field using expect(find.text(), findsOneWidget) method as below:

Then we proceed to tap on the button and add pumpAndSettle() for the snackbar confirmation to appear, which allows our testtester to use the settled UI that was rendered after pressing Login button.

Complete test code is as below:

Running the test:

In orderordre to see how our test does, we will run below command in a new / separate terminal windowfenêtre (apart from the one we opened earlier that has our chromedriver up and running already):

Make sure to have chromeDriver running before you run above command, else if you directly run above command, you will get below error:

Above commandcommande will by default run in headless mode, so the command won’t invoke a Chrome browser to run and execute the test, ie, you won’t be able to see how the test ran visually, but will get All tests passed result in the console as below:

In order to see how the test runs in chrome browser, use --no-headless flag at the end of the command and it will invoke chrome browser just like when you run flutter run -d chrome and will show you a visible run of the test :

And that’s all. We ran our UI tests using the new look integration_test package for a Flutter web app.

My main focus in this article was to show how to setup integration_test package specially for web platform as it requires us to download browser specific driver (chromeDriver for example), run it on a port and then execute our tests using particular command to invoke the browser which shows the actual tests executionexécution happening, because after all, its UI tests and we should be able to see the test getting executed on a device.

That’s all I have for today. Thanks for reading and feel free to comment below your thoughts / suggestions / feedbackrétroaction on this topic.

I can be reached via Twitter and LinkedIn.

You may check out my profile below for other articles I wrote on Flutter.

https://medium.com/@darshankawar

https://medium.com/flutter-community