Section structure

A <section> is a reusable part of a <page> and is the standard file for defining UI elements on a page used in a test.

A <section> can define:

• An explicit element that has a selector equal to the constant string. Example: selector="#add_root_category_button"
• A parameterized element that contains substitutable values in the selector. Example: selector="#element .{{var1}} .{{var2}}".

Substitutable values

Substitutable values in the test can be of the following formats:

• String literals (stringLiteral)
• References to a data entity (XML data from the corresponding .../Data/*.xml) such as entityName.Field.
• Persisted data:
• $persistedCreateDataKey.field$ for data created in the scope of a test using the <createData> action with stepKey="persistedCreateDataKey".
• $$persistedCreateDataKey.field$$ for data created in before and after hooks. Even though <before>and <after> are nested inside a test, persisted data is stored differently when it is done in a test hook. Therefore it must be accessed with a different notation.

The following diagram shows the XML structure of an MFTF section:

Format

The format of a <section> is:

1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" encoding="UTF-8"?>

<sections xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:mftf:Page/etc/SectionObject.xsd">
   <section name="">
      <element name="" type="" selector="" />
      <element name="" type="" selector="" parameterized="true"/>
      <element name="" type="" selector="" timeout=""/>
   </section>
</sections>

Principles

The following conventions apply to MFTF sections:

• <section> name must be alphanumeric.
• *Section.xml is stored in the Section directory of a module.
• The name format is {Admin|Storefront}{SectionDescription}Section.xml.
• Camel case is used for <section> elements. They describe the function of the element rather than attempting to describe the selector used.

Example

Example (.../Catalog/Section/AdminCategorySidebarActionSection.xml file):

1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="utf-8"?>

<sections xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:mftf:Page/etc/SectionObject.xsd">
   <section name="AdminCategorySidebarActionSection">
      <element name="addRootCategoryButton" type="button" selector="#add_root_category_button" timeout="30"/>
      <element name="addSubcategoryButton" type="button" selector="#add_subcategory_button" timeout="30"/>
   </section>
</sections>

This example uses a AdminCategorySidebarActionSection section. All sections with same name will be merged during test generation.

The AdminCategorySidebarActionSection section declares two buttons:

• addRootCategoryButton - button with a #add_root_category_button locator on the parent web page
• addSubcategoryButton - button with a #add_subcategory_button locator on the parent web page

The following is an example of a call in test:

1
2
<!-- Click on the button with locator "#add_subcategory_button" on the web page-->
<click selector="{{AdminCategorySidebarActionSection.addSubcategoryButton}}" stepKey="clickOnAddSubCategory"/>

Elements reference

section

<section> contains the sequence of UI elements in a section of a page.

element

<element>is a UI element used in an action.

timeout attribute

The attribute adds the waitForPageLoad action after a reference to the element in test. The most usual use case is a test step with a button click action.

Use case: Set a timeout of 30 seconds after clicking the signIn button.

The section element code declaration containing the timeout attribute:

StorefrontSigninSection.xml

1
2
3
...
<element name="signIn" type="button" selector="#signIn" timeout="30"/>
...

The test step that covers the use case:

StorefrontSigninTest.xml

1
2
3
...
<click selector="{{StorefrontSigninSection.signIn}}" ../>
...

Whenever the signIn button is used in a test, the MFTF will add a 30 second waitForPageLoad action immediately after the click.