AC-103: Update Third Party library: spectrum/spectrum

- use regex to check color

Author: krissyhiserote

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

@@ -210,8 +210,8 @@
         <data key="value">#407f80</data>
         <data key="rgb">rgb(64, 127, 128)</data>
         <data key="hex">#407f80</data>
-        <data key="rgbaCenterOfLightDarkSlider">rgba(64, 127, 128, 0.499)</data>
-        <data key="rgbaCenterOfLightDarkSliderSwatch">rgba(64, 127, 128, 0.498)</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,16 @@
         <!-- 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.rgbaCenterOfLightDarkSliderSwatch)}}" stepKey="waitForColorSwatchColor4"/>
-        <seeInField selector="{{ColorPicker.inputField}}" userInput="{{PageBuilderBackgroundColor_CenterColorHueSlider.rgbaCenterOfLightDarkSlider}}" stepKey="seeColorInInputField4"/>
+        <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="assertColorSwatchColor">
+            <expectedResult type="string">/{{PageBuilderBackgroundColor_CenterColorHueSlider.rgbaCenterOfLightDarkSliderRegex}}/</expectedResult>
+            <actualResult type="variable">grabBackgroundColorValue</actualResult>
+        </assertRegExp>
+        <grabValueFrom selector="{{ColorPicker.inputField}}" stepKey="grabColorFromInput" />
+        <assertRegExp stepKey="assertColorInInputField">
+            <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"/>