Menguji aplikasi WinUI yang dibuat dengan SDK Aplikasi Windows

Dalam topik ini kami memberikan beberapa rekomendasi tentang cara menguji dan memvalidasi fungsionalitas dalam aplikasi yang dibuat dengan fitur antarmuka pengguna (UI) SDK Aplikasi Windows menggunakan WinUI 3 antarmuka pengguna (UI). Pengujian adalah bagian penting dari proses pengembangan aplikasi—ini membantu Anda menangkap bug lebih awal, menjaga kualitas kode, dan memastikan pengalaman pengguna yang andal saat aplikasi Anda berkembang. Dengan menggabungkan pengujian unit ke dalam alur kerja Anda, Anda dapat dengan yakin merefaktor kode, menambahkan fitur baru, dan mengirim pembaruan yang mengetahui bahwa fungsionalitas yang ada terus berfungsi seperti yang diharapkan.

Tutorial: Membuat proyek pengujian unit WinUI 3.

Sebagian besar jenis objek di bawah namespace Microsoft.UI.Xaml harus digunakan dari utas UI dalam proses aplikasi XAML. (Untuk detail tentang menguji aplikasi yang dibuat dengan SDK Aplikasi Windows yang tidak menggunakan WinUI 3, lihat bagian berikut, Testing fungsionalitas non-WinUI.)

Nota

Sebaiknya Anda merefaktor kode apa pun untuk diuji dengan memindahkannya dari proyek aplikasi utama dan menempatkannya ke dalam proyek library. Proyek aplikasi dan proyek pengujian unit Anda kemudian dapat mereferensikan proyek pustaka tersebut. Bagian ini menjelaskan cara membuat pengujian unit untuk aplikasi WinUI 3 di Visual Studio menggunakan templat proyek pengujian unit bawaan.

Nota

Aplikasi pengujian unit yang dijelaskan di sini ditulis dalam konteks aplikasi WinUI 3. Ini diperlukan untuk setiap pengujian yang menjalankan kode yang memerlukan runtime XAML. Proyek ini akan membuat UI Thread XAML dan menjalankan pengujian.

Dalam tutorial ini, Anda akan belajar cara:

  • Buat proyek WinUI Unit Test App di Visual Studio.
  • Gunakan Visual Studio Test Explorer.
  • Tambahkan proyek Pustaka Kelas WinUI untuk pengujian.
  • Jalankan pengujian dengan Visual Studio Test Explorer.

Prasyarat

Anda harus memiliki Visual Studio diinstal dan disiapkan untuk pengembangan WinUI. Lihat Mulai cepat: Menyiapkan lingkungan Anda dan membuat proyek WinUI 3.

Buat proyek Aplikasi Uji Unit WinUI

Untuk memulai, buat proyek pengujian unit. Jenis proyek dilengkapi dengan semua file templat yang Anda butuhkan.

  1. Buka Visual Studio dan pilih Buat proyek baru di jendela Mulai.

    Screenshot jendela awal Visual Studio.

  2. Di jendela Buat proyek baru, filter proyek ke C#, Windows, dan WinUI, pilih templat WinUI Unit Test App, lalu pilih Baru

    Screenshot jendela 'Buat proyek baru' Visual Studio.

  3. [Opsional] Pada jendela Konfigurasikan proyek baru Anda, ubah Nama proyek, Nama solusi (hapus centang tempat solusi dan proyek di direktori yang sama) dan Lokasi proyek Anda.

  4. Pilih Buat.

Menjalankan pengujian dengan Test Explorer

Saat Anda membuat proyek pengujian, pengujian Anda muncul di Test Explorer, yang digunakan untuk menjalankan pengujian unit Anda. Anda juga dapat mengelompokkan pengujian ke dalam kategori, memfilter daftar pengujian, membuat, menyimpan, dan menjalankan daftar putar pengujian, pengujian unit debug, dan (di Visual Studio Enterprise) menganalisis cakupan kode.

