Tables

Adding a Table to your Software Model

Tables are added to the Model as Screen Elements on a Screen.

Follow this Step by Step Guide to record the Images for your Table:

1. Create or load the Screen on which you want to create the Table on. Add Press "Add Screen Element" and select "Table"

Click Add Screen Element

Select "Table" as the Screen Element Type

2. Enter the Table Name and record a "Table Loaded Image".

The "Table Loaded Image" does not have to be part of the Table itself, but will be used as an indicator if the table is even on the screen, similar to a Screen loaded Image. In the following example we chose the title "Demo Table" as the "Table Loaded Image".

3. "Sequence Based Detection" option:

Activate this Checkbox if your table does not have a clear grid border line between each column like in the following example. If your table has a grid border line continue with Step 4.

For tables without any grid border lines the checkbox "Sequence Based Detection" must be activated

If you activate "Sequence Based Detection" the width of a Column (for example "Company") will be determined by where the image for the following Column Header is found (for example "Contact").

The Column "Company" (dark red box) width is limited to the right where the "Contact" Column header was found.

If your table has a grid border line, that line will be detected and determine the Column width. So the checkbox "Sequence Based Detection" should not to be checked.

4. Activate the "Has Scroller" Checkbox if not all entries of the table are directly visible but need to be scrolled to.

5. Record an Image for each Column Header

Click on the Camera Icon next to "Column Header" to record the Image of the first Column Header.

For each Column Header an Image has to be recorded. Start with the first one by Clicking on the Record Image Button.

Record the Image similiar to the example below. Also check the Image name (green highlight) as it will also be the Column Name. The Image name will be prefilled by what the OCR engine read from the Image, but can be corrected manually. Continue by clicking "Save Image".

Record an Image of the Column Header and check the Image name before saving.

With clicking save the "Company" Column is added to the "Demo Table". At the Bottom the "Column Header" without any Image is still available to record more Columns.

Continue adding all the Column Headers of your Table by clicking on the Camera Icon next to "Column Header" and repeating the same process like for the first Column.

If you activated "Sequence Based Detection" (see step 3) make sure to record every column in order from left to right. This is required because the column width is dependend on the following column as described in step 3.

Example of a Table with 3 Columns. The last option "Column Header" will always stay empty and can be used to add additional Columns.

5. Save the Table and generate the Screen.

Interacting with the Table in a Test Case

The Table is available as a Screen Element in the Model Explorer under its Screen. It can be drag & dropped like any other element to be used in the Test Case Designer.

Drag and Drop the Table into your Test Case and select the operation and its parameters.

Example for further Table Interactions can be found on GitHub in our Demo Project Test Case 003 Teststep 9.

Additional Settings

Additional Information and Settings for Tables

By creating a table in your Software Model a class will be created. In the same way as with a screen class it consists of two partial class files. The .cs file you are free to extend, and the .g.cs with the generated code with will be overwritten each time you generate the corresponding screen.

TableRect

Inside the .cs file the size of the Table on the Screen and where to look for Columns, Rows and Cells can be refined by setting the TableRect (similar to the ScreenSelect Filter on a Screen). For most table interactions the TableRect does not require to be improved, others like "TableBase.GetLastRow" require more precision. An example is also available on GitHub.

Adding additional Functions

Example Functions for an interactive table where a user can add and remove entries are available in our GitHub Demo Project.

Additional Settings

The generated table class is derived from "TableBase" provided by the BaseModel NuGet. Check out its documentation page for additional possible settings.