#558: Developer can style content types output differently per viewport - General Mftf tests fixes

Author: hannahnida

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderSliderSection/SlideOnBackendSection.xml

@@ -14,6 +14,8 @@
         <element name="elementJS" type="button" selector="document.querySelectorAll('[data-content-type=slide]')[{{slideIndex}} - 1]" parameterized="true"/>
         <element name="wrapperJS" type="button" selector="document.querySelectorAll('[data-content-type=slider] div.pagebuilder-slide-wrapper')[{{slideWrapperIndex}} - 1]" parameterized="true"/>
         <element name="wrapperCSS" type="button" selector="[data-content-type=slider] .pagebuilder-slide-wrapper"/>
+        <element name="wrapper" type="text" selector="(//div[@data-content-type=&quot;slide&quot;])[{{slideIndex}}]//div[@class=&quot;pagebuilder-slide-wrapper&quot;]" parameterized="true"/>
+        <element name="overlay" type="text" selector="(//div[@data-content-type=&quot;slide&quot;])[{{slideIndex}}]//div[@data-element=&quot;overlay&quot; or contains(@class,&quot;pagebuilder-overlay&quot;)]" parameterized="true"/>
         <element name="overlayJS" type="button" selector="document.querySelectorAll('[data-content-type=slider] div.pagebuilder-overlay')[{{slideOverlayIndex}} - 1]" parameterized="true"/>
         <element name="editableButtonItemElement" type="button" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//a[@data-element='button']//span[contains(@contenteditable, 'true')]" parameterized="true"/>
         <element name="imageSourceByIndex" type="text" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]/div[contains(@style,'{{image}}')]" parameterized="true" deprecated="Styles are not inline"/>
@@ -33,10 +35,8 @@
         <element name="slideName" type="button" selector="(//div[@data-content-type='slide'])[{{slideIndex}}][@data-slide-name='{{slideName}}']" parameterized="true"/>
         <element name="posterMinimumHeight" type="text" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@class='pagebuilder-slide-wrapper'][contains(@style,'min-height: {{minHeight}};')]" parameterized="true" deprecated="Styles are not inline"/>
         <element name="noPosterMinimumHeight" type="text" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@class='pagebuilder-slide-wrapper'][not(contains(@style,'min-height:'))]" parameterized="true" deprecated="Styles are not inline"/>
-        <element name="posterMinimumHeightPath" type="text" selector="(//div[@data-content-type=&quot;slide&quot;])[{{slideIndex}}]//div[@class=&quot;pagebuilder-slide-wrapper&quot;]" parameterized="true" />
         <element name="collageMinimumHeight" type="text" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]/div[contains(@style,'min-height: {{minHeight}};')]" parameterized="true" deprecated="Styles are not inline"/>
         <element name="noCollageMinimumHeight" type="text" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]/div[not(contains(@style,'min-height:'))]" parameterized="true" deprecated="Styles are not inline"/>
-        <element name="collageMinimumHeightPath" type="text" selector="(//div[@data-content-type=&quot;slide&quot;])[{{slideIndex}}]/div" parameterized="true"/>
         <!-- Background Configuration -->
         <element name="backgroundPath" type="button" parameterized="true" selector="(//div[@data-content-type=&quot;slide&quot;])[{{slideIndex}}]//div[@data-element=&quot;wrapper&quot;]"/>
         <element name="backgroundType" type="text" parameterized="true" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@data-background-type='{{backgroundType}}']"/>
@@ -73,9 +73,7 @@
         <element name="buttonText" type="button" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//a[@data-element='button']//span[.='{{buttonText}}']" parameterized="true"/>
         <element name="showOverlay" type="button" selector="(//div[@data-content-type='slide'])[{{slideIndex}}][@data-show-overlay='{{showOverlay}}']" parameterized="true"/>
         <element name="overlayBackgroundColor" type="button" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@data-element='overlay' or contains(@class,'pagebuilder-overlay')][contains(@style,'background-color: {{overlayColor}};')]" parameterized="true" deprecated="Styles are not inline"/>