File UnitTests.cs berisi kode sumber untuk pengujian unit yang digunakan oleh Test Explorer. Secara default, pengujian sampel dasar yang ditunjukkan di sini dibuat secara otomatis:

namespace WinUITest1
{
   [TestClass]
   public class UnitTest1
   {
      [TestMethod]
      public void TestMethod1()
      {
         Assert.AreEqual(0, 0);
      }

      // Use the UITestMethod attribute for tests that need to run on the UI thread.
      [UITestMethod]
      public void TestMethod2()
      {
         var grid = new Grid();
         Assert.AreEqual(0, grid.MinWidth);
      }
   }
}
  1. Jika Anda belum melakukannya, bangun solusi Anda. Ini akan memungkinkan Visual Studio untuk "menemukan" semua pengujian yang tersedia.

  2. Buka Test Explorer. Jika tidak terlihat, buka menu Uji , lalu pilih Test Explorer (atau tekan Ctrl + E, T).

    Screenshot menu Pengujian di Visual Studio.

  3. Lihat pengujian. Di jendela Test Explorer, perluas semua simpul (hanya tes sampel yang akan ada pada saat ini).

    Screenshot jendela Test Explorer di Visual Studio memperlihatkan sampel default tests.

  4. Jalankan pengujian.

    • Klik kanan pada simpul pengujian individual dan pilih Jalankan.
    • Pilih pengujian dan tekan tombol Putar atau tekan Ctrl + R, T.
    • Tekan tombol Jalankan Semua Pengujian Dalam Tampilan atau tekan Ctrl + R, V.

    Screenshot jendela Test Explorer di Visual Studio memperlihatkan menu konteks pengujian dengan perintah Jalankan disorot.

  5. Tinjau hasil. Setelah pengujian selesai, hasil ditampilkan di jendela Test Explorer .

    Screenshot jendela Test Explorer di Visual Studio memperlihatkan hasil uji coba.

Menambahkan proyek Pustaka Kelas untuk pengujian

  1. Tambahkan proyek baru ke solusi pengujian unit. Di Penjelajah Solusi, klik kanan solusi dan pilih Tambahkan -> Proyek Baru... .

    Screenshot menu konteks Solution dengan Add/New Project disorot di Visual Studio.

  2. Untuk contoh ini, tambahkan proyek pustaka kelas WinUI 3. Dari jendela Proyek Baru, filter menggunakan C#/Windows/WinUI dan pilih Pustaka Kelas WinUI.

    Cuplikan layar jendela Proyek Baru yang menyorot Library Kelas WinUI di Visual Studio.

  3. Pilih Berikutnya dan masukkan nama untuk proyek (untuk contoh ini kami gunakan WinUIClassLibrary1) dan tekan Buat.

    Cuplikan layar proyek 'Library Kelas WinUI' baru yang disorot dalam Penjelajah Solusi dan file Class1.cs terbuka di editor kode.

  4. Tambahkan sebuah UserControl baru ke proyek. Di Penjelajah Solusi, klik kanan pada proyek pustaka kelas WinUI 3 yang baru saja Anda tambahkan dan pilih Tambahkan -> Item Baru dari menu konteks.

    Screenshot dari menu konteks Solusi dengan Tambahkan Item Baru disorot di Visual Studio.

  5. Di jendela Tambahkan Item Baru , pilih simpul WinUI di daftar Item terinstal lalu pilih Kontrol Pengguna dari hasil. Beri nama kontrol UserControl1.

    Tangkapan layar dari jendela Tambahkan Item Baru dengan WinUI/Kontrol Pengguna (WinUI) yang disorot dalam Visual Studio.

  6. Buka file kode-balik UserControl1.xaml.cs. Untuk contoh ini, kami menambahkan metode publik baru yang disebut GetSeven hanya mengembalikan bilangan bulat.

    namespace WinUIClassLibrary1
    {
      public sealed partial class UserControl1 : UserControl
      {
         public UserControl1()
         {
             this.InitializeComponent();
         }
    
         public int GetSeven()
         {
             return 7;
         }
      }
    }
    
  7. Atur proyek Pustaka Kelas WinUI 3 sebagai dependensi proyek uji unit untuk memungkinkan penggunaan tipe dari proyek Pustaka Kelas WinUI 3. Di Penjelajah Solusi, di bawah proyek pustaka kelas, klik kanan pada Dependensi dan pilih Tambahkan Referensi Proyek.

    Screenshot menu konteks Ketergantungan dengan Tambah Referensi Proyek yang disorot di Visual Studio.

    WinUIClassLibrary1 Pilih item dari daftar Proyek.

    Cuplikan layar dialog Manajer Referensi dengan proyek 'WinUIClassLibrary1' dipilih.

  8. Buat metode pengujian baru di UnitTests.cs. Karena kasus pengujian ini memerlukan Thread UI XAML untuk dijalankan, tandai dengan atribut [UITestMethod] alih-alih aturan standar [TestMethod].

    [UITestMethod]
    public void TestUserControl1()
    {
       WinUIClassLibrary1.UserControl1 userControl1 = new WinUIClassLibrary1.UserControl1();
       Assert.AreEqual(7, userControl1.GetSeven());
    }
    

    Metode pengujian baru ini sekarang muncul di Test Explorer sebagai salah satu pengujian unit Anda.

    Screenshot jendela Test Explorer di Visual Studio memperlihatkan pengujian sampel default dengan unit test baru.

  9. Jalankan pengujian.

  • Klik kanan simpul pengujian baru dan pilih Jalankan.
  • Pilih pengujian baru dan tekan tombol Putar atau tekan Ctrl + R, T.
  • Tekan tombol Jalankan Semua Pengujian Dalam Tampilan atau tekan Ctrl + R, V.

