Duration

10 minutes

Goals

The primary goal of this exercise will be to demonstrate a way of creating cross-platform UI Tests. We will create unique queries for each platform to identify the UI elements we need to work with and then use these queries in our shared test code.

You can continue from the prior lab exercise if you added both iOS and Android support, or start with the completed project available in Exercise 2 if you focused on a single platform.

Required Assets

Steps

Identify the unique UI elements and create platform-specific queries

To create cross-platform UI Tests, we need to provide an abstraction for interacting with the unique UI elements which change from platform-to-platform. Recall how the code was different for adding a task between the iOS and Android apps:

iOS

app.Tap(c => c.Button("Add"));
app.EnterText(c => c.Class("UITextField").Index(0), "Get Milk");
app.EnterText(c => c.Class("UITextField").Index(1), "Don't forget the milk!");
app.Tap ("Save");

Android

app.Tap("Add Task");
app.EnterText(c => c.Class("EditText").Index(0), "Get Milk");
app.EnterText(c => c.Class("EditText").Index(1), "Don't forget the milk!");
app.Tap ("Save");

Our goal will be to isolate these query differences by storing the queries in fields of type Func<AppQuery,AppQuery> assigned to specific values based on the platform, and then writing our tests using these fields. For example, the AddButton query would be:

readonly Func<AppQuery,AppQuery> AddButton;
...
public Tests(Platform platform)
{
    this.platform = platform;

    if (platform == Platform.iOS)
    {
        AddButton = c => c.Button("Add");
        ...
    }
    else if (platform == Platform.Android)
    {
        AddButton = c => c.Marked("Add Task");
        ...
    }

Notice that we need to turn the short-hand string query used for Android: app.Tap("Add Task"); into the full Marked query syntax: c => c.Marked("Add Task") to make it a valid query. The Tap method does this for you as a convenience, but when you are breaking it down to this level, we will need to be explicit.

1. Open the Tests.cs file where your UI test methods are located.
2. Using the above code as an example, create class-level query fields for the following UI elements:
   • AddButton
   • NameField
   • DescriptionField
3. Add code into your constructor to assign proper values to the fields based on the passed platform value.

Show Code

public class Tests
{
    IApp app;
    Platform platform;

    readonly Func<AppQuery,AppQuery> AddButton;
    readonly Func<AppQuery,AppQuery> NameField;
    readonly Func<AppQuery,AppQuery> DescriptionField;

    public Tests(Platform platform)
    {
        this.platform = platform;

        if (platform == Platform.iOS)
        {
            AddButton = c => c.Button("Add");
            NameField = c => c.Class("UITextField").Index(0);
            DescriptionField = c => c.Class("UITextField").Index(1);
        }
        else
        {
            AddButton = c => c.Marked("Add Task");
            NameField = c => c.Class("EditText").Index(0);
            DescriptionField = c => c.Class("EditText").Index(1);
        }
    }

    ...
}

Create the cross-platform UITests

Next, we will replace the code in the AddANewTask method to use these platform-specific queries so that it is platform-independent and therefore shared.

1. Go through each line of code in the method and replace each query with the proper field you have created - you should be able to completely remove the if/else condition if you set it up to run for both platforms.
2. The actual tests are primarily just using this method and are identifying the elements using the text which is the same between the two platforms, however if we had differences here, we could abstract them away using the same technique.

Show Code

void AddANewTask (string name, string description)
{
    app.Tap(AddButton);
    app.EnterText(NameField, name);
    app.EnterText(DescriptionField, description);
    app.Tap ("Save");
}

2. Run your tests and make sure they still execute properly.

Summary

Congratulations, in this exercise you created a cross-platform UI Test.