QualityMate Sample Web

What does this guide cover?

• Creation of a basic application using QualityMate on a web browser.

• The proper solution structure that you should use.

• The QualityMate NuGets that you need.

• A simple Page Object and application to run in a web browser.

The completed sample solution described in this article can be downloaded here:

6KB

WebHelloWorldQualityMateSample.zip

archive

Web QualityMate Sample

Before this guide

This guide assumes that you will use our asset application.

920B

WebAssets.zip

archive

Download Web Assets (Requires a Selenium WebDriver)

Set up your application environment

To create our first Application with QualityMate, we're going to:

1. Create a console C# project using the .Net Framework version 4.6.1 or higher and name it HelloWorldUiPlayer. If you're working on Visual Studio, information on how to do this can be found here.

2. Create an Assets folder inside the project folder.

3. Decompress the downloaded asset in the Assets folder.

4. Set the assets files to copy to the output directory. To do this, open your project file (HelloWorldUiPlayer.csproj) and add the following lines:

   <ItemGroup>
       <None Update="Assets\*">
           <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
       </None>
   </ItemGroup>
   <ItemGroup>
       <PackageReference Include="Selenium.WebDriver.ChromeDriver" Version="95.0.4638.5401" />
   </ItemGroup>

5. Add the Mobilize.QualityMate.UiPlayer package through the NuGet package manager.

The project folder structure should look like the following example:

🗔 MyFirstSample
 ┣ 📂 HelloWorldUiTesting
 ┃  ┣ 📂 Assets
 ┃  ┣  ┣ 📄 index.html
 ┃  ┣  ┣ 📄 script.js
 ┃  ┣  ┗ 📄 style.css
 ┃  ┣ 📜 ConsoleApp.cs
 ┃  ┗ 📜 HelloWorldUiPlayer.csproj
 ┗ 📜 HelloWorldUiPlayer.sln

Describe the UI of the target application

It's time to create our first Page Object; we're going to do the following:

1. Create a folder named PageObjects inside the project folder.

2. Create a Form1.cs file inside the PageObjets folder.

3. Add the following usings in the Form1.cs file:

   using Mobilize.QualityMate.Automation.Entities;
   using Mobilize.QualityMate.ControlInterfaces;

4. Create the UI controls that we are going to use on Form1 class like the following:

   using Mobilize.QualityMate.Automation.Entities;
   using Mobilize.QualityMate.ControlInterfaces;
    
    // PageObject that describes the UI controls of the asset application.
    public class Form1 : PageObject
    {
        // Describes a TextBox control presented on the asset Application.
        public ITextBox textBox1 { get; set; }
   
        // Describes a Button control presented on the asset Application.
        public IButton button1 { get; set; }
   
        // Describes a Label control presented on the asset Application.
        public ILabel label1 { get; set; }
    }

The fields specified in the code snip above represent each UI control of the assets' application.

Create a new UI script

Once we have a PageObject, we can create a new QualityMate script:

1. Create a HelloWorld.cs file inside the application folder.

2. Add the following using statements in the HelloWorld.cs file:

   using Mobilize.QualityMate.Automation;
   using Mobilize.QualityMate.Automation.Configuration;
   using Mobilize.QualityMate.Automation.Extensions;
   using Mobilize.QualityMate.UiPlayer;

3. Create the class HelloWorld that will contain our execution script.

4. Create a UiPlayerConfiguration property inside that class that will hold the UiPlayer parameters.

    private readonly UiPlayerConfiguration configuration = new UiPlayerConfiguration
    {
        Technology = nameof(Technology.Web),
        Application = @".\assets\index.html",
        WebBrowser = "Chrome",
        RunInBackground = "false",
    };

5. Create the method HelloWorldScript(UiExecutionController controller), this method will let us interact with the UI using the controller with the next code:

    // This method receives an UiExecutionController which is in charge of executing the UI interactions 
    // using our PageObjects.
    private void HelloWorldScript(UiExecutionController controller)
    {
        Form1 form1 = controller.GetPageObject<Form1>();
        form1.textBox1.Text = "Hello World";
        form1.button1.Click();
        form1.label1.Validate(label => label.Text.Equals("Hello World"));
    }

6. Create the method ExecuteHelloWorld(), we're going to use this method to start the UiPlayer like the following example:

    public bool ExecuteHelloWorld()
    {
        // We pass the UiPlayerConfiguration and a function with the UiPlayer script.
        UiExecutionResult result = UiPlayer.Instance.Execute(configuration, HelloWorldScript);
   
        return result.Success;
    }

Run the application

On the Main() function create a new HelloWorld object to call the method ExecuteHelloWorld

    public static void Main(string[] args) 
    {
        bool result;
        string resultString;
        HelloWorld myUiPlayerClass = new HelloWorld();

        Console.WriteLine("Starting UiPlayer");

        result = myUiPlayerClass.ExecuteHelloWorld();
        resultString = result ? "success" : "fail";

        Console.WriteLine($"UiPlayer execution finished with status: {resultString}");
        Console.ReadLine();
    }

Finally, launch the application and see the magic happen. Great isn't it?