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.

1. Launch the Login Screen
2. User enters username
3. User enters password
4. User clicks on the Login Button
5. User lands on the Home Page in an AppShell.
6. User clicks on the Hamburger menu
7. 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">

Answer 1

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"));

Answer 2

Or, directly in Xaml, like this:

<Shell.FlyoutIcon>
    <FontImageSource AutomationId="THE_ID_YOU_WANT" ... other props />
</Shell.FlyoutIcon>

You can also use FileImageSource or UrlImageSource or whatever kind you need. The important thing is that the AutomationId goes on the ImageSource tag itself.

Annoyingly, you don't seem to be able to set the AutomationId without manually defining an icon. And the Id it gives you is not consistent every run (Sometimes it is "OK" and sometimes "Open navigation drawer" - so this is the best way to get a consistent Id.