Page Object Pattern In Xamarin UITest

When unit testing, but more specifically UI testing in an OO language, developers sometimes forget they are programming in an object orientated language. The result is, large functions, reading just like a script, and almost no reuse of any code. But this is understandable, because when you are introduced to UI testing, you create testing scripts. Managers and other developers will even use this term and It puts you in the mindset, to create a script. Using the Page Object Pattern, we can keep using our OO concepts for UI Testing.

Page Object

A page object is treating each page as an object. Lets take this page as an example.

<StackLayout>
    <Label Text="Welcome to Xamarin Forms!" AutomationId="WelcomeLabel" /> 
    <Button Text="Navigate To About Page" Command="{Binding AboutCommand}" AutomationId="NavigationButton" /> 
</StackLayout>

Now we just create a page object, that represents the page.

We have included the elements of the label, and button. You will want to create a constructor, to add in the IApp, to be accessible from this page. For those new to UITest, the IApp is what is returned when you start a UITest, and is your access point, for relaying commands through to the device or simulator. Read Running UITests Locally {INSERT LINK}, if you want a quick overview of how to run a UITest.

public MainPage
{
    readonly Func<AppQuery, AppQuery> _welcomeLabel = e => e.Marked("WelcomeLabel");
    readonly Func<AppQuery, AppQuery> _navigationButton = e => e.Marked("NavigationButton");

    readonly IApp _app;
    public MainPage(IApp app)
    {
        _app = app;
    }
}

Actions

If you want to perform an action, such as Tapping on the button, you create a method, within this page.

public void TapButton()
{
     _app.Tap(_navigationButton);
}

If the button navigates to another page, you could even add a return type of the page it’s going to. Helping create a fluent API for writing UI Tests.

Waiting For Page Load

Once you navigate to a new page, you want to ensure you wait for the page to actually load, otherwise your script can try to find or act upon an element too early.

public MainPage WaitForLoad()
{
    App.WaitForElement(_welcomeLabel);
    return this;
}

Lists

Items that are repeated on the screen, are often trickier to reference, due to the repeated ID’s. Hence you would use an index, but instead of hard coding the index, use an index.

Func<AppQuery, AppQuery> _listItem(int index) => e => e.Marked("ListItem").Index(index);

// You can then call this as such, if you wanted to tap the first item in the list. Assuming, it is called ListItem.
public MainPage TapListItem(int index)
{
    App.Tap(_listItem(index));
}

Summary

A page object, allows you to easily group, a number of reusable elements and methods, into a single class. Your UI Tests, can now use these page objects, without ever knowing what elements are exactly in the page. I’ve listed above just a few ways you can use the Page Object, but it is not a complete list.

Microsoft MVP | Xamarin MVP | Xamarin Certified Developer |
Exrin MVVM Framework | Xamarin Forms Developer | Melbourne, Australia

Related Posts

Tagged:Tags:

Leave A Comment?