ionic-zone · janpio · Dec 7, 2017 · Jan 3, 2018 · Aug 9, 2018
diff --git a/_articles/fastlane.md b/_articles/fastlane.md
@@ -34,56 +34,35 @@ Have all app data for both stores in (versioned) local files and upload with one
 - [Create local store metadata file structure with `deliver` and `supply`](fastlane/create-local-file-structure.md)
 - [Add metadata to local structure and upload to stores](fastlane/add-metadata-and-upload.md)
 
-## Build your app
-
-Automatically build your app (Includes fully automated handling of iOS certificates).
-
-- [Build your Ionic app with Fastlane](fastlane/build-your-project.md)
-  1. [Build your Ionic app with the `ionic` Fastlane plugin](fastlane/build-your-project-with-ionic-plugin.md)
-  1. [Build your Ionic or Cordova app with the `cordova` Fastlane plugin](fastlane/build-your-project-with-cordova-plugin.md)
-  1. [Build your Ionic or Cordova app with native tooling in Fastlane](fastlane/build-your-project-with-native-tooling.md)
-- [Setup iOS certificate handling with `match`](fastlane/setup-ios-certificate-handling.md)
-
-{::nomarkdown}
-<div id="update-box">
-
-  <strong>Get notified about new <em>Ionic + Fastlane</em> articles</strong><br>
-  The articles below are not ready yet and are actively worked on right now. Enter your email address to automatically be notified when they are published:<br>
-  <br>
-
-<!-- Begin MailChimp Signup Form -->
-<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
-<style type="text/css">
-  #mc_embed_signup{ clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;}
-</style>
-<div id="mc_embed_signup">
-  <form action="//zone.us16.list-manage.com/subscribe/post?u=343ee35d12246a68f6310af0c&amp;id=b0d2853531" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
-    <div id="mc_embed_signup_scroll">
-      <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
-        <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
-      <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_343ee35d12246a68f6310af0c_b0d2853531" tabindex="-1" value=""></div>
-      <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
-    </div>
-  </form>
-</div>
-<!--End mc_embed_signup-->
-
-</div>
-{:/nomarkdown}
-
 <div id="future-content">
 
 ## Upload your app
 
 ### Upload your _Debug_ app for testing
 