Screenshot jendela Test Explorer di Visual Studio memperlihatkan pengujian yang telah selesai dari sampel pengujian default dan pengujian unit baru.

Menguji fungsionalitas non-WinUI

Dalam banyak kasus, aplikasi menyertakan fungsionalitas yang tidak bergantung pada jenis Microsoft.UI.Xaml tetapi masih memerlukan pengujian. Berbagai alat tersedia untuk menguji kode .NET, termasuk MSTest, NUnit dan xUnit. Untuk detail selengkapnya tentang pengujian aplikasi .NET, lihat Testing di .NET.

Di Visual Studio, Anda dapat membuat proyek baru untuk salah satu alat pengujian ini dengan mengklik kanan solusi Anda di Penjelajah Solusi, memilih Tambahkan -> Proyek Baru dari menu konteks, memilih C# dari bahasa Semua bahasa pemilih/Windows dari Semua bahasa pemilih/Test dari Semua jenis proyek pemilih, lalu pilih alat pengujian yang sesuai dari daftar (MSTest Test Project, NUnit Test Project atau xUnit Test Project).

Saat membuat proyek MSTest, NUnit, atau xUnit baru yang mereferensikan proyek WinUI 3, Anda harus:

  1. Perbarui TargetFramework di file .csproj dari proyek pengujian Anda. Nilai ini harus cocok dengan TargetFramework dalam proyek WinUI 3. Secara default, proyek MSTest, NUnit dan xUnit menargetkan berbagai platform yang didukung oleh .NET, tetapi proyek WinUI 3 hanya mendukung Windows dan memiliki TargetFramework yang lebih spesifik.

    Misalnya, jika menargetkan .NET 8, perbarui TargetFramework proyek pengujian unit dari <TargetFramework>net8.0</TargetFramework> menjadi <TargetFramework>net8.0-windows10.0.19041.0</TargetFramework>.

  2. Perbarui RuntimeIdentifiers di proyek pengujian Anda.

    <RuntimeIdentifiers Condition="$([MSBuild]::GetTargetFrameworkVersion('$(TargetFramework)')) &gt;= 8">win-x86;win-x64;win-arm64</RuntimeIdentifiers>

    <RuntimeIdentifiers Condition="$([MSBuild]::GetTargetFrameworkVersion('$(TargetFramework)')) &lt; 8">win10-x86;win10-x64;win10-arm64</RuntimeIdentifiers>

  3. Tambahkan properti berikut ke PropertyGroup dalam file .csproj proyek pengujian Anda untuk memastikan bahwa pengujian memuat runtime SDK Aplikasi Windows: <WindowsAppSdkBootstrapInitialize>true</WindowsAppSdkBootstrapInitialize>

  4. Pastikan bahwa runtime SDK Aplikasi Windows diinstal pada komputer yang menjalankan pengujian. Untuk informasi selengkapnya tentang penyebaran SDK Aplikasi Windows, lihat panduan penyebaran SDK Aplikasi Windows untuk aplikasi yang bergantung pada kerangka kerja yang dikemas dengan lokasi eksternal (atau tidak dikemas).

