#558: Developer can style content types output differently per viewport - Added fixes for Banner Column Content Type

Author: hannahnida

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderBannerSection/BannerOnBackendSection.xml

@@ -24,15 +24,15 @@
             <argument name="property" value="PageBuilderAppearance_CollageCentered"/>
         </actionGroup>
         <actionGroup ref="ValidateContentTypeStylesActionGroup" stepKey="seeFirstMinHeightStage">
-            <argument name="selector" value="{{BannerOnBackend.collage('1')}}"/>
+            <argument name="selector" value="{{BannerOnBackend.wrapper('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderMinHeightProperty_200px.intValue}}"/>
             <argument name="cssProperty" value="minHeight"/>
         </actionGroup>
         <executeJS function="return document.evaluate(&quot;{{BannerOnBackend.wrapper('1')}}&quot;, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.getBoundingClientRect().height" stepKey="firstMinHeightStage"/>
         <executeJS function="return document.evaluate(&quot;{{BannerOnBackend.wrapper('2')}}&quot;, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.getBoundingClientRect().height" stepKey="secondMinHeightStage"/>
         <executeJS function="return document.evaluate(&quot;{{BannerOnBackend.wrapper('3')}}&quot;, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.getBoundingClientRect().height" stepKey="thirdMinHeightStage"/>
         <actionGroup ref="ValidateContentTypeStylesActionGroup" stepKey="seeFirstMinHeightStorefront">
-            <argument name="selector" value="{{BannerOnFrontend.collage('1')}}"/>
+            <argument name="selector" value="{{BannerOnFrontend.wrapper('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderMinHeightProperty_200px.intValue}}"/>
             <argument name="cssProperty" value="minHeight"/>
         </actionGroup>

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderBannerSection/BannerOnFrontendSection.xml

@@ -63,13 +63,13 @@
             <argument name="cssProperty" value="backgroundColor"/>
         </actionGroup>
         <actionGroup ref="ValidateContentTypeStylesActionGroup" stepKey="seeTransparentOverlayStage">
-            <argument name="selector" value="{{BannerOnBackend.contentPath('1')}}"/>
+            <argument name="selector" value="{{BannerOnBackend.overlay('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderBackgroundColor_Transparent.rgb}}"/>
             <argument name="cssProperty" value="backgroundColor"/>
         </actionGroup>
         <moveMouseOver selector="{{BannerOnBackend.appearance('1', PageBuilderAppearance_CollageCentered.value)}}" stepKey="moveMouseOverBannerStage"/>
         <actionGroup ref="ValidateContentTypeStylesActionGroup" stepKey="seeTransparentOverlayOnHoverStage">
-            <argument name="selector" value="{{BannerOnBackend.contentPath('1')}}"/>
+            <argument name="selector" value="{{BannerOnBackend.overlay('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderBackgroundColor_Transparent.rgb}}"/>
             <argument name="cssProperty" value="backgroundColor"/>
         </actionGroup>
@@ -87,13 +87,13 @@
             <argument name="cssProperty" value="backgroundColor"/>
         </actionGroup>
         <actionGroup ref="ValidateContentTypeStylesActionGroup" stepKey="seeTransparentOverlayStorefront">
-            <argument name="selector" value="{{BannerOnFrontend.contentPath('1')}}"/>
+            <argument name="selector" value="{{BannerOnFrontend.overlay('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderBackgroundColor_Transparent.rgb}}"/>
             <argument name="cssProperty" value="backgroundColor"/>
         </actionGroup>
         <moveMouseOver selector="{{BannerOnFrontend.base('1')}}" stepKey="moveMouseOverBannerStorefront"/>
         <actionGroup ref="ValidateContentTypeStylesActionGroup" stepKey="seeTransparentOverlayOnHoverStorefront">
-            <argument name="selector" value="{{BannerOnFrontend.contentPath('1')}}"/>
+            <argument name="selector" value="{{BannerOnFrontend.overlay('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderBackgroundColor_Transparent.rgb}}"/>
             <argument name="cssProperty" value="backgroundColor"/>
         </actionGroup>
@@ -108,13 +108,13 @@
             <argument name="cssProperty" value="backgroundColor"/>
         </actionGroup>
         <actionGroup ref="ValidateContentTypeStylesActionGroup" stepKey="seeTransparentOverlayStorefrontMobile">
