QualityMate Integration with Test Frameworks

This guide explains how to use the QualityMate with a test framework other than MSTest. You can follow this guide step by step or download and run the complete sample:

6KB

WebHelloWorldNUnitIntegrationSample.zip

archive

Open

Web NUnit QualityMate Sample

Creating the sample step by step

What does this guide cover?

• Creation of a test solution that integrates QualityMate with a test framework of selection.

• The recommended solution structure that you should use.

• The QualityMate dependencies that you need.

• A simple Page Object and Test Case to run on a web browser.

Before this guide

• The steps used on this guide uses NUnit as a reference, however, these steps should work with any other preferred test framework like XUnit with minor changes.

• This guide assumes that you will use the following application asset:

920B

WebAssets.zip

archive

Open

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 test C# project using the .Net Framework version 4.6.1 or higher and name it HelloWorldNUnit. If you're working on Visual Studio, information on how to do this can be found here.

2. Create a TestCases folder inside the project folder.

3. On the TestCases folder, create a new C# file with the name TC_HelloWorld.cs.

4. Create an Assets folder inside the project folder.

5. Decompress the WebAssets file on the Assets folder.

6. Set the assets files to copy to the output directory and add the required NuGet dependencies. To do this, open your project file (HelloWorldNUnit.csproj) and add the following lines:

   <ItemGroup>
     <PackageReference Include="Mobilize.QualityMate.UiPlayer" Version="7.*" />
     <PackageReference Include="NUnit" Version="3.13.2" />
     <PackageReference Include="NUnit3TestAdapter" Version="4.1.0" />
     <!--This package might require an update to match the chrome version installed on the machine.-->
     <PackageReference Include="Selenium.WebDriver.ChromeDriver" Version="95.0.4638.5401" />
   </ItemGroup>
   <ItemGroup>
     <None Update="Assets\*">
         <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </None>
   </ItemGroup>  

7. The project folder structure should look like the following example:

   🗔 MyFirstSample
    ┣ 📂 HelloWorldNUnit
    ┃  ┣ 📂 Assets
    ┃  ┣  ┣ 📄 index.html
    ┃  ┣  ┣ 📄 script.js
    ┃  ┣  ┗ 📄 style.css
    ┃  ┣ 📂 TestCases
    ┃  ┣  ┗ 📜 TC_HelloWorld.cs
    ┃  ┗ 📜 HelloWorldNUnit.csproj
    ┗ 📜 HelloWorldNUnit.sln

The project file HelloWorldNUnit.csproj content should look like the following example:

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <TargetFramework>net461</TargetFramework>
    <AppendTargetFrameworkToOutputPath>false</AppendTargetFrameworkToOutputPath>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Mobilize.QualityMate.UiPlayer" Version="7.*" />
    <PackageReference Include="NUnit" Version="3.13.2" />
    <PackageReference Include="NUnit3TestAdapter" Version="4.1.0" />
    <!--This package might require an update to match the chrome version installed on the machine.-->
    <PackageReference Include="Selenium.WebDriver.ChromeDriver" Version="95.0.4638.5401" />
  </ItemGroup>

  <ItemGroup>
    <None Update="assets\**\*.*">
      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
    </None>
  </ItemGroup>
</Project>

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 properties that represents each UI controls that we are going to use on Form1 class

   // 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; }

5. Create a method ChangeTextBox1Text(string) on the Form1.cs to handle the text change behavior.

   /// <summary>
   /// Changes the <see cref="textBox1"/> text to the specified <paramref name="newText"/>.
   /// </summary>
   public void ChangeTextBox1Text(string newText)
   {
       textBox1.Text = newText;
       button1.Click();
   }

   The Form1.csfile content should look like the following example:

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

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; }

    /// <summary>
    /// Changes the <see cref="textBox1"/> text to the specified <paramref name="newText"/>.
    /// </summary>
    public void ChangeTextBox1Text(string newText)
    {
        textBox1.Text = newText;
        button1.Click();
    }
}

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 on the TC_HelloWorld.cs file

1. Add the following usings statements:

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

2. The TC_HelloWorld test class should has the TestFixture attribute.

   [TestFixture]
   public class TC_HelloWorld

3. 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",
    };

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

   private void HelloWorldScript(UiExecutionController controller)
   {
       const string helloWorldString = "Hello World";
       Form1 form1 = controller.GetPageObject<Form1>();
       form1.ChangeTextBox1Text(helloWorldString);
       form1.label1.Validate(label => label.Text.Equals(helloWorldString));
   }

5. Create a new method HelloWorld() that will call our script using the UiTest's Execute() method. This method need to have the Test attribute.

   [Test]
   public void HelloWorld()
   {
       UiPlayer uiPlayer = new UiPlayer();
       UiExecutionResult executionResult = uiPlayer.Execute(configuration, HelloWorldScript);
       Assert.IsTrue(executionResult.Success);
   }

What's next?

Compile the test project and run the test case to see the magic happen. Great isn't it?