7. 7
Visual Studio Mobile Center にログインしました。今回のハンズオン用のアプリケーションの設定を行います。
1. 表示されている [username] の値を記録します。
2. [Choose username] をクリックします。
3. [Add new app] をクリックします。
Visual Studio Mobile Center のアカウント作成 (3)
32
1
8. 8
1. [Name] には、[AndroidDemo] と入力します。
2. [OS] には、[Android] を選択します。
3. [Platform] には、[Xamarin] を選択します。
4. [Add new app] をクリックします。
Visual Studio Mobile Center のアカウント作成 (4)
1
2
3
4
54. 54
Visual Studio Team Services のソースコードを Visual Studio Mobile Center でビルドして成果物をダウンロードします。
1. ブラウザーで Visual Studio Mobile Center の画面に移動します。[Build] をクリックします。
2. 連携するコースコード管理サービスを選択します。[Visual Studio Team Services] をクリックします。
Visual Studio Mobile Center でビルド (1)
2
1
55. 55
Visual Studio Mobile Center から Visual Studio Team Services へのアクセス承認画面が表示されます。
1. [承認] をクリックします。
Visual Studio Mobile Center でビルド (2)
1
74. 74
作成した UI テストを Visual Studio Mobile Center 上で実行します。
1. 26行目のコメントアウトします。
2. [すべて保存] アイコンをクリックして、ソースコードを保存します。
Visual Studio Mobile Center での UI テストの実行 (1)
2
1
75. 75
作成した UI テストを Visual Studio Mobile Center 上で実行できるようにパッケージをアップグレードします。
1. Visual Studio のメニュー [ツール] – [NuGet パッケージマネージャ] – [ソリューションの NuGet パッケージの管理]
の順にクリックします。
Visual Studio Mobile Center での UI テストの実行 (2)
1
77. 77
1. Visual Studio のメニュー [ビルド] – [ソリューションのビルド] の順にクリックして、ビルドを実行します。
Visual Studio Mobile Center 上で UI テスト実行設定を行います。
2. ブラウザーで Visual Studio Mobile Center にアクセスし、[Test アイコン] をクリックします。
3. [Start testing your app] をクリックして、UI テストを有効化します。
Visual Studio Mobile Center での UI テストの実行 (4)
1
2
3
79. 79
1. Android 6.0.1 OS のデバイスを 3 つ選択します。リストの上から 3 つ選択するとテスト実行時間の待ち時間が増える
場合があります。
2. [Select 3 devices] をクリックします。
Visual Studio Mobile Center での UI テストの実行 (6)
1
2
80. 80
1. [System launguage] は [Japanese (Japan)] を選択します。
2. [Test framework] は、[Xamarin.UITest] をチェックします。
3. [Next] をクリックします。
Visual Studio Mobile Center での UI テストの実行 (7)
1
2
3
81. 81
Visual Studio Mobile Center での UI テストの実行手順の記載があることを確認します。
1. [Running tests] の [copy to clipcoard] をクリックしてコピーして、メモ帳などに貼り付けします。
2. [Done] をクリックします。
Visual Studio Mobile Center での UI テストの実行 (8)
1
2
82. 82
1. Node.js をインストールします。 https://nodejs.org/ja/download/ にアクセスして [Windows Installer] をクリッ
クし、Node.js インストーラーをダウンロードします。
Visual Studio Mobile Center での UI テストの実行 (9)
1
83. 83
1. ダウンロードした Node.js インストーラーをダブルクリックします。
2. Node.js のインストールウイザードに従って Node.js のインストールを
実施します。
Visual Studio Mobile Center での UI テストの実行 (10)
1
2-1 2-2 2-3
2-4 2-5 2-6
84. 84
1. Mobile Center CLI をインストールします。Windows の検索ボックスで [cmd] と入力します。
2. 検索結果から [コマンドプロンプト] をクリックします。
3. コマンドプロンプト上で [npm install -g mobile-center-cli] と入力してから [Enter キー] を押して、Mobile
Center CLI をインストールします。
Visual Studio Mobile Center での UI テストの実行 (11)
2
1
85. 85
Mobile Center CLI から ログインコマンドを実行します。
1. コマンドプロンプト上で [mobile-center login] と入力してから [Enter キー] を押します。
2. ブラウザーが開いてアクセスコードが表示されます。[コピーアイコン] をクリックしてアクセスコードをコピーします。
3. コマンドプロンプト上でアクセスコード貼り付けしてから [Enter キー] を押します。
4. [Loogin in as [ユーザー名]] と表示されていることを確認します。
Visual Studio Mobile Center での UI テストの実行 (12)
1
3
2
4
86. 86
Mobile Center CLI から UI テストを実行します。
1. コマンドプロンプト上で [cd SourceRepos] と入力してから [Enter キー] を押し、プロジェクトフォルダーに移動
します。
2. 先ほどコピーした mobile-center コマンドを実行します。
• [pathToFile.apk] は、[C:Users(ユーザー名)DesktopApp1.App1.apk] と置き換えます。
• [pathToUITestBuildDir] は、[UITest1UITest1binDebug] と置き換えます。
3. 10 分程度待つとテストが終了します。今回は失敗していることを確認します。
Visual Studio Mobile Center での UI テストの実行 (13)
1
2
3
実行に 約 10 分かかります。
先にスライド 92 以降を進めてください。
87. 87
1. UI テスト結果を確認します。ブラウザーで Visual Studio Mobile Center にアクセスし、[Test] をクリックします。
2. 先ほどコマンドラインで実行した UI テストの結果が表示されています。クリックします。
Visual Studio Mobile Center での UI テストの実行 (14)
1
2
92. 92
Visual Studio Mobile Center では、成果物をユーザーに配布することも行えます。
1. ブラウザーで Visual Studio Mobile Center にアクセスし、[Distribute アイコン] をクリックします。
2. [Distribute new release] をクリックします。
ユーザーへの配布 (1)
1
2