Merge branch 'develop' of https://github.com/magento-commerce/magento2-page-builder into PR-2021-20-08

Author: chittima

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

@@ -211,6 +211,7 @@
         <data key="rgb">rgb(64, 127, 128)</data>
         <data key="hex">#407f80</data>
         <data key="rgbaCenterOfLightDarkSlider">rgba(64, 127, 128, 0.5)</data>
+        <data key="rgbaCenterOfLightDarkSliderRegex">^rgba\(64,\s*127,\s*128,\s*0.49(\d+)\)</data>
     </entity>
     <entity name="PageBuilderBackgroundColor_Invalid" type="pagebuilder_background_color_property">
         <data key="name">Background Color</data>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderCommonTest/EditPanelColorPickerWindowFunctionalityTest.xml

@@ -74,8 +74,17 @@
         <!-- Validate Light/Dark Slider -->
         <comment userInput="Validate Light/Dark Slider" stepKey="commentLightDarkSlider"/>
         <click selector="{{ColorPicker.lightDarkSlider}}" stepKey="clickLightDarkSlider"/>
-        <waitForElementVisible selector="{{ColorPicker.panelColorSwatchColor(PageBuilderBackgroundColor_CenterColorHueSlider.section, PageBuilderBackgroundColor_CenterColorHueSlider.fieldName, PageBuilderBackgroundColor_CenterColorHueSlider.rgbaCenterOfLightDarkSlider)}}" stepKey="waitForColorSwatchColor4"/>
-        <seeInField selector="{{ColorPicker.inputField}}" userInput="{{PageBuilderBackgroundColor_CenterColorHueSlider.rgbaCenterOfLightDarkSlider}}" stepKey="seeColorInInputField4"/>
+        <waitForElementVisible selector="{{ColorPicker.panelColorSwatch(PageBuilderBackgroundColor_CenterColorHueSlider.section, PageBuilderBackgroundColor_CenterColorHueSlider.fieldName)}}" stepKey="waitForColorSwatchColor4"/>
+        <executeJS function="return window.getComputedStyle(document.evaluate(&quot;{{ColorPicker.panelColorSwatch(PageBuilderBackgroundColor_CenterColorHueSlider.section, PageBuilderBackgroundColor_CenterColorHueSlider.fieldName)}}//div&quot;, document.body).iterateNext()).backgroundColor" stepKey="grabBackgroundColorValue"/>
+        <assertRegExp stepKey="seeColorInSwatch">
+            <expectedResult type="string">/{{PageBuilderBackgroundColor_CenterColorHueSlider.rgbaCenterOfLightDarkSliderRegex}}/</expectedResult>
+            <actualResult type="variable">grabBackgroundColorValue</actualResult>
+        </assertRegExp>
+        <grabValueFrom selector="{{ColorPicker.inputField}}" stepKey="grabColorFromInput" />
+        <assertRegExp stepKey="seeColorInInputField4">
+            <expectedResult type="string">/{{PageBuilderBackgroundColor_CenterColorHueSlider.rgbaCenterOfLightDarkSliderRegex}}/</expectedResult>
+            <actualResult type="variable">grabColorFromInput</actualResult>
+        </assertRegExp>
         <!-- Validate Hex Input Field -->
         <comment userInput="Validate Hex Input Field" stepKey="commentHexInput"/>
         <fillField selector="{{ColorPicker.inputField}}" userInput="{{PageBuilderBackgroundColor_Plaintext_Green.value}}" stepKey="inputColorInInputField"/>