#635: User Access Column Action Panel with 2+ Level Nesting - Mftf changes

Author: hannahnida

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

@@ -18,9 +18,10 @@
         </arguments>
         <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>
-        </assertEquals>
+        <executeJS function="return Math.abs({$grabColumnWidthValue}-{$grabCalculatedColumnWidthValue})" stepKey="columnWidthDifference"/>
+        <assertLessThanOrEqual stepKey="assertColumnWidthValue">
+            <expectedResult type="int">2</expectedResult>
+            <actualResult type="variable">columnWidthDifference</actualResult>
+        </assertLessThanOrEqual>
     </actionGroup>
 </actionGroups>

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

@@ -472,7 +472,7 @@
         <data key="fieldName">margins_and_padding</data>
         <data key="value">0 1 0 0</data>
         <data key="marginTop">0</data>
-        <data key="marginRight">0</data>
+        <data key="marginRight">1</data>
         <data key="marginBottom">0</data>
         <data key="marginLeft">0</data>
     </entity>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderBlockRenderLayoutContentTypesTest/BlockRenderColumnDragAndDropMultipleColumnsResizingThroughBlockContentTypeTest.xml

@@ -84,7 +84,7 @@
             <actualResult type="variable">columnRatio3CMSBlockStage</actualResult>
         </assertEquals>
         <executeJS function="return Math.round({$columnOneWidthCMSBlockStage}+{$columnTwoWidthCMSBlockStage}+{$columnThreeWidthCMSBlockStage}+{$columnFourWidthCMSBlockStage})" stepKey="totalColumnWidthCMSBlockStage"/>
-        <executeJS function="return Math.round({{RowOnStage.rowWidthJS('1')}}-{{PageBuilderPaddingPropertyRowDefault.paddingLeft}}-{{PageBuilderPaddingPropertyRowDefault.paddingRight}}-{{PageBuilderRowAffordanceWidth.value}})" stepKey="rowWidthCMSBlockStage"/>
+        <executeJS function="return Math.round({{RowOnStage.rowWidthJS('1')}}-{{PageBuilderPaddingPropertyRowDefault.paddingLeft}}-{{PageBuilderPaddingPropertyRowDefault.paddingRight}}-{{PageBuilderRowAffordanceWidth.value}} - 4 * {{PageBuilderMarginsPropertyColumnDefault.marginRight}})" stepKey="rowWidthCMSBlockStage"/>
         <executeJS function="return Math.abs({$totalColumnWidthCMSBlockStage}-{$rowWidthCMSBlockStage})" stepKey="widthDifferenceCMSBlockStage"/>
         <assertLessThanOrEqual stepKey="assertWidthOfAllColumnsCMSBlockStage">
             <expectedResult type="int">2</expectedResult>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderColumnTest/DuplicatingColumnWillDivideSourceColumnTest.xml

@@ -49,9 +49,9 @@
         <waitForPageLoad stepKey="waitForDragAndDrop2"/>
         <!-- Check all columns have the same width -->
         <comment userInput="Validate column widths are as expected" stepKey="commentValidateWidthsAreCorrect"/>
-        <executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('1')}}').clientWidth" stepKey="columnOneWidth"/>
-        <executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('2')}}').clientWidth" stepKey="columnTwoWidth"/>
-        <executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('3')}}').clientWidth" stepKey="columnThreeWidth"/>
+        <executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('1')}}').offsetWidth" stepKey="columnOneWidth"/>
+        <executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('2')}}').offsetWidth" stepKey="columnTwoWidth"/>
+        <executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('3')}}').offsetWidth" stepKey="columnThreeWidth"/>
         <executeJS function="return Math.round({$columnOneWidth}/{$columnTwoWidth})" stepKey="columnRatio"/>
         <assertEquals stepKey="assertRatioIsCorrect">
             <expectedResult type="int">1</expectedResult>
@@ -70,8 +70,8 @@
         </actionGroup>
         <!-- Assert original 1st and 3rd column are unaffected -->
         <comment userInput="Assert duplication was successful" stepKey="commentAssertDuplicateSuccess"/>
-        <executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('1')}}').clientWidth" stepKey="columnOneWidthAfterDuplicate"/>
-        <executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('4')}}').clientWidth" stepKey="columnOriginalThreeWidthAfterDuplicate"/>
+        <executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('1')}}').offsetWidth" stepKey="columnOneWidthAfterDuplicate"/>
+        <executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('4')}}').offsetWidth" stepKey="columnOriginalThreeWidthAfterDuplicate"/>
         <assertEquals stepKey="assertColumnOneWidthUnaffected">
             <expectedResult type="variable">columnOneWidth</expectedResult>
             <actualResult type="variable">columnOneWidthAfterDuplicate</actualResult>
@@ -82,8 +82,8 @@
         </assertEquals>
         <!-- Assert source and duplicated column are the same width -->
         <comment userInput="Assert source and duplicate column as same width" stepKey="commentAssertDuplicateAndSourceWidth"/>
-        <executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('2')}}').clientWidth" stepKey="columnTwoAfterDuplicate"/>
-        <executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('3')}}').clientWidth" stepKey="columnThreeAfterDuplicate"/>
+        <executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('2')}}').offsetWidth" stepKey="columnTwoAfterDuplicate"/>
+        <executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('3')}}').offsetWidth" stepKey="columnThreeAfterDuplicate"/>
         <executeJS function="return Math.round({$columnTwoAfterDuplicate}/{$columnThreeAfterDuplicate})" stepKey="columnAfterDuplicateRatio"/>
         <assertEquals stepKey="assertDuplicatedRatioIsCorrect">
             <expectedResult type="int">1</expectedResult>