PB-179: Product Content Type Inner Contents Should Not Align Based On Alignment Configuration

- add test to verify stage and storefront on existing test

Author: anthoula

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderProductsSection/ProductsOnStageSection.xml

@@ -14,6 +14,7 @@
         <element name="notHidden" type="text" parameterized="true" selector="(//div[contains(@class,'pagebuilder-products') and not(contains(@class,'placeholder'))])[{{indexOfProductGroup}}]//parent::*[contains(@class, 'pagebuilder-content-type-wrapper') and not(contains(@class, 'pagebuilder-content-type-hidden'))][1]"/>
         <element name="emptyProductsPlaceholder" type="text" parameterized="true" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')])[{{indexOfProductGroup}}]//*[contains(@class,'pagebuilder-products-placeholder')]"/>
         <element name="product" type="text" parameterized="true" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')])[{{indexOfProductGroup}}]//ol//li[contains(@class,'product-item')]"/>
+        <element name="productJS" type="text" selector="document.querySelectorAll('div[data-content-type=products] ol li.product-item')[{{arg1}} - 1]" parameterized="true"/>
         <element name="productByIndex" type="text" parameterized="true" selector="((//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')])[{{indexOfProductGroup}}]//ol//li[contains(@class,'product-item')])[{{indexOfProductItem}}]"/>
         <element name="productImage" type="text" parameterized="true" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')]//ol//li[contains(@class,'product-item')])[{{indexOfProductItem}}]//img[@class='product-image-photo']"/>
         <element name="productImageCSS" type="text" selector=".pagebuilder-products div[data-appearance=grid] ol li.product-item img.product-image-photo"/>

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderProductsSection/ProductsOnStorefrontSection.xml

@@ -13,6 +13,7 @@
         <element name="hidden" type="text" parameterized="true" selector="(//div[contains(@data-content-type,'products')])[{{indexOfProductGroup}}][contains(@style, 'display: none')]"/>
         <element name="notHidden" type="text" parameterized="true" selector="(//div[contains(@data-content-type,'products')])[{{indexOfProductGroup}}][not(contains(@style, 'display: none'))]"/>
         <element name="product" type="text" parameterized="true" selector="(//div[contains(@data-content-type,'products')])[{{indexOfProductGroup}}]//ol//li[contains(@class,'product-item')]"/>
+        <element name="productJS" type="text" selector="document.querySelectorAll('div[data-content-type=products] ol li.product-item')[{{arg1}} - 1]" parameterized="true"/>
         <element name="productsInCarouselNotClonedBySlick" type="text" parameterized="true" selector="(//div[contains(@data-content-type,'products')])[{{indexOfProductGroup}}]//ol//div[contains(@class,'slick-slide') and not(contains(@class,'slick-cloned'))]//li[contains(@class,'product-item')]"/>
         <element name="productByIndex" type="text" parameterized="true" selector="((//div[contains(@data-content-type,'products')])[{{indexOfProductGroup}}]//ol//li[contains(@class,'product-item')])[{{indexOfProductItem}}]"/>
         <element name="productInCarouselNotClonedBySlickByIndex" type="text" parameterized="true" selector="((//div[contains(@data-content-type,'products')])[{{indexOfProductGroup}}]//ol//div[contains(@class,'slick-slide') and not(contains(@class,'slick-cloned'))]//li[contains(@class,'product-item')])[{{indexOfProductItem}}]"/>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderProductsGridTest/ProductsUpdateAdvancedConfigurationValuesTest.xml

@@ -143,6 +143,11 @@
             <argument name="padding" value="PageBuilderPaddingPropertyUnique"/>
             <argument name="index" value="1"/>
         </actionGroup>
+        <executeJS function="return window.getComputedStyle({{ProductsOnStage.productJS('1')}}).textAlign" stepKey="grabComputedTextAlign"/>
+        <assertEquals stepKey="assertComputedTextAlign">
+            <expectedResult type="string">{{PageBuilderAdvancedAlignmentPropertyLeft.value}}</expectedResult>
+            <actualResult type="variable">grabComputedTextAlign</actualResult>
+        </assertEquals>
         <actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage3">
             <argument name="contentType" value="PageBuilderProductsContentType"/>
         </actionGroup>
@@ -189,5 +194,10 @@
             <argument name="padding" value="PageBuilderPaddingPropertyUnique"/>
             <argument name="index" value="1"/>
         </actionGroup>
+        <executeJS function="return window.getComputedStyle({{ProductsOnStorefront.productJS('1')}}).textAlign" stepKey="grabComputedTextAlignStorefront"/>
+        <assertEquals stepKey="assertComputedTextAlignStorefront">
+            <expectedResult type="string">{{PageBuilderAdvancedAlignmentPropertyLeft.value}}</expectedResult>
+            <actualResult type="variable">grabComputedTextAlignStorefront</actualResult>
+        </assertEquals>
     </test>
 </tests>