Use BrowserStack App Automate with Appium UI Tests for .NET MAUI Apps

[.Net]

This is a continuation of the sample .NET MAUI – UI testing with Appium and NUnit created as part of Gerald’s blog Getting started with UI testing .NET MAUI apps using Appium.

In this blog, we will see how to use BrowserStack App Automate to run the previously written tests in the cloud on real devices!

This blog provides a guide on setting up BrowserStack with your existing Appium user-interface (UI) tests of your .NET MAUI apps, and we will also see how to setup a continuous integration (CI)/continuous delivery (CD) pipeline to run these tests in an automated fashion.

What is BrowserStack App Automate?

BrowserStack’s App Automate lets you test your native and hybrid apps on a variety of mobile and tablet devices. The devices you access are all real, physical devices housed in their data centers.

• Run tests on 2000+ real iOS and Android devicesApp Automate gives you instant access to 2000+ real iOS and Android devices, with varying OS versions and form factors in the cloud, thereby reducing the cost of building and managing an in-house lab. You can test your app under real-world conditions and identify issues that might not appear in emulators or simulators.
• Run test suites on BrowserStack in minutesUse the BrowserStack SDK that allows you to integrate your test suites with App Automate in minutes. Simply install the SDK, set up a YAML file, and trigger your tests to get started. You can also leverage features like parallel orchestration and local testing with ease using the SDK. All this, with no code changes!
• Test apps in real-world user conditionsBrowserStack lets you test the behavior of your app on different devices under different network conditions. App Automate offers several presets also lets you define your own custom network conditions to check your app’s behavior. You can also change the network conditions mid-way during the test run, just like in real world where the end-user’s network varies.

Steps to Add BrowserStack to Existing Appium UITests

If you already have Appium UI tests written for your .NET MAUI App, the following steps show you how to run these tests on the devices in the cloud provided by BrowserStack App Automate.

To follow along with this blog, you can refer to this repository with sample code.

Note: BrowserStack only supports .NET 8 at the moment, the BrowserStack Documentation lists all the prerequisites. BrowserStack App Automate Appium + NUnit Prerequisite

In order to be able to run your .NET MAUI iOS and Android UI tests with BrowserStack, follow these steps:

1. Sign Up for BrowserStack:
   • Create an account on BrowserStack, a free trial to get started is available.
   • Find pricing details for BrowserStack Subscriptions here.
2. Create BrowserStack Credentials:
   • Obtain your BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY from the BrowserStack account settings.

   Note: BrowserStack App Automate Device Cloud supports only iOS and Android devices at the moment, so that is the focus of this blog post. BrowserStack App Automate Device List

3. Android and iOS BrowserStack Configuration Files:
   • The repository includes BrowserStack configuration files for both Android and iOS projects. These files define the specific settings and capabilities required to run the tests on BrowserStack.

   The browserstack.yml file for the Android project can be found at BasicAppiumNunitSample/UITests.Android/browserstack.yml and the browserstack.yml file for the iOS project can be found at BasicAppiumNunitSample/UITests.iOS/browserstack.yml.

   The configuration in these files should mostly be self-explanatory, but here are a few of the key parts in this configuration file:

   • userName & accessKey: These are your BrowserStack credentials. They can be hardcoded or set as environment variables/GitHub Action secrets.
   • automationName: Specifies the automation engine to be used. For iOS, use XCUITest and for Android use UIAutomator2.
   • appiumVersion: Specifies the version of Appium to use, this should match the version of Appium used in the UITests.
   • app: Path to the iOS app (IPA) or Android app (APK) to be tested. For .NET MAUI Apps, if the app is built part of an automated pipeline, you can add the path to the publish folder here. For example: ./MauiApp/bin/Release/net8.0-android/publish/com.companyname.basicappiumsample-Signed.apk
   • browserstackLocal: Set to false to run on BrowserStack App Automate, which runs the tests on the selected devices on the Device Cloud. This setting is mostly for web-based solutions and therefore should always be false for .NET MAUI apps.

   The configuration of the test devices to be used is determined by so-called capabilities. This ranges from the operating system version to be used, to what logs should be captured, and many more device specific features like enabling Apple Pay, simulating a geolocation coordinate, etc.

   To help you configure these capabilities, BrowserStack also has a really great Capability Generator Tool that walks you through generating the browserstack.yml file. After that, you can simply copy the generated file from the tool into your repo.

   For more details on configuring BrowserStack for Android and iOS for Appium + NUnit Tests, refer to the BrowserStack Documentation.

