Typified element

A typified element is an element of the GUI (Select, Multiselect etc). Magento has custom typified elements with a special logic, for example: Customized Select, Suggest Dropdown, Store View Selector. Typified elements are often used as elements of a form or a grid.

Functional Testing Framework (FTF) enables you to test any typified element.

A typified element example in the browser

This example shows the optgroup typified element. You can use the \Magento\Mtf\Client\Element\OptgroupselectElement class to test it.

This topic discusses how to create classes for a typified element and to use them in tests.

Structure

General

A typified element class in the FTF contains methods to be used in the test to manipulate typified elements in the Magento application. You can extend a basic class or a Magento class to cover your typified element.

   The most important methods are setValue() and getValue(). These methods are required when you work with a form.

Classes and relations with UI

There are two types of typified elements: default typified elements and Magento custom typified elements.

  • Default typified elements are the web elements that are typically used in a web application

  • Magento custom typified elements are the web elements that are specific to the Magento application

Default typified elements

Default typified elements are stored in the <magento2_root_dir>/dev/tests/functional/vendor/magento/mtf/Magento/Mtf/Client/Element directory.

A root class for a typified element is the \Magento\Mtf\Client\Element\SimpleElement class. This class implements ElementInterface which contains methods such as click(), doubleClick(), isVisible(), setValue(), getValue(), getText(), find(), dragAndDrop(), getElements() etc.

UI element FTF class Notes
<input type="checkbox" /> \Magento\Mtf\Client\Element\CheckboxElement Extends SimpleElement
<select multiple /> \Magento\Mtf\Client\Element\MultiselectElement Extends SelectElement
<input type="radio" /> \Magento\Mtf\Client\Element\RadiobuttonElement Extends SimpleElement
<select /> \Magento\Mtf\Client\Element\SelectElement Extends SimpleElement
<select multiple /> \Magento\Mtf\Client\Element\StrictmultiselectElement Extends MultiselectElement. setValue() sets the exact value, as opposed to MultiselectElement.
<select /> \Magento\Mtf\Client\Element\StrictselectElement Extends SelectElement. setValue() sets the exact value, as opposed to SelectElement.

Magento custom typified elements

Magento custom typified elements are stored in the <magento2_root_dir>/dev/tests/functional/lib/Magento/Mtf/Client/Element directory.

UI element FTF class Notes
<div class="rule-tree" /> \Magento\Mtf\Client\Element\ConditionsElement Extends SimpleElement
<div id="ui-datepicker-div" /> \Magento\Mtf\Client\Element\DatepickerElement Extends SimpleElement
<div class="action-select admin__action-multiselect" /> \Magento\Mtf\Client\Element\DropdownmultiselectElement Extends MultiselectElement
<div class="search-global" /> \Magento\Mtf\Client\Element\GlobalsearchElement Extends SimpleElement
<div class="tree x-tree jstree" /> \Magento\Mtf\Client\Element\JquerytreeElement Extends Tree
<div class="store-switcher /> \Magento\Mtf\Client\Element\LiselectstoreElement Extends SimpleElement
<select class="admin__control-multiselect">     <option />
    <optgroup />
</select>
\Magento\Mtf\Client\Element\MultiselectgrouplistElement Extends MultiselectElement. Contains option and optgroup elements.
<section class="block mselect-list" /> \Magento\Mtf\Client\Element\MultiselectlistElement Extends MultiselectElement
<div class="mage-suggest" /> \Magento\Mtf\Client\Element\MultisuggestElement Extends SuggestElement. Allows multiple selection.
<select>
    <optgroup />
    <optgroup />
</select>
\Magento\Mtf\Client\Element\OptgroupselectElement Extends SelectElement. Contains optgroup elements.
<select>
    <option />
    <optgroup />
</select>
\Magento\Mtf\Client\Element\SelectstoreElement Extends SelectElement. Contains option and optgroup elements.
<select class="admin__control-select">
    <optgroup>
        <option data-title/>
    </optgroup>
</select>
\Magento\Mtf\Client\Element\SimplifiedselectElement Extends SelectElement. Contains option and optgroup elements. option has a data-title attribute.
<div class="mage-suggest" /> \Magento\Mtf\Client\Element\SuggestElement Extends SimpleElement
Not available \Magento\Mtf\Client\Element\Tree Abstract class
<div class="tree x-tree" /> \Magento\Mtf\Client\Element\TreeElement Extends Tree

How to create a class for the typified element

Step 1. Create a PHP class in the <magento2_root_dir>/dev/tests/functional/lib/Magento/Mtf/Client/Element directory

It must be named according to the following naming convention. Two capital letters in the name: the first letter and a capital E in the Element.php. For example: OptgroupselectElement.php.

1
2
3
4
5
6
7
8
9
10
11
 
 <?php

 namespace Magento\Mtf\Client\Element;
 /**
  * Typified element class for option group selectors.
  */
 class OptgroupselectElement
 {
    //
 }

Step 2. Extend your class from the default element or the Magento custom element class

1
class OptgroupselectElement extends SelectElement

Step 3. Redefine methods of the extended class according to your goals

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
 * Option group locator
 *
 * @var string
 */
protected $optionGroupValue = ".//optgroup[@label = '%s']/option[text() = '%s']";

/**
 * Select value in dropdown that has option groups
 *
 * @param string $value
 * @return void
 */
public function setValue($value)
{
    $this->eventManager->dispatchEvent(['set_value'], [__METHOD__, $this->getAbsoluteSelector()]);
    list($group, $option) = explode('/', $value);
    $xpath = sprintf($this->optionGroupValue, $group, $option);
    $option = $this->find($xpath, Locator::SELECTOR_XPATH);
    $option->click();
}

How to use

Typified elements are used in the FTF blocks. Use a find() method to find an element. This method is declared in the SimpleElement class:

1
2
3
4
5
6
7
8
9
10
11
12
/**
 * Find element using locator in context of current element
 *
 * @param string $selector
 * @param string $strategy [optional]
 * @param null|string $type [optional]
 * @return ElementInterface
 */
public function find($selector, $strategy = Locator::SELECTOR_CSS, $type = null)
{
    return $this->driver->find($selector, $strategy, $type, $this);
}

The following code is an example of the find() method usage from the \Magento\Catalog\Test\Block\Adminhtml\Category\Tree block:

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
 * Check category in category tree
 *
 * @param Category $category
 * @return bool
 */
public function isCategoryVisible(Category $category)
{
    $categoryPath = $this->prepareFullCategoryPath($category);
    $categoryPath = implode('/', $categoryPath);
    return $this->_rootElement->find($this->treeElement, Locator::SELECTOR_CSS, 'tree')
        ->isElementVisible($categoryPath);
}

Mapping

Typified elements can be used in the form mapping.

A typified element mapping example in GUI

The following code is a corresponding mapping with the typified element optgroupselect from the previous image:

1
2
3
4
5
6
7
8
9
10
11
12
13
<mapping strict="0">
    <wrapper>store</wrapper>
    <fields>
        <group_id>
            <input>optgroupselect</input>
        </group_id>
        <name />
        <code />
        <is_active>
            <input>select</input>
        </is_active>
    </fields>
</mapping>