TestResults.io
  • What is TestResults.io
  • System Architecture
  • Regulated Markets
    • Health Care Industry
    • Financial Services Industry
  • What's new?
    • Update Instruction
      • Update of the Designer extension in Visual Studio
      • Update the Execution Engine
      • Update the Base- and Environment Models
    • Migration to new project file
  • Designer
    • Overview
    • First Steps
    • Installation
    • TestResults.io solution
    • The development environment
      • Tool Window Overview
        • Test Environments
          • Steps to configure a SUT VM
          • How to access files on the system under test
        • Remote Viewer
          • Control Mode
          • Capture Mode
          • Screen Editor
          • Capture Single Image
        • Screen Explorer
        • Test Case Designer
        • Image Explorer
        • API Testing
        • TestResults.io options
          • Engines
          • Servers
    • Test Cases
      • Adding Test Cases
      • Test Case structure
      • Simple Test Case (Example)
      • Executing your Test Case
      • Generating Test Containers
      • Publishing Test Cases
      • Execution Variables
    • Software Models
      • Adding SW Models
      • Referencing the Model in the Test Case
      • Generating Test Containers
      • Publishing SW Models
      • Screens and Screen Elements
        • Tables
        • Visual Sense
        • Custom Screen Elements
    • Installers
      • Adding Installers
      • Generating Test Containers
      • Publishing Installers
    • Automation Framework Reference
      • Attributes
      • Enumerations
      • Filters
        • IImageFilter Interface
        • Select
        • Resize
      • GlobalEngineParameters
      • ImageDetectionParameters
      • ImageReference
      • Interfaces
        • ITester Interface
          • ITester Methods
          • ITester Properties
        • ITestee Interface
          • ITestee Methods
        • IConnections Interface
          • IConnections Methods
          • IConnections Properties
        • IDebug Interface
        • IEngineResult
        • IHelpers Interface
        • IImageHelper Interface
          • IImageHelper Methods
        • IKeyboard Interface
          • IKeyboard Methods
        • IMouse Interface
          • IMouse Methods
          • IMouse Properties
        • IReport Interface
          • IReport Methods
        • ISUTConnection Interface
      • OcrEngineParameters
        • Best practise
        • IronOcrEngineParameters
        • LEADOcrEngineParameters
        • OcrEngineRelatedCharacters
        • OcrPreprocessingParameters
      • ResultRectangle
      • SutNotReadyException
      • TestStepAbortedException
    • FAQ
      • Two-factor authentication (2FA) and One Time Passwords (OTP)
      • Receive and verify Emails
      • Using Excel as test data source
      • Verify PDF Content
  • Portal
    • Overview
    • First Steps
    • User's Guide
      • Login
      • Projects
      • Dashboard
      • Test Cases
      • Software & Environments
      • Test Sets
      • Job Queue
      • Management
      • Notifications Summary
    • Automation Engineer's Guide
      • Test Automation Workflow
      • Automating a test case
      • Enabling Software & Environments
    • REST API Reference
      • Authentication
      • Projects
      • Test Sets
      • Test Cases
      • Test Plans
      • Test Reports
      • Files
      • Software
      • Environments
      • Untitled
      • Executions
      • Favorites
      • Statistics
      • User Management
      • Customer Management
      • Notifications
      • Configurations
      • Invoicing
  • Models
    • Overview
    • Base Model
      • BaseScreen
        • BaseScreen Properties
        • BaseScreen Methods
      • OnScreenElement
        • OnScreenElement Methods
        • OnScreenElement Properties
      • Primitives
        • Button
          • Button Methods
          • Button Properties
        • Checkbox
          • Checkbox Methods
        • ContextMenu
          • ContextMenu Methods
          • ContextMenu Properties
        • Dropdown
          • Dropdown Methods
          • Dropdown Properties
        • DropdownMenu
          • DropdownMenu Methods
          • DropdownMenu Properties
        • GenericScroller
          • GenericScroller Methods
          • GenericScroller Properties
        • HorizontalScroller
        • IconButton
          • IconButton Properties
        • Label
        • LabelWithButton
          • LabelWithButton Properties
        • LabelWithCheckbox
          • LabelWithCheckbox Properties
        • LabelWithValue
          • LabelWithValue Methods
          • LabelWithValue Properties
        • PwTextBox
          • PwTextBox Methods
        • TextBox
          • TextBox Methods
          • TextBox Properties
        • Tables and lists
          • Column
            • Column Methods
            • Column Properties
          • ItemList
            • ItemList Methods
            • ItemList Properties
          • Row
            • Row Methods
            • Row Properties
          • TableBase
            • TableBase Methods
            • TableBase Properties
        • LabelWithElementBase
          • LabelWithElementBase Properties
      • Enumerations
      • Extensions
        • EngineResultExtensions Methods
        • EnumExtensions Methods
        • ReportExtensions Methods
        • StringExtensions Methods
        • TesterConnectionExtensions Methods
        • TesterDebugExtensions Methods
        • TesterHelperExtensions Methods
        • TesterMouseExtensions Methods
        • TesterOnScreenElementExtensions
        • TesterSelectExtensions Methods
      • Helper Classes
        • BaseModelHelpers
          • BaseModelHelpers Methods
          • BaseModelHelpers Properties
        • Attributes for Designer
        • ListHelpers
      • Exceptions
        • ElementNotFoundException
        • InteractionFailedException
        • ScreenNotFoundException
      • Interfaces
        • IAppBasics Interface
          • IAppBasics Methods
          • IAppBasics Properties
        • IBrowser
        • ICommandLineWindow
        • IScroller Interface
          • IScroller Methods
          • IScroller Properties
        • ISutLocale Interface
          • ISutLocale Methods
          • ISutLocale Properties
        • ISystemHelpers
        • ISystemInteractions
        • IWindow
    • Environment Model
      • Windows
        • Screens
          • CmdWindow
            • CmdWindow Methods
            • CmdWindow Properties
          • FileDialog
            • FileDialog Methods
            • FileDialog Properties
          • FileExplorer
            • FileExplorer Properties
          • RunWindow
            • RunWindow Methods
            • RunWindow Properties
          • Window
            • Window Methods
            • Window Properties
        • SutLocale
          • SutLocale Methods
          • SutLocale Properties
        • SystemHelpers
          • SystemHelpers Methods
          • SystemHelpers Properties
        • SystemInteractions
        • WebBrowser
          • Browser
            • Browser Methods
            • Browser Properties
          • BrowserScroller
            • BrowserScroller Methods
            • BrowserScroller Properties
          • AuthenticationDialog
            • AuthenticationDialog Methods
            • AuthenticationDialog Properties
          • DownloadDialog
            • DownloadDialog Methods
            • DownloadDialog Properties
        • EnvironmentModel Enumerations
        • Interfaces
          • IWebAppBasics
            • IWebAppBasics Property
