Automated Tests
This feature allows you to create automated tests for your projects. Automated tests refer to a practice where you test the behavior and appearance of your app to ensure that its features work as expected. It’s essentially like testing a real application without human intervention.
Internally, when you write tests in our app builder, we generate code for the Flutter integration testing framework, which you can download and test locally or through services like Firebase Test Lab. Note: We don't support running tests on our platform yet.
Basics
Before you add and run any tests, it's crucial to understand the workflow. When creating a test, you essentially map out a series of steps that dictate how the test will engage with the app. Each step can serve a distinct purpose and can be categorized as:
Step Type
1. Interact with Widget
This step simulates user interactions with your app, such as tapping on a button or entering text into a field. When you set this action, you can specify what kind of action type you would like to simulate and on which widget.
Action Type
Tap: Acts like a single tap or click.
Double Tap: Imitates tapping twice quickly.
Long Press: Imitates pressing and holding for a moment.
Enter Text: Input the exact text you want to simulate entering.
Scroll Until Visible: When this is selected, you can specify the Delta 'number of pixels' you want to repeatedly scroll until the widget is visible. If you have more than one scrollable widget, select which one you want to scroll using the Scrollable property.
2. Wait to Load (Pump & Settle):
After an interaction, your test might need to pause momentarily, allowing the app to process the interaction, load something, or update its state. This is where the 'Wait to Load' mechanism comes into play, ensuring the app has had enough time to reflect any changes.
When this is selected, you have options to adjust:
Duration: How long do you want to wait? The default value is 100ms.
Timeouts: Maximum amount of time to wait, after which the test will fail.
Best practices:
It's best practice to start your test with this step for about 3 seconds (i.e., 3000ms).
After every "Interact with Widget" step, it's usually wise to add another "Wait to Load." Most of the time, you won't need to tweak the Duration or Timeout settings.
3. Expect Result
After performing an action in your app, it's important to verify that the result matches your expectations. This is the verification step where you confirm that the app behaves as expected after the interaction. Here, you confirm whether a particular widget is present on the screen.
When this is selected, you have to locate a widget that you want to verify and set what you expect to find using any of the below options:
Find Nothing: Ensures that the specified widget is not present on the screen.
Finds Num Widgets: Expect a certain number of widgets to be present.
Finds One Widget: Confirms that exactly one widget is present.
Finds Widgets: Expect multiple widgets to be found.
Selection Method
This is the method by which you locate the widget you want to select or verify. We offer ways to identify widgets:
Select from UI Builder: Use the UI Builder's interface to visually select the widget you want to verify.
Find By ValueKey: Locates the widget by its unique ValueKey. Tip: To add a ValueKey to a widget, use the 'Value Key' property located under the new 'Testing' section on the widget properties panel.
Find By Type: Search for a widget based on its type, like Text or button.
Find By Tooltip: Find a widget that has a specific tooltip.
Find By Semantics Label: Useful for locating widgets that have a specific semantics label.
Find By Text: Locate a widget that displays specific text.
Find By Descendent: Search for a widget that has a specific child or ancestor.
Add Tests
Let's see how to add and run tests on our Travel App example that will ensure that users can add and remove places from their favorites list.
You can find all the finished tests for this sample project here.
Here's how it looks when you run tests:
Here are the step-by-step instructions on adding tests:
Open the Test (from the navigation menu) and click Create New.
Provide a Name and Description for the test.
Optional: If you have added Firebase Authentication, you can Add Precondition as Logged In. This will automatically sign in a user with the provided credentials before the test begins.
Click + Add Step, and you can start adding the actual test instructions.
First of all, when the app launches, we'll verify that the top search bar on the home screen is preset. To do so, use the Expect Result, locate using Select from UI Builder, and set the Expectation to Find One Widget.
Next, find and simulate on tap event on the favorite button with the 'ValueKey' as the place name i.e., 'SerengetiNationalPark'. Important: By using the 'ValueKey', we precisely target the favorite button for a specific place card. Without this specificity, the test will encounter multiple favorite buttons and become uncertain about which one to tap, leading to a failed test.
Then, verify the snackbar is displayed with the text 'Added to favorites!'. Tip: We have already added the 'Value Key' as the place name for favorite button in the sample project.
Finally, verify that the place is visible on the favorites list.
You can now duplicate the current test and make changes for the 'RemoveFromFavorites' test. Tip: While doing so, ensure that in the last step (i.e., Expect Result), you set the Expectations to Finds Nothing. This ensures that the removed item is not visible on the favorites list.
See how to run the tests.
Run Tests
You can run tests on local devices or use the services like Firebase Test Lab.
To run the tests locally:
Go to
your_project/integration_test/test.dart.To run a specific test, click the play button next to it. To execute all tests at once, double-click the play button next to 'void main'.
Alternatively, you can use the terminal and enter the command:
flutter test integration_test/test.dart."
Should you encounter any errors during testing and have some development experience, you can directly modify the downloaded test instructions within the editor and see if it works. Ensure you reflect the changes back in the FlutterFlow tests as well.
To run the tests on Firebase Test Lab, you can follow the instructions here.
Published Date: September 20, 2023
Last updated
