Test Automation with Xamarin.UITest for Mobile App Development

Automation testing for mobile applications can be very useful in many situations. For example, when we are going to test some features several times or when we have a very large project or even when we want to do a more interesting job and let to  the computer doing the 'boring tasks’.

Xamarin Test Cloud

With this in mind we can evaluate some tools available to make the automation process easier. In this post we are going to talk briefly about a new tool that makes automation testing possible for mobile app development even if you don’t have a whole lot of technical knowledge about mobile development itself.

When you have to test an Android or iOS mobile application, it could be very helpful to automate some tests in order to reduce time, effort and human error. There is a new tool called Xamarin.UITest, where you can write your code test and run it on your local devices at the same time on the cloud using AppCenter and have a visual description of every step that is executed.

 

Get Started

After you have defined all the tests that you want to automate, you can start writing your test cases, we’re going to create a blank xamarin forms project with a UITest solution.

 

First, We’re going to add two pages to our Xamarin.Forms project and a ViewModels for the page that would need some logics (New File > Forms).

 

Our Xamarin.Forms project would look like this (New File > General).

 

Then, on our native project, we’re going to add the following image to the appropriate resource path.

Image

 

Xamarin.png

 

Note: I highly recommended putting images into the Drawable or Mipmap folder for Android and Resources or Assets.xcassets folder on iOS.

For our two pages, we will add a simple login design, with some binding attributes to connect with the ViewModel.

 

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

            xmlns:ViewModels="clr-namespace:ATdemo.ViewModels"

            x:Class="ATdemo.Views.Login.LoginPage"

            AutomationId="LoginPage">

   <ContentPage.BindingContext>

       <ViewModels:LoginViewModel/>

   </ContentPage.BindingContext>

   <ContentPage.Content>

       <StackLayout VerticalOptions="Center"

                    HorizontalOptions="Center">

           <Image Source="Xamarin"

                  Aspect="AspectFit"

                  WidthRequest="100"

                  HeightRequest="100"/>

           <Entry HeightRequest="48"

                  WidthRequest="200"

                  Placeholder="Username"

                  AutomationId="UserEntry"

                  Text="{Binding Username, Mode = TwoWay}"/>

           <Entry IsPassword="true"

                  HeightRequest="48"

                  WidthRequest="200"

                  Placeholder="Password"

                  AutomationId="PassEntry"

                  Text="{Binding Password, Mode = TwoWay}"/>

           <Label TextColor="Red"

                  Text="{Binding ErrorMessage}">

               <Label.Triggers>

                   <DataTrigger TargetType="Label" Binding="{Binding ErrorMessage}" Value="">

                       <Setter Property="IsVisible" Value="false"/>                        

                   </DataTrigger>

               </Label.Triggers>

           </Label>

           <Button Text="Sign in"

                   CornerRadius="5"

                   TextColor="White"

                   WidthRequest="100"

                   HeightRequest="48"

                   HorizontalOptions="Center"

                   BackgroundColor="BurlyWood"

                   AutomationId="SignInButton"

                   Command="{Binding SignInCommand}"/>

       </StackLayout>

   </ContentPage.Content>

</ContentPage>

LoginPage.xaml


Our HomePage will have a simple message when the sign in process finish.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

            x:Class="ATdemo.Views.Home.HomePage"

            AutomationId="HomePage">

   <ContentPage.Content>

       <StackLayout>

           <Label

               Text="Successful login"

               HorizontalTextAlignment="Center"

               VerticalOptions="CenterAndExpand"/>

       </StackLayout>

   </ContentPage.Content>

</ContentPage>

HomePage.xaml

Before to start coding our LoginViewModel, we need to add a NuGet Package to help us to notify changes to the UI, or without the helper we can implement the interface INotifyPropertyChange to do the same.

Our LoginViewModel will look like this, and remember to add the appropriate using for our class.

 

  public class LoginViewModel : BaseViewModel

   {

       #region Bindables Properties

       private string username;

       public string Username

       {

           get => username;

           set => SetProperty(ref username, value);

       }


       private string password;

       public string Password

       {

           get => password;

           set => SetProperty(ref password, value);

       }


       private string errorMessage = string.Empty;

       public string ErrorMessage

       {

           get => errorMessage;

           set => SetProperty(ref errorMessage, value);

       }


       public ICommand SignInCommand { get; private set; }

       #endregion


       public LoginViewModel()

       {

           SignInCommand = new Command(SignInAction);

       }


       public void SignInAction()

       {

           if (string.IsNullOrWhiteSpace(Password) || string.IsNullOrWhiteSpace(Username))

           {

               ErrorMessage = "One or more fields are empty.";

               return;

           }

           if (Username != "Test" && Password != "Test123")

           {

               ErrorMessage = "Wrong username or password.";

               return;

           }     

           if (Username == "Test" && Password == "Test123")

           {

               ErrorMessage = string.Empty;

               Application.Current.MainPage = new HomePage();

           }     

       }

   }

LoginViewModel.cs

Then on our UITest project, we’re going to add some tests to validate if the Login and Home was displayed, or if the user write an invalidate user or password or nothing.

Test Cases

[Test]

public void LoginIsDisplayed()

{

           AppResult[] results = app.WaitForElement(c => c.Marked("LoginPage"));

           app.Screenshot("Login screen");

           Assert.IsTrue(results.Any());

       }

[Test]

       public void HomeIsDisplayed()

       {

           app.WaitForElement(c => c.Marked("LoginPage"));

           app.EnterText(c => c.Marked("UserEntry"), "Test");

           app.EnterText(c => c.Marked("PassEntry"), "Test123");

           app.DismissKeyboard();

           app.Tap(c => c.Button("SignInButton"));

           app.WaitForElement(c => c.Marked("HomePage"));

           app.Screenshot("Home screen");

           AppResult[] results = app.WaitForElement(c => c.Text("Successful login"));

           Assert.IsTrue(results.Any());

       }

[Test]

       public void WrongUserInformation()

       {

           app.WaitForElement(c => c.Marked("LoginPage"));

           app.EnterText(c => c.Marked("UserEntry"), "user");

           app.EnterText(c => c.Marked("PassEntry"), "pass");

           app.DismissKeyboard();

           app.Tap(c => c.Button("SignInButton"));

           AppResult[] results =  app.WaitForElement(c => c.Text("Wrong username or password."));

           Assert.IsTrue(results.Any());

       }

[Test]

       public void EmptyEntries()

       {

           app.WaitForElement(c => c.Marked("LoginPage"));

           app.Tap(c => c.Button("SignInButton"));

           AppResult[] results = app.WaitForElement(c => c.Text("One or more fields are empty."));

           Assert.IsTrue(results.Any());

       }


If we’re working using Visual Studio For Mac 2019 or we have Mojave OS, we need to update our plugin to prerelease package.( Add NuGet Packages > Show pre-release packages > Xamarin.UITest > Add Package).

Before to Run the iOS Test don’t forget to active the software keyboard for our simulator or our tests will fail.

Finally, on our Unit Tests layout will see that all our tests for both platform will pass.

 

Run Our Tests

 

iOS

 

Android

 

About the author:

Josue Diaz is a Computer Electronics Engineer with 2+ years of experience in Xamarin Development.  He's creating Android and iOS apps here at iTexico.

Download our Free E-Book and learn how the Product Mindset can benefit your mobile app. 

Through this guide, we want to give you, product owners, product managers, engineers, entrepreneurs and anybody looking to build great digital products, more insights into the importance of user-centric design and development and how to correctly achieve it.

How Product Mindset Can Save your Sinking App

You may also like:

Post Your Comment Here