MC-4150: Widget placeholder and variable placeholder styling is broken on inline editing

- Attempting to fix flakiness in builds
- Adding waitForPageLoad after dragAndDrop actions
- Adding waitForElement before JQuery due to flaky failure in build

Author: dhaecker

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

@@ -402,7 +402,9 @@
         <click selector="{{AdminProductAttributeSetGridSection.AttributeSetName('Default')}}" stepKey="navigateToDefaultAttributeSet" />
         <waitForPageLoad stepKey="waitForAttributeSetEditPage" />
         <dragAndDrop selector1="{{AdminProductAttributeSetSection.attribute($$createPageBuilderAttribute1.attribute_code$$)}}" selector2="{{AdminProductAttributeSetSection.attribute('weight')}}" stepKey="dragFirstAttributeToWeight"/>
+        <waitForPageLoad stepKey="waitForDragAndDrop"/>
         <dragAndDrop selector1="{{AdminProductAttributeSetSection.attribute($$createPageBuilderAttribute2.attribute_code$$)}}" selector2="{{AdminProductAttributeSetSection.attribute('status')}}" stepKey="dragSecondAttributeToStatus"/>
+        <waitForPageLoad stepKey="waitForDragAndDrop2"/>
         <click selector="{{AdminProductAttributeSetSection.saveBtn}}" stepKey="saveAttributesOrder"/>
         <actionGroup ref="ClearCacheActionGroup" stepKey="clearMagentoCache"/>
         <!-- Validate attributes are displayed in the reverse order -->

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

@@ -2213,6 +2213,7 @@
         <comment userInput="Resize Columns" stepKey="commentResizeColumns"/>
         <executeJS function="return document.querySelector('{{ColumnOnBackend.columnResizeGridLine('1')}}').clientWidth" stepKey="guideWidth"/>
         <dragAndDrop selector1="{{ColumnOnBackend.columnX('1')}} {{ColumnOnBackend.columnResizeHandle}}" selector2="{{ColumnOnBackend.columnResizeGridLine('1')}}" x="$guideWidth" stepKey="resizeColumnToOne"/>
+        <waitForPageLoad stepKey="waitForDragAndDrop"/>
         <actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
         <actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage2"/>
         <!-- Validate Height of Variable in Storefront -->
@@ -2252,10 +2253,12 @@
         <click selector="{{BannerOnBackend.tinymce('1')}}" stepKey="focusOnEditorArea1"/>
         <waitForElementVisible selector="{{BannerOnBackend.messageContentText('1', TinyMCEVariableBaseURL.editPanelValue)}}" stepKey="waitForVariableBaseURLStage"/>
         <waitForElementVisible selector="{{BannerOnBackend.messageContentText('1', TinyMCEWidgetCMSPageLink.editPanelValue)}}" stepKey="waitForWidgetStage"/>