-        <element name="overlayBackgroundColorPath" type="text" selector="(//div[@data-content-type=&quot;slide&quot;])[{{slideIndex}}]//div[@data-element=&quot;overlay&quot; or contains(@class,&quot;pagebuilder-overlay&quot;)]" parameterized="true"/>
         <element name="transparentOverlay" type="button" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@data-element='overlay' or contains(@class,'pagebuilder-overlay')][contains(@style,'background-color: transparent;')]" parameterized="true" deprecated="Styles are not inline"/>
-        <element name="transparentOverlayPath" type="text" selector="(//div[@data-content-type=&quot;slide&quot;])[{{slideIndex}}]//div[@data-element=&quot;overlay&quot; or contains(@class,&quot;pagebuilder-overlay&quot;)]" parameterized="true"/>
         <element name="inlineWYSIWYGEditorWithTag" type="text" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[contains(@class,'inline-wysiwyg')]//{{tag}}" parameterized="true"/>
         <!-- Advanced Configuration -->
         <element name="posterAlignment" type="text" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@class='pagebuilder-slide-wrapper'][contains(@style,'text-align: {{alignment}};')]" parameterized="true" deprecated="Styles are not inline"/>

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderSliderSection/SlideOnFrontendSection.xml

@@ -12,8 +12,10 @@
         <element name="base" type="text" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]" parameterized="true"/>
         <element name="baseJS" type="button" selector="document.querySelectorAll('[data-content-type=slide] div.pagebuilder-slide-wrapper')[{{slideWrapperIndex}} - 1]" parameterized="true"/>
         <element name="elementJS" type="button" selector="document.querySelectorAll('[data-content-type=slide]')[{{slideIndex}} - 1]" parameterized="true"/>
+        <element name="wrapper" type="text" selector="(//div[@data-content-type=&quot;slide&quot;])[{{slideIndex}}]//div[@data-element=&quot;wrapper&quot;]" parameterized="true"/>
         <element name="wrapperJS" type="button" selector="document.querySelectorAll('[data-content-type=slide] div.pagebuilder-slide-wrapper')[{{slideWrapperIndex}} - 1]" parameterized="true"/>
         <element name="wrapperCSS" type="button" selector="[data-content-type=slide] .pagebuilder-slide-wrapper"/>
+        <element name="overlay" type="text" selector="(//div[@data-content-type=&quot;slide&quot;])[{{slideIndex}}]//div[@data-element=&quot;wrapper&quot;]//div[@data-element=&quot;overlay&quot; or contains(@class,&quot;pagebuilder-overlay&quot;)]" parameterized="true"/>
         <element name="overlayJS" type="button" selector="document.querySelectorAll('[data-content-type=slide] div.pagebuilder-overlay')[{{slideOverlayIndex}} - 1]" parameterized="true"/>
         <element name="slickSlideIndex" type="text" selector="[data-slick-index='{{slickSlideIndex}}']" parameterized="true"/>
         <element name="computedBoxSizing" type="button" selector="return window.getComputedStyle(document.querySelector('[data-content-type=slide]')).boxSizing"/>
@@ -23,7 +25,6 @@
         <element name="slideName" type="button" selector="(//div[@data-content-type='slide'])[{{slideIndex}}][@data-slide-name='{{slideName}}']" parameterized="true"/>
         <element name="minimumHeight" type="text" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@data-element='wrapper'][contains(@style,'min-height: {{minHeight}};')]" parameterized="true" deprecated="Styles are not inline"/>
         <element name="noMinimumHeight" type="text" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@data-element='wrapper'][not(contains(@style,'min-height:'))]" parameterized="true" deprecated="Styles are not inline"/>
-        <element name="minimumHeightPath" type="text" selector="(//div[@data-content-type=&quot;slide&quot;])[{{slideIndex}}]//div[@data-element=&quot;wrapper&quot;]" parameterized="true"/>
         <!-- Background Configuration -->
         <element name="backgroundPath" type="button" parameterized="true" selector="(//div[@data-content-type=&quot;slide&quot;])[{{slideIndex}}]//div[@data-element=&quot;wrapper&quot;]"/>
         <element name="backgroundType" type="text" parameterized="true" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@data-element='wrapper' and @data-background-type='{{backgroundType}}']"/>
