#558: Developer can style content types output differently per viewport - Added fixes in Column Content Type

Author: hannahnida

app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/ContentTypeColumnActionGroup/ValidateColumnWidthActionGroup.xml

@@ -14,9 +14,10 @@
             <argument name="index" type="string" defaultValue="1"/>
             <argument name="parentIndex" type="string" defaultValue="1"/>
             <argument name="columnWidth" type="string" defaultValue="{{PageBuilderColumnStyles.widthHalf}}"/>
+            <argument name="section" defaultValue="ColumnOnBackend"/>
         </arguments>
-        <executeJS function="return Math.round(window.getComputedStyle(document.evaluate('{{ColumnOnBackend.columnConfigurationPath(index)}}', document.body).iterateNext()).width.replace(/px/g, &quot;&quot;))" stepKey="grabColumnWidthValue"/>
-        <executeJS function="return Math.round(window.getComputedStyle(document.evaluate('{{ColumnOnBackend.columnGroupPath(parentIndex)}}', document.body).iterateNext()).width.replace(/px/g, &quot;&quot;) * {{columnWidth}})" stepKey="grabCalculatedColumnWidthValue"/>
+        <executeJS function="return Math.round(window.getComputedStyle(document.evaluate('{{section.columnConfigurationPath(index)}}', document.body).iterateNext()).width.replace(/px/g, &quot;&quot;))" stepKey="grabColumnWidthValue"/>
+        <executeJS function="return Math.round(window.getComputedStyle(document.evaluate('{{section.columnGroupPath(parentIndex)}}', document.body).iterateNext()).width.replace(/px/g, &quot;&quot;) * {{columnWidth}})" stepKey="grabCalculatedColumnWidthValue"/>
         <assertEquals stepKey="assertColumnWidthValue">
             <expectedResult type="variable">grabColumnWidthValue</expectedResult>
             <actualResult type="variable">grabCalculatedColumnWidthValue</actualResult>

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

@@ -16,7 +16,7 @@
         <element name="allColumns" type="block" selector="(//div[@data-content-type='column'])"/>
         <element name="columnX" type="block" selector="[data-content-type=column]:nth-child({{arg1}})" parameterized="true"/>
         <element name="columnConfigurationPath" type="text" selector="(//div[@data-content-type=&quot;column&quot;])[{{arg1}}]" parameterized="true"/>
-        <element name="columnGroupConfigurationPath" type="text" selector="(//div[contains(@class, &quot;pagebuilder-column-group&quot;)])[{{arg1}}]" parameterized="true"/>
+        <element name="columnGroupPath" type="text" selector="(//div[contains(@class, &quot;pagebuilder-column-group&quot;)])[{{arg1}}]" parameterized="true"/>
         <element name="columnStyle" type="button" selector="(//div[@data-content-type='column'])[{{arg1}}][contains(@style, '{{arg2}}')]" parameterized="true"  deprecated="Styles are not inline"/>
         <element name="column1Height" type="button" selector="(//div[@data-content-type='column'])[1][contains(@style, 'min-height: 500px;')]"  deprecated="Styles are not inline"/>
         <element name="column1HeightFull" type="button" selector="(//div[@data-content-type='column'])[1][contains(@style, 'align-self: stretch;')]"  deprecated="Styles are not inline"/>

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderColumnSection/ColumnOnFrontendSection.xml

@@ -83,11 +83,9 @@
             <argument name="expectedProperty" value="{{PageBuilderBackgroundColor_Hex_Grey.rgb}}"/>
             <argument name="cssProperty" value="backgroundColor"/>
         </actionGroup>
-        <actionGroup ref="ValidateContentTypeForCalculatedStyles" stepKey="seeColumn2DefaultWidthApplied">
-            <argument name="selector" value="{{ColumnOnFrontend.base('2')}}"/>
-            <argument name="wrapperSelector" value="{{ColumnOnFrontend.columnGroupConfigurationPath('1')}}"/>
-            <argument name="expectedProperty" value="50%"/>
-            <argument name="cssProperty" value="width"/>
+        <actionGroup ref="ValidateColumnWidthActionGroup" stepKey="seeFirstColumnWidthDistributed">
+            <argument name="index" value="2"/>
+            <argument name="section" value="ColumnOnFrontend"/>
         </actionGroup>
         <actionGroup ref="ValidateContentTypeStylesActionGroup" stepKey="seeColumn2HeightApplied">
             <argument name="selector" value="{{ColumnOnFrontend.base('2')}}"/>