-Upload your app for testing via different beta distribution services.
+- [Build and upload your app for testing (with Testflight, Play Store Alpha and HockeyApp)](fastlane/build-and-upload-for-testing)
+   * [Setup iOS certificate handling with `match`](fastlane/setup-ios-certificate-handling)
+   * [Modify your Cordova iOS project to work with Fastlane](fastlane/modify-cordova-ios-project-for-fastlane)
+   * ~~[Manage Testflight testers with Fastlane's `pilot` and `boarding`](fastlane/manage-testflight-testers-with-fastlane)~~
+   * ~~[Handle version numbers automatically with Fastlane](fastlane/handle-version-numbers-automatically-with-fastlane)~~
+   * ~~[Automatically create changelog from Git commit messages](fastlane/automatically-create-changelogs-from-git-commit-messages)~~
+</div>
 
 - [Upload your app for testing (with HockeyApp or Testflight and Play Store Alpha)](fastlane/upload-for-testing.md)
 
 ### Publish your _Release_ app
 
-Upload your app to the app stores for release.
+- [Take screenshots of your Ionic app (iOS and Android) with Fastlane](fastlane/take-screenshots-of-your-cordova-app-with-fastlane)
+  - [iOS Screenshots with `snapshot`](fastlane/screenshots/cordova-ios-screenshots-with-snapshot)
+    - [UI Tests for your Cordova iOS app](fastlane/uitest-for-cordova-apps)
+  - [Android Screenshots with `screengrab`](fastlane/screenshots/cordova-android-screenshots-with-screengrab)
+    - [Instrumented (Espresso or UI Automator) tests for your Cordova Android app](fastlane/instrumented-espresso-or-ui-automator-tests-for-android-cordova-apps)
+
+<div id="future-content">
+
+   * [Upload your generated screenshots to the stores](fastlane/upload-generated-screenshots)
+   * ~~[Improve your Fastlane app screenshots by cleaning the status bar](fastlane/improve-generated-screenshots-by-cleaning-status-bar)~~
+   * ~~[Improve your Fastlane app screenshots by framing them with `frameit`](fastlane/improve-screenshots-by-framing-them)~~
 
 - [Publish your app for production release (to App Store and Google Play Store)](fastlane/publish-your-app.md)
 

diff --git a/_articles/fastlane/run-all-your-tests-with-scan.md b/_articles/fastlane/run-all-your-tests-with-scan.md
@@ -0,0 +1,5 @@
+---
+title: TODO
+---
+
+misnomer - tests for Cordova and Ionic iOS apps normally not written with UI Test
diff --git a/_articles/fastlane/screenshots/cordova-android-screenshots-with-screengrab.md b/_articles/fastlane/screenshots/cordova-android-screenshots-with-screengrab.md
@@ -0,0 +1,124 @@
+---
+title: 
+published: true
+date: 2017-08-29 16:00:00 +0000
+last_updated: ''
+parent: ['Ionic + Fastlane', '../fastlane']
+---
+# Fastlane + Ionic: Android Screenshots with `screengrab`
+
+For Android, you can use `fastlane screengrab` to create screenshots. It uses "UI Automator" and "Espresso" tests (or only "Espresso" for older versions) to drive the interactions in your app.
+
+## Installation and preparation
+
+- `fastlane screengrab init` - this creates a "Screengrabfile" you should customize (check `locales`)
+- Add a lane to Fastfile which calls `screengrab` to the `android` platform:
+
+```
+  lane :screenshots do
+    screengrab()
+  end
+```
+
+- Run that lane:
+  `bundle exec fastlane android screenshots`
+- Possible error messages:
+
+a)
+
+> There are no connected and authorized devices or emulators
+
+You need an active "device" (real or emulator) connected to your computer
+
+```
+- Just connect your Android device via USB
+- You might have to install emulators in Android Studio (AVD Manager), activate them by running a native Android demo project (create one in Studio) in them
+- Or you can use [Genymotion](TODO)
+```
+
+b)
+
+> The `adb` command could not be found on your PATH
+> Please ensure that the Android SDK is installed and the platform-tools directory is present and on your PATH
+
+You have to add Android SDK platform-tools to PATH: Add `export PATH="$PATH:/Users/sujan/Library/Android/sdk/platform-tools/"` to your `.bash_profile` and restart the terminal
+
+c)
+
+> The `aapt` command could not be found on your system, so your app APK could not be validated
+
+Fix by adding to your path `export PATH="$PATH:/Users/sujan/Library/Android/sdk/build-tools/26.0.1/"`
+
+- `bundle exec fastlane android screenshots`: Choose the one and only selectable APK as app and test (`ionic cordova build android` has to have been run before so an APK actually exists)
+  - If you have the app installed already, you might have to uninstall it first to get rid of another error
+
+
+- Add permissions to `app/src/debug/AndroidManifest.xml` (create the folder and file): https://docs.fastlane.tools/getting-started/android/screenshots/#configuring-your-manifest-permissions
+
+```
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="de.janpiotrowski.zaehlerstand"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <uses-permission android:name="android.permission.WAKE_LOCK" />
+    <uses-permission android:name="android.permission.DISABLE_KEYGUARD" />
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+    <uses-permission android:name="android.permission.CHANGE_CONFIGURATION" />
+
+</manifest>
+```
+
+This will be merged with your default `AndroidManifest.xml` created by Cordova from your `config.xml` file during the build.
+
+- Before we continue, lets get rid of the "Choose APK" step each time. Add this to your `Screengrabfile`:
+
+```
+app_apk_path 'platforms/android/build/outputs/apk/android-debug.apk'
+tests_apk_path 'platforms/android/build/outputs/apk/android-debug-androidTest.apk' TODO This can't exist here yet as there is not `androidTest` target yet afaik ( => run `gradlew assembleDebug assembleAndroidTest` to generate the file)
+```
+
+TODO fix paths for cordova-android 7+:
+```
+app_apk_path('platforms/android/app/build/outputs/apk/debug/app-debug.apk')
+tests_apk_path('platforms/android/app/build/outputs/apk/androidTest/debug/app-debug-androidTest.apk')
+```
+
+
+- Now only one error is left:
+
+> Make sure you've used Screengrab.screenshot() in your tests and that your expected tests are being run.
+
+That means we are now actually going to create some tests as the environment is ready.
+
+## Create the test that takes screenshots
+
+In Android Studio:
+
+- Run -> "Record Espresso Test". This creates a [basic JUnit 4 test class](https://developer.android.com/training/testing/start/index.html#junit), adds in some Espresso (UI Test) stuff and takes care of the imports (via messing with your build.gradle)
+  - Manually add assertion for Webview that won't work, but adds a nice delay thingie
+- Diamond Operator: https://stackoverflow.com/a/29432474/252627 Fix by making it explicit.
+- Add `Screengrab.screenshot("0_app-launch");` to test to trigger screenshot generation
+- Add `app/build-extras.gradle` with content
+
+```
+dependencies {
+	compile 'tools.fastlane:screengrab:1.0.0'
+}
+```
+TODO or actually:
+```
+dependencies {
+	androidTestCompile 'tools.fastlane:screengrab:1.0.0'
+}
+```
+
+- Add import `import tools.fastlane.screengrab.Screengrab;` to test file
+- Run the lane again to see if everything works and this one screenshot is successfully created!
+
+// TODO Find a way to fix compile/androidTestCompile foo: https://stackoverflow.com/questions/29687897/why-is-library-module-android-support-test-not-visible-in-add-dependency/33259738#33259738
+
+- Done.
+
+// TODO Link to Article about clean status bar
diff --git a/_articles/fastlane/screenshots/cordova-ios-screenshots-with-snapshot.md b/_articles/fastlane/screenshots/cordova-ios-screenshots-with-snapshot.md
@@ -0,0 +1,47 @@
+---
+title: 
+published: true
+date: 2017-08-29 16:00:00 +0000
+last_updated: ''
+parent: ['Ionic + Fastlane', '../fastlane']
+---
+# Fastlane + Ionic: iOS Screenshots with `snapshot`
+
+Using `fastlane snapshot`, the fastlane tool to create iOS screenshots, is a bit more complicated for Ionic apps than for normal iOS apps. Normally you "Add the ./SnapshotHelper.swift to your UI Test target" and then write **UITests** in your Xcode project. 
+
+But with Ionic/Cordova this of course would mean that this file, the adding of it and also the UITests itself would get lost on each new checkout or project regeneration of the Cordova iOS project.
+
+## `ionic_integration` plugin
+
+Lucky for us someone wrote a [nice fastlane plugin called `ionic_integration`](https://github.com/knocknarea/fastlane-plugin-ionic_integration) that works around this limitation: It places the required files and tests inside the `fastlane` folder and offers a fastlane action to "retrofit" these into the Xcode project. So when the project gets newly checked out or regenerated, you can just run that action to add the files back to your Cordova iOS project.
+
+## Steps to take screenshots
+
+* Start with `fastlane snapshot init` which creates a `Snapfile` in `/fastlane`.
+  ```
+  TODO Snapfile
+  ```
+* Uncomment some devices and add your supported languages. Also uncomment the `clear_previous_screenshots` line
+* Run `fastlane add_plugin ionic_integration` to install the plugin.
+* Execute `fastlane run ionic_ios_config_snapshot ionic_scheme_name:"ionic-screen-shots"` on the command line to trigger the file generation of the plugin at `fastlane/ionic/config/ios/ui-tests/ionic-screen-shots`. (This automatically retrofitted the files to your current Cordova Xcode project)
+* Open your Xcode project and the file `ionic-screen-shots/ui-snapshots.swift` (which is a generated file from the folder before, linked into your Xcode project)
+* Go into the `testSnapshots` method and write your UI tests (For now it should be enough to capture a screenshot of the app after it started - which the file does in its current state.)
+* Create a new lane in your `Fastfile` which contains the following call:
+  ```
+  snapshot(
+    output_simulator_logs: true,
+    reinstall_app: false,
+    erase_simulator: true,
+    scheme: "ionic-screen-shots"
+  )
+  ```
+  This executes the UITest on all devices in all languages defined in `Snapfile` and then saves these screenshots in the `fastlane/screenshots` folder.
+* Run `fastlane snapshot` to create te screenshots.
+* Another upload of metadata with `fastlane deliver` will use and upload these screenshots.
+
+
+## Write more UITest tests
+
+Writing stable UITest tests for your Cordova/Ionic app is a whole another topic and out of scope here. 
+
+TODO link to own article
diff --git a/...enshots/instrumented-espresso-or-ui-automator-tests-for-android-cordova-apps.md b/...enshots/instrumented-espresso-or-ui-automator-tests-for-android-cordova-apps.md
@@ -0,0 +1,38 @@
+---
+title: 
+published: true
+date: 2017-08-29 16:00:00 +0000
+last_updated: ''
+parent: ['Ionic + Fastlane', '../fastlane']
+---
+# Fastlane + Ionic: How to write instrumented (Espresso or UI Automator) tests for your Cordova Android app (to use with fastlane's `screengrab`)
+
+As usual navigating the WebView is a bit more difficult as the test frameworks are written to navigate native elements. Lucky for us the Android people were aware of this and created `espresso-web`.
+
+TODO Imports
+
+## Navigate the app by clicking/tapping on things
+
+TODO Navigate the page by finding an element and clicking on it
+
+## Select element by ID
+
+You might want to add `id` attributes to all your elements that should be clicked on.
+
+TODO example
+
+## Select element with XPath
+
+XPath is your friend. Right click the thing you want to find and inspect it. There you can right click on the underlying code any Copy -> Copy Xpath. This selector can directly be used in:
+
+TODO example
+
+## Wait
+
+Now if you do stuff that requires a screen to be in a specific state (like create screenshots, fill a form or similar) you might need to "wait" a bit for the Ionic app to catch up. Here you can just add a short `sleep`:
+
+```
+Thread.sleep(1500);
+```
+
+This sleeps for 1.5 seconds and then continues with the execution of the test.
diff --git a/_articles/fastlane/screenshots/uitest-for-cordova-apps.md b/_articles/fastlane/screenshots/uitest-for-cordova-apps.md
@@ -0,0 +1,39 @@
+---
+title: 
+published: true
+date: 2017-08-29 16:00:00 +0000
+last_updated: ''
+parent: ['Ionic + Fastlane', '../fastlane']
+---
+# Build UI Tests for your Cordova iOS app (to use with Fastlane's `snapshot`)
+
+General:
+https://stackoverflow.com/a/35455671/252627
+http://masilotti.com/ui-testing-cheat-sheet/
+http://samwize.com/2016/02/28/everything-about-xcode-ui-testing-snapshot/
+http://averagepro.com/2015/11/06/xctest-ui-testing-hints-and-tips/
+https://blog.metova.com/guide-xcode-ui-test/
+
+https://stackoverflow.com/a/33534187/252627
+best friend!
+
+https://tisunov.github.io/2015/11/06/automating-app-store-screenshots-generation-with-fastlane-snapshot-and-sketch.html
+
+Fastlane:
+http://samwize.com/2015/12/09/automate-screenshots-capture-using-snapshot-via-xcode-ui-testing/
+
+
+## Common Erros
+
+### Computed invalid hit point 
+
+```
+testSnapshots, UI Testing Failure - Computed invalid hit point (-1.3, -1.0) for Button 0x608000364bc0: traits: 8590065921, &#123;&#123;0.0, 639.0&#125;, &#123;1024.0, 61.3&#125;&#125;, label: 'trash Delete all data (Caution!)
+```
+https://stackoverflow.com/questions/40571744/xcode-ui-testing-failure-computed-invalid-hit-point
+
+### Failed to scroll to visible
+
+```
+testSnapshots, UI Testing Failure - Failed to scroll to visible (by AX action) Button 0x7c379850: traits: 8590065665, &#123;&#123;282.0, 26.0&#125;, &#123;33.0, 32.0&#125;&#125;, label: 'information circle', error: Error -25204 performing AXAction 2003
+```
diff --git a/_articles/fastlane/take-screenshots-of-your-cordova-app-with-fastlane.md b/_articles/fastlane/take-screenshots-of-your-cordova-app-with-fastlane.md
@@ -0,0 +1,40 @@
+---
+title: 
+published: true
+date: 2017-08-29 16:00:00 +0000
+last_updated: ''
+parent: ['Ionic + Fastlane', '../fastlane']
+---
+# Take screenshots of your Cordova (or Ionic) apps with Fastlane
+
+When you first published an app, you probably just took some screenshots on your test devices or simulators and uploaded them manually to the App Store or Play Store. Taking 3 screenshots on a hand full of devices is not that big a deal. But for a professional app, this number can increase exponentially. You have to take screenshots of:
+
+* many different *screens*
+* the app in different *languages*: EN, ES, DE, CN, ...
+* multiple *device categories*: Smartphone, Tablet, Watch, TV
+* different *devices*: iPhone 5, iPhone 6, iPhone 6 Pro, ...
+* multiple *operating systems*: iOS and Android
+
+What took a few minutes before, now can take hours or even days: 5 screens × 20 languages × 5 devices × 2 operating systems = 1000 screenshots!
+
+Add to that the complexity of it all: Switching between devices and simulators or changing the device language is cumbersome and complicated. If the app is not just a number of simple output screens but requires input or extensive usage to reach a specific state that should be screenshotted, you have to do that over and over again. A bug is discovered on one of the captured screens? You have to start from the beginning once more.
+
+It also gets harder to keep track of all the files and manage them. Uploading the finished screenshots takes longer and longer as well and requires using the Store's UI for hours. Maybe you have a poor intern for such work, but usually it's the developer's to take care of this.
+
+The solution of course is to **automate the screenshot creation** and **upload process** with _fastlane_.
+
+## Create Screenshots and add to metadata
+
+For normal iOS and Android apps fastlane offers two actions to create screenshots: [`capture_ios_screenshots`](https://docs.fastlane.tools/actions/capture_ios_screenshots/) and [`capture_android_screenshots`](https://docs.fastlane.tools/actions/capture_android_screenshots/). To a) enable the taking of screenshots and b) the definition of steps to run and screenshots to take both of these actions unfortunately require manual modifications in your native projects - [which is discouraged for Cordova/Ionic projects as those can be regenerated](problems-with-using-fastlane-for-ionic.md#cordova-native-projects-are-generated).
+
+To help with this problem I created the [`cordova_screenshots` fastlane plugin](https://github.com/janpio/fastlane-plugin-cordova_screenshots). This plugins "extracts" the 
+
+
+* [Create iOS Screenshots with `snapshot`](screenshots/cordova-ios-screenshots-with-snapshot.md)
+* [Create Android Screenshots with `screengrab`](screenshots/cordova-android-screenshots-with-screengrab.md)
+
+
+
+### Upload screenshots
+
+Run `fastlane supply` and `fastlane deliver` to update your apps with the screenshots which are now included in the metadata folders. Check both stores if the upload worked.