MFTF - Flaky Video Background Tests

[magento-engcom-team]

Issue

We (QA) introduced some flakiness into our MFTF tests in Banner Video Background (haven't seen the same issue in other content types). The following actiongroup is flaky:

• validateVideoBackgroundWithOnlyVideoUrl, step: waitForVideoVisible

The mentioned step in these actiongroup fails fairly infrequently but has failed 3 times in only 1 known build (in over a month)

http://10.234.238.165:8080/job/Functional-Tests-CE/3006/allure/#testresult/db256ca6ee804042?attachment=f3fb9a378cdb46c5

Affected Tests (not exhaustive)

• BannerCollageCenterVideoBackgroundNoFallbackImageDisabledLoopAndPlayWhenVisibleAndLazyLoad
• BannerCollageRightVideoBackgroundNoFallbackImageDisabledLoopAndPlayWhenVisibleAndLazyLoad
• RowFullWidthVideoBackgroundNoFallbackImageDisabledLoopAndPlayWhenVisibleAndLazyLoad

Any test name with "VideoBackground" is worth investigating

Expectation

1. Root cause found & fixed
2. At least 3 total builds (w/ CE, EE, B2B) are run without any retries resulting from this existing flakiness

Update

Actiongroup is flaky in Slide content type as well so the issue is not specific to Banner

Update Aug 18 2021:

Root cause is that in some cases Jarallax will create multiple sibling containers per one individual content type (row, slide, or banner). 

To better understand the cause, see the attached multiplejarallax_containers_one_row_videobackground.html.  You will notice that there are two sibling jarallax containers containing the same YouTube iframe embed for a single row content type.  When waiting for the visibility of the iframe element in MFTF, the selector targets both siblings due to lack of specificity, and therefore the 1st jarallax container is matched, which remains invisible throughout due to being covered/overlapped by the 2nd jarallax container sibling that is absolutely positioned above it (they have the same z-index, but the 2nd one is a next sibling and therefore will overlap the 1st).

videoBackgroundVideoElement is available for many content types and needs to be updated to incorporate <last()> in the xpath.

 

Example for Row's videoBackgroundVideoElement:

Before:

(//div<contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')>)<1>//div<contains(@id,'jarallax-container')>//iframe|(//div<contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')>)<1>//div<contains(@id,'jarallax-container')>//video

 

 After:

 (//div<contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')>)<1>//div<contains(@id,'jarallax-container')><last()>//iframe|(//div<contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')>)<1>//div<contains(@id,'jarallax-container')><last()>//video

 

Manual steps to reproduce this issue are varied.  They can be consistently reproduced in slider via the following steps:

1. Drag Row to Stage
2. Drag Slider to Stage
3. Edit Slide 1 > Use YouTube Video Background > Save
4. Duplicate Slide
5. Notice the duplicated slide has 2 jarallax-container siblings.  To further understand the impact, change the youtube embed url of the first sibling and notice no visible effect.  Then hide the 2nd sibling to see your change in the 1st sibling.

To reproduce the issue in Row, edit row to have a video background, and repeatedly and as quickly as possible press the Show/Hide on stage until the undesired effect is achieved.

Banner has not been tested but it can possibly be achieved in the same manner as Row.

 

[magento-engcom-team]

The issue was exported from the internal JIRA. The link to the original JIRA issue: https://jira.corp.magento.com/browse/PB-472

[m2-assistant]

Hi @magento-engcom-team. Thank you for your report.
To help us process this issue please make sure that you provided sufficient information.

Please, add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.