Run Flutter UI tests in CircleCI

Flutter allows you to create UI tests with Flutter Deriver. By creating UI tests and automate UI test execution helps to identify most of the UI issues even before QA testing. That helps to reduce a lot of time that has to spend on testing.

To run UI tests you need emulators or remotely accessible devices.
  
You may aware that running the Android emulator is not currently supported on CircleCI 2.0, since it's not supported by the type of virtualization CircleCI uses on Linux. So they are suggesting to use external service like Firebase TestLab.

If you developed your app with Flutter then Firebase TestLab is not an option since Firebase TestLab not supports for flutter test UI execution. For my recent flutter project, I needed to configure CircleCI for Flutter UI test execution. Even CircleCI Linux instance, not support for the android emulator, with MacOS instance we can run the emulator. Since we can build both Android and iOS builds in MacOS instance it's worth giving a try.

First, we need to select a macOS instance. So the first step would be adding macOS instance and better to select Large resource class since Android emulator required much memory

macos:
	xcode: "10.3.0"
	resource_class: Large

Then we're going to setup flutter SDK. This step is not required to run the emulator but if you're going to run flutter app you need to follow this as well.

	- run:
	name: Setup environment variables
	command: echo 'export PATH="$PATH:`pwd`/flutter/bin"' >> $BASH_ENV
	- run:
	name: Download flutter SDK
	command: if ! test -f "flutter_sdk.zip"; then curl -o flutter_sdk.zip https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_v1.9.1hotfix.4-stable.zip; fi
	- run:
	name: Unzip flutter SDK
	command: unzip flutter_sdk.zip
	- save_cache:
	key: flutter_cache_1
	paths:
	- flutter_sdk.zip

Then we need to install Android SDK and required emulator dependencies and setup required environment variables.

	- run:
	name: Setup environment variables
	command: |
	echo 'export PATH="$PATH:/usr/local/opt/node@8/bin:${HOME}/.yarn/bin:${HOME}/${CIRCLE_PROJECT_REPONAME}/node_modules/.bin:/usr/local/share/android-sdk/emulator:/usr/local/share/android-sdk/tools:/usr/local/share/android-sdk/tools/bin:/usr/local/share/android-sdk/platform-tools"' >> $BASH_ENV
	echo 'export ANDROID_HOME="/usr/local/share/android-sdk"' >> $BASH_ENV
	echo 'export ANDROID_SDK_HOME="/usr/local/share/android-sdk"' >> $BASH_ENV
	echo 'export ANDROID_SDK_ROOT="/usr/local/share/android-sdk"' >> $BASH_ENV
	echo 'export QEMU_AUDIO_DRV=none' >> $BASH_ENV
	- run:
	name: Install Android sdk
	command: |
	export ANDROID_SDK_ROOT="/usr/local/share/android-sdk"
	HOMEBREW_NO_AUTO_UPDATE=1 brew tap homebrew/cask
	HOMEBREW_NO_AUTO_UPDATE=1 brew cask install android-sdk
	- run:
	name: Install emulator dependencies
	command: |
	export ANDROID_SDK_ROOT="/usr/local/share/android-sdk"
	(yes | sdkmanager "platform-tools" "platforms;android-29" "system-images;android-29;google_apis;x86" "emulator" --verbose) || true

Now we can create an Android Virtual Device (AVD).

	- run:
	name: Setup Emulator
	command: |
	echo no | avdmanager create avd --name "test" --force --package "system-images;android-29;google_apis;x86" --tag google_apis --abi "x86"

Then we can start an Android emulator in a background thread. Before running any UI test or application in the emulator we should make sure that the emulator started properly.

	- run:
	name: Launch Emulator
	command: |
	emulator -avd "test" -skin 768x1280 -no-audio -no-window
	background: true
	- run:
	name: Wait for emulator
	command: |
	local bootanim=""
	echo "Giving some time to boot up the emulator"
	sleep 30
	echo "Checking emulator status"
	until [[ "$bootanim" =~ "stopped" ]]; do
	sleep 5
	bootanim=$(/usr/local/share/android-sdk/platform-tools/adb -e shell getprop init.svc.bootanim 2>&1)
	echo "boot animation status=$bootanim"
	done
	echo "Android Virtual Device is ready."
	adb shell input keyevent 82

You can find the complete script below.

Happy coding !