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.

Example

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

General

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.

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.

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.

HowTos

Create

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.

 
 <?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);
    $option->click();
}

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:

/**
 * 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')
        ->isElementVisible($categoryPath);
}

Map

Typified elements can be used in the form mapping.

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

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