MC-1110: Create MFTF tests for vertical alignment of columns

- parameterize new selector

Author: anthoula

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderColumnSection.xml

@@ -19,7 +19,7 @@
         <element name="columnResizeHandle" type="block" selector=".pagebuilder-column-resize-handle"/>
         <element name="columnResizeGridLine" type="block" selector=".resize-grid .grid-line:nth-child({{arg}})" parameterized="true"/>
         <element name="columnStyle" type="text" selector="(//div[contains(@class, 'pagebuilder-column-group')])[1]/descendant::div[contains(@class, 'pagebuilder-content-type') and contains(@class, 'pagebuilder-column')][{{arg1}}][contains(@style, '{{arg2}}')]" parameterized="true"/>
-        <element name="columnChildrenStyle" type="text" selector="(//div[contains(@class, 'pagebuilder-column-group')])[1]/descendant::div[contains(@class, 'pagebuilder-content-type') and contains(@class, 'pagebuilder-column')][{{arg1}}]//div[contains(@class, 'element-children')][contains(@style, '{{arg2}}')]" parameterized="true"/>
+        <element name="columnChildrenStyle" type="text" selector="(//div[contains(@class, 'pagebuilder-column-group')])[{{arg1}}]/descendant::div[contains(@class, 'pagebuilder-content-type') and contains(@class, 'pagebuilder-column')][{{arg2}}]//div[contains(@class, 'element-children')][contains(@style, '{{arg3}}')]" parameterized="true"/>
         <element name="allColumns" type="text" selector="//div[contains(@class, 'pagebuilder-content-type') and contains(@class, 'pagebuilder-column')]"/>
         <element name="addRow" type="button" selector='//*[@class="pagebuilder-stage"]/div[3]/button'/>
         <element name="draggableColumnInPanel" type="button" selector='//*[text()="Column"]/ancestor::*[contains(@class, "ui-draggable")]'/>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderColumnTest.xml

@@ -287,16 +287,16 @@
         </actionGroup>
         <!-- Verify Vertical Alignment On Stage - Before Save -->
         <comment userInput="Verify vertical alignment on stage before save" stepKey="commentVerifyVerticalAlignmentOnStageBeforeSave"/>
-        <seeElement selector="{{PageBuilderColumnSection.columnChildrenStyle('1', PageBuilderColumnStyles.verticalAlignmentTop)}}" stepKey="seeFirstColumnVerticalAlignmentTop"/>
-        <seeElement selector="{{PageBuilderColumnSection.columnChildrenStyle('2', PageBuilderColumnStyles.verticalAlignmentCenter)}}" stepKey="seeFirstColumnVerticalAlignmentCenter"/>
-        <seeElement selector="{{PageBuilderColumnSection.columnChildrenStyle('3', PageBuilderColumnStyles.verticalAlignmentBottom)}}" stepKey="seeFirstColumnVerticalAlignmentBottom"/>
+        <seeElement selector="{{PageBuilderColumnSection.columnChildrenStyle('1', '1', PageBuilderColumnStyles.verticalAlignmentTop)}}" stepKey="seeFirstColumnVerticalAlignmentTop"/>
+        <seeElement selector="{{PageBuilderColumnSection.columnChildrenStyle('1', '2', PageBuilderColumnStyles.verticalAlignmentCenter)}}" stepKey="seeFirstColumnVerticalAlignmentCenter"/>
+        <seeElement selector="{{PageBuilderColumnSection.columnChildrenStyle('1', '3', PageBuilderColumnStyles.verticalAlignmentBottom)}}" stepKey="seeFirstColumnVerticalAlignmentBottom"/>
         <!-- Verify Vertical Alignment On Stage - After Save -->
         <comment userInput="Verify vertical alignment on stage after save" stepKey="commentVerifyVerticalAlignmentOnStageAfterSave"/>
         <actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
         <actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
