MC-5079: Add Box Sizing to Storefront Styles (Border & Height Storefront Issues)

- update row base element name to be unified across tests

Author: anthoula

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

@@ -28,7 +28,7 @@
         <element name="baseJS" type="text" selector="document.querySelectorAll('[data-role=row]')[{{arg1}} - 1]" parameterized="true"/>
         <element name="hidden" type="text" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{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-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}]/ancestor::*[contains(@class, 'pagebuilder-content-type-wrapper') and not(contains(@class, 'pagebuilder-content-type-hidden'))][1]" parameterized="true"/>
-        <element name="baseCss" type="text" selector="div.pagebuilder-content-type.pagebuilder-row"/>
+        <element name="baseCSS" type="text" selector="div.pagebuilder-content-type.pagebuilder-row"/>
         <element name="empty" type="button" selector="(//div[contains(@class,'empty-container')]//div[contains(@class,'element-children') and contains(@class,'row-container')])[{{arg1}}]" parameterized="true"/>
         <element name="displayLabel" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}]//div[contains(@class,'pagebuilder-display-label')]" parameterized="true"/>
         <element name="rowChildrenStyle" type="text" selector="(//div[contains(@class, 'pagebuilder-row')])[{{arg1}}]//div[contains(@class, 'element-children') and contains(@class, 'row-container')][contains(@style, '{{arg2}}')]" parameterized="true"/>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderRowTest.xml

@@ -259,7 +259,7 @@
         </after>
         <!-- Assert row height is 320px when empty -->
         <comment userInput="Assert row height is 320px when empty" stepKey="comment1"/>
-        <executeJS function="document.querySelectorAll('{{RowOnStage.baseCss}}')[0].setAttribute('divHeight', document.querySelectorAll('{{RowOnStage.baseCss}}')[0].clientHeight)" stepKey="setEmptyRowHeight"/>
+        <executeJS function="document.querySelectorAll('{{RowOnStage.baseCSS}}')[0].setAttribute('divHeight', document.querySelectorAll('{{RowOnStage.baseCSS}}')[0].clientHeight)" stepKey="setEmptyRowHeight"/>
         <grabAttributeFrom selector="{{RowOnStage.base('1')}}" userInput="divHeight" stepKey="getEmptyRowHeight"/>
         <assertEquals stepKey="assertEmptyRowHeight">
             <expectedResult type="string">320</expectedResult>
@@ -276,7 +276,7 @@
         </actionGroup>
         <!-- Assert row height has changed when content added -->
         <comment userInput="Assert row height has changed when content added" stepKey="comment2"/>
-        <executeJS function="document.querySelectorAll('{{RowOnStage.baseCss}}')[0].setAttribute('divHeight', document.querySelectorAll('{{RowOnStage.baseCss}}')[0].clientHeight)" stepKey="setNewRowHeight"/>
+        <executeJS function="document.querySelectorAll('{{RowOnStage.baseCSS}}')[0].setAttribute('divHeight', document.querySelectorAll('{{RowOnStage.baseCSS}}')[0].clientHeight)" stepKey="setNewRowHeight"/>
         <grabAttributeFrom selector="{{RowOnStage.base('1')}}" userInput="divHeight" stepKey="getNewRowHeight"/>
         <assertNotEquals stepKey="assertNewRowHeight">
             <expectedResult type="variable">getEmptyRowHeight</expectedResult>
@@ -291,7 +291,7 @@
         </actionGroup>
         <!-- Assert row height is 320px after removing children -->
         <comment userInput="Assert row height is 320px after removing children" stepKey="comment3"/>
-        <executeJS function="document.querySelectorAll('{{RowOnStage.baseCss}}')[0].setAttribute('divHeight', document.querySelectorAll('{{RowOnStage.baseCss}}')[0].clientHeight)" stepKey="setNewRowHeight2"/>
+        <executeJS function="document.querySelectorAll('{{RowOnStage.baseCSS}}')[0].setAttribute('divHeight', document.querySelectorAll('{{RowOnStage.baseCSS}}')[0].clientHeight)" stepKey="setNewRowHeight2"/>
         <grabAttributeFrom selector="{{RowOnStage.base('1')}}" userInput="divHeight" stepKey="getNewRowHeight2"/>
         <assertEquals stepKey="assertNewRowHeight3">
             <expectedResult type="variable">getEmptyRowHeight</expectedResult>