-        <executeJS function="return window.getComputedStyle(document.evaluate(&quot;{{BannerOnBackend.variablePlaceholder('1')}}&quot;, document.body).iterateNext()).getPropertyValue('background-color')" stepKey="getVariableStyle" />
-        <executeJS function="return window.getComputedStyle(document.evaluate(&quot;{{BannerOnBackend.widgetPlaceholder('1')}}&quot;, document.body).iterateNext()).getPropertyValue('background-color')" stepKey="getWidgetStyle" />
-        <executeJS function="return window.getComputedStyle(document.evaluate(&quot;{{BannerOnBackend.variablePlaceholder('1')}}&quot;, document.body).iterateNext()).getPropertyValue('background-color')" stepKey="getVariableStyleAfterSave" />
-        <executeJS function="return window.getComputedStyle(document.evaluate(&quot;{{BannerOnBackend.widgetPlaceholder('1')}}&quot;, document.body).iterateNext()).getPropertyValue('background-color')" stepKey="getWidgetStyleAfterSave" />
+        <executeJS function="return window.getComputedStyle(document.evaluate(&quot;{{BannerOnBackend.variablePlaceholder('1')}}&quot;, document.body).iterateNext()).getPropertyValue('background-color')" stepKey="getVariableStyle"/>
+        <executeJS function="return window.getComputedStyle(document.evaluate(&quot;{{BannerOnBackend.widgetPlaceholder('1')}}&quot;, document.body).iterateNext()).getPropertyValue('background-color')" stepKey="getWidgetStyle"/>
+        <waitForElement selector="{{BannerOnBackend.variablePlaceholder('1')}}" stepKey="waitForVariableElement"/>
+        <waitForElement selector="{{BannerOnBackend.widgetPlaceholder('1')}}" stepKey="waitForWidgetElement"/>
+        <executeJS function="return window.getComputedStyle(document.evaluate(&quot;{{BannerOnBackend.variablePlaceholder('1')}}&quot;, document.body).iterateNext()).getPropertyValue('background-color')" stepKey="getVariableStyleAfterSave"/>
+        <executeJS function="return window.getComputedStyle(document.evaluate(&quot;{{BannerOnBackend.widgetPlaceholder('1')}}&quot;, document.body).iterateNext()).getPropertyValue('background-color')" stepKey="getWidgetStyleAfterSave"/>
         <seeElement selector="{{BannerOnFrontend.messageContentText('1', _ENV.MAGENTO_BASE_URL)}}" stepKey="seeVariableStorefront"/>
         <seeElement selector="{{BannerOnFrontend.messageContentTextAreaTextWidget('1', _ENV.MAGENTO_BASE_URL, $$createCMSPageB.identifier$$)}}" stepKey="seeWidgetStorefront"/>
         <click selector="{{BannerOnFrontend.messageContentTextAreaTextWidget('1', _ENV.MAGENTO_BASE_URL, $$createCMSPageB.identifier$$)}}" stepKey="clickWidgetStorefront"/>

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

@@ -183,6 +183,7 @@
         <comment userInput="Resize Column" stepKey="commentResizeColumn"/>
         <executeJS function="return document.querySelector('{{ColumnOnBackend.columnResizeGridLine('1')}}').clientWidth" stepKey="guideWidth"/>
         <dragAndDrop selector1="{{ColumnOnBackend.columnX('1')}} {{ColumnOnBackend.columnResizeHandle}}" selector2="{{ColumnOnBackend.columnResizeGridLine('9')}}" x="$guideWidth" stepKey="dragColumn1"/>
+        <waitForPageLoad stepKey="waitForDragAndDrop"/>
         <executeJS function="return parseInt(window.getComputedStyle(document.querySelector('{{ColumnOnBackend.columnX('1')}}')).width)" stepKey="column1Width1"/>
         <executeJS function="return parseInt(window.getComputedStyle(document.querySelector('{{ColumnOnBackend.columnX('2')}}')).width)" stepKey="column2Width1"/>
         <executeJS function="return Math.round({$column1Width1}/{$column2Width1})" stepKey="columnSizeRatio"/>

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

@@ -1764,6 +1764,7 @@
         <actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
         <executeJS function="return document.querySelector('{{ColumnOnBackend.columnResizeGridLine('1')}}').clientWidth" stepKey="guideWidth"/>
         <dragAndDrop selector1="{{ColumnOnBackend.columnX('1')}} {{ColumnOnBackend.columnResizeHandle}}" selector2="{{ColumnOnBackend.columnResizeGridLine('11')}}" x="$guideWidth" stepKey="dragColumn1"/>
+        <waitForPageLoad stepKey="waitForDragAndDrop"/>
         <executeJS function="return parseInt(window.getComputedStyle(document.querySelector('{{ColumnOnBackend.columnX('1')}}')).width)" stepKey="column1Width1"/>
         <executeJS function="return parseInt(window.getComputedStyle(document.querySelector('{{ColumnOnBackend.columnX('2')}}')).width)" stepKey="column2Width1"/>
         <executeJS function="return Math.round({$column1Width1}/{$column2Width1})" stepKey="columnSizeRatio"/>

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

