E2E Tests setup for Android (#2399)

* Basic E2E setup for android

* Basic tests working

* Added scrolling element selector to Android

* Cleanup code

* Change files

* Replace ScrollView id with existing const

* Clean up mobile scroll

* Testing Android pipeline

* Fix platform

* Fix spacing

* Changing Gradlew task

* Comment non-android tests

* Changed vm to ubuntu added working directory to gradlew

* Update emulator to use xamarin

* Updated fradlew task

* Revert ubuntu change for Android PR

* Revert "Update emulator to use xamarin"

This reverts commit 6bea0a8.

* Change jdk path

* Update version for jdk

* Disable yarn android

* Revert "Disable yarn android"

This reverts commit 1dc6bad.

* Set to re-install apk mode

* Remove existing packages

* Remove yarn android, add caching for avd

* Added apk dump mechanism

* Fix syntax

* Fix syntax

* Fix syntax

* Update apk dump to run on failure

* Testing screenshot on android

* Update emulator script

* Fix missing label for E2E

* Reverting APK dump mechanism

* Attempting to fix screenshot issue

* Attempting to fix screenshot issue x2

* Attempting to fix screenshot issue x3

* Attempting to fix screenshot issue x4

* Revert "Attempting to fix screenshot issue x4"

This reverts commit f6ed8fd.

* Change to MacOS 12

* Revert "Change to MacOS 12"

This reverts commit 7cdaacd.

* Attempting to fix screenshot issue x5

* Revert "Comment non-android tests"

This reverts commit d4faed2.

* Revert "Testing screenshot on android"

This reverts commit 88cde98.

* Added apk dump on failure

* Code cleanup

* Test Screenshot

* Change emulator device model and Remove apk dump

* Revert "Test Screenshot"

This reverts commit 3deb823.

* Replace testId with testProps

* Attempt AVD Caching

* Fix task blocks

* Fix import

* Revert AVD Caching

* Revert "Revert AVD Caching"

This reverts commit f31ac5a.

* Try different path

* Path format fix

* Change path to single folder

* Enable quick boot emulator

* Revert "Enable quick boot emulator"

This reverts commit e50cfa9.

* Removing caching

* Code cleanup

* Resolve comments

* Resolve comments

* Remove extra bundle command from E2E

Author: ayush547

.ado/azure-pipelines.yml

@@ -61,14 +61,8 @@ jobs:
       # sets-up specifics for android dependency like NDK & emulator
       - template: templates/android-dep-setup.yml
 
-      - bash: |
-          echo "yarn $(platform)"
-          yarn $(platform)
-        workingDirectory: apps/fluent-tester
-        displayName: 'yarn $(platform)'
-        env:
-          JAVA_HOME: $(JAVA_HOME_11_X64)
-          PATH: $(JAVA_HOME_11_X64)/bin;$(PATH)
+      # builds a debug apk and runs E2E tests on it
+      - template: templates/e2e-testing-android.yml
 
   - job: macOSPR
     displayName: macOS PR

.ado/templates/android-dep-setup.yml

@@ -7,19 +7,41 @@ steps:
         #!/usr/bin/env bash
 
         # Install AVD files
-        echo "y" | $ANDROID_HOME/tools/bin/sdkmanager --install 'system-images;android-27;google_apis;x86'
+        echo "y" | $ANDROID_HOME/tools/bin/sdkmanager --install 'system-images;android-27;default;x86_64'
 
         # Create emulator
-        echo "no" | $ANDROID_HOME/tools/bin/avdmanager create avd -n android_emulator -k 'system-images;android-27;google_apis;x86' --force
+        echo "no" | $ANDROID_HOME/tools/bin/avdmanager create avd -n android_emulator -d 19 --package 'system-images;android-27;default;x86_64'
 
          # list emulator
         echo "Available emulator"
         $ANDROID_HOME/emulator/emulator -list-avds
 
+        if false; then
+        emulator_config=~/.android/avd/android_emulator.avd/config.ini
+          # The following is to support empty OR populated config.ini files,
+          # the state of which is dependant on the version of the emulator used (which we don't control),
+          # Replace existing config (NOTE we're on MacOS so sed works differently!)
+        sed -i .bak 's/hw.lcd.density=.*/hw.lcd.density=420/' "$emulator_config"
+        sed -i .bak 's/hw.lcd.height=.*/hw.lcd.height=1920/' "$emulator_config"
+        sed -i .bak 's/hw.lcd.width=.*/hw.lcd.width=1080/' "$emulator_config"
+          # Or, add new config
+        if ! grep -q "hw.lcd.density" "$emulator_config"; then
+          echo "hw.lcd.density=420" >> "$emulator_config"
+        fi
+        if ! grep -q "hw.lcd.height" "$emulator_config"; then
+          echo "hw.lcd.height=1920" >> "$emulator_config"
+        fi
+        if ! grep -q "hw.lcd.width" "$emulator_config"; then
+          echo "hw.lcd.width=1080" >> "$emulator_config"
+        fi
+        echo "Emulator settings ($emulator_config)"
+        cat "$emulator_config"
+        fi
+
         echo "Starting emulator"
 
         # Start emulator in background
-        nohup $ANDROID_HOME/emulator/emulator -avd android_emulator -no-snapshot > /dev/null 2>&1 &
+        nohup $ANDROID_HOME/emulator/emulator -avd android_emulator -no-snapshot -no-audio -gpu host -no-boot-anim -qemu -m 2048 > /dev/null 2>&1 &
         $ANDROID_HOME/platform-tools/adb wait-for-device shell 'while [[ -z $(getprop sys.boot_completed | tr -d '\r') ]]; do sleep 1; done; input keyevent 82'
 
         #list online device/emulator

.ado/templates/e2e-testing-android.yml

@@ -0,0 +1,41 @@
+steps:
+  # Building APK also requires bundling, this is currently already being done as part of main Android PR task.
+  - task: Gradle@2
+    displayName: 'gradlew build apk'
+    inputs:
+      gradleWrapperFile: 'apps/fluent-tester/android/gradlew'
+      tasks: 'assembleDebug'
+      gradleOptions: '-Xmx2g'
+      javaHomeOption: 'JDKVersion'
+      jdkVersionOption: '1.11'
+      workingDirectory: apps/fluent-tester/android
+
+  - script: |
+      adb install app-debug.apk
+    workingDirectory: apps/fluent-tester/android/app/build/outputs/apk/debug
+    displayName: 'install apk'
+
+  # Creates a variable that determines whether the previous build tasks succeeded.
+  # Usage: We want the tasks that generate reports to run for both passing/failing E2E testing tasks. In order to do so, we need to make
+  # those reporting tasks run even on when certain previous tasks fail. This variable allows us to differentiate build failures from
+  # E2E testing failures. Thus, if this variable != "Success", we know the build failed, and to not run the reporting tasks.
+  - task: PowerShell@2
+    inputs:
+      targetType: 'inline'
+      script: |
+        Write-Host "##vso[task.setvariable variable=task.Build.status]Success"
+    condition: succeeded()
+    displayName: 'Create success build variable'
+
+  - script: |
+      yarn e2etest:android
+    workingDirectory: apps/E2E
+    displayName: 'run E2E Android tests'
+    condition: succeeded()
+
+  - template: e2e-publish-artifacts.yml
+    parameters:
+      applicationType: android
+      platform: 'android'
+      buildArtifacts: variables['task.Build.status']
+      directory: $(Build.SourcesDirectory)/apps/E2E

apps/E2E/package.json

@@ -5,6 +5,7 @@
   "license": "MIT",
   "scripts": {
     "build": "fluentui-scripts build",
+    "e2etest:android": "wdio run wdio.conf.android.js",
     "e2etest:ios": "wdio run wdio.conf.ios.js",
     "e2etest:macos": "wdio run wdio.conf.macos.js",
     "e2etest:windows": "rimraf errorShots/* reports/* && wdio run wdio.conf.windows.js"
@@ -40,6 +41,7 @@
     "appium-mac2-driver": "1.4.0",
     "appium-windows-driver": "2.0.7",
     "appium-xcuitest-driver": "4.11.1",
+    "appium-uiautomator2-driver": "^2.10.2",
     "@babel/core": "^7.8.0",
     "@babel/runtime": "^7.8.0",
     "@fluentui-react-native/focus-zone": "^0.11.18"

apps/E2E/src/Avatar/pages/AvatarPageObject.ts

@@ -17,6 +17,10 @@ class AvatarPageObject extends BasePage {
     return By(HOMEPAGE_AVATAR_BUTTON);
   }
 
+  get _pageButtonName() {
+    return HOMEPAGE_AVATAR_BUTTON;
+  }
+
   get _pageName() {
     return AVATAR_TESTPAGE;
   }

apps/E2E/src/Avatar/specs/Avatar.spec.android.ts

@@ -0,0 +1,22 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import AvatarPageObject from '../pages/AvatarPageObject';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Avatar Testing Initialization', function () {
+  it('Wait for app load', async () => {
+    await NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    await expect(await NavigateAppPage.isPageLoaded()).toBeTruthy(NavigateAppPage.ERRORMESSAGE_APPLOAD);
+  });
+
+  it('Click and navigate to Avatar test page', async () => {
+    await AvatarPageObject.mobileScrollToComponentButton();
+    await AvatarPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    await NavigateAppPage.clickAndGoToAvatarPage();
+    await AvatarPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    await expect(await AvatarPageObject.isPageLoaded()).toBeTruthy(AvatarPageObject.ERRORMESSAGE_PAGELOAD);
+  });
+});

