Merge remote-tracking branch 'origin/PB-265-video-background-for-banner' into PB-266-with-row

Author: eug123

app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/BackgroundConfigurationActionGroup.xml

@@ -328,9 +328,9 @@
             <actualResult type="variable">$fallbackImageStyle</actualResult>
         </assertContains>
     </actionGroup>
-    <actionGroup name="validateEmptyRowWithInvalidVideoBackgroundAndNoFallbackImage">
+    <actionGroup name="validateInvalidVideoBackgroundAndNoFallbackImage">
         <annotations>
-            <description>Validates that the Row renders as an empty row when the video in video background fails to load and there is no fallback image.</description>
+            <description>Validates that nothing renders when the video in video background fails to load and there is no fallback image.</description>
         </annotations>
         <arguments>
             <argument name="section" defaultValue="RowOnStage"/>

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

@@ -27,11 +27,13 @@
         <element name="posterMinimumHeight" type="text" selector="(//div[@data-content-type='banner'])[{{bannerIndex}}]//div[@data-element='overlay'][contains(@style,'min-height: {{minHeight}};')]" parameterized="true"/>
         <element name="collageMinimumHeight" type="text" selector="(//div[@data-content-type='banner'])[{{bannerIndex}}]//div[@data-element='wrapper'][contains(@style,'min-height: {{minHeight}};')]" parameterized="true"/>
         <!-- Background Configuration -->
+        <element name="backgroundType" type="text" selector="(//div[@data-content-type='banner'])[{{bannerIndex}}]//div[@data-background-type='{{backgroundType}}']" parameterized="true"/>
         <element name="backgroundPosition" type="button" selector="(//div[@data-content-type='banner'])[{{bannerIndex}}]//div[@data-element='wrapper'][contains(@style,'background-position: {{backgroundPosition}};')]" parameterized="true"/>
         <element name="backgroundSize" type="button" selector="(//div[@data-content-type='banner'])[{{bannerIndex}}]//div[@data-element='wrapper'][contains(@style,'background-size: {{backgroundSize}};')]" parameterized="true"/>
         <element name="backgroundRepeat" type="button" selector="(//div[@data-content-type='banner'])[{{bannerIndex}}]//div[@data-element='wrapper'][contains(@style,'background-repeat: {{backgroundRepeat}};')]" parameterized="true"/>
         <element name="backgroundAttachment" type="button" selector="(//div[@data-content-type='banner'])[{{bannerIndex}}]//div[@data-element='wrapper'][contains(@style,'background-attachment: {{backgroundAttachment}};')]" parameterized="true"/>
         <element name="backgroundColor" type="button" selector="(//div[@data-content-type='banner'])[{{bannerIndex}}]//div[@data-element='wrapper'][contains(@style,'background-color: {{backgroundColor}};')]" parameterized="true"/>
+        <element name="backgroundColorElement" type="button" selector="(//div[@data-content-type='banner'])[{{bannerIndex}}]//div[@data-element='wrapper'][contains(@style,'background-color:')]" parameterized="true"/>
         <element name="noBackgroundColor" type="button" selector="(//div[@data-content-type='banner'])[{{bannerIndex}}]//div[@data-element='wrapper'][not(contains(@style,'background-color:'))]" parameterized="true"/>
         <element name="backgroundImage" type="button" selector="(//div[@data-content-type='banner'])[{{bannerIndex}}]//div[@data-element='wrapper'][contains(@style,'background-image: url(') and contains(@style,'{{backgroundImage}}')]" parameterized="true"/>
         <element name="noBackgroundImage" type="button" selector="(//div[@data-content-type='banner'])[{{bannerIndex}}]//div[@data-element='wrapper'][not(contains(@style,'background-image:'))]" parameterized="true"/>