-            <argument name="selector" value="{{BannerOnFrontend.contentPath('1')}}"/>
+            <argument name="selector" value="{{BannerOnFrontend.overlay('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderBackgroundColor_Transparent.rgb}}"/>
             <argument name="cssProperty" value="backgroundColor"/>
         </actionGroup>
         <moveMouseOver selector="{{BannerOnFrontend.base('1')}}" stepKey="moveMouseOverBannerStorefrontMobile"/>
         <actionGroup ref="ValidateContentTypeStylesActionGroup" stepKey="seeTransparentOverlayOnHoverStorefrontMobile">
-            <argument name="selector" value="{{BannerOnFrontend.contentPath('1')}}"/>
+            <argument name="selector" value="{{BannerOnFrontend.overlay('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderBackgroundColor_Transparent.rgb}}"/>
             <argument name="cssProperty" value="backgroundColor"/>
         </actionGroup>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderBannerCollageCenterAppearanceTest/BannerCollageCenterMinHeightValidInputs.xml

@@ -104,7 +104,7 @@
         </actionGroup>
         <seeElement selector="{{BannerOnBackend.cssClasses('1', PageBuilderAdvancedCssClassesPropertyThreeClasses.value)}}" stepKey="seeCSSClassesStage"/>
         <actionGroup ref="ValidateContentTypeStylesActionGroup" stepKey="seeMarginsStage">
-            <argument name="selector" value="{{BannerOnBackend.bannerPath('1')}}"/>
+            <argument name="selector" value="{{BannerOnBackend.base('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderMarginsPropertyUnique.value}}"/>
             <argument name="cssProperty" value="margin"/>
         </actionGroup>
@@ -176,7 +176,7 @@
         </actionGroup>
         <seeElement selector="{{BannerOnBackend.cssClasses('1', PageBuilderAdvancedCssClassesPropertyThreeClasses.value)}}" stepKey="seeCSSClassesStage2"/>
         <actionGroup ref="ValidateContentTypeStylesActionGroup" stepKey="seeMarginsStage2">
-            <argument name="selector" value="{{BannerOnBackend.bannerPath('1')}}"/>
+            <argument name="selector" value="{{BannerOnBackend.base('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderMarginsPropertyUnique.value}}"/>
             <argument name="cssProperty" value="margin"/>
         </actionGroup>
@@ -247,7 +247,7 @@
         </actionGroup>
         <seeElement selector="{{BannerOnFrontend.cssClasses('1', PageBuilderAdvancedCssClassesPropertyThreeClasses.value)}}" stepKey="seeCSSClassesStorefront"/>
         <actionGroup ref="ValidateContentTypeStylesActionGroup" stepKey="seeMarginsStorefront">
-            <argument name="selector" value="{{BannerOnFrontend.bannerPath('1')}}"/>
+            <argument name="selector" value="{{BannerOnFrontend.base('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderMarginsPropertyUnique.value}}"/>
             <argument name="cssProperty" value="margin"/>
         </actionGroup>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderBannerCollageCenterAppearanceTest/BannerCollageCenterOverlayNeverShowTest.xml

@@ -137,7 +137,7 @@
         <comment userInput="Validate Stage" stepKey="commentValidateStage"/>
         <seeElement selector="{{BannerOnBackend.appearance('1', PageBuilderAppearance_CollageCentered.value)}}" stepKey="seeAppearanceStage"/>
         <actionGroup ref="ValidateContentTypeStylesActionGroup" stepKey="seeMinimumHeightStage">
-            <argument name="selector" value="{{BannerOnBackend.collage('1')}}"/>
+            <argument name="selector" value="{{BannerOnBackend.wrapper('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderMinHeightProperty_500.value}}"/>
             <argument name="cssProperty" value="minHeight"/>
         </actionGroup>
@@ -159,7 +159,7 @@
         <seeElement selector="{{BannerOnBackend.buttonText('1', PageBuilderBannerButtonTextProperty2.value)}}" stepKey="seeButtonTextStage"/>
         <seeElement selector="{{BannerOnBackend.showOverlay('1', PageBuilderBannerShowContentOverlayAlwaysProperty.value)}}" stepKey="seeOverlayStateStage"/>
         <actionGroup ref="ValidateContentTypeStylesActionGroup" stepKey="seeOverlayBackgroundColor">
-            <argument name="selector" value="{{BannerOnBackend.contentPath('1')}}"/>
+            <argument name="selector" value="{{BannerOnBackend.overlay('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderBannerOverlayColor_Blue_Opaque.rgb}}"/>
             <argument name="cssProperty" value="backgroundColor"/>
         </actionGroup>
