A powerful Flutter DevTools extension that allows you to inspect native UI elements on Android and iOS devices while developing your Patrol tests. This extension provides a tree view of native UI components, making it easier to write accurate selectors for your integration tests.
To use the DevTools extension, start your app in Patrol development mode:
patrol develop -t patrol_test/example_test.dart
This command will:
Launch your test on the connected device/simulator in develop mode
Start the Flutter DevTools server
Print a clickable link to the DevTools interface in your terminal
Open the DevTools Extension
When patrol develop -t is running, look for output similar to this in your terminal:
Patrol DevTools extension is available at:http://127.0.0.1:9102/patrol_ext?uri=http://127.0.0.1:58463/MOAGppLU9BU=/
Click on this link to open Flutter DevTools in your browser.
If logs are cluttering your terminal and making it hard to find the DevTools link, you can use the --open-devtools flag to automatically open DevTools:
After opening the Patrol DevTools link, you can also use the Flutter Inspector to see widgets and their
properties in your Flutter app. To make it work, you need to add the path to your app's lib folder (e.g., user/my_example_app/lib) under settings (⚙️) on the DevTools page.
When you find elements in the inspector, you can create cross-platform selectors that work on both Android and iOS:
// Cross-platform button using unique identifiersawait $.native2.tap(NativeSelector( android: AndroidSelector(resourceId: 'com.example:id/login_btn'), ios: IOSSelector(identifier: 'loginButton'),));// Using class name (Android) and element type (iOS)await $.native2.tap(NativeSelector( android: AndroidSelector(className: 'android.widget.Button'), ios: IOSSelector(elementType: 'XCUIElementTypeButton'),));
