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.


A testing 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.

There are two types of testing 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 testing typified elements

Default testing 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.

Magento 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.
<input type="file" /> \Magento\Mtf\Client\Element\UploadElement Extends SimpleElement.

Custom testing typified elements

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

Magento 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 />
\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.
    <optgroup />
    <optgroup />
\Magento\Mtf\Client\Element\OptgroupselectElement Extends SelectElement. Contains optgroup elements.
    <option />
    <optgroup />
\Magento\Mtf\Client\Element\SelectstoreElement Extends SelectElement. Contains option and optgroup elements.
<select class="admin__control-select">
        <option data-title/>
\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.



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.


 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

class OptgroupselectElement extends SelectElement

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

 * 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);


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

 * 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:

 * 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')


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:

<mapping strict="0">
        <name />
        <code />