Snapshot-Generator

Snapshot-Generator is a Chrome plug-in that allows you to take screenshots for automation with Tedam Face in web products. With the rules set in Snapshot-Generator, xml file of the elements on the web page is created. This xml file is uploaded to Tedamface and used in the preparation of the related scenario. We have a Snapshot icon in the upper right area of our browser screen as Chrome plugin.

Snapshot

Snapshot is an XML document that contains information about components that the user can interact with on the application.

<Control enabled="true" mandatory="false" tag="1000003" title="Numara" type="101" value=""/>
<Control enabled="false" mandatory="false" tag="100002" title="Numara" type="102" value="Logo Software"/>
<Control enabled="true" mandatory="false" tag="1000004" title="No" type="103" value=""/>

Enabled:
Mandatory:
Tag:
Title:
Type:
Value:

Taking Snapshot

Click snapshot icon in the upper right area of our browser screen. Enter snapshot file name and click ‘Save Content to a File’ to download xml file. The snapshot output is saved at XML file type, depending on the rules written.

Main and Settings consists of two parts.

1.Settings

This is the section where the Config file is loaded, saved, created, and modified. The Config file is used to be associated in the corresponding scenario step. The config file is uploaded with the config file button. With the Export config file button, the previously created config file is downloaded. A new config file is created with the Create config file button.

1.1 Create Config File

This is the first time the Config file was created. This page defines the rules for the elements to print to the xml file. Formname and Version are mandatory rules. The value must be entered in this field without creating page-specific rules.

Add Rule button to start defining rules. For each rule to be defined, click the Add Rule button.

The Rule type field contains Click, Read, or Write options. The appropriate option is selected for the element to be defined. For example, "click" is selected in areas such as radio button, check box. Textfield, textarea in areas such as "write" and label areas "read" is selected. Rule name in the field to be defined according to the appropriate element is defined. Define the element with define button.

1.1.1 Define Finds

The first process on the Define Rule screen is Define Finds.

Finds Type: Specifies whether the value to be defined is selected from HTML elements or URL. If the area to be defined is selected from the HTML elements, "Finds Type" is selected as the element. If it is selected from URL, it is selected as URL. Finds Type Value must be set if Element is selected as Finds type.

Find Type Value: The html of the value to be defined can be more than one type of HTML element. In this field, the type of element to be written according to the rule is determined. After Finds Type Value is set, click Add Find button.

The Find Parameter Panel opens. In this panel, restrictions should be made so that not all input values of the element we define the rules are met.

Node type: This field selects which of the properties in the input is checked. The Node Type Value field for URL, InnerText, Value and XPath should not be returned, and the Node Type Value for Attribute must be populated.

Operator Type: Specifies whether the value to be defined equals the value of the input in xml, contains that value, or no value.

Go to the Define Tag step with the Next button.

1.1.2 Define Tag

In this section unique identifier is defined. Query selector provides to reach html element which has no id attribute by searching its parent element.

Example html code :

<div tabindex="0" class="v-select v-widget v-readonly v-has-width" id="component.TedamUserRoleComboBox" aria-labelledby="gwt-uid-85" div>
   
 <select class="v-select-select" size="1" tabindex="0" disabled="" style="width: 100%;"><option value="1"> ></select>

Because of the select element has not id, query selector search id its parent element which is div element.

The Extract Parameter Panel opens by clicking Add Extract button. This panel is filled according to the id properties that we will define.

Extract Type: To determine whether id is a string or a boolean value.

Node type: In this field, the selection of URL, InnerText, Value, XPath or Attribute is selected.

Wrapper: To add an expression to the beginning and end of the value.

Start Regex and End Regex: The range in which the regular expression begins and ends."*" regular expression is placed between these two values

1.1.3 Define Title

Sometimes the id input field does not contain a value that the user understands, for example, the name field is a value that the user will understand. At such times, the Define title fields should be filled values which users can remember easily.

The fields on the Define Tag tab have the same properties as the Define Title fields.

1.1.4 Define Value

Define Value is the tab to reach fillable fields values such as textbox elements.

In steps such as click, read and not written values, this step remains Disable.

When the value is written in the text area field and the snapshot is taken, the entered value is displayed in the xml file.

1.1.5 Define Enabled

Some TextArea on the screen can be enable or disable to write value. In this section, the value is defined to be enable or disable.

Click the Add Extract button. Boolean is selected because it is true or false.

The value field filled with "true" value if its enable.

Click Finish button. The Define Rule screen is closed.

On the Settings screen, click on the Update config file button.

For each rule definition, these steps are made according to the relevant html line.

2.Examples

Let's define a rule for the search field at "https://www.amazon.com.tr/". It is the text field, so we need to define a “Write” type rule. First, click on the search field and right click to select Inspect.

The source code of the field related to Inspect will be accessed.

Related code block:

<input type="text" id="twotabsearchtextbox" value="" name="field-keywords" autocomplete="off" placeholder="" class="nav-input" dir="auto" tabindex="6">   

Click the Snapshot icon. Click Create Config File under the Settings tab to create the Config file.

-Create Config File

Click "Create Config File" button to create the config file for "https://www.amazon.com.tr/".

1. In the FormName field, type "TedamAddOnConfAmazon".
2. Add Rule button to start defining rules.
3. Rule Type is selected as Write because it is a writable field.
4. Define rule by clicking ‘Define’ button.

-Define Finds

HTML Line:

<input type="text" id="twotabsearchtextbox" value=""  name="field-keywords" autocomplete="off" placeholder=""  class="nav-input" dir="auto" tabindex="6">

Objects that we are trying to find are input elements which has “type=”text” attribute.

1. "Finds Type" is selected as Element because the field to be defined is selected from the HTML elements.
2. In the "Finds Type Value" field, the type of element we are looking for is written as "input".
3. Click the Add Find button.
4. Node Type "Attribute" is selected because the attribute field will be checked within the HTML line.
5. Type "type" in the Node Type Value field.
6. Operator Type equals is selected because type = "text".
7. In the Find Parameter field, "text" is written.

Click the Next button.

-Define Tag

HTML Line:

<input type="text" id="twotabsearchtextbox" value=""  name="field-keywords" autocomplete="off" placeholder=""  class="nav-input" dir="auto" tabindex="6">

Id is the identification step.

1. Click the Add Extract button in the Define Tag tab.
2. Extract Type "String" is selected because the value "id" in the Query to be written in this field is a string expression.
3. The Node Type is selected as "Attiribute", because the id field in the HTML line is Attiribute.
4. In the Node Type Value field, type "id".

Click the Next button.

-Define Title

HTML Line:

<input type="text" id="twotabsearchtextbox" value=""  name="field-keywords" autocomplete="off" placeholder=""  class="nav-input" dir="auto" tabindex="6">

1. Click the Add Extract button.
2. In Query to be written in this field, String is selected because "name" is a string expression.
3. The Node Type is selected as "Attiribute" because the name field in the HTML line is Attiribute.
4. The name of the Node Type Value field is "name".

Click the Next button.

-Define Value

1. Enabled.
2. Click the Add Extract button.
3. Because the value "value" is a string expression in the Query to be written in this field, Extract Type String is selected.
4. Node Type is selected as Value.

Click the Next button.

"https://www.amazon.com.tr/" in the Search field "book" and snapshot is taken in the downloaded xml file value is "book" appears.

-Define Enabled

1. On the Define Enabled tab, click the Add Extract button.
2. Extract Type Boolean is selected.
3. The value field is "true".
4. Click Finish button.