tafuji's blog

C#, Xamarin, Azure DevOps を中心に書いています。

.NET MAUI の UI Test

はじめに

この記事は、.NET MAUI Advent Calendar 2023 の 23日目の記事です。 今回は、.NET MAUI の UI テストの方法について調べたことを書きます。

.NET MAUI の UI テスト方法

二つの方法があるようです。

  • Xamarin.UITest を利用する方法
  • Appium と NUnit を使う方法

Xamarin.UITest を利用する方法

Xamarin のときに提供されていたテストツールです。

.NET MAUI でも動くのか疑問に思ったのですが、GitHub 上にサンプルがありました。 また、Xamarin.UITest の NuGet を確認すると、.NET 6 移行となっているので、利用できそうです。

テストを書く方法ですが、UI テストで操作するコントロールに、 AutomationId を付与し、その値を利用して UI のコントロールを操作することになります。 操作したコントロールに表示された値が正しいかなどを検証するテストフレームワークには、 サンプルでは NUnit が利用されていました。

以下は、サンプルのサイトから抜粋したコードです。

            <Button
                x:Name="CounterBtn"
                Text="Click me"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center"
                AutomationId="IncrementButton" />

Xamarin.UITest を利用して、Xamarin.Forms のコントロールを操作する方法については、過去にこんな記事を書いています。 .NET MAUI のコントロールの場合には、やり方が異なってくるかもしれませんが、参考になれば幸いです。

Appium と NUnit を使う方法

Microsoft Learn のサイトで最近見つけた記事です。 Xamarin.UITest でできなかった、Windows アプリのテストができるということなので、動作させようとしましたが、動きませんでした。 このあたりと関係しそうですが、色々試してみましたが、ダメでした。

Xamairn.UITest と同じように UI テストで操作するコントロールに、 AutomationId を付与して、UI 操作を行うテストコードを書く必要があります。

以下は、サンプルからのコードの抜粋です。

            <Button
                x:Name="CounterBtn"
                AutomationId="CounterBtn"
                Text="Click me"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center" />

ただし、UI コントロールを操作するコードには、 Appium のライブラリを利用する必要があります。

public abstract class BaseTest
{
    protected AppiumDriver App => AppiumSetup.App;

    // This could also be an extension method to AppiumDriver if you prefer
    protected AppiumElement FindUIElement(string id)
    {
        if (App is WindowsDriver)
        {
            return App.FindElement(MobileBy.AccessibilityId(id));
        }

        return App.FindElement(MobileBy.Id(id));
    }
}

コントロールに表示された値などの検証には、サンプルでは NUnit が利用されていました。

おわりに

今回は、.NET MAUI の UI テスト方法について調べたことを、ざっくりと記事にしました。 深い検証や実験まではまだできていないので、時間のあるときに試したみたいと思います。

.NET MAUI で AdMob を利用する方法

はじめに

この記事は、.NET MAUI Advent Calendar 2022 の 23日目の記事です。 今回は、.NET MAUI で AdMob の広告を表示する方法について書きたいと思います。

AdMob を利用する方法

Plugin.MauiMTAdmob のインストールと設定

AdMob を簡単に利用するためのライブラリに、Plugin.MauiMTAdmob があります. これをプロジェクトにインストールしてください。

nuget-install

Android プラットフォームの場合は、以下の設定を行う必要があります。

  • プロジェクトに Dependencies という名前でフォルダを追加する
  • user-messaging-platform-2.0.0.aar ファイルを MauiMTAdmob sample repository からダウンロードする
  • ダウンロードしたファイルを Dependencies フォルダにコピーする

dependencied folder

  • プロジェクトファイルに以下の設定を追加する
<ItemGroup Condition="'$(TargetFramework)' == 'net6.0-android'">
    <AndroidLibrary Include="Dependencies\user-messaging-platform-2.0.0.aar" Bind="false" />
</ItemGroup>
  • Android manifest ファイルに <meta-data ... /> の設定を追加する
<application android:allowBackup="true" 
             android:icon="@mipmap/appicon"
             android:roundIcon="@mipmap/appicon_round"
             android:supportsRtl="true">
    <meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" 
               android:value="ca-app-xxxxxxxxxxx" />
</application>

iOS プロジェクトの場合は、 info.plist ファイルに以下の設定を追加する必要があります。

<key>GADApplicationIdentifier</key>
<string>AdMob の APP ID</string>
<key>GADIsAdManagerApp</key>
<true/>

AdMob の広告をバナー表示するサンプル

UseMauiMTAdmob() メソッドを利用して、初期化処理を追加します。 以下は、サンプルです。

using Plugin.MauiMTAdmob;

public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
    builder
        .UseMauiApp<App>()
        .UseMauiMTAdmob()
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
        });

    return builder.Build();
}

Android プラットフォームの初期化処理を追加します。MainActivity クラスに初期化処理を追加してください。

public class MainActivity : MauiAppCompatActivity
{
    protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        MobileAds.Initialize(this);
    }
}

iOS プラットフォームの初期化処理を追加します。AppDelegate クラスに初期化処理を追加してください。

[Register("AppDelegate")]
public class AppDelegate : MauiUIApplicationDelegate
{
    protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();

    public override bool FinishedLaunching(UIApplication application, NSDictionary launchOptions)
    {
        MobileAds.SharedInstance.Start(CompletionHandler);
        return base.FinishedLaunching(application, launchOptions);
    }

    private void CompletionHandler(InitializationStatus status) { }
}

