Links

Screen Editor

Overview

The screen editor allows you to easily generate code (generate C# classes) based on the controls you have marked on the screen. That allows you to create your test model quickly and efficiently as you don't need to define your screens manually. Once you generate a screen you will not have to worry about defining any controls as they will already be a part of the generated code.

TestResults.io nuget package

The screen editor will use specific predefined controls which are defined within the TestResults.io Base Model Nuget package. In to restore the nuget package simply build you TestResults.io solution. In this way you will be sure that the correct Nuget package will be downloaded from the the nuget server.

Adding the Screen Information

Once you have enabled the Screen Editor you will notice the Screen Information in the top. This section is mandatory and you need to fill in the following parameters:
Parameter name
Description
Example
Screen Name
The name of the screen which will be user to generate the class file
MyFirstScreen
Project
Project to which the new class file will be added to
MyFirstSoftware_1_0
Screen Location
Location of the class in the Project structure
Screens
Open Image
An image which will be used to identify that the screen has been opened
ContactUsLogo.png
In order to define the Open Image click the right arrow (
). You will have two options two choose from:
  • Capture new image - if you select this option you will be able to take a new image for the Open Image
  • Select existing image - if you select this option you will be able to select an existing image for the Open Image

Capturing new image

  • Select the Capture new image option
  • Create a rectangle around the desired image and select Save Image
You will not be prompted to Save the image on your hard drive. The image you have saved will be stored in the memory until the screen is generated.
  • After pressing Save you will see that the Open image section has been filled with the file name of the image you have taken:

Selecting an existing image

  • Select the Select existing image option
  • Select the desired image from the list of existing images (these images need to exist in your project)
  • Select Save
You will not be prompted to Save the image on your hard drive. The image you have saved will be stored in the memory until the screen is generated.
  • After pressing Save you will see that the Open image section has been filled with the file name of the image you have taken:

Adding Screen Elements

There are several elements which can be added to the screen. Each item which can be defined follows the same principals i.e. you will either need to add images/select existing images (see previous chapter) or enter the text to be searched for. Details for each available control is described within this chapter.
You can add the elements in two modes Multiple Elements or Single Element.

Adding Multiple Elements

Afterwards you will need to select one of the following controls:
  • Button
  • Icon Button
  • Label
  • TextBox
You will be able to select multiple controls at the same. To do so just draw the rectangles where your controls are preset as shown in the picture below.
Once you are done with marking all of the controls you will need to add names of the controls. Afterwards the Screen Editor will allow you add the new screen elements.

Adding Single Elements

You can also add single elements to your screen definition by selecting the Add single element (advanced) option as shown below:
Depending on your selection different sub-menus presenting different options for each element will be displayed.

Button element

The following items need to be set for the Button element:
Property
Description
Name
Unique name of the element which will be later used to identify it
Search Type
Search Type which is supposed to be use by the engine. It can either be Image or Text
For Search Type Image
Active Image
Image which will be used to find the element on the screen
Inactive Image
In case the button has two states - the image showing the inactive state
For Search Type Text
Search Text
Text which is used to find the control

Checkbox element

The following items need to be set for the Checkbox element:
Property
Description
Name
Unique name of the element which will be later used to identify it
Checked Image
Image of the checked state of the checkbox.
Unchecked Image
Image of the unchecked state of the checkbox.
The following items need to be set for the Dropdown element:
Property
Description
Name
Unique name of the element which will be later used to identify it
Base Image
Image used to located the dropdown list. E.g. a label. When defining the base image make sure that the HotSpot is set where the dropdown location is. For instance. The following dropdown
should have the base image selected as follows:
As you can see the Base Image is the Allow label but the HotSpot is set to the inside frame of the dropdown list
Bottom Image
The bottom line of the expanded dropdown list. This image is used to determine if the list has been expanded or in other words to tell the engine what the end of the list is.
Button Image
The dropdown list button image (in case it is available) e.g. the button used to expand the dropdown.

IconButton element

The following items need to be set for the IconButton element:
Property
Description
Name
Unique name of the element which will be later used to identify it
Search Type
Search Type which is supposed to be use by the engine. It can either be Image or Text
For Search Type Image
Active Image
Image which will be used to find the element on the screen
Inactive Image
In case the icon button has two states - the image showing the inactive state
For Search Type Text
Search Text
Text which is used to find the control

Label element

The following items need to be set for the Label element:
Property
Description
Name
Unique name of the element which will be later used to identify it
Search Type
Search Type which is supposed to be use by the engine. It can either be Image or Text
For Search Type Image
Image
Image which will be used to find the element on the screen
For Search Type Text
Search Text
Text which is used to find the control

TextBox element

The following items need to be set for the TextBox element:
Property
Description
Name
Unique name of the element which will be later used to identify it
Image
Image which will be used to find the element on the screen. Note that the hotspot for the Textbox needs to be defined withing the textbox iteself

Additional controls

There are additional controls you can add to the screen e.g. Label With Button, Label With Value. These elements follow the same principals as the main controls. During their definition the Screen Editor will display the information which of components are needed.

Generating the Screen

Once you are done adding the elements to your screen simply press the Generate Screen button
The designer will automatically add two files to your solution:
The files will have the same name as the name entered in the Screen Information section

Partial class with screen elements

The class containing the ".g" in its name e.g. MyFirstScreen.g.cs is a partial class class which contains the auto generated controls.
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Progile.ATE.Common;
using Progile.ATE.TestFramework.Filters;
using Progile.TRIO.BaseModel;
using Progile.TRIO.BaseModel.Extensions;
using static TestImages.MyFirstSoftware;
namespace MyFirstSoftware_Model.Screens
{
public partial class MyFirstScreen : BaseScreen
{
public MyFirstScreen(IAppBasics appBasics) : base(appBasics, "MyFirstScreen", Images.Screens.MyFirstScreen.Opened.MyFirstScreen)
{
}
public Button DirectContact { get; private set; }
public TextBox YourName { get; private set; }
public TextBox YourEmail { get; private set; }
public Label EmailUs { get; private set; }
protected override void Initialize()
{
base.Initialize();
DirectContact = new Button(testInterface:t,displayName:"DirectContact",searchType:Progile.TRIO.BaseModel.SearchType.Image,content:Images.Screens.MyFirstScreen.DirectContact,filters:ScreenSelect);
YourName = new TextBox(testerInterface:t,displayName:"YourName",imageName:Images.Screens.MyFirstScreen.YourName.YourName,filters:ScreenSelect);
YourEmail = new TextBox(testerInterface:t,displayName:"YourEmail",imageName:Images.Screens.MyFirstScreen.YourEmail.YourEmail,filters:ScreenSelect);
EmailUs = new Label(testerInterface:t,displayName:"EmailUs",searchType:Progile.TRIO.BaseModel.SearchType.Image,content:Images.Screens.MyFirstScreen.EmailUs.EmailUs,filters:ScreenSelect);
}
}
}
This class should not be used for coding your methods as it contains the definition of the your screen elements.
Do not modify the auto-generated class as long as your are not 100% certain about the change you are making.

Partial class without screen elements

The class which doesn't contain the ".g" in its name e.g. MyFirstScreen.cs is a partial class class which you can use the add methods that will use the auto-generated elements from the ".g" class.
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Progile.ATE.Common;
using Progile.ATE.TestFramework.Filters;
using Progile.TRIO.BaseModel;
using Progile.TRIO.BaseModel.Extensions;
using static TestImages.MyFirstSoftware;
namespace MyFirstSoftware_Model.Screens
{
public partial class MyFirstScreen
{
public void EnterDetailsAndSend(string name,string emailName)
{
YourName.Enter(name);
YourEmail.Enter(emailName);
DirectContact.Click(DirectContact.WaitForDisappear);
}
}
}

Editing a Generated Screen

Refer to the chapter about the Screen Explorer for details about how to edit an already generated screen.