MC-4318: Slide Transparent Background Color Renders Incorrectly & Inconsistently On Stage & Storefront

- Reverted noBackgroundColor selector
- Updated default background section test for banner and slide item

Author: Hwashiang Yu

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

@@ -99,7 +99,7 @@
         <element name="backgroundRepeat" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style,'background-repeat: {{arg2}};')]" parameterized="true"/>
         <element name="backgroundAttachment" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style,'background-attachment: {{arg2}};')]" parameterized="true"/>
         <element name="backgroundColor" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style,'background-color: {{arg2}};')]" parameterized="true"/>
-        <element name="noBackgroundColor" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style,'background-color: #fafafa;')]" parameterized="true"/>
+        <element name="noBackgroundColor" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//div[@data-element='desktop_image'][not(contains(@style,'background-color:'))]" parameterized="true"/>
         <element name="backgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style,'background-image: url(') and contains(@style,'{{arg2}}')]" parameterized="true"/>
         <element name="noBackgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//div[@data-element='desktop_image'][not(contains(@style,'background-image:'))]" parameterized="true"/>
         <!-- Content Configuration -->

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

@@ -78,7 +78,7 @@
         <element name="mobileMinimumHeight" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='mobile_image'][contains(@style,'min-height: {{arg2}}px;')]" parameterized="true"/>
         <!-- Background Configuration -->
         <element name="backgroundColor" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style,'background-color: {{arg2}};')]" parameterized="true"/>
-        <element name="noBackgroundColor" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style,'background-color: #fafafa;')]" parameterized="true"/>
+        <element name="noBackgroundColor" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='desktop_image'][not(contains(@style,'background-color:'))]" parameterized="true"/>
         <element name="backgroundImage" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style,'background-image: url(') and contains(@style,'{{arg2}}')]" parameterized="true"/>
         <element name="noBackgroundImage" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='desktop_image'][not(contains(@style,'background-image:'))]" parameterized="true"/>
         <element name="backgroundPosition" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style,'background-position: {{arg2}};')]" parameterized="true"/>

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

@@ -594,6 +594,11 @@
         <actionGroup ref="validateBackgroundAttributesWithNoImageOrColor" stepKey="validateStage">
             <argument name="section" value="BannerOnBackend"/>
         </actionGroup>
+        <executeJS function="return window.getComputedStyle(document.evaluate(&quot;{{BannerOnBackend.noBackgroundColor('1')}}&quot;, document.body).iterateNext()).backgroundColor" stepKey="grabDefaultBackgroundColor"/>
+        <assertEquals stepKey="assertDefaultBackgroundColor">
+            <expectedResult type="string">rgb(250, 250, 250)</expectedResult>
+            <actualResult type="variable">grabDefaultBackgroundColor</actualResult>
+        </assertEquals>
         <actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
         <actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
         <!-- Validate Stage After Save -->

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

@@ -196,6 +196,11 @@
         <seeElement selector="{{SlideOnBackend.backgroundSize('1', PageBuilderBackgroundSize_Default.value)}}" stepKey="seeBackgroundSizeStage"/>
         <seeElement selector="{{SlideOnBackend.backgroundPosition('1', PageBuilderBackgroundPosition_Default.styleValue)}}" stepKey="seeBackgroundPositionStage"/>
         <seeElement selector="{{SlideOnBackend.backgroundRepeat('1', PageBuilderBackgroundRepeat_Default.styleValue)}}" stepKey="seeBackgroundRepeatStage"/>
+        <executeJS function="return window.getComputedStyle(document.evaluate(&quot;{{SlideOnBackend.noBackgroundColor('1')}}&quot;, document.body).iterateNext()).backgroundColor" stepKey="grabDefaultBackgroundColor"/>
+        <assertEquals stepKey="assertDefaultBackgroundColor">
+            <expectedResult type="string">rgb(250, 250, 250)</expectedResult>
+            <actualResult type="variable">grabDefaultBackgroundColor</actualResult>
+        </assertEquals>
         <actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
         <actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
         <!-- Validate Stage After Save -->