@@ -190,7 +190,7 @@
         </actionGroup>
         <seeElement selector="{{BannerOnBackend.cssClasses('1', PageBuilderAdvancedCssClassesPropertyThreeClasses.value)}}" stepKey="seeCSSClassesStage"/>
         <actionGroup ref="ValidateContentTypeStylesActionGroup" stepKey="seeMarginsStage">
-            <argument name="selector" value="{{BannerOnBackend.bannerPath('1')}}"/>
+            <argument name="selector" value="{{BannerOnBackend.base('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderMarginsPropertyUnique.value}}"/>
             <argument name="cssProperty" value="margin"/>
         </actionGroup>
@@ -206,7 +206,7 @@
         <comment userInput="Validate Stage After Save" stepKey="commentValidateStage2"/>
         <seeElement selector="{{BannerOnBackend.appearance('1', PageBuilderAppearance_CollageCentered.value)}}" stepKey="seeAppearanceStage2"/>
         <actionGroup ref="ValidateContentTypeStylesActionGroup" stepKey="seeMinimumHeightStage2">
-            <argument name="selector" value="{{BannerOnBackend.collage('1')}}"/>
+            <argument name="selector" value="{{BannerOnBackend.wrapper('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderMinHeightProperty_500.value}}"/>
             <argument name="cssProperty" value="minHeight"/>
         </actionGroup>
@@ -228,7 +228,7 @@
         <seeElement selector="{{BannerOnBackend.buttonText('1', PageBuilderBannerButtonTextProperty2.value)}}" stepKey="seeButtonTextStage2"/>
         <seeElement selector="{{BannerOnBackend.showOverlay('1', PageBuilderBannerShowContentOverlayAlwaysProperty.value)}}" stepKey="seeOverlayStateStage2"/>
         <actionGroup ref="ValidateContentTypeStylesActionGroup" stepKey="seeOverlayBackgroundColor2">
-            <argument name="selector" value="{{BannerOnBackend.contentPath('1')}}"/>
+            <argument name="selector" value="{{BannerOnBackend.overlay('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderBannerOverlayColor_Blue_Opaque.rgb}}"/>
             <argument name="cssProperty" value="backgroundColor"/>
         </actionGroup>
@@ -259,7 +259,7 @@
         </actionGroup>
         <seeElement selector="{{BannerOnBackend.cssClasses('1', PageBuilderAdvancedCssClassesPropertyThreeClasses.value)}}" stepKey="seeCSSClassesStage2"/>
         <actionGroup ref="ValidateContentTypeStylesActionGroup" stepKey="seeMarginsStage2">
-            <argument name="selector" value="{{BannerOnBackend.bannerPath('1')}}"/>
+            <argument name="selector" value="{{BannerOnBackend.base('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderMarginsPropertyUnique.value}}"/>
             <argument name="cssProperty" value="margin"/>
         </actionGroup>
@@ -355,7 +355,7 @@
         </actionGroup>
         <seeElement selector="{{BannerOnFrontend.appearance('1', PageBuilderAppearance_CollageCentered.value)}}" stepKey="seeAppearanceStorefront"/>
         <actionGroup ref="ValidateContentTypeStylesActionGroup" stepKey="seeMinimumHeightStorefront">
-            <argument name="selector" value="{{BannerOnFrontend.collage('1')}}"/>
+            <argument name="selector" value="{{BannerOnFrontend.wrapper('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderMinHeightProperty_500.value}}"/>
             <argument name="cssProperty" value="minHeight"/>
         </actionGroup>
@@ -378,7 +378,7 @@
         <seeElement selector="{{BannerOnFrontend.buttonText('1', PageBuilderBannerButtonTextProperty2.value)}}" stepKey="seeButtonTextStorefront"/>
         <seeElement selector="{{BannerOnFrontend.showOverlay('1', PageBuilderBannerShowContentOverlayAlwaysProperty.value)}}" stepKey="seeOverlayStateStorefront"/>
         <actionGroup ref="ValidateContentTypeStylesActionGroup" stepKey="seeOverlayBackgroundStorefront">
-            <argument name="selector" value="{{BannerOnFrontend.contentPath('1')}}"/>
+            <argument name="selector" value="{{BannerOnFrontend.overlay('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderBannerOverlayColor_Blue_Opaque.rgb}}"/>
             <argument name="cssProperty" value="backgroundColor"/>
         </actionGroup>
