Hamburger menu AutomationId for UI Testing

Question

I'm trying to run a UI Test on a page (About.xaml). Below are the steps to get to the page when the application loads.

Launch the Login Screen
User enters username
User enters password
User clicks on the Login Button
User lands on the Home Page in an AppShell.
User clicks on the Hamburger menu
User clicks on the About Menu in the Flyout Menu Items.

My question is, how do I set the Automation Id for the Hamburger Menu (Flyout Menu) of the AppShell?

Here's the UI Test Case.

          [Test]
public async Task AboutPage_UITest()
{

    //Arange
    app.EnterText("UsernameEntryId", "user1");
    app.EnterText("PasswordEntryId", "Abc@123");


    //Act
    app.DismissKeyboard();
    app.Tap(x => x.Marked("LoginButtonId"));

    app.Tap(x => x.Marked("AppShellId"));
    //app.Tap(c => c.Class("OverflowMenuButton"));  I tried this as well but no luck.
    await Task.Delay(30000);


    app.Tap(x => x.Marked("AboutId"));

    //Assert

    var appResult = app.Query("EmailId").First(result => result.Text == "[email protected]");
    Assert.IsTrue(appResult != null, "Label is not displaying the right result!");

    app.Screenshot("About Page");
}

In the AppShell.xaml, here's the top section.

        <Shell xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 FlyoutHeaderBehavior="CollapseOnScroll"
                 Shell.ItemTemplate="{StaticResource FlyoutTemplate}"
                 Shell.MenuItemTemplate="{StaticResource FlyoutTemplate}"
                 FlyoutBackgroundColor="WhiteSmoke" 
                 Navigating="OnNavigating" 
                 Navigated="OnNavigated"
                 AutomationId="AppShellId"
                 x:Class="DemoApp.AppShell">

Hi, there is a way to achieve that, you can have a look at my answer when you have time. — Junior Jiang

Junior Jiang Junior Jiang · Accepted Answer · 2020-09-01T09:24:14

Welcome to SO!

After researching that , you can use follow ways to set the AutomationId for the Hamburger Menu.

In AppShell.xaml.cs:

public AppShell()
{
    InitializeComponent();
   
    FlyoutIcon.AutomationId = "FlyoutIcon";
    //or
    FlyoutIcon.SetValue(AutomationProperties.NameProperty, "FlyoutIcon");
}

Note: Also need to set a value for FlyoutIcon(Such as: FlyoutIcon="xxx.png") make it work, otherwise above code will occur error System.NullReferenceException: 'Object reference not set to an instance of an object.'.

In addition, here it the way to go to About Page without tapping the Hamburger menu.

You can add TabBar to AppShell.xaml, and defining the About page and other page inside it.

Such as follow:

<TabBar>
    <Tab Title="About"
         AutomationId="About"
         Icon="tab_about.png">
        <ShellContent>
            <local:AboutPage />
        </ShellContent>
    </Tab>
    <Tab Title="Browse"
         AutomationId="Browse"
         Icon="tab_feed.png">
        <ShellContent>
            <local:ItemsPage />
        </ShellContent>
    </Tab>
</TabBar>

Then in Test method can navigate to your wanted page as follow:

app.Tap(x => x.Marked("About"));

Hamburger menu AutomationId for UI Testing

1 Answers