4. Update UITest Projects to Use BrowserStack:
   • Add the browserstack.yml files that you have just created/generated for each platform to the respective UITests.Android and UITests.iOS folders. You will need to use separate browserstack.yml files for each platform. Just place the file in the root folder for each test project.
   • To the respective UITests.Android and UITests.iOS projects, add the BrowserStack.TestAdapter nuget package.

     <PackageReference Include="BrowserStack.TestAdapter" Version="0.13.3" />

5. Run BrowserStack App Automate Tests from Local Machine:
   • Follow the informative Documentation provided by BrowserStack to run the tests from your local machine. The tests can be run from Visual Studio on Windows or by BrowserStack CLI for Mac.
6. Run BrowserStack App Automate Tests in CI/CD Workflow:
   • For Azure DevOps Pipelines, the steps can be found in the BrowserStack Documentation. To setup the GitHub Actions Workflow to run the BrowserStack App Automate Test as part of your CI/CD Automation, follow the next section of this blog.

GitHub Actions Workflow

The GitHub Actions workflow file .github/workflows/browserStackTests.yml is set up to run the UI Tests on BrowserStack for both iOS and Android platforms. For details on the steps that build the .NET MAUI App, you can read this blog Getting Started with DevOps and .NET MAUI, this section will focus specifically on the steps to run the tests on BrowserStack App Automate.

Prerequisites for GitHub Actions You should set your BrowserStack Username and Access Key as GitHub Action Secrets, i.e. BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY respectively.

Store Credentials as GitHub Secrets:

• Go to your GitHub repository.
• Navigate to Settings > Secrets and variables > Actions.
• Add two new secrets: BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY.

Let’s look at some of the important steps in the GitHub Actions pipeline, which sets up the workflow to run the tests in BrowserStack App Automate.

• Install Appium: Installs Appium and the XCUITest or UIAutomator2 driver respectively per platform. These are needed to perform the interactions with the running application. The driver knows how to perform a click, or scroll or switch the device to dark theme, for instance.

  npm install -g appium
  
  # For Android
  appium driver install uiautomator2
  
  # For iOS
  appium driver install xcuitest

• For Mac Runners with Apple Silicon Chips Only: When using a Mac Runner with Apple Silicon processor, we need the following extra step that installs the BrowserStack SDK .NET tool and sets it up.

  dotnet tool install browserstack-sdk --version 1.16.3 --create-manifest-if-needed
  dotnet browserstack-sdk setup-dotnet --dotnet-path "." --dotnet-version "8.0.403" --yes

  BrowserStack CLI Docs Step 3: [Only for Macs with Apple Silicon] Install dotnet x64 on MacOS

• Build Appium BrowserStack Tests: Builds the Appium tests for Android or iOS project.

  # For Android
  dotnet build BasicAppiumNunitSample/UITests.Android/UITests.Android.csproj
  
  # For iOS
  dotnet build BasicAppiumNunitSample/UITests.iOS/UITests.iOS.csproj

• Run Appium BrowserStack Tests: Runs the Appium tests on BrowserStack.

  # For Android
  dotnet test BasicAppiumNunitSample/UITests.Android/UITests.Android.csproj
  
  # For iOS
  ./dotnet test BasicAppiumNunitSample/UITests.iOS/UITests.iOS.csproj

BrowserStack Test Reports and Dashboard

When you run your tests on BrowserStack, detailed test reports are generated. These reports include information such as test execution logs, screenshots, and even videos of the test runs and more. You can access these reports through the BrowserStack Dashboard.

BrowserStack App Automate Dashboard

The BrowserStack App Automate Dashboard provides detailed and comprehensive overview of the test execution. Alternatively, if you need to integrate with your own custom dashboard, you can use the REST API provided by BrowserStack.

Some highlights of the App Automate test report includes:

• Session Video: Captures the recording of the test as it happens in the session. Use this recording to go at a precise point in time when an error occurred and debug.

• Logs tab: Select Text Logs, Console Logs, or Screenshots tab to view detailed logs. The Logs also include Appium Logs and Network Logs!

Summary

This blog demonstrates how to integrate BrowserStack App Automate with Appium NUnit tests for .NET MAUI applications. It provides this sample code to show how to run BrowserStack App Automate with your existing Appium UI Tests and explains the GitHub Actions workflow used in this repository.

UITesting is crucial for ensuring that your application behaves as expected from the user’s perspective. Running tests on real devices, as opposed to emulators or simulators, helps identify issues that might only appear under real-world conditions, such as different network environments, device-specific quirks, and actual user interactions. BrowserStack App Automate is a service that makes it easy to run your existing Appium NUnit tests on their App Automate Device Cloud.

Check out the more samples at dotnet/maui-samples. Please let us know if anything is unclear or what you would like to see in follow up posts.

The post Use BrowserStack App Automate with Appium UI Tests for .NET MAUI Apps appeared first on .NET Blog.

View the full article