@@ -65,9 +66,7 @@
         <element name="buttonText" type="button" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@data-element='wrapper']//button[@data-element='button'][.='{{buttonText}}']" parameterized="true"/>
         <element name="showOverlay" type="text" selector="(//div[@data-content-type='slide'])[{{slideIndex}}][@data-show-overlay='{{showOverlay}}']" parameterized="true"/>
         <element name="overlayBackgroundColor" type="text" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@data-element='wrapper']//div[@data-element='overlay'][contains(@style,'background-color: {{overlayColor}};')]" parameterized="true" deprecated="Styles are not inline"/>
-        <element name="overlayBackgroundColorPath" type="text" selector="(//div[@data-content-type=&quot;slide&quot;])[{{slideIndex}}]//div[@data-element=&quot;wrapper&quot;]//div[@data-element=&quot;overlay&quot;]" parameterized="true"/>
         <element name="transparentOverlay" type="text" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@data-element='wrapper']//div[@data-element='overlay' or contains(@class,'pagebuilder-overlay')][contains(@style,'background-color: transparent;')]" parameterized="true" deprecated="Styles are not inline"/>
-        <element name="transparentOverlayPath" type="text" selector="(//div[@data-content-type=&quot;slide&quot;])[{{slideIndex}}]//div[@data-element=&quot;wrapper&quot;]//div[@data-element=&quot;overlay&quot; or contains(@class,&quot;pagebuilder-overlay&quot;)]" parameterized="true"/>
         <!-- Advanced Configuration -->
         <element name="advancedConfigurationPath" type="text" parameterized="true" selector="(//div[@data-content-type=&quot;slide&quot;])[{{slideIndex}}]//div[@data-element=&quot;wrapper&quot;]"/>
         <element name="alignment" type="text" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@data-element='wrapper'][contains(@style,'text-align: {{alignment}};')]" parameterized="true" deprecated="Styles are not inline"/>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderBlockRenderMediaContentTypesTest/BlockRenderSlideItemCollageCenterAppearanceThroughBlockContentTypeTest.xml

@@ -30,7 +30,7 @@
             <argument name="page" value="SlideOnBackend"/>
         </actionGroup>
         <actionGroup ref="ValidateContentTypesStyleEqualsExpectedStyleActionGroup" stepKey="seeMinimumHeightCMSBlockStage">
-            <argument name="selector" value="{{SlideOnBackend.collageMinimumHeightPath('1')}}"/>
+            <argument name="selector" value="{{SlideOnBackend.wrapper('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderMinHeightProperty_500.value}}"/>
             <argument name="cssProperty" value="minHeight"/>
         </actionGroup>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderBlockRenderMediaContentTypesTest/BlockRenderSlideItemCollageLeftAppearanceThroughBlockContentTypeTest.xml

@@ -30,7 +30,7 @@
             <argument name="page" value="SlideOnBackend"/>
         </actionGroup>
         <actionGroup ref="ValidateContentTypesStyleEqualsExpectedStyleActionGroup" stepKey="seeMinimumHeightCMSBlockStage">
-            <argument name="selector" value="{{SlideOnBackend.collageMinimumHeightPath('1')}}"/>
+            <argument name="selector" value="{{SlideOnBackend.wrapper('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderMinHeightProperty_500.value}}"/>
             <argument name="cssProperty" value="minHeight"/>
         </actionGroup>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderBlockRenderMediaContentTypesTest/BlockRenderSlideItemCollageRightAppearanceThroughBlockContentTypeTest.xml

@@ -30,7 +30,7 @@
             <argument name="page" value="SlideOnBackend"/>
         </actionGroup>
         <actionGroup ref="ValidateContentTypesStyleEqualsExpectedStyleActionGroup" stepKey="seeMinimumHeightCMSBlockStage">
-            <argument name="selector" value="{{SlideOnBackend.collageMinimumHeightPath('1')}}"/>
+            <argument name="selector" value="{{SlideOnBackend.wrapper('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderMinHeightProperty_500.value}}"/>
             <argument name="cssProperty" value="minHeight"/>
         </actionGroup>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderBlockRenderMediaContentTypesTest/BlockRenderSlideItemPosterAppearanceThroughBlockContentTypeTest.xml