@@ -53,6 +55,17 @@
         <element name="showOverlay" type="text" selector="(//div[@data-content-type='banner'])[{{bannerIndex}}][@data-show-overlay='{{showOverlay}}']" parameterized="true"/>
         <element name="overlayBackgroundColor" type="text" selector="(//div[@data-content-type='banner'])[{{bannerIndex}}]//div[@data-element='wrapper']//div[@data-element='overlay'][contains(@style,'background-color: {{overlayBackgroundColor}};')]" parameterized="true"/>
         <element name="transparentOverlay" type="text" selector="(//div[@data-content-type='banner'])[{{bannerIndex}}]//div[@data-element='wrapper']//div[@data-element='overlay'][contains(@style,'background-color: transparent;')]" parameterized="true"/>
+        <!-- Video Background -->
+        <element name="videoBackgroundJarallaxContainer" type="text" selector="(//div[@data-content-type='banner'])[{{bannerIndex}}]//div[contains(@id,'jarallax-container')]" parameterized="true"/>
+        <element name="videoBackgroundVideoElement" type="text" selector="(//div[@data-content-type='banner'])[{{bannerIndex}}]//div[contains(@id,'jarallax-container')]//iframe|(//div[@data-content-type='banner'])[{{bannerIndex}}]//div[contains(@id,'jarallax-container')]//video" parameterized="true"/>
+        <element name="videoBackgroundVideoUrl" type="text" selector="(//div[@data-content-type='banner'])[{{bannerIndex}}]//div[contains(@id,'jarallax-container')]//*[contains(@src,'{{videoURL}}')]" parameterized="true"/>
+        <element name="videoBackgroundOverlayElement" type="text" selector="(//div[@data-content-type='banner'])[{{bannerIndex}}]//div[@data-element='video_overlay']" parameterized="true"/>
+        <element name="videoBackgroundInfiniteLoop" type="text" selector="(//div[@data-content-type='banner'])[{{bannerIndex}}]//div[@data-element='wrapper' and @data-video-loop='{{infiniteLoopValue}}']" parameterized="true"/>
+        <element name="videoBackgroundLazyLoad" type="text" selector="(//div[@data-content-type='banner'])[{{bannerIndex}}]//div[@data-element='wrapper' and @data-video-lazy-load='{{lazyLoadValue}}']" parameterized="true"/>
+        <element name="videoBackgroundPlayOnlyWhenVisible" type="text" selector="(//div[@data-content-type='banner'])[{{bannerIndex}}]//div[@data-element='wrapper' and @data-video-play-only-visible='{{playOnlyVisibleValue}}']" parameterized="true"/>
+        <element name="videoBackgroundFallbackImage" type="text" selector="(//div[@data-content-type='banner'])[{{bannerIndex}}]//div[contains(@id,'jarallax-container')]//img" parameterized="true"/>
+        <element name="videoBackgroundFallbackImageSource" type="text" selector="(//div[@data-content-type='banner'])[{{bannerIndex}}]//div[contains(@id,'jarallax-container')]//img[contains(@src,'{{fileName}}')]" parameterized="true"/>
+        <element name="videoBackgroundNoFallbackImage" type="text" selector="(//div[@data-content-type='banner'])[{{bannerIndex}}]//div[contains(@id,'jarallax-container')]//div" parameterized="true"/>
         <!-- Advanced Configuration -->
         <element name="alignment" type="text" selector="(//div[@data-content-type='banner'])[{{bannerIndex}}]//div[@data-element='wrapper'][contains(@style,'text-align: {{alignment}};')]" parameterized="true"/>
         <element name="noAlignment" type="text" selector="(//div[@data-content-type='banner'])[{{bannerIndex}}]//div[@data-element='wrapper'][not(contains(@style,'text-align:'))]" parameterized="true"/>
@@ -96,11 +109,13 @@
         <element name="posterMinimumHeight" type="text" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='overlay'][contains(@style,'min-height: {{minHeight}};')]" parameterized="true"/>
         <element name="collageMinimumHeight" type="text" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper'][contains(@style,'min-height: {{minHeight}};')]" parameterized="true"/>
         <!-- Background Configuration -->
