MC-13769: Add Missing P0-P1 MFTF Tests For PageBuilder On CMS Block - Render Content Through Block

 - Adding tests to render tabs, buttons, heading, divider through block
 - Adding supporting selectors, data, actiongroups
 - Leaving todos for others to resolve

Author: dhaecker

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

@@ -57,4 +57,22 @@
         <waitForElementVisible selector="{{page.thickness(index, thickness.value)}}" stepKey="waitForThicknessVisible"/>
         <waitForElementVisible selector="{{page.noWidth(index)}}" stepKey="waitForWidthVisible"/>
     </actionGroup>
+    <actionGroup name="validateDividerWidthPercentage">
+        <arguments>
+            <argument name="page"/>
+            <argument name="dividerWidth" defaultValue="PageBuilderDividerLineWidth_Default"/>
+            <argument name="padding" defaultValue="PageBuilderPaddingProperty10"/>
+            <argument name="border" defaultValue="PageBuilderAdvancedBorderWidthProperty0"/>
+            <argument name="index" defaultValue="1" type="string"/>
+            <!-- expectedOffset is necessary because divider width is equal to (expected width) + (line thickness attribute*2) in admin when rendered through Block -->
+            <argument name="expectedOffset" defaultValue="0" type="string"/>
+        </arguments>
+        <!-- Check width of line against width of container -->
+        <executeJS function="return Math.round(((document.querySelectorAll('{{page.baseCSS}}')[{{index}}-1].getBoundingClientRect().width) - {{padding.paddingLeft}} - {{padding.paddingRight}} - {{border.value}}*2)*{{dividerWidth.decimalValue}})" stepKey="expectedWidth"/>
+        <executeJS function="return Math.round((document.querySelectorAll('{{page.lineElementCSS}}')[{{index}}-1].getBoundingClientRect().width)-{{expectedOffset}})" stepKey="lineWidth"/>
+        <assertLessThanOrEqual stepKey="assertLineWidth">
+            <expectedResult type="variable">expectedWidth</expectedResult>
+            <actualResult type="variable">lineWidth</actualResult>
+        </assertLessThanOrEqual>
+    </actionGroup>
 </actionGroups>

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

@@ -114,12 +114,14 @@
         <data key="section">general</data>
         <data key="fieldName">line_width</data>
         <data key="value">100%</data>
+        <data key="decimalValue">1</data>
     </entity>
     <entity name="PageBuilderDividerLineWidth_50" type="pagebuilder_divider_line_width_property">
         <data key="name">Line Width</data>
         <data key="section">general</data>
         <data key="fieldName">line_width</data>
         <data key="value">50%</data>
+        <data key="decimalValue">0.5</data>
     </entity>
     <entity name="PageBuilderDividerLineWidth_Empty" type="pagebuilder_divider_line_width_property">
         <data key="name">Line Width</data>

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

@@ -10,7 +10,9 @@
           xsi:noNamespaceSchemaLocation="urn:magento:mftf:Page/etc/SectionObject.xsd">
     <section name="DividerOnStage">
         <element name="allDividers" type="text" selector="//div[contains(@class,'pagebuilder-divider')]"/>
+        <element name="baseCSS" type="text" selector="[data-role=divider]"/>
         <element name="base" type="text" selector="(//div[contains(@class,'pagebuilder-divider')])[{{arg1}}]" parameterized="true"/>
+        <element name="lineElementCSS" type="text" selector="[data-role=divider] hr"/>
         <element name="hidden" type="text" selector="(//div[contains(@class,'pagebuilder-divider')])[{{arg1}}]/ancestor::*[contains(@class, 'pagebuilder-content-type-wrapper') and contains(@class, 'pagebuilder-content-type-hidden')]" parameterized="true"/>
         <element name="notHidden" type="text" selector="(//div[contains(@class,'pagebuilder-divider')])[{{arg1}}]/parent::*[contains(@class, 'pagebuilder-content-type-wrapper') and not(contains(@class, 'pagebuilder-content-type-hidden'))][1]" parameterized="true"/>
         <element name="color" type="text" selector="(//div[contains(@class,'pagebuilder-divider')])[{{arg1}}]//hr[contains(@style,'border-color: {{arg2}};')]" parameterized="true"/>
@@ -34,7 +36,9 @@
     </section>
     <section name="DividerOnStorefront">
         <element name="allDividers" type="text" selector="//div[@data-role='divider']"/>
+        <element name="baseCSS" type="text" selector="[data-role=divider]"/>
         <element name="base" type="text" selector="(//div[@data-role='divider'])[{{arg1}}]" parameterized="true"/>
+        <element name="lineElementCSS" type="text" selector="[data-role=divider] hr"/>
         <element name="hidden" type="text" selector="(//div[@data-role='divider'])[{{arg1}}][contains(@style, 'display: none')]" parameterized="true"/>
         <element name="notHidden" type="text" selector="(//div[@data-role='divider'])[{{arg1}}][not(contains(@style, 'display: none'))]" parameterized="true"/>
         <element name="color" type="text" selector="(//div[@data-role='divider'])[{{arg1}}]//hr[contains(@style,'border-color: {{arg2}};')]" parameterized="true"/>

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

@@ -32,6 +32,7 @@
         <element name="tabsMinHeight" type="button" selector="//div[@data-role='tabs']//div[@class='tabs-content'][contains(@style, 'min-height: {{arg1}}px')]" parameterized="true"/>
         <element name="tabsNavAligned" type="button" selector="(//div[@data-role='tabs']//descendant::*[@role='tablist'][contains(@style, 'text-align: {{arg1}};')])" parameterized="true"/>
         <element name="tabsContentAdvancedStyles" type="button" selector="//div[@class='tabs-content'][contains(@style, 'border-style: solid;')][contains(@style, 'border-color: rgb(0, 0, 0);')][contains(@style, 'border-width: 10px;')][contains(@style, 'border-radius: 12px;')][contains(@style, 'min-height: 300px;')]"/>
+        <element name="tabsContentMinHeight" type="button" selector="(//div[@data-role='tabs']//descendant::*[contains(@class,'tabs-content')][contains(@style,'min-height: {{minHeight}}px;')])" parameterized="true"/>
         <element name="tabsContentCSS" type="text" selector="[data-role=tabs] .tabs-content[data-element=content]"/>
         <element name="tabsAlignment" type="text" selector="//div[@class='tabs-content'and contains(@style,'text-align: {{arg1}}')]" parameterized="true"/>
         <element name="tabsContentHeightJS" type="button" selector="document.querySelectorAll('[class=tabs-content]')[{{arg1}}].clientHeight" parameterized="true"/>
@@ -112,6 +113,7 @@
         <element name="backgroundAttachment" type="button" selector="(//div[@data-role='tab-item'])[{{arg1}}][contains(@style,'background-attachment: {{arg2}};')]" parameterized="true"/>
         <element name="backgroundColor" type="button" selector="(//div[@data-role='tab-item'])[{{arg1}}][contains(@style,'background-color: {{arg2}};')]" parameterized="true"/>
         <element name="noBackgroundColor" type="button" selector="(//div[@data-role='tab-item'])[{{arg1}}][not(contains(@style,'background-color:'))]" parameterized="true"/>
+        <element name="backgroundImage" type="button" selector="(//div[@data-role='tab-item'])[{{arg1}}][contains(@style,'background-image: url(') and contains(@style,'{{arg2}}')]" parameterized="true"/>
         <element name="noBackgroundImage" type="button" selector="(//div[@data-role='tab-item'])[{{arg1}}][not(contains(@style,'background-image:'))]" parameterized="true"/>
     </section>
 </sections>