Example

Below is an example demonstrating how to create a custom control for the following component, create a page object containing that custom control, create a test and execute it using powershell.

Where to write code?

You need to figure out where your classes will fit in the AT project architecture. If the test you are writing is part of an existing feature, then place the custom page object in Components folder, and place your custom control in Components/Controls subfolder of that feature. Place the test in Tests folder of that feature. Depending on test execution you can put your test in Tests/Parallelizable or Tests/NonParallelizable subfolder. In this example, we are working on a component on role page, so it should be part of Roles feature.

If you are working on a completely new section of the system, then you should create a new feature folder following the principles we discussed previously.

Control description

Role status component is a Hoverable component, so you have to hover over it to make pen icon visible, and use the pen button to unlock field for editing. Once you finish editing you can use save or cancel buttons to save or cancel changes, as shown in this example.

We can see that toggle button has two states: enabled and disabled. By default status text is visible, displaying status text ("enabled" or "disabled"). Editing the component, will make the toggle button visible, and text will become hidden.

Role status control

Here is the html code for this component:

Html for role status when text is visible

Html for role status when pen button is used for editing

Create custom control and page object

We define a new control with definition "role-edit-status", and inherit from Hoverablecontrol to have access to generic buttons for edit, save and cancel. We also define two custom subcontrols:

1. Text which is of Content type and can have two values: enabled and disabled defined as enum.
2. Toggle button which we can define as a Clickable control

We can locate both elements using Xpath, and ideally you want to move all selectors into Constants file under Components for this feature, but to keep this example short we are inputting strings directly

public enum RoleStatus
{
    Enabled = 1,
    Disabled
}

[ControlDefinition("role-edit-status")]
public class RoleStatusControl<TOwner> : Hoverable<TOwner> where TOwner : PageObject<TOwner>
{
    [FindByXPath("role-status/span")]
    public Content<RoleStatus, TOwner> Text { get; private set; }

    [FindByXPath("ui-switch[contains(@name, 'role.enabled')]", Visibility = Visibility.Any)]
    public Clickable<TOwner> Toggle { get; private set; }
}

Then you can implement this RoleStatusControl and use it in a RolePage page object:

namespace Applicita.AAF.WebApp.Tests.Roles.Components
{
    using _ = RolePage;

    public class RolePage : PageWithNavigation<_>
    {
        public RoleStatusControl<_> Status { get; private set; }
    }
}

Test

After defining control on page object, test the control as shown in the following snippet. We are inheriting from AutoLoginTestFixture because we need to login first before we can access the role page. To navigate to the role page we are using Pages.TestRolePage().

namespace Applicita.AAF.WebApp.Tests.Roles.Tests.Parallelizable
{
    [Parallelizable]
    public class RolePageTests : AutoLoginTestFixture
    {
        [Test]
        public void RolePage_Status_Edit()
        {
            Pages.TestRolePage()
                .Status.Text.Should.Equal(RoleStatus.Enabled)
                .Status.Edit.Click()
                .Status.Toggle.Click()
                .Status.Save()
                .Status.Text.Should.Equal(RoleStatus.Disabled);
        }
    }
}

Pages.TestRolePage() simply wraps the page navigation:

public static RolePage TestRolePage()
{
    return Go.To<RolePage>(
        url: "insert-your-role-page-url-here");
}

If you want to run tests locally, you need to fulfill following prerequisites:

1. Have Azure Storage Emulator up and running
2. Navigate to src\WebApps\Applicita.AAF.WebApp\ClientApp, open powershell and run npm run local (you might need to run npm install first)

3. Start all services by opening the solution and executing ctrl + f5

4. Have settings.json properly configured with "baseUrl": "http://aaf.local.aaf.com"

5. Have settings.json properly configured with account credentials (ask your project manager / team leader to provide you with administrator credentials), then add this line with those credentials underneath "baseUrl"

   "account": {
    "email": "[administrator-email]",
    "password": "[administrator-password]"
   }

If you want to run tests on dev server you need to change baseUrl and account in settings.json appropriately:

Dev environment settings file

Since test is in RolePageTests class, to run tests from this fixture we can open powershell in test project folder (in this example, AT project is located in C:\Projects\AAF\src\Applicita.AAF.WebApp.Tests) and run the following command:

dotnet test --filter RolePageTests

This will run all tests from this class and prompt back the results.

Run tests using native dotnet test command

You can also run tests using test runner from Visual Studio.