-        <seeElement selector="{{PageBuilderColumnSection.columnChildrenStyle('1', PageBuilderColumnStyles.verticalAlignmentTop)}}" stepKey="seeFirstColumnVerticalAlignmentTopAfterSave"/>
-        <seeElement selector="{{PageBuilderColumnSection.columnChildrenStyle('2', PageBuilderColumnStyles.verticalAlignmentCenter)}}" stepKey="seeFirstColumnVerticalAlignmentCenterAfterSave"/>
-        <seeElement selector="{{PageBuilderColumnSection.columnChildrenStyle('3', PageBuilderColumnStyles.verticalAlignmentBottom)}}" stepKey="seeFirstColumnVerticalAlignmentBottomAfterSave"/>
+        <seeElement selector="{{PageBuilderColumnSection.columnChildrenStyle('1', '1', PageBuilderColumnStyles.verticalAlignmentTop)}}" stepKey="seeFirstColumnVerticalAlignmentTopAfterSave"/>
+        <seeElement selector="{{PageBuilderColumnSection.columnChildrenStyle('1', '2', PageBuilderColumnStyles.verticalAlignmentCenter)}}" stepKey="seeFirstColumnVerticalAlignmentCenterAfterSave"/>
+        <seeElement selector="{{PageBuilderColumnSection.columnChildrenStyle('1', '3', PageBuilderColumnStyles.verticalAlignmentBottom)}}" stepKey="seeFirstColumnVerticalAlignmentBottomAfterSave"/>
         <!-- Verify Vertical Alignment In Storefront -->
         <actionGroup ref="navigateToStoreFront" stepKey="navigateToStoreFront">
             <argument name="contentType" value="PageBuilderColumnContentType"/>
@@ -408,16 +408,16 @@
         </actionGroup>
         <!-- Verify Vertical Alignment On Stage - Before Save -->
         <comment userInput="Verify vertical alignment on stage before save" stepKey="commentVerifyVerticalAlignmentOnStageBeforeSave"/>
-        <seeElement selector="{{PageBuilderColumnSection.columnChildrenStyle('1', PageBuilderColumnStyles.verticalAlignmentTop)}}" stepKey="seeFirstColumnVerticalAlignmentTop"/>
-        <seeElement selector="{{PageBuilderColumnSection.columnChildrenStyle('2', PageBuilderColumnStyles.verticalAlignmentCenter)}}" stepKey="seeFirstColumnVerticalAlignmentCenter"/>
-        <seeElement selector="{{PageBuilderColumnSection.columnChildrenStyle('3', PageBuilderColumnStyles.verticalAlignmentBottom)}}" stepKey="seeFirstColumnVerticalAlignmentBottom"/>
+        <seeElement selector="{{PageBuilderColumnSection.columnChildrenStyle('1', '1', PageBuilderColumnStyles.verticalAlignmentTop)}}" stepKey="seeFirstColumnVerticalAlignmentTop"/>
+        <seeElement selector="{{PageBuilderColumnSection.columnChildrenStyle('1', '2', PageBuilderColumnStyles.verticalAlignmentCenter)}}" stepKey="seeFirstColumnVerticalAlignmentCenter"/>
+        <seeElement selector="{{PageBuilderColumnSection.columnChildrenStyle('1', '3', PageBuilderColumnStyles.verticalAlignmentBottom)}}" stepKey="seeFirstColumnVerticalAlignmentBottom"/>
         <!-- Verify Vertical Alignment On Stage - After Save -->
         <comment userInput="Verify vertical alignment on stage after save" stepKey="commentVerifyVerticalAlignmentOnStageAfterSave"/>
         <actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
         <actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
-        <seeElement selector="{{PageBuilderColumnSection.columnChildrenStyle('1', PageBuilderColumnStyles.verticalAlignmentTop)}}" stepKey="seeFirstColumnVerticalAlignmentTopAfterSave"/>
-        <seeElement selector="{{PageBuilderColumnSection.columnChildrenStyle('2', PageBuilderColumnStyles.verticalAlignmentCenter)}}" stepKey="seeFirstColumnVerticalAlignmentCenterAfterSave"/>
-        <seeElement selector="{{PageBuilderColumnSection.columnChildrenStyle('3', PageBuilderColumnStyles.verticalAlignmentBottom)}}" stepKey="seeFirstColumnVerticalAlignmentBottomAfterSave"/>
+        <seeElement selector="{{PageBuilderColumnSection.columnChildrenStyle('1', '1', PageBuilderColumnStyles.verticalAlignmentTop)}}" stepKey="seeFirstColumnVerticalAlignmentTopAfterSave"/>
+        <seeElement selector="{{PageBuilderColumnSection.columnChildrenStyle('1', '2', PageBuilderColumnStyles.verticalAlignmentCenter)}}" stepKey="seeFirstColumnVerticalAlignmentCenterAfterSave"/>
+        <seeElement selector="{{PageBuilderColumnSection.columnChildrenStyle('1', '3', PageBuilderColumnStyles.verticalAlignmentBottom)}}" stepKey="seeFirstColumnVerticalAlignmentBottomAfterSave"/>
         <!-- Verify Vertical Alignment In Storefront -->
         <comment userInput="Verify vertical alignment in storefront" stepKey="commentVerifyVerticalAlignmentInStorefront"/>
         <actionGroup ref="navigateToStoreFront" stepKey="navigateToStoreFront">