@@ -273,6 +273,7 @@
         <comment userInput="Resize first column to 1/6" stepKey="commentResizeColumn" />
         <executeJS function="return document.querySelector('{{ColumnOnBackend.columnResizeGridLine('1')}}').clientWidth" stepKey="guideWidth"/>
         <dragAndDrop selector1="{{ColumnOnBackend.columnX('1')}} {{ColumnOnBackend.columnResizeHandle}}" selector2="{{ColumnOnBackend.columnResizeGridLine('1')}}" x="$guideWidth" stepKey="resizeColumn1"/>
+        <waitForPageLoad stepKey="waitForDragAndDrop"/>
         <waitForElementVisible selector="{{ColumnOnBackend.displayLabel('1','1/6')}}" stepKey="validateLeftColumnWidth2"/>
         <waitForElementVisible selector="{{ColumnOnBackend.displayLabel('2','5/6')}}" stepKey="validateRightColumnWidth2"/>
         <!-- Change grid size back to 12 and validate column maintained ratio -->
@@ -518,6 +519,7 @@
         <!-- Resize Column 1 -->
         <comment userInput="Resize Column 1" stepKey="context2"/>
         <dragAndDrop selector1="{{ColumnOnBackend.columnX('1')}} {{ColumnOnBackend.columnResizeHandle}}" selector2="{{ColumnOnBackend.columnResizeGridLine('1')}}" x="$guideWidth" stepKey="resizeColumn1"/>
+        <waitForPageLoad stepKey="waitForDragAndDrop"/>
         <seeNumberOfElements selector="{{ColumnOnBackend.allColumns}}" userInput="3" stepKey="seeNumberOfColumnsStill32"/>
         <!-- Verify New Column Sizes -->
         <comment userInput="Verify New Column Sizes " stepKey="context3"/>

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

@@ -125,6 +125,7 @@
         <!-- Change Columns To 5:1 Ratio -->
         <comment userInput="Change Columns To 5:1 Ratio" stepKey="context1"/>
         <dragAndDrop selector1="{{ColumnOnBackend.columnX('1')}} {{ColumnOnBackend.columnResizeHandle}}" selector2="{{ColumnOnBackend.columnResizeGridLine('10')}}" x="$guideWidth" stepKey="dragColumnOneToFive"/>
+        <waitForPageLoad stepKey="waitForDragAndDrop"/>
         <!-- Assert the width classes are correct after manual resize -->
         <waitForElement selector="{{ColumnOnBackend.columnByIndexAndWidthClass('1','90')}}" stepKey="assertWidthClass1"/>
         <waitForElement selector="{{ColumnOnBackend.columnByIndexAndWidthClass('2','20')}}" stepKey="assertWidthClass2"/>
@@ -215,6 +216,7 @@
         </actionGroup>
         <executeJS function="return document.querySelector('{{ColumnOnBackend.columnResizeGridLine('1')}}').clientWidth" stepKey="guideWidth"/>
         <dragAndDrop selector1="{{ColumnOnBackend.columnX('2')}} {{ColumnOnBackend.columnResizeHandle}}" selector2="{{ColumnOnBackend.columnResizeGridLine('8')}}" x="$guideWidth" stepKey="resizeColumnToTwo"/>
+        <waitForPageLoad stepKey="waitForDragAndDrop"/>
         <actionGroup ref="removeContentTypeFromStageByIndex" stepKey="removeFirstColumn">
             <argument name="contentType" value="PageBuilderColumnContentType"/>
             <argument name="contentTypeNumber" value="1"/>