広告を表示したい画面の XAML に、ユーザーコントロールを追加してください。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:ads="clr-namespace:Plugin.MauiMTAdmob.Controls;assembly=Plugin.MauiMTAdmob"
             x:Class="SampleMMTAdmob.MainPage">

    <StackLayout>
        <ads:MTAdView
            x:Name="myAds"
            AdsId="ca-app-pub-xxxxxxxxx"
            AdSize="AnchoredAdaptive"
            IsVisible="true"/>
    </StackLayout>
</ContentPage>

まとめ

  • Plugin.MauiMTAdmob を利用すると、.NET MAUI で AdMob の広告を簡単に表示することができる
  • Plugin.MauiMTAdmob には、ユーザーコントロールが提供されていて、XAMK 上に <ads:MTAdView AdsId="xxxxxx" /> のようにコントロールを配置するだけで、広告を表示できる
  • Andorid / iOS プラットフォームで、設定を行う必要がある

Xamarin.Essentials から .NET MAUI Essentials へ

はじめに

この記事は、Xamarin / MAUI Advent Calendar 2021 の 23日目の記事です。2019年の Xamarin Advent Calendar 2019 で 「Xamarin.Essentials 入門 - #1 Xamarin.Essentials とは」という記事で、Xamarin.Essentials を紹介しましたが、このアナウンスにあるように、.NET MAUI がリリースされるにあたり、Xamarin.Essentials も .NET MAUI Essentials に移行されるようです。今回の記事は、.NET MAUI Essentials について少し書いてみようと思います。

.NET MAUI Essentials を利用する

.NET MAUI はまだ Preview リリースの段階ですので、Microsoft Visual Studio Enterprise 2022 17.1.0 Preview 1.1 を利用して書いています。.NET MAUI Essentials は、Xamarin.Essentials と違って、NuGet からパッケージを直接追加できないようになっています。利用するには、プロジェクトファイルに設定を追加する必要があります。

.NET MAUI プロジェクトから利用する

.NET MAUI プロジェクト(.NET MAUI App, .NET MAUI Blazor App, .NET MAUI Class Library)では、デフォルトで .NET MAUI Essentials を利用するための設定がプロジェクトファイルに指定されています。<UseMaui>true</UseMaui> の部分がそれに相当します。

<Project Sdk="Microsoft.NET.Sdk">
    <PropertyGroup>
        <!-- 省略-->
        <UseMaui>true</UseMaui>
        <!-- 省略-->

.NET 6 Android / iOS プロジェクトから利用する

.NET 6 の Andorid / iOS プロジェクトから .NET MAUI Essentials を利用する場合には、プロジェクトファイルに設定を追加する必要があります。こちらの Blog では、<UsingMauiEssentials>true</UsingMauiEssentials> という設定を .NET 6 の Android / iOS プロジェクトに追加すればよいと書かれていましたが、Microsoft Visual Studio Enterprise 2022 17.1.0 Preview 1.1 では、利用できませんでした。

いろいろと調べた結果、プロジェクトファイルに、<UseMauiEssentials>true</UseMauiEssentials> を追加することで、.NET MAUI Essentials を .NET 6 の Andorid / iOS プロジェクトから利用できるようになりました。このあたりの設定値は、リリースされるまでに変わる可能性がありますね。

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <!-- 省略-->
    <!-- この設定では、利用できなかった
        <UsingMauiEssentials>true</UsingMauiEssentials>
    -->
    <UseMauiEssentials>true</UseMauiEssentials>
  </PropertyGroup>
</Project>

.NET MAUI Essentials のソースコード

.NET MAUI Essentials のソースコードは、dotnet/mauiリポジトリに組み込まれていて、 ここで確認することができます。

プロジェクトファイルのこのあたりを確認してみると、<TargetFrameworks> で指定する値は .NET 6 でかわるものの、ターゲットフレームワークごとにビルド対象になるソースコードを指定しているようで、このあたりは Xamarin.Essentials のときと変わらないようです。

  <ItemGroup Condition=" '$(TargetPlatformIdentifier)' == 'android' ">
    <Compile Include="**\*.android.cs" Exclude="$(DefaultItemExcludes);$(DefaultExcludesInProjectFolder)" />
    <Compile Include="**\*.android.*.cs" Exclude="$(DefaultItemExcludes);$(DefaultExcludesInProjectFolder)" />
    <AndroidResource Include="Resources\xml\*.xml" />
    <PackageReference Include="Xamarin.AndroidX.Browser" />
    <PackageReference Include="Xamarin.AndroidX.Security.SecurityCrypto" />
    <PackageReference Include="Xamarin.Google.Crypto.Tink.Android" />
  </ItemGroup>

実際、Preferences のコードを確認してみても、Xamarin.Essentials のころと特に変わりはなさそうです。

Preferences

ただ、.NET MAUI Essentials には、SemanticScreenReader というクラスがリポジトリに追加されているので、新機能のウオッチには .NET MAUI Essentials のリポジトリを見ていく必要がありそうです。

まとめ

  • Xamarin.Essentials は、 .NET MAUI Essentials に変わる
  • Xamarin.Essentials のサポート期間は、Xamarn.Forms と同じで、今後、新規機能は、.NET MAUI Essentials に追加されていくとのこと
  • .NET MAUI Essentials のソースコードは、GitHub に公開されており、Xamarin.Essentials の時と同じように Pull Request も受け付ける
  • .NET MAUI Essentials は NuGet では公開されないようで、利用するには、プロジェクトファイルの設定を修正する必要がある
    • .NET MAUI プロジェクトの場合は、<UseMaui>true</UseMaui> の設定が既定で追加されているので、何もしなくても .NET MAUI Essentials を利用できる
    • .NET 6 の Android / iOS プロジェクトの場合は、プロジェクトファイルに <UseMauiEssentials>true</UseMauiEssentials> を追加すればよい

参考資料