+        <element name="backgroundType" type="text" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper'][@data-background-type='{{backgroundType}}']" parameterized="true"/>
         <element name="backgroundPosition" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper'][contains(@style,'background-position: {{backgroundPosition}};')]" parameterized="true"/>
         <element name="backgroundSize" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper'][contains(@style,'background-size: {{backgroundSize}};')]" parameterized="true"/>
         <element name="backgroundRepeat" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper'][contains(@style,'background-repeat: {{backgroundRepeat}};')]" parameterized="true"/>
         <element name="backgroundAttachment" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper'][contains(@style,'background-attachment: {{backgroundAttachment}};')]" parameterized="true"/>
         <element name="backgroundColor" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper'][contains(@style,'background-color: {{backgroundColor}};')]" parameterized="true"/>
+        <element name="backgroundColorElement" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper'][contains(@style,'background-color:')]" parameterized="true"/>
         <element name="noBackgroundColor" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper'][not(contains(@style,'background-color:'))]" parameterized="true"/>
         <element name="backgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper'][contains(@style,'background-image: url(') and contains(@style,'{{backgroundImage}}')]" parameterized="true"/>
         <element name="noBackgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper'][not(contains(@style,'background-image:'))]" parameterized="true"/>
@@ -118,6 +133,17 @@
         <element name="overlayBackgroundColor" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='overlay'][contains(@style,'background-color: {{overlayBackgroundColor}};')]" parameterized="true"/>
         <element name="transparentOverlay" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='overlay'][contains(@style,'background-color: transparent;')]" parameterized="true"/>
         <element name="inlineWYSIWYGEditorWithTag" type="text" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[contains(@class,'inline-wysiwyg')]//{{tag}}" parameterized="true"/>
+        <!-- Video Background -->
+        <element name="videoBackgroundJarallaxContainer" type="text" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper']//div[contains(@id,'jarallax-container')]" parameterized="true"/>
+        <element name="videoBackgroundVideoElement" type="text" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper']//div[contains(@id,'jarallax-container')]//iframe|(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper']//div[contains(@id,'jarallax-container')]//video" parameterized="true"/>
+        <element name="videoBackgroundVideoUrl" type="text" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper']//div[contains(@id,'jarallax-container')]//*[contains(@src,'{{videoURL}}')]" parameterized="true"/>
+        <element name="videoBackgroundOverlayElement" type="text" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper']//div[@data-element='video_overlay']" parameterized="true"/>
+        <element name="videoBackgroundInfiniteLoop" type="text" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper'][@data-video-loop='{{infiniteLoopValue}}']" parameterized="true"/>
+        <element name="videoBackgroundLazyLoad" type="text" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper'][@data-video-lazy-load='{{lazyLoadValue}}']" parameterized="true"/>
+        <element name="videoBackgroundPlayOnlyWhenVisible" type="text" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper'][@data-video-play-only-visible='{{playOnlyVisibleValue}}']" parameterized="true"/>
+        <element name="videoBackgroundFallbackImage" type="text" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper']//div[contains(@id,'jarallax-container')]//img" parameterized="true"/>
+        <element name="videoBackgroundFallbackImageSource" type="text" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper']//div[contains(@id,'jarallax-container')]//img[contains(@src,'{{fileName}}')]" parameterized="true"/>
+        <element name="videoBackgroundNoFallbackImage" type="text" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper']//div[contains(@id,'jarallax-container')]//div" parameterized="true"/>
         <!-- Advanced Configuration -->
         <element name="alignment" type="text" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper'][contains(@style,'text-align: {{alignment}};')]" parameterized="true"/>
         <element name="noAlignment" type="text" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper'][not(contains(@style,'text-align:'))]" parameterized="true"/>