@@ -303,12 +305,14 @@
         <!-- Change Columns To 4:1:1 Ratio -->
         <comment userInput="Change Columns To 4:1:1 Ratio" stepKey="context1"/>
         <dragAndDrop selector1="{{ColumnOnBackend.columnX('1')}} {{ColumnOnBackend.columnResizeHandle}}" selector2="{{ColumnOnBackend.columnResizeGridLine('8')}}" x="$guideWidth" stepKey="resizeColumn1ToEight"/>
+        <waitForPageLoad stepKey="waitForDragAndDrop"/>
         <actionGroup ref="dragContentTypeToContainer" stepKey="dragColumnIntoStage2">
             <argument name="contentType" value="PageBuilderColumnContentType"/>
             <argument name="containerTargetType" value="PageBuilderColumnContentType"/>
             <argument name="containerTargetIndex" value="2"/>
         </actionGroup>
         <dragAndDrop selector1="{{ColumnOnBackend.columnX('2')}} {{ColumnOnBackend.columnResizeHandle}}" selector2="{{ColumnOnBackend.columnResizeGridLine('10')}}" x="$guideWidth" stepKey="resizeColumnToTwo"/>
+        <waitForPageLoad stepKey="waitForDragAndDrop2"/>
         <actionGroup ref="expandPageBuilderPanelGroup" stepKey="expandPageBuilderPanelGroup">
             <argument name="group" value="PageBuilderDividerContentType"/>
         </actionGroup>
@@ -499,6 +503,7 @@
             <argument name="containerTargetIndex" value="2"/>
         </actionGroup>
         <dragAndDrop selector1="{{ColumnOnBackend.columnX('2')}} {{ColumnOnBackend.columnResizeHandle}}" selector2="{{ColumnOnBackend.columnResizeGridLine('10')}}" x="$guideWidth" stepKey="resizeColumn2ToFive"/>
+        <waitForPageLoad stepKey="waitForDragAndDrop"/>
         <actionGroup ref="expandPageBuilderPanelGroup" stepKey="expandPageBuilderPanelGroup">
             <argument name="group" value="PageBuilderDividerContentType"/>
         </actionGroup>
@@ -609,12 +614,14 @@
         </actionGroup>
         <executeJS function="return document.querySelector('{{ColumnOnBackend.columnResizeGridLine('1')}}').clientWidth" stepKey="guideWidth"/>
         <dragAndDrop selector1="{{ColumnOnBackend.columnX('2')}} {{ColumnOnBackend.columnResizeHandle}}" selector2="{{ColumnOnBackend.columnResizeGridLine('8')}}" x="$guideWidth" stepKey="resizeColumnToTwo"/>
+        <waitForPageLoad stepKey="waitForDragAndDrop"/>
         <actionGroup ref="dragContentTypeToContainer" stepKey="dragColumnIntoStage3">
             <argument name="contentType" value="PageBuilderColumnContentType"/>
             <argument name="containerTargetType" value="PageBuilderColumnContentType"/>
             <argument name="containerTargetIndex" value="3"/>
         </actionGroup>
         <dragAndDrop selector1="{{ColumnOnBackend.columnX('3')}} {{ColumnOnBackend.columnResizeHandle}}" selector2="{{ColumnOnBackend.columnResizeGridLine('10')}}" x="$guideWidth" stepKey="resizeSecondColumnToTwo"/>
+        <waitForPageLoad stepKey="waitForDragAndDrop2"/>
         <actionGroup ref="expandPageBuilderPanelGroup" stepKey="expandPageBuilderPanelGroup">
             <argument name="group" value="PageBuilderDividerContentType"/>
         </actionGroup>
@@ -750,7 +757,9 @@
             <argument name="containerTargetIndex" value="2"/>
         </actionGroup>
         <dragAndDrop selector1="{{ColumnOnBackend.columnX('1')}} {{ColumnOnBackend.columnResizeHandle}}" selector2="{{ColumnOnBackend.columnResizeGridLine('4')}}" x="$guideWidth" stepKey="resizeColumnToThird"/>
