Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 57a693e

Browse files
dshevtsovdshevtsov
authored
Merge pull request magento#762 from magento/ds_MAGETWO-55698_ftf-upload
[2.2][FTF] Added Upload typified element
2 parents 5856bc4 + 55b12f1 commit 57a693e

File tree

1 file changed

+238
-1
lines changed

1 file changed

+238
-1
lines changed

‎guides/v2.2/mtf/mtf_entities/mtf_typified-element.md

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎guides/v2.2/mtf/mtf_entities/mtf_typified-element.md

Lines changed: 238 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,238 @@
1+
---
2+
layout: default
3+
group: mtf-guide
4+
subgroup: 50_Entities
5+
title: Typified element
6+
menu_title: Typified element
7+
menu_order: 5
8+
version: 2.2
9+
github_link: mtf/mtf_entities/mtf_typified-element.md
10+
---
11+
12+
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.
13+
14+
## Example {#example}
15+
16+
![A typified element example in the browser]
17+
18+
This example shows the `optgroup` typified element. You can use the [`\Magento\Mtf\Client\Element\OptgroupselectElement`] class to test it.
19+
20+
## General {#general}
21+
22+
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](#basic_class) or a [Magento class](#magento_class) to cover your typified element.
23+
24+
<div class="bs-callout bs-callout-tip" markdown="1">
25+
The most important methods are `setValue()` and `getValue()`. These methods are required when you work with a form.
26+
</div>
27+
28+
There are two types of testing typified elements: default typified elements and Magento custom typified elements.
29+
30+
* Default typified elements are the web elements that are typically used in a web application.
31+
32+
* Magento custom typified elements are the web elements that are specific to the Magento application
33+
34+
## Default testing typified elements {#basic_class}
35+
36+
Default testing typified elements are stored in the `<magento2_root_dir>/dev/tests/functional/vendor/magento/mtf/Magento/Mtf/Client/Element` directory.
37+
38+
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.
39+
40+
| Magento UI element | FTF class | Notes|
41+
|---|---|---|
42+
| `<input type="checkbox" />` |[`\Magento\Mtf\Client\Element\CheckboxElement`]| Extends [SimpleElement]. |
43+
| `<select multiple />` |[`\Magento\Mtf\Client\Element\MultiselectElement`]| Extends [SelectElement]. |
44+
|`<input type="radio" />` |[`\Magento\Mtf\Client\Element\RadiobuttonElement`]| Extends [SimpleElement]. |
45+
| `<select />` |[`\Magento\Mtf\Client\Element\SelectElement`]| Extends [SimpleElement]. |
46+
| `<select multiple />` |[`\Magento\Mtf\Client\Element\StrictmultiselectElement`]| Extends [MultiselectElement]. `setValue()` sets the exact value, as opposed to [MultiselectElement]. |
47+
| `<select />` |[`\Magento\Mtf\Client\Element\StrictselectElement`]| Extends [SelectElement]. `setValue()` sets the exact value, as opposed to [SelectElement]. |
48+
| `<input type="file" />` |[`\Magento\Mtf\Client\Element\UploadElement`]| Extends [SimpleElement].|
49+
50+
## Custom testing typified elements {#magento_class}
51+
52+
Testing typified elements for Magento custom elements are stored in the `<magento2_root_dir>/dev/tests/functional/lib/Magento/Mtf/Client/Element` directory.
53+
54+
| Magento UI element | FTF class | Notes|
55+
|---|---|---|
56+
| `<div class="rule-tree" />` | [`\Magento\Mtf\Client\Element\ConditionsElement`]| Extends [SimpleElement]. |
57+
| `<div id="ui-datepicker-div" />` | [`\Magento\Mtf\Client\Element\DatepickerElement`] | Extends [SimpleElement]. |
58+
| `<div class="action-select admin__action-multiselect" />` | [`\Magento\Mtf\Client\Element\DropdownmultiselectElement`] | Extends [MultiselectElement]. |
59+
| `<div class="search-global" />` | [`\Magento\Mtf\Client\Element\GlobalsearchElement`] | Extends [SimpleElement]. |
60+
| `<div class="tree x-tree jstree" />` | [`\Magento\Mtf\Client\Element\JquerytreeElement`] | Extends [Tree]. |
61+
| `<div class="store-switcher />` | [`\Magento\Mtf\Client\Element\LiselectstoreElement`] | Extends [SimpleElement]. |
62+
| `<select class="admin__control-multiselect">` &nbsp;&nbsp;&nbsp;&nbsp;`<option />` <br/> &nbsp;&nbsp;&nbsp;&nbsp;`<optgroup />` <br/> `</select>` | [`\Magento\Mtf\Client\Element\MultiselectgrouplistElement`] | Extends [MultiselectElement]. Contains `option` and `optgroup` elements. |
63+
| `<section class="block mselect-list" />` | [`\Magento\Mtf\Client\Element\MultiselectlistElement`] | Extends [MultiselectElement]. |
64+
| `<div class="mage-suggest" />` | [`\Magento\Mtf\Client\Element\MultisuggestElement`] | Extends [SuggestElement]. Allows multiple selection. |
65+
| `<select>` <br/> &nbsp;&nbsp;&nbsp;&nbsp;`<optgroup />` <br/> &nbsp;&nbsp;&nbsp;&nbsp;`<optgroup />` <br/> `</select>` | [`\Magento\Mtf\Client\Element\OptgroupselectElement`] | Extends [SelectElement]. Contains `optgroup` elements.|
66+
| `<select>` <br/> &nbsp;&nbsp;&nbsp;&nbsp;`<option />` <br/> &nbsp;&nbsp;&nbsp;&nbsp;`<optgroup />` <br/> `</select>` | [`\Magento\Mtf\Client\Element\SelectstoreElement`] | Extends [SelectElement]. Contains `option` and `optgroup` elements. |
67+
| `<select class="admin__control-select">` <br/> &nbsp;&nbsp;&nbsp;&nbsp;`<optgroup>` <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`<option data-title/>` <br/> &nbsp;&nbsp;&nbsp;&nbsp;`</optgroup>` <br/> `</select>`| [`\Magento\Mtf\Client\Element\SimplifiedselectElement`] | Extends [SelectElement]. Contains `option` and `optgroup` elements. `option` has a `data-title` attribute. |
68+
| `<div class="mage-suggest" />` | [`\Magento\Mtf\Client\Element\SuggestElement`] | Extends [SimpleElement]. |
69+
| Not available | [`\Magento\Mtf\Client\Element\Tree`] | Abstract class |
70+
| `<div class="tree x-tree" />` | [`\Magento\Mtf\Client\Element\TreeElement`] | Extends [Tree]. |
71+
72+
## HowTos
73+
74+
### Create {#create}
75+
76+
__Step 1.__ Create a PHP class in the `<magento2_root_dir>/dev/tests/functional/lib/Magento/Mtf/Client/Element` directory
77+
78+
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`.
79+
80+
{%highlight php %}
81+
82+
<?php
83+
84+
namespace Magento\Mtf\Client\Element;
85+
/**
86+
* Typified element class for option group selectors.
87+
*/
88+
class OptgroupselectElement
89+
{
90+
//
91+
}
92+
{%endhighlight %}
93+
94+
__Step 2.__ Extend your class from the [default element](#basic_class) or the [Magento custom element](#magento_class) class
95+
96+
{%highlight php startinline=1%}
97+
class OptgroupselectElement extends SelectElement
98+
{%endhighlight %}
99+
100+
__Step 3.__ Redefine methods of the extended class according to your goals
101+
102+
{%highlight php startinline=1%}
103+
/**
104+
* Option group locator
105+
*
106+
* @var string
107+
*/
108+
protected $optionGroupValue = ".//optgroup[@label = '%s']/option[text() = '%s']";
109+
110+
/**
111+
* Select value in dropdown that has option groups
112+
*
113+
* @param string $value
114+
* @return void
115+
*/
116+
public function setValue($value)
117+
{
118+
$this->eventManager->dispatchEvent(['set_value'], [__METHOD__, $this->getAbsoluteSelector()]);
119+
list($group, $option) = explode('/', $value);
120+
$xpath = sprintf($this->optionGroupValue, $group, $option);
121+
$option = $this->find($xpath, Locator::SELECTOR_XPATH);
122+
$option->click();
123+
}
124+
{%endhighlight %}
125+
126+
### Use {#use}
127+
128+
Typified elements are used in the [FTF blocks].
129+
Use a `find()` method to find an element. This method is declared in the [SimpleElement] class:
130+
131+
{%highlight php startinline=1%}
132+
/**
133+
* Find element using locator in context of current element
134+
*
135+
* @param string $selector
136+
* @param string $strategy [optional]
137+
* @param null|string $type [optional]
138+
* @return ElementInterface
139+
*/
140+
public function find($selector, $strategy = Locator::SELECTOR_CSS, $type = null)
141+
{
142+
return $this->driver->find($selector, $strategy, $type, $this);
143+
}
144+
{%endhighlight%}
145+
146+
The following code is an example of the `find()` method usage from the [\Magento\Catalog\Test\Block\Adminhtml\Category\Tree] block:
147+
148+
{%highlight php startinline=1%}
149+
/**
150+
* Check category in category tree
151+
*
152+
* @param Category $category
153+
* @return bool
154+
*/
155+
public function isCategoryVisible(Category $category)
156+
{
157+
$categoryPath = $this->prepareFullCategoryPath($category);
158+
$categoryPath = implode('/', $categoryPath);
159+
return $this->_rootElement->find($this->treeElement, Locator::SELECTOR_CSS, 'tree')
160+
->isElementVisible($categoryPath);
161+
}
162+
{%endhighlight%}
163+
164+
### Map {#mapping}
165+
166+
Typified elements can be used in the [form mapping].
167+
168+
![A typified element mapping example in GUI]
169+
170+
The following code is a corresponding mapping with the typified element `optgroupselect` from the previous image:
171+
172+
{%highlight xml%}
173+
<mapping strict="0">
174+
<wrapper>store</wrapper>
175+
<fields>
176+
<group_id>
177+
<input>optgroupselect</input>
178+
</group_id>
179+
<name />
180+
<code />
181+
<is_active>
182+
<input>select</input>
183+
</is_active>
184+
</fields>
185+
</mapping>
186+
{%endhighlight%}
187+
188+
189+
<!-- PICTURE DEFINITIONS -->
190+
191+
[A typified element mapping example in GUI]: {{site.baseurl}}common/images/ftf/mtf_typ_element_map_gui.png
192+
[A typified element example in the browser]: {{site.baseurl}}common/images/ftf/mtf_typ_element_brows.png
193+
194+
195+
<!-- LINK DEFINITIONS -->
196+
197+
<!-- General -->
198+
[`ElementInterface`]: https://github.com/magento/mtf/blob/develop/Magento/Mtf/Client/ElementInterface.php
199+
[form mapping]: {{page.baseurl}}mtf/mtf_entities/mtf_block.html#mtf_block_mapping
200+
[`\Magento\Mtf\Client\Element\OptgroupselectElement`]: {{site.mage2000url}}dev/tests/functional/lib/Magento/Mtf/Client/Element/OptgroupselectElement.php
201+
[`<magento2_root_dir>/dev/tests/functional/lib/Magento/Mtf/Client/Element`]: {{site.mage2000url}}dev/tests/functional/lib/Magento/Mtf/Client/Element
202+
[FTF blocks]: {{page.baseurl}}mtf/mtf_entities/mtf_block.html
203+
[\Magento\Catalog\Test\Block\Adminhtml\Category\Tree]: {{site.mage2000url}}dev/tests/functional/tests/app/Magento/Catalog/Test/Block/Adminhtml/Category/Tree.php
204+
205+
<!-- Basic classes -->
206+
[`\Magento\Mtf\Client\Element\SimpleElement`]: https://github.com/magento/mtf/blob/develop/Magento/Mtf/Client/Element/SimpleElement.php
207+
[SimpleElement]: https://github.com/magento/mtf/blob/develop/Magento/Mtf/Client/Element/SimpleElement.php
208+
[`\Magento\Mtf\Client\Element\CheckboxElement`]: https://github.com/magento/mtf/blob/develop/Magento/Mtf/Client/Element/CheckboxElement.php
209+
[`\Magento\Mtf\Client\Element\MultiselectElement`]: https://github.com/magento/mtf/blob/develop/Magento/Mtf/Client/Element/MultiselectElement.php
210+
[MultiselectElement]: https://github.com/magento/mtf/blob/develop/Magento/Mtf/Client/Element/MultiselectElement.php
211+
[`\Magento\Mtf\Client\Element\RadiobuttonElement`]: https://github.com/magento/mtf/blob/develop/Magento/Mtf/Client/Element/RadiobuttonElement.php
212+
[`\Magento\Mtf\Client\Element\SelectElement`]: https://github.com/magento/mtf/blob/develop/Magento/Mtf/Client/Element/SelectElement.php
213+
[SelectElement]: https://github.com/magento/mtf/blob/develop/Magento/Mtf/Client/Element/SelectElement.php
214+
[`\Magento\Mtf\Client\Element\StrictmultiselectElement`]: https://github.com/magento/mtf/blob/develop/Magento/Mtf/Client/Element/StrictmultiselectElement.php
215+
[`\Magento\Mtf\Client\Element\StrictselectElement`]: https://github.com/magento/mtf/blob/develop/Magento/Mtf/Client/Element/StrictselectElement.php
216+
[`\Magento\Mtf\Client\Element\UploadElement`]: https://github.com/magento/mtf/blob/develop/Magento/Mtf/Client/Element/UploadElement.php
217+
218+
<!-- Magento classes -->
219+
[`\Magento\Mtf\Client\Element\ConditionsElement`]: {{site.mage2000url}}dev/tests/functional/lib/Magento/Mtf/Client/Element/ConditionsElement.php
220+
[`\Magento\Mtf\Client\Element\DatepickerElement`]: {{site.mage2000url}}dev/tests/functional/lib/Magento/Mtf/Client/Element/DatepickerElement.php
221+
[`\Magento\Mtf\Client\Element\DropdownmultiselectElement`]: {{site.mage2000url}}dev/tests/functional/lib/Magento/Mtf/Client/Element/DropdownmultiselectElement.php
222+
[`\Magento\Mtf\Client\Element\GlobalsearchElement`]: {{site.mage2000url}}dev/tests/functional/lib/Magento/Mtf/Client/Element/GlobalsearchElement.php
223+
[`\Magento\Mtf\Client\Element\JquerytreeElement`]: {{site.mage2000url}}dev/tests/functional/lib/Magento/Mtf/Client/Element/JquerytreeElement.php
224+
[`\Magento\Mtf\Client\Element\LiselectstoreElement`]: {{site.mage2000url}}dev/tests/functional/lib/Magento/Mtf/Client/Element/LiselectstoreElement.php
225+
[`\Magento\Mtf\Client\Element\MultiselectgrouplistElement`]: {{site.mage2000url}}dev/tests/functional/lib/Magento/Mtf/Client/Element/MultiselectgrouplistElement.php
226+
[`\Magento\Mtf\Client\Element\MultiselectlistElement`]: {{site.mage2000url}}dev/tests/functional/lib/Magento/Mtf/Client/Element/MultiselectlistElement.php
227+
[`\Magento\Mtf\Client\Element\MultisuggestElement`]: {{site.mage2000url}}dev/tests/functional/lib/Magento/Mtf/Client/Element/MultisuggestElement.php
228+
[`\Magento\Mtf\Client\Element\OptgroupselectElement`]: {{site.mage2000url}}dev/tests/functional/lib/Magento/Mtf/Client/Element/OptgroupselectElement.php
229+
[`\Magento\Mtf\Client\Element\SelectstoreElement`]: {{site.mage2000url}}dev/tests/functional/lib/Magento/Mtf/Client/Element/SelectstoreElement.php
230+
[`\Magento\Mtf\Client\Element\SimplifiedselectElement`]: {{site.mage2000url}}dev/tests/functional/lib/Magento/Mtf/Client/Element/SimplifiedselectElement.php
231+
[`\Magento\Mtf\Client\Element\SuggestElement`]: {{site.mage2000url}}dev/tests/functional/lib/Magento/Mtf/Client/Element/SuggestElement.php
232+
[SuggestElement]: {{site.mage2000url}}dev/tests/functional/lib/Magento/Mtf/Client/Element/SuggestElement.php
233+
[`\Magento\Mtf\Client\Element\Tree`]: {{site.mage2000url}}dev/tests/functional/lib/Magento/Mtf/Client/Element/Tree.php
234+
[Tree]: {{site.mage2000url}}dev/tests/functional/lib/Magento/Mtf/Client/Element/Tree.php
235+
[`\Magento\Mtf\Client\Element\TreeElement`]: {{site.mage2000url}}dev/tests/functional/lib/Magento/Mtf/Client/Element/TreeElement.php
236+
237+
<!-- ABBREVIATIONS -->
238+
*[FTF]: Functional Testing Framework

0 commit comments

Comments
 (0)