apps/E2E/src/Button/pages/ButtonPageObject.ts

@@ -63,6 +63,10 @@ class ButtonPageObject extends BasePage {
   get _pageButton() {
     return By(HOMEPAGE_BUTTON_BUTTON);
   }
+
+  get _pageButtonName() {
+    return HOMEPAGE_BUTTON_BUTTON;
+  }
 }
 
 export default new ButtonPageObject();

apps/E2E/src/Button/specs/Button.spec.android.ts

@@ -0,0 +1,22 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import ButtonPageObject from '../pages/ButtonPageObject';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Button Testing Initialization', function () {
+  it('Wait for app load', async () => {
+    await NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    await expect(await NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to Button test page', async () => {
+    await ButtonPageObject.mobileScrollToComponentButton();
+    await ButtonPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    await NavigateAppPage.clickAndGoToButtonPage();
+    await ButtonPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    await expect(await ButtonPageObject.isPageLoaded()).toBeTruthy();
+  });
+});

apps/E2E/src/CheckboxExperimental/pages/ExperimentalCheckboxPageObject.ts

@@ -82,6 +82,10 @@ class ExperimentalCheckboxPageObject extends BasePage {
   get _pageButton() {
     return By(HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON);
   }
+
+  get _pageButtonName() {
+    return HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON;
+  }
 }
 
 export default new ExperimentalCheckboxPageObject();

apps/E2E/src/CheckboxExperimental/specs/ExperimentalCheckbox.spec.android.ts

@@ -0,0 +1,21 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import ExperimentalCheckboxPageObject from '../pages/ExperimentalCheckboxPageObject';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+describe('Experimental Checkbox Testing Initialization', () => {
+  it('Wait for app load', async () => {
+    await NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    await expect(await NavigateAppPage.isPageLoaded()).toBeTruthy(NavigateAppPage.ERRORMESSAGE_APPLOAD);
+  });
+
+  it('Click and navigate to Experimental Checkbox test page', async () => {
+    await ExperimentalCheckboxPageObject.mobileScrollToComponentButton();
+    await ExperimentalCheckboxPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    await NavigateAppPage.clickAndGoToCheckboxExperimentalPage();
+    await ExperimentalCheckboxPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    await expect(await ExperimentalCheckboxPageObject.isPageLoaded()).toBeTruthy(ExperimentalCheckboxPageObject.ERRORMESSAGE_PAGELOAD);
+  });
+});