@@ -409,7 +409,7 @@
         </actionGroup>
         <seeElement selector="{{BannerOnFrontend.cssClasses('1', PageBuilderAdvancedCssClassesPropertyThreeClasses.value)}}" stepKey="seeCSSClassesStorefront"/>
         <actionGroup ref="ValidateContentTypeStylesActionGroup" stepKey="seeMarginsStorefront">
-            <argument name="selector" value="{{BannerOnFrontend.bannerPath('1')}}"/>
+            <argument name="selector" value="{{BannerOnFrontend.base('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderMarginsPropertyUnique.value}}"/>
             <argument name="cssProperty" value="margin"/>
         </actionGroup>
@@ -423,7 +423,7 @@
         <resizeWindow width="767" height="1000" stepKey="resizeWindowToMobile"/>
         <seeElement selector="{{BannerOnFrontend.appearance('1', PageBuilderAppearance_CollageCentered.value)}}" stepKey="seeMobileAppearanceStorefront"/>
         <actionGroup ref="ValidateContentTypeStylesActionGroup" stepKey="seeMobileMinimumHeightStorefront">
-            <argument name="selector" value="{{BannerOnFrontend.collage('1')}}"/>
+            <argument name="selector" value="{{BannerOnFrontend.wrapper('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderMinHeightProperty_500.value}}"/>
             <argument name="cssProperty" value="minHeight"/>
         </actionGroup>
@@ -440,7 +440,7 @@
         <seeElement selector="{{BannerOnFrontend.buttonText('1', PageBuilderBannerButtonTextProperty2.value)}}" stepKey="seeMobileButtonTextStorefront"/>
         <seeElement selector="{{BannerOnFrontend.showOverlay('1', PageBuilderBannerShowContentOverlayAlwaysProperty.value)}}" stepKey="seeMobileOverlayStateStorefront"/>
         <actionGroup ref="ValidateContentTypeStylesActionGroup" stepKey="seeMobileOverlayBackgroundStorefront">
-            <argument name="selector" value="{{BannerOnFrontend.contentPath('1')}}"/>
+            <argument name="selector" value="{{BannerOnFrontend.overlay('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderBannerOverlayColor_Blue_Opaque.rgb}}"/>
             <argument name="cssProperty" value="backgroundColor"/>
         </actionGroup>
@@ -471,7 +471,7 @@
         </actionGroup>
         <seeElement selector="{{BannerOnFrontend.cssClasses('1', PageBuilderAdvancedCssClassesPropertyThreeClasses.value)}}" stepKey="seeMobileCSSClassesStorefront"/>
         <actionGroup ref="ValidateContentTypeStylesActionGroup" stepKey="seeMobileMarginsStorefront">
-            <argument name="selector" value="{{BannerOnFrontend.bannerPath('1')}}"/>
+            <argument name="selector" value="{{BannerOnFrontend.base('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderMarginsPropertyUnique.value}}"/>
             <argument name="cssProperty" value="margin"/>
         </actionGroup>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderBannerCollageCenterAppearanceTest/BannerCollageCenterUpdateAdvancedConfigurationValuesTest.xml

@@ -24,15 +24,15 @@
             <argument name="property" value="PageBuilderAppearance_CollageLeft"/>
         </actionGroup>
         <actionGroup ref="ValidateContentTypeStylesActionGroup" stepKey="seeFirstMinHeightStage">
-            <argument name="selector" value="{{BannerOnBackend.collage('1')}}"/>
+            <argument name="selector" value="{{BannerOnBackend.wrapper('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderMinHeightProperty_200px.intValue}}"/>
             <argument name="cssProperty" value="minHeight"/>
         </actionGroup>
         <executeJS function="return document.evaluate(&quot;{{BannerOnBackend.wrapper('1')}}&quot;, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.getBoundingClientRect().height" stepKey="firstMinHeightStage"/>
         <executeJS function="return document.evaluate(&quot;{{BannerOnBackend.wrapper('2')}}&quot;, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.getBoundingClientRect().height" stepKey="secondMinHeightStage"/>
         <executeJS function="return document.evaluate(&quot;{{BannerOnBackend.wrapper('3')}}&quot;, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.getBoundingClientRect().height" stepKey="thirdMinHeightStage"/>
         <actionGroup ref="ValidateContentTypeStylesActionGroup" stepKey="seeFirstMinHeightStorefront">
-            <argument name="selector" value="{{BannerOnFrontend.collage('1')}}"/>
+            <argument name="selector" value="{{BannerOnFrontend.wrapper('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderMinHeightProperty_200px.intValue}}"/>
             <argument name="cssProperty" value="minHeight"/>
         </actionGroup>