+        <waitForPageLoad stepKey="waitForDragAndDrop"/>
         <dragAndDrop selector1="{{ColumnOnBackend.columnX('2')}} {{ColumnOnBackend.columnResizeHandle}}" selector2="{{ColumnOnBackend.columnResizeGridLine('8')}}" x="$guideWidth" stepKey="resizeSecondColumnToThird"/>
+        <waitForPageLoad stepKey="waitForDragAndDrop2"/>
         <actionGroup ref="duplicateContentType" stepKey="duplicateFirstColumn">
             <argument name="contentType" value="PageBuilderColumnContentType"/>
             <argument name="targetIndex" value="1"/>
@@ -869,35 +878,35 @@
         <comment userInput="Resizing columns to create 5/12, 1/12, 6/12 configuration, logic for resizing differs when dragging a 1/2 column to the left" stepKey="commentInitialResize"/>
         <executeJS function="return document.querySelector('{{ColumnOnBackend.columnResizeGridLine('1')}}').clientWidth" stepKey="guideWidth"/>
         <dragAndDrop selector1="{{ColumnOnBackend.columnX('1')}} {{ColumnOnBackend.columnResizeHandle}}" selector2="{{ColumnOnBackend.columnResizeGridLine('5')}}" x="$guideWidth" stepKey="resizeColumn1"/>
-        <waitForPageLoad stepKey="waitForPageLoad" />
+        <waitForPageLoad stepKey="waitForDragAndDrop"/>
         <waitForElementVisible selector="{{ColumnOnBackend.displayLabel('1','5/12')}}" stepKey="validateFirstColumnWidth"/>
         <waitForElementVisible selector="{{ColumnOnBackend.displayLabel('2','1/12')}}" stepKey="validateSecondColumnWidth"/>
         <waitForElementVisible selector="{{ColumnOnBackend.displayLabel('3','6/12')}}" stepKey="validateThirdColumnWidth"/>
         <!-- Resize left column to 4/12 via second column -->
         <comment userInput="Resize left column to 4/12 via second column" stepKey="commentFourTwelth"/>
         <dragAndDrop selector1="{{ColumnOnBackend.columnX('2')}} {{ColumnOnBackend.columnResizeHandle}}" selector2="{{ColumnOnBackend.columnResizeGridLine('5')}}" x="$guideWidth" stepKey="resizeColumn1ViaColumn1"/>
-        <waitForPageLoad stepKey="waitForResize1"/>
+        <waitForPageLoad stepKey="waitForDragAndDrop2"/>
         <waitForElementVisible selector="{{ColumnOnBackend.displayLabel('1','4/12')}}" stepKey="validateFirstColumnWidth1"/>
         <waitForElementVisible selector="{{ColumnOnBackend.displayLabel('2','1/12')}}" stepKey="validateSecondColumnWidth1"/>
         <waitForElementVisible selector="{{ColumnOnBackend.displayLabel('3','7/12')}}" stepKey="validateThirdColumnWidth1"/>
         <!-- Resize left column to 3/12 via second column -->
         <comment userInput="Resize left column to 3/12 via second column" stepKey="commentThreeTwelth"/>
         <dragAndDrop selector1="{{ColumnOnBackend.columnX('2')}} {{ColumnOnBackend.columnResizeHandle}}" selector2="{{ColumnOnBackend.columnResizeGridLine('4')}}" x="$guideWidth" stepKey="resizeColumn1ViaColumn2"/>
-        <waitForPageLoad stepKey="waitForResize2"/>
+        <waitForPageLoad stepKey="waitForDragAndDrop3"/>
         <waitForElementVisible selector="{{ColumnOnBackend.displayLabel('1','3/12')}}" stepKey="validateFirstColumnWidth2"/>
         <waitForElementVisible selector="{{ColumnOnBackend.displayLabel('2','1/12')}}" stepKey="validateSecondColumnWidth2"/>
         <waitForElementVisible selector="{{ColumnOnBackend.displayLabel('3','8/12')}}" stepKey="validateThirdColumnWidth2"/>
         <!-- Resize left column to 2/12 via second column -->
         <comment userInput="Resize left column to 2/12 via second column" stepKey="commentTwoTwelth"/>
         <dragAndDrop selector1="{{ColumnOnBackend.columnX('2')}} {{ColumnOnBackend.columnResizeHandle}}" selector2="{{ColumnOnBackend.columnResizeGridLine('3')}}" x="$guideWidth" stepKey="resizeColumn1ViaColumn3"/>
