There is lots of talk lately about visual testing and benefits of catching UI bugs upfront and even though it’s pretty easy task for modern web browser testing, it can be complicated for mobile testing.
The problem is that you have status bar on top of your device screen, which contains time, wifi bars, battery level and cellular bars. Every time you run the tests and take snapshot of the screen your visual tests going to fail, since the status bar dynamic. There is a work around if you can execute command line with your testing framework, here is what you would do for iOS Simulator:
xcrun simctl status_bar "iPhone 11" override --time "12:00" --batteryState charged --batteryLevel 100 --wifiBars 3 --cellularMode active --cellularBars 4
Android is slightly complicated and you would need to execute multiple commands.
First command is to put device in the demo mode:
adb shell settings put global sysui_demo_allowed 1
Then set the clock:
adb shell am broadcast -a com.android.systemui.demo -e command clock -e hhmm 1200
Display full mobile data with 4g type and no wifi
adb shell am broadcast -a com.android.systemui.demo -e command network -e mobile show -e level 4 -e datatype 4g -e wifi false
Hide notifications
adb shell am broadcast -a com.android.systemui.demo -e command notifications -e visible false
Show full battery but not in charging state
adb shell am broadcast -a com.android.systemui.demo -e command battery -e plugged false -e level 100
The original idea comes from detox docs (all credits to them), but as long as you can execute command line you can use this approach with any testing framework Appium, Detox, etc.
Hope this helps, feel free post your comments suggestions in the section below.
