MC-4280: Row Vertical Alignment Doesn't Work Inside Block & Dynamic Block

- concat selectors for asserting block styles
- stabilize test

Author: anthoula

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

@@ -31,8 +31,6 @@
         <element name="margins" type="text" selector="(//div[contains(@class,'pagebuilder-block')])[{{arg1}}]//div[contains(@style,'margin: {{arg2}}px;')]" parameterized="true"/>
         <element name="padding" type="text" selector="(//div[contains(@class,'pagebuilder-block')])[{{arg1}}]//div[contains(@style,'padding: {{arg2}}px;')]" parameterized="true"/>
         <element name="overlay" type="text" selector="(//div[contains(@class,'pagebuilder-block') and contains(@class,'pagebuilder-block-overlay')])[{{arg1}}]" parameterized="true"/>
-        <!-- Row -->
-        <element name="rowInnerStyle" type="text" selector="(//div[contains(@class,'pagebuilder-block')])[{{arg1}}]//div[@data-role='row']//div[@data-element='inner'][contains(@style, '{{arg2}}')]" parameterized="true"/>
     </section>
     <section name="BlockOnGrid">
         <element name="searchBox" type="text" selector="//input[contains(@class,'data-grid-search-control')]"/>
@@ -45,6 +43,7 @@
         <element name="selectBlockBtn" type="button" selector="(//div[contains(@class,'pagebuilder-block')]//button/span[text()='Select Block'])"/>
     </section>
     <section name="BlockOnStorefront">
+        <element name="ancestor" type="text" selector="[ancestor::div[@data-role='block']]"/>
         <element name="html" type="text" selector="(//div[@data-role='html'])[{{arg1}}]//a[contains(@class,'pagebuilder-button-primary')]" parameterized="true"/>
         <element name="base" type="text" selector="(//div[@data-role='block'])[{{arg1}}]" parameterized="true"/>
         <element name="hidden" type="text" selector="(//div[@data-role='block'])[{{arg1}}][contains(@style, 'display: none')]" parameterized="true"/>
@@ -63,7 +62,5 @@
         <element name="noCssClasses" type="text" selector="(//div[@data-role='row'])[{{arg1}}]/div[not(@class)]" parameterized="true"/>
         <element name="margins" type="text" selector="(//div[@data-role='block'])[{{arg1}}][contains(@style,'margin: {{arg2}}px;')]" parameterized="true"/>
         <element name="padding" type="text" selector="(//div[@data-role='block'])[{{arg1}}][contains(@style,'padding: {{arg2}}px;')]" parameterized="true"/>
-        <!-- Row -->
-        <element name="rowInnerStyle" type="text" selector="(//div[@data-role='block'])[{{arg1}}]//div[@data-role='row']//div[@data-element='inner'][contains(@style, '{{arg2}}')]" parameterized="true"/>
     </section>
 </sections>

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

@@ -77,7 +77,7 @@
         <element name="hidden" type="text" selector="(//div[@data-role='row'])[{{arg1}}][contains(@style, 'display: none')]" parameterized="true"/>
         <element name="notHidden" type="text" selector="(//div[@data-role='row'])[{{arg1}}][not(contains(@style, 'display: none'))]" parameterized="true"/>
         <element name="computedWidth" type="text" selector="parseInt(window.getComputedStyle(document.querySelector('[data-role=row]')).width)"/>
-        <element name="rowStyle" type="button" selector="(//div[@data-role='row'])[{{arg1}}]/div[contains(@style, '{{arg2}}')]" parameterized="true"/>
+        <element name="rowStyle" type="button" selector="(//div[@data-role='row'])[{{arg1}}]//div[@data-element='inner'][contains(@style, '{{arg2}}')]" parameterized="true"/>
         <element name="rowWidthJS" type="text" selector="document.querySelectorAll('[data-appearance=\'{{arg1}}\']')[{{arg2}}].clientWidth" parameterized="true"/>
         <element name="rowH2ChildWidthJS" type="text" selector="document.querySelectorAll('div[data-appearance~=\'{{arg1}}\'] h2')[{{arg2}}].clientWidth" parameterized="true"/>
         <element name="appearance" type="text" selector="(//div[@data-role='row'])[{{arg1}}][@data-appearance='{{arg2}}']" parameterized="true"/>

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

@@ -1114,26 +1114,25 @@
             <title value="Row Content Can Be Vertically Aligned In Block"/>
             <description value="A user can vertically align row contents in a Block"/>
             <severity value="CRITICAL"/>
-            <useCaseId value="MC-914"/>
+            <useCaseId value="MC-4280"/>
             <testCaseId value="MC-5061"/>
             <group value="pagebuilder"/>
             <group value="pagebuilder-block"/>
+            <group value="pagebuilder-row"/>
         </annotations>
         <before>
             <actionGroup ref="LoginAsAdmin" stepKey="loginAsAdmin" />
-            <actionGroup ref="enablePageBuilderSetting" stepKey="enablePageBuilderSetting" />
             <createData entity="_defaultBlock" stepKey="createPreReqBlock" />
+            <actionGroup ref="navigateToCreatedCMSBlockPage" stepKey="navigateToCreatedCMSBlockPage">
+                <argument name="CMSBlockPage" value="$$createPreReqBlock$$" />
+            </actionGroup>
         </before>
         <after>
             <deleteData createDataKey="createPreReqBlock" stepKey="deletePreReqBlock" />