Otomatisasi pengujian UI

Untuk pengujian menyeluruh antarmuka pengguna aplikasi, Anda dapat menggunakan alat pengujian UI otomatis yang berinteraksi dengan aplikasi Anda seperti yang dilakukan pengguna—mengklik tombol, memasukkan teks, dan memverifikasi status visual.

Appium dengan WinAppDriver

WinAppDriver adalah alat Microsoft asli untuk pengujian otomatisasi UI Windows, tetapi tidak lagi dalam pengembangan aktif. Penerus yang direkomendasikan adalah Appium dengan plugin Driver Aplikasi Windows (appium-windows-driver). Appium menggunakan protokol WebDriver yang sama dan mendukung aplikasi desktop Windows melalui kerangka kerja Windows UI Automation.

Untuk menyiapkan Appium untuk aplikasi desktop WinUI 3:

Nota

Langkah-langkah ini memerlukan Node.js (disarankan LTS).

  1. Instal Appium: npm install -g appium
  2. Instal driver Windows:appium driver install windows
  3. Pastikan driver diinstal: appium driver list (harus ditampilkan windows sebagai terinstal)
  4. Mulai server Appium: appium
  5. Tulis pengujian menggunakan pustaka klien WebDriver (tersedia untuk C#, Python, Java, dan JavaScript).

Petunjuk / Saran

Atur kapabilitas app ke Application User Model ID (AUMID) aplikasi Anda untuk aplikasi yang dipaketkan, atau ke jalur file yang dapat dieksekusi untuk aplikasi yang tidak dipaketkan.

Accessibility Insights dan UI Automation

Accessibility Insights for Windows membantu Anda memeriksa dan memvalidasi pohon UI Automation aplikasi Anda. Elemen yang diekspos melalui UI Automation adalah elemen yang sama dengan yang berinteraksi dengan alat pengujian otomatis. Memastikan aplikasi Anda memiliki pohon otomatisasi terstruktur dengan baik meningkatkan aksesibilitas dan uji coba.

Microsoft Playwright (UI web di WebView2)

Jika aplikasi Anda menggunakan WebView2 untuk konten web, Anda dapat menggunakan Microsoft Playwright untuk menguji bagian web. Playwright mendukung pengujian browser otomatis dan dapat terhubung ke instans WebView2 untuk validasi skenario end-to-end.

Kualitas kode dan analisis statis

Alat analisis statis menangkap bug, masalah keamanan, dan masalah kualitas kode sebelum runtime. Integrasikan ini ke dalam alur kerja pengembangan dan alur CI Anda untuk kualitas yang konsisten.

penganalisis .NET (Roslyn)

Proyek .NET menyertakan analisator Roslyn bawaan yang memeriksa masalah ketepatan, kinerja, keandalan, dan keamanan. Untuk mengaktifkan semua aturan yang direkomendasikan dalam proyek Anda:

<PropertyGroup>
  <AnalysisLevel>latest-recommended</AnalysisLevel>
  <EnforceCodeStyleInBuild>true</EnforceCodeStyleInBuild>
</PropertyGroup>

Anda dapat mengonfigurasi tingkat keparahan aturan dalam .editorconfig file atau dengan menggunakan <NoWarn> dalam file proyek Anda. Untuk informasi selengkapnya, lihat Gambaran Umum analisis kode sumber .NET.

Analisis statis C++ (/analyze)

Untuk proyek C++ SDK Aplikasi Windows dan Win32, aktifkan analisis statis Microsoft dengan mengatur /analyze properti proyek anda atau MSBuild:

<PropertyGroup>
  <EnableMicrosoftCodeAnalysis>true</EnableMicrosoftCodeAnalysis>
  <CodeAnalysisRuleSet>CppCoreCheckRules.ruleset</CodeAnalysisRuleSet>
</PropertyGroup>

Pemeriksa Pedoman Inti C++ memberlakukan praktik terbaik C++ modern. Untuk pola penggunaan API Win32, anotasi SAL dan flag /analyze menandai masalah umum terkait siklus hidup, buffer, dan konkurensi.

Integrasi CI

Tambahkan analisis statis ke alur kerja CI Anda sehingga pemeriksaan kualitas kode berjalan pada setiap permintaan pull. Dalam alur kerja GitHub Actions:

    - name: Build with analysis
      run: dotnet build --configuration Release /p:AnalysisLevel=latest-recommended /p:TreatWarningsAsErrors=true

Untuk proyek C++ menggunakan MSBuild:

    - name: Build with /analyze
      run: msbuild MySolution.sln /p:Configuration=Release /p:EnableMicrosoftCodeAnalysis=true /p:RunCodeAnalysis=true

Telemetri dan pelaporan kerusakan

Mengumpulkan data telemetri dan crash dari produksi membantu Anda memahami performa aplikasi Anda di dunia nyata, mengidentifikasi regresi, dan memprioritaskan perbaikan.

Application Insights

Azure Application Insights menyediakan pelaporan crash, pemantauan performa, dan analitik penggunaan untuk aplikasi desktop. Untuk menambahkannya ke proyek SDK Aplikasi Windows:

Nota

Anda memerlukan langganan Azure dan sumber daya Application Insights. Lihat Membuat sumber daya Application Insights untuk mendapatkan string koneksi Anda.

  1. Instal paket NuGet: Microsoft.ApplicationInsights
  2. Menginisialisasi TelemetryClient di startup aplikasi Anda dengan string koneksi
  3. Melacak pengecualian, peristiwa, dan tampilan halaman

Untuk petunjuk penyiapan terperinci, lihat Application Insights untuk konsol .NET dan aplikasi desktop.

OpenTelemetry

OpenTelemetry adalah standar vendor netral untuk mengumpulkan log, metrik, dan jejak terdistribusi. SDK OpenTelemetry .NET terintegrasi dengan Azure Monitor dan backend lainnya.

Instal paket yang diperlukan:

dotnet add package OpenTelemetry
dotnet add package Azure.Monitor.OpenTelemetry.Exporter

Kemudian konfigurasikan penyedia pelacak:

var activitySource = new System.Diagnostics.ActivitySource("MyApp");
// OpenTelemetry SDKs can listen to ActivitySource instances like this one.
using var activity = activitySource.StartActivity("Startup");
activity?.SetTag("app.version", "1.0.0");

OpenTelemetry adalah pendekatan yang direkomendasikan untuk proyek baru yang membutuhkan dukungan multi-backend atau pelacakan terdistribusi. Application Insights tetap menjadi pilihan yang baik jika Anda menggunakan Azure Monitor secara eksklusif dan menginginkan dasbor turnkey.

Pelaporan Kesalahan Windows (WER)

Untuk koleksi crash asli, Windows Pelaporan Kesalahan secara otomatis menangkap crash dump saat aplikasi Anda berakhir secara tak terduga. Aplikasi terpaket (MSIX) menampilkan data crash melalui laporan kualitas Partner Center. Untuk aplikasi organisasi (LOB), Anda dapat mengonfigurasi koleksi cadangan lokal WER untuk menyimpan minidump untuk analisis lokal.

Sumber daya tambahan