Powered by GitBook
On this page
  • Overview
  • TestResults.io nuget package
  • Adding the Screen Information
  • Capturing new image
  • Selecting an existing image
  • Adding Screen Elements
  • Generating the Screen
  • Partial class with screen elements
  • Partial class without screen elements
  • Editing a Generated Screen

Was this helpful?

  1. Designer
  2. The development environment
  3. Tool Window Overview
  4. Remote Viewer

Screen Editor

PreviousCapture ModeNextCapture Single Image

Last updated 1 year ago

Was this helpful?

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

Software Model 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

Screen Loaded Image

An image which will be used to identify that the screen has been opened

ContactUsLogo.png

Screen Rectangle

A screenshot of the screen, used as a preview image

By default the full screen

  • Capture new image - if you select this option you will be able to take a new image

  • Select existing image - if you select this option you will be able to select an existing image

Capturing new image

  • Make sure you disable the Control Mode and draw 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 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

You can add elements to your screen definition by selecting the Add element option.

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.

Dropdown element

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

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.

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

In order to define the Screen loaded Image click the camera icon. As with every image you take you will have two options two choose from:

Select the Select existing image option

Depending on your selection different sub-menus presenting different options for each element will be displayed. Find more information about the different Screen Elements below or in the description of the .

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

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

Base Model Primitives
Screen Explorer