Skip to content

Commit 4cd8e71

Browse files
committed
PB-95: Video background for Row
- Adding additional test coverage for row video background
1 parent aef9c8f commit 4cd8e71

File tree

5 files changed

+698
-9
lines changed

5 files changed

+698
-9
lines changed

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

Lines changed: 47 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@
212212
</arguments>
213213
<waitForPageLoad stepKey="waitForPageLoad"/>
214214
<waitForElementVisible selector="{{section.backgroundType(index, 'video')}}" stepKey="waitForVideoBackground"/>
215-
<executeJS function="return window.getComputedStyle(document.querySelectorAll(&quot;{{section.backgroundColorCSS}}&quot;)[{{index}}-1]).backgroundColor" stepKey="backgroundColor"/>
215+
<executeJS function="return window.getComputedStyle(document.evaluate(&quot;{{section.backgroundColorElement(index)}}&quot;, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue).backgroundColor" stepKey="backgroundColor"/>
216216
<assertEquals stepKey="assertBackgroundColor">
217217
<expectedResult type="string">{{backgroundColor}}</expectedResult>
218218
<actualResult type="variable">$backgroundColor</actualResult>
@@ -241,7 +241,7 @@
241241
<expectedResult type="string">transform: translate3d(</expectedResult>
242242
<actualResult type="variable">$videoStyle</actualResult>
243243
</assertContains>
244-
<executeJS function="return window.getComputedStyle(document.querySelectorAll(&quot;{{section.videoBackgroundOverlayCSS}}&quot;)[{{index}}-1]).backgroundColor" stepKey="overlayColor"/>
244+
<executeJS function="return window.getComputedStyle(document.evaluate(&quot;{{section.videoBackgroundOverlayElement(index)}}&quot;, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue).backgroundColor" stepKey="overlayColor"/>
245245
<assertEquals stepKey="assertOverlayColor">
246246
<expectedResult type="string">{{overlayColor}}</expectedResult>
247247
<actualResult type="variable">$overlayColor</actualResult>
@@ -364,4 +364,49 @@
364364
<dontSeeElement selector="{{section.videoBackgroundNoFallbackImage(index)}}" stepKey="dontSeeFallbackImage"/>
365365
<dontSeeElementInDOM selector="{{section.videoBackgroundFallbackImage(index)}}" stepKey="dontSeeFallbackImageInDOM"/>
366366
</actionGroup>
367+
<actionGroup name="validateVideoBackgroundPlaying">
368+
<annotations>
369+
<description>Validates that the video in the video background is playing.</description>
370+
</annotations>
371+
<arguments>
372+
<argument name="section" defaultValue="RowOnStage"/>
373+
<argument name="videoUrl" defaultValue="PageBuilderVideoBackgroundUrl_Empty"/>
374+
<argument name="index" defaultValue="1" type="string"/>
375+
</arguments>
376+
<waitForPageLoad stepKey="waitForPageLoad"/>
377+
<waitForElementVisible selector="{{section.videoBackgroundVideoElement(index)}}" stepKey="waitForVideoVisible"/>
378+
<waitForElement selector="{{section.videoBackgroundVideoUrl(index, videoUrl.renderedValue)}}" stepKey="waitForVideoUrl"/>
379+
<grabAttributeFrom selector="{{section.videoBackgroundVideoElement(index)}}" userInput="style" stepKey="videoStyle"/>
380+
<assertContains stepKey="assertVideoPlaying">
381+
<expectedResult type="string">transform: translate3d(</expectedResult>
382+
<actualResult type="variable">$videoStyle</actualResult>
383+
</assertContains>
384+
</actionGroup>
385+
<actionGroup name="validateVideoBackgroundNotPlaying" extends="validateVideoBackgroundPlaying">
386+
<annotations>
387+
<description>Validates that the video in the video background is not playing.</description>
388+
</annotations>
389+
<assertNotContains stepKey="assertVideoPlaying">
390+
<expectedResult type="string">transform: translate3d(</expectedResult>
391+
<actualResult type="variable">$videoStyle</actualResult>
392+
</assertNotContains>
393+
</actionGroup>
394+
<actionGroup name="validateVideoBackgroundLoaded">
395+
<annotations>
396+
<description>Validates that the video in the video background is loaded.</description>
397+
</annotations>
398+
<arguments>
399+
<argument name="section" defaultValue="RowOnStage"/>
400+
<argument name="index" defaultValue="1" type="string"/>
401+
</arguments>
402+
<waitForPageLoad stepKey="waitForPageLoad"/>
403+
<waitForElement selector="{{section.videoBackgroundJarallaxContainer(index)}}" stepKey="waitForJarallaxContainer"/>
404+
<seeElement selector="{{section.videoBackgroundVideoElement(index)}}" stepKey="seeVideoInDOM"/>
405+
</actionGroup>
406+
<actionGroup name="validateVideoBackgroundNotLoaded" extends="validateVideoBackgroundLoaded">
407+
<annotations>
408+
<description>Validates that the video in the video background is not loaded.</description>
409+
</annotations>
410+
<dontSeeElementInDOM selector="{{section.videoBackgroundVideoElement(index)}}" stepKey="seeVideoInDOM"/>
411+
</actionGroup>
367412
</actionGroups>

app/code/Magento/PageBuilder/Test/Mftf/Data/BackgroundFormData.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -557,7 +557,7 @@
557557
<data key="section">background</data>
558558
<data key="fieldName">video_fallback_image</data>
559559
<data key="value"/>
560-
<data key="helperText">Maximum file size: 4 MB. Allowed file types: JPG, GIF, PNG.</data>
560+
<data key="helperText">Maximum file size: 2 MB. Allowed file types: JPG, GIF, PNG.</data>
561561
<data key="tooltipText">Fallback images appear on the screen before a video loads. When the video loads, it replaces the fallback image. If the video does not load for some reason, the fallback image remains on the screen in place of the video.</data>
562562
</entity>
563563
<entity name="PageBuilderVideoBackgroundFallbackImage_JPG" type="pagebuilder_video_background_fallback_image">

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

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@
4242
<element name="backgroundType" type="text" parameterized="true" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{index}}][@data-background-type='{{backgroundType}}']"/>
4343
<element name="backgroundColor" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][contains(@style,'background-color: {{arg2}};')]" parameterized="true"/>
4444
<element name="backgroundColorElement" type="button" parameterized="true" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][contains(@style,'background-color:')]"/>
45-
<element name="backgroundColorCSS" type="button" selector=".pagebuilder-content-type.pagebuilder-row[style*='background-color:']"/>
4645
<element name="noBackgroundColor" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][not(contains(@style,'background-color:'))]" parameterized="true"/>
4746
<element name="backgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][contains(@style,'background-image: url(') and contains(@style,'{{arg2}}')]" parameterized="true"/>
4847
<element name="noBackgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][not(contains(@style,'background-image:'))]" parameterized="true"/>
@@ -60,7 +59,6 @@
6059
<element name="videoBackgroundJarallaxContainer" type="text" parameterized="true" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{rowIndex}}]//div[contains(@id,'jarallax-container')]"/>
6160
<element name="videoBackgroundVideoElement" type="text" parameterized="true" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{rowIndex}}]//div[contains(@id,'jarallax-container')]//iframe|(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{rowIndex}}]//div[contains(@id,'jarallax-container')]//video"/>
6261
<element name="videoBackgroundVideoUrl" type="text" parameterized="true" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{rowIndex}}]//div[contains(@id,'jarallax-container')]//*[contains(@src,'{{videoURL}}')]"/>
63-
<element name="videoBackgroundOverlayCSS" type="text" selector=".pagebuilder-content-type.pagebuilder-row [data-element='video_overlay']"/>
6462
<element name="videoBackgroundOverlayElement" type="text" parameterized="true" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{rowIndex}}]//div[@data-element='video_overlay']"/>
6563
<element name="videoBackgroundInfiniteLoop" type="text" parameterized="true" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{rowIndex}}][@data-video-loop='{{infiniteLoopValue}}']"/>
6664
<element name="videoBackgroundLazyLoad" type="text" parameterized="true" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{rowIndex}}][@data-video-lazy-load='{{lazyLoadValue}}']"/>
@@ -111,7 +109,6 @@
111109
<!-- Background Configuration -->
112110
<element name="backgroundType" type="text" parameterized="true" selector="(//div[@data-content-type='row'])[{{index}}]/div[@data-background-type='{{backgroundType}}']"/>
113111
<element name="backgroundColor" type="button" selector="(//div[@data-content-type='row'])[{{arg1}}]/div[contains(@style,'background-color: {{arg2}};')]" parameterized="true"/>
114-
<element name="backgroundColorCSS" type="button" selector="[data-content-type='row'] [data-element='inner'][style*='background-color:']"/>
115112
<element name="backgroundColorElement" type="button" parameterized="true" selector="(//div[@data-content-type='row'])[{{arg1}}]/div[contains(@style,'background-color:')]"/>
116113
<element name="noBackgroundColor" type="button" selector="(//div[@data-content-type='row'])[{{arg1}}]/div[not(contains(@style,'background-color:'))]" parameterized="true"/>
117114
<element name="backgroundImage" type="button" selector="(//div[@data-content-type='row'])[{{arg1}}]/div[contains(@style,'background-image: url(') and contains(@style,'{{arg2}}')]" parameterized="true"/>
@@ -130,7 +127,6 @@
130127
<element name="videoBackgroundJarallaxContainer" type="text" parameterized="true" selector="(//div[@data-content-type='row'])[{{rowIndex}}]//div[contains(@id,'jarallax-container')]"/>
131128
<element name="videoBackgroundVideoElement" type="text" parameterized="true" selector="(//div[@data-content-type='row'])[{{rowIndex}}]//div[contains(@id,'jarallax-container')]//iframe|(//div[@data-content-type='row'])[{{rowIndex}}]//div[contains(@id,'jarallax-container')]//video"/>
132129
<element name="videoBackgroundVideoUrl" type="text" parameterized="true" selector="(//div[@data-content-type='row'])[{{rowIndex}}]//div[contains(@id,'jarallax-container')]//*[contains(@src,'{{videoURL}}')]"/>
133-
<element name="videoBackgroundOverlayCSS" type="text" selector="[data-content-type='row'] [data-element='video_overlay']"/>
134130
<element name="videoBackgroundOverlayElement" type="text" parameterized="true" selector="(//div[@data-content-type='row'])[{{rowIndex}}]//div[@data-element='video_overlay']"/>
135131
<element name="videoBackgroundInfiniteLoop" type="text" parameterized="true" selector="(//div[@data-content-type='row'])[{{rowIndex}}]//div[@data-element='inner' and @data-video-loop='{{infiniteLoopValue}}']"/>
136132
<element name="videoBackgroundLazyLoad" type="text" parameterized="true" selector="(//div[@data-content-type='row'])[{{rowIndex}}]//div[@data-element='inner' and @data-video-lazy-load='{{lazyLoadValue}}']"/>
@@ -163,7 +159,6 @@
163159
<element name="backgroundType" type="text" parameterized="true" selector="(//div[@data-content-type='row'])[{{index}}][@data-background-type='{{backgroundType}}']"/>
164160
<element name="backgroundColor" type="button" selector="(//div[@data-content-type='row'])[{{arg1}}][contains(@style,'background-color: {{arg2}};')]" parameterized="true"/>
165161
<element name="backgroundColorElement" type="button" parameterized="true" selector="(//div[@data-content-type='row'])[{{arg1}}][contains(@style,'background-color:')]"/>
166-
<element name="backgroundColorCSS" type="button" selector="[data-content-type='row'][style*='background-color:']"/>
167162
<element name="noBackgroundColor" type="button" selector="(//div[@data-content-type='row'])[{{arg1}}][not(contains(@style,'background-color:'))]" parameterized="true"/>
168163
<element name="backgroundImage" type="button" selector='(//div[@data-content-type="row"])[{{arg1}}][contains(@style,"background-image: url(&apos;") and contains(@style,"/{{arg2}}_") and contains(@style,".{{arg3}}&apos;);")]' parameterized="true"/>
169164
<element name="noBackgroundImage" type="button" selector='(//div[@data-content-type="row"])[{{arg1}}][not(contains(@style,"background-image:"))]' parameterized="true"/>
@@ -181,7 +176,6 @@
181176
<element name="videoBackgroundJarallaxContainer" type="text" parameterized="true" selector="(//div[@data-content-type='row'])[{{rowIndex}}]//div[contains(@id,'jarallax-container')]"/>
182177
<element name="videoBackgroundVideoElement" type="text" parameterized="true" selector="(//div[@data-content-type='row'])[{{rowIndex}}]//div[contains(@id,'jarallax-container')]//iframe|(//div[@data-content-type='row'])[{{rowIndex}}]//div[contains(@id,'jarallax-container')]//video"/>
183178
<element name="videoBackgroundVideoUrl" type="text" parameterized="true" selector="(//div[@data-content-type='row'])[{{rowIndex}}]//div[contains(@id,'jarallax-container')]//*[contains(@src,'{{videoURL}}')]"/>
184-
<element name="videoBackgroundOverlayCSS" type="text" selector="[data-content-type='row'] [data-element='video_overlay']"/>
185179
<element name="videoBackgroundOverlayElement" type="text" parameterized="true" selector="(//div[@data-content-type='row'])[{{rowIndex}}]//div[@data-element='video_overlay']"/>
186180
<element name="videoBackgroundInfiniteLoop" type="text" parameterized="true" selector="(//div[@data-content-type='row'])[{{rowIndex}}][@data-video-loop='{{infiniteLoopValue}}']"/>
187181
<element name="videoBackgroundLazyLoad" type="text" parameterized="true" selector="(//div[@data-content-type='row'])[{{rowIndex}}][@data-video-lazy-load='{{lazyLoadValue}}']"/>

0 commit comments

Comments
 (0)