@@ -126,7 +126,7 @@
         <moveMouseOver selector="{{SliderOnStage.activeSlideNavigationDot}}" stepKey="mouseOverSlideDotCMSBlockStage"/>
         <see userInput="{{PageBuilderSlideItemSlideName_Slide1.value}}" selector="{{SliderOnStage.slideNavigationDotNameTooltip('1')}}" stepKey="seeSlideName1InTooltipCMSBlockStage"/>
         <actionGroup ref="ValidateContentTypesStyleEqualsExpectedStyleActionGroup" stepKey="seeMinimumHeightCMSBlockStage">
-            <argument name="selector" value="{{SlideOnBackend.posterMinimumHeightPath('1')}}"/>
+            <argument name="selector" value="{{SlideOnBackend.wrapper('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderMinHeightProperty_500.value}}"/>
             <argument name="cssProperty" value="minHeight"/>
         </actionGroup>
@@ -149,7 +149,7 @@
         <seeElementInDOM selector="{{SlideOnBackend.button('1')}}" stepKey="seeButtonInDOMCMSBlockStage"/>
         <dontSeeElement selector="{{SlideOnBackend.button('1')}}" stepKey="dontSeeButtonCMSBlockStage"/>
         <actionGroup ref="ValidateContentTypesStyleEqualsExpectedStyleActionGroup" stepKey="seeTransparentOverlayCMSBlockStage">
-            <argument name="selector" value="{{SlideOnBackend.transparentOverlayPath('1')}}"/>
+            <argument name="selector" value="{{SlideOnBackend.overlay('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderBackgroundColor_Transparent.rgb}}"/>
             <argument name="cssProperty" value="backgroundColor"/>
         </actionGroup>
@@ -159,7 +159,7 @@
         <seeElement selector="{{SlideOnBackend.buttonType('1', PageBuilderSlideItemButtonType_Secondary.value)}}" stepKey="seeButtonTypeOnHoverCMSBlockStage"/>
         <waitForPageLoad time="30" stepKey="waitForOverlayTransitionStage"/>
         <actionGroup ref="ValidateContentTypesStyleEqualsExpectedStyleActionGroup" stepKey="seeOverlayOnHoverCMSBlockStage">
-            <argument name="selector" value="{{SlideOnBackend.overlayBackgroundColorPath('1')}}"/>
+            <argument name="selector" value="{{SlideOnBackend.overlay('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderSlideItemOverlayColor_Blue_Opaque.value}}"/>
             <argument name="cssProperty" value="backgroundColor"/>
         </actionGroup>
@@ -201,7 +201,7 @@
             <argument name="page" value="SlideOnFrontend"/>
         </actionGroup>
         <actionGroup ref="ValidateContentTypesStyleEqualsExpectedStyleActionGroup" stepKey="seeMinimumHeightCMSPageStage">
-            <argument name="selector" value="{{SlideOnFrontend.minimumHeightPath('1')}}"/>
+            <argument name="selector" value="{{SlideOnFrontend.wrapper('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderMinHeightProperty_500.value}}"/>
             <argument name="cssProperty" value="minHeight"/>
         </actionGroup>
@@ -224,7 +224,7 @@
         <seeElementInDOM selector="{{SlideOnFrontend.button('1')}}" stepKey="seeButtonInDOMCMSPageStage"/>
         <dontSeeElement selector="{{SlideOnFrontend.button('1')}}" stepKey="dontSeeButtonCMSPageStage"/>
         <actionGroup ref="ValidateContentTypesStyleEqualsExpectedStyleActionGroup" stepKey="seeTransparentOverlayCMSPageStage">
-            <argument name="selector" value="{{SlideOnFrontend.transparentOverlayPath('1')}}"/>
+            <argument name="selector" value="{{SlideOnFrontend.overlay('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderBackgroundColor_Transparent.rgb}}"/>
             <argument name="cssProperty" value="backgroundColor"/>
         </actionGroup>