-        <waitForPageLoad stepKey="waitForResize3"/>
+        <waitForPageLoad stepKey="waitForDragAndDrop4"/>
         <waitForElementVisible selector="{{ColumnOnBackend.displayLabel('1','2/12')}}" stepKey="validateFirstColumnWidth3"/>
         <waitForElementVisible selector="{{ColumnOnBackend.displayLabel('2','1/12')}}" stepKey="validateSecondColumnWidth3"/>
         <waitForElementVisible selector="{{ColumnOnBackend.displayLabel('3','9/12')}}" stepKey="validateThirdColumnWidth3"/>
         <!-- Resize left column to 1/12 via second column -->
         <comment userInput="Resize left column to 1/12 via second column" stepKey="commentOneTwelth"/>
         <dragAndDrop selector1="{{ColumnOnBackend.columnX('2')}} {{ColumnOnBackend.columnResizeHandle}}" selector2="{{ColumnOnBackend.columnResizeGridLine('2')}}" x="$guideWidth" stepKey="resizeColumn1ViaColumn4"/>
-        <waitForPageLoad stepKey="waitForResize4"/>
+        <waitForPageLoad stepKey="waitForDragAndDrop5"/>
         <waitForElementVisible selector="{{ColumnOnBackend.displayLabel('1','1/12')}}" stepKey="validateFirstColumnWidth4"/>
         <waitForElementVisible selector="{{ColumnOnBackend.displayLabel('2','1/12')}}" stepKey="validateSecondColumnWidth4"/>
         <waitForElementVisible selector="{{ColumnOnBackend.displayLabel('3','10/12')}}" stepKey="validateThirdColumnWidth4"/>

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

@@ -1341,11 +1341,13 @@
         <executeJS function="return document.querySelector('{{ColumnOnBackend.columnResizeGridLine('4')}}').clientWidth" stepKey="guideWidthFirstColumn"/>
         <comment userInput="Resize first column to 4/12" stepKey="commentResizeFirstColumn"/>
         <dragAndDrop selector1="{{ColumnOnBackend.columnX('1')}} {{ColumnOnBackend.columnResizeHandle}}" selector2="{{ColumnOnBackend.columnResizeGridLine('4')}}" x="$guideWidthFirstColumn" stepKey="resizeFirstColumn"/>
+        <waitForPageLoad stepKey="waitForDragAndDrop"/>
         <!-- Resize second column to 4/12 -->
         <comment userInput="Grab grid guide width for 4/12 for second column" stepKey="commentRetrieveGuideWidthForSecond"/>
         <executeJS function="return document.querySelector('{{ColumnOnBackend.columnResizeGridLine('8')}}').clientWidth" stepKey="guideWidthSecondColumn"/>
         <comment userInput="Resize second column to 4/12" stepKey="commentResizeSecondColumn"/>
         <dragAndDrop selector1="{{ColumnOnBackend.columnX('2')}} {{ColumnOnBackend.columnResizeHandle}}" selector2="{{ColumnOnBackend.columnResizeGridLine('8')}}" x="$guideWidthSecondColumn" stepKey="resizeSecondColumn"/>
+        <waitForPageLoad stepKey="waitForDragAndDrop2"/>
         <!-- Check all columns have the same width -->
         <comment userInput="Validate column widths are as expected" stepKey="commentValidateWidthsAreCorrect"/>
         <executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('1')}}').clientWidth" stepKey="columnOneWidth"/>