-            <actionGroup ref="DisabledWYSIWYG" stepKey="disableWYSIWYG"/>
             <actionGroup ref="logout" stepKey="logout"/>
         </after>
         <!-- Edit Block and configure Row - Vertical Align Bottom -->
         <comment userInput="Edit Block and configure row vertical align bottom" stepKey="commentConfigureRowVerticalAlignBottom"/>
-        <actionGroup ref="navigateToCreatedCMSBlockPage" stepKey="navigateToCreatedCMSBlockPage">
-            <argument name="CMSBlockPage" value="$$createPreReqBlock$$" />
-        </actionGroup>
         <actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage">
             <argument name="contentType" value="PageBuilderRowContentType"/>
         </actionGroup>
@@ -1145,6 +1144,7 @@
         </actionGroup>
         <actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettingsInBlock"/>
         <click selector="{{CmsNewBlockBlockActionsSection.savePage}}" stepKey="saveBlock"/>
+        <waitForPageLoad time="30" stepKey="waitForStageToLoad"/>
         <!-- Go to CMS Page and choose Block -->
         <comment userInput="Go to CMS Page and choose Block" stepKey="commentGoToCMSPage"/>
         <actionGroup ref="navigateToAPageWithPageBuilder" stepKey="navigateToAPageWithPageBuilder"/>
@@ -1164,20 +1164,20 @@
         <actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettings"/>
         <!-- Verify Vertical Alignment On Stage - Before Save -->
         <comment userInput="Verify min height and vertical alignment on stage before save" stepKey="commentVerifyMinHeightAndVerticalAlignmentOnStageBeforeSave"/>
-        <seeElement selector="{{BlockOnStage.rowInnerStyle('1', PageBuilderMinHeightProperty_500.value)}}" stepKey="seeRowMinHeightBeforeSave"/>
-        <seeElement selector="{{BlockOnStage.rowInnerStyle('1', PageBuilderVerticalAlignmentPropertyBottom.style)}}" stepKey="seeRowVerticalAlignmentBottomBeforeSave"/>
+        <seeElement selector="({{RowOnStorefront.rowStyle('1', PageBuilderMinHeightProperty_500.style)}}{{BlockOnStorefront.ancestor}})[1]" stepKey="seeRowMinHeightBeforeSave"/>
+        <seeElement selector="({{RowOnStorefront.rowStyle('1', PageBuilderVerticalAlignmentPropertyBottom.style)}}{{BlockOnStorefront.ancestor}})[1]" stepKey="seeRowVerticalAlignmentBottomBeforeSave"/>
         <actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
         <actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStageAfterSave"/>
         <!-- Verify Vertical Alignment On Stage - After Save -->
         <comment userInput="Verify min height and vertical alignment on stage after save" stepKey="commentVerifyMinHeightAndVerticalAlignmentOnStageAfterSave"/>
-        <seeElement selector="{{BlockOnStage.rowInnerStyle('1', PageBuilderMinHeightProperty_500.value)}}" stepKey="seeRowMinHeightAfterSave"/>
-        <seeElement selector="{{BlockOnStage.rowInnerStyle('1', PageBuilderVerticalAlignmentPropertyBottom.style)}}" stepKey="seeRowVerticalAlignmentBottomAfterSave"/>
+        <seeElement selector="({{RowOnStorefront.rowStyle('1', PageBuilderMinHeightProperty_500.style)}}{{BlockOnStorefront.ancestor}})[1]" stepKey="seeRowMinHeightAfterSave"/>
+        <seeElement selector="({{RowOnStorefront.rowStyle('1', PageBuilderVerticalAlignmentPropertyBottom.style)}}{{BlockOnStorefront.ancestor}})[1]" stepKey="seeRowVerticalAlignmentBottomAfterSave"/>
         <!-- Verify Min Height and Vertical Alignment In Storefront -->
         <comment userInput="Verify min height and vertical alignment in storefront" stepKey="commentVerifyMinHeightAndVerticalAlignmentInStorefront"/>
         <actionGroup ref="navigateToStoreFront" stepKey="navigateToStoreFront">
             <argument name="contentType" value="PageBuilderBlockContentType"/>
         </actionGroup>
-        <seeElement selector="{{BlockOnStorefront.rowInnerStyle('1', PageBuilderMinHeightProperty_500.value)}}" stepKey="seeRowMinHeightStorefront"/>
-        <seeElement selector="{{BlockOnStorefront.rowInnerStyle('1', PageBuilderVerticalAlignmentPropertyBottom.style)}}" stepKey="seeRowVerticalAlignmentBottomStorefront"/>
+        <seeElement selector="({{RowOnStorefront.rowStyle('1', PageBuilderMinHeightProperty_500.style)}}{{BlockOnStorefront.ancestor}})[1]" stepKey="seeRowMinHeightStorefront"/>
+        <seeElement selector="({{RowOnStorefront.rowStyle('1', PageBuilderVerticalAlignmentPropertyBottom.style)}}{{BlockOnStorefront.ancestor}})[1]" stepKey="seeRowVerticalAlignmentBottomStorefront"/>
     </test>
 </tests>