@@ -253,7 +253,7 @@
         </actionGroup>
         <seeElement selector="{{SlideOnFrontend.slideName('1', PageBuilderSlideItemSlideName_Slide1.value)}}" stepKey="seeSlideNameCMSPageStorefront"/>
         <actionGroup ref="ValidateContentTypesStyleEqualsExpectedStyleActionGroup" stepKey="seeMinimumHeightCMSPageStorefront">
-            <argument name="selector" value="{{SlideOnFrontend.minimumHeightPath('1')}}"/>
+            <argument name="selector" value="{{SlideOnFrontend.wrapper('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderMinHeightProperty_500.value}}"/>
             <argument name="cssProperty" value="minHeight"/>
         </actionGroup>
@@ -276,7 +276,7 @@
         <seeElementInDOM selector="{{SlideOnFrontend.button('1')}}" stepKey="seeButtonInDOMCMSPageStorefront"/>
         <dontSeeElement selector="{{SlideOnFrontend.button('1')}}" stepKey="dontSeeButtonCMSPageStorefront"/>
         <actionGroup ref="ValidateContentTypesStyleEqualsExpectedStyleActionGroup" stepKey="seeTransparentOverlayCMSPageStorefront">
-            <argument name="selector" value="{{SlideOnFrontend.transparentOverlayPath('1')}}"/>
+            <argument name="selector" value="{{SlideOnFrontend.overlay('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderBackgroundColor_Transparent.rgb}}"/>
             <argument name="cssProperty" value="backgroundColor"/>
         </actionGroup>
@@ -286,7 +286,7 @@
         <seeElement selector="{{SlideOnFrontend.buttonType('1', PageBuilderSlideItemButtonType_Secondary.value)}}" stepKey="seeButtonTypeOnHoverCMSPageStorefront"/>
         <waitForPageLoad time="30" stepKey="waitForSlideTransitionStorefront"/>
         <actionGroup ref="ValidateContentTypesStyleEqualsExpectedStyleActionGroup" stepKey="seeOverlayOnHoverCMSPageStorefront">
-            <argument name="selector" value="{{SlideOnFrontend.overlayBackgroundColorPath('1')}}"/>
+            <argument name="selector" value="{{SlideOnFrontend.overlay('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderSlideItemOverlayColor_Blue_Opaque.value}}"/>
             <argument name="cssProperty" value="backgroundColor"/>
         </actionGroup>
@@ -328,14 +328,14 @@
         <seeElementInDOM selector="{{SlideOnFrontend.button('1')}}" stepKey="seeButtonInDOMCMSPageStorefrontMobile"/>
         <dontSeeElement selector="{{SlideOnFrontend.button('1')}}" stepKey="dontSeeButtonCMSPageStorefrontMobile"/>
         <actionGroup ref="ValidateContentTypesStyleEqualsExpectedStyleActionGroup" stepKey="seeTransparentOverlayCMSPageStorefrontMobile">
-            <argument name="selector" value="{{SlideOnFrontend.transparentOverlayPath('1')}}"/>
+            <argument name="selector" value="{{SlideOnFrontend.overlay('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderBackgroundColor_Transparent.rgb}}"/>
             <argument name="cssProperty" value="backgroundColor"/>
         </actionGroup>
         <moveMouseOver selector="{{SlideOnFrontend.base('1')}}" stepKey="moveMouseOverSlideCMSPageStorefrontMobile"/>
         <seeElement selector="{{SlideOnFrontend.button('1')}}" stepKey="seeButtonOnHoverCMSPageStorefrontMobile"/>
         <actionGroup ref="ValidateContentTypesStyleEqualsExpectedStyleActionGroup" stepKey="seeOverlayOnHoverCMSPageStorefrontMobile">
-            <argument name="selector" value="{{SlideOnFrontend.overlayBackgroundColorPath('1')}}"/>
+            <argument name="selector" value="{{SlideOnFrontend.overlay('1')}}"/>
             <argument name="expectedProperty" value="{{PageBuilderSlideItemOverlayColor_Blue_Opaque.value}}"/>
             <argument name="cssProperty" value="backgroundColor"/>
         </actionGroup>