AC-2086: updated ContentType clicking logic to stabilize TextVerifyTinyMCETableToolbarOnPageBuilderStageTest

Author: sergiy-v

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderTextTest/TextVerifyTinyMCETableToolbarOnPageBuilderStageTest.xml

@@ -112,10 +112,13 @@
         </actionGroup>
 
         <!-- Initialize TinyMCE Table Toolbar & Verify All Table Toolbar Menu Items are Visible -->
-        <clickWithLeftButton x="10" y="10" selector="{{TextOnStage.tinymce('1')}}" stepKey="clickOnTextContentType"/>
-        <waitForElementVisible selector="{{WYSIWYGOnPageBuilderInline.toolbar}}" stepKey="waitForTinyMCEToolbar"/>
-        <comment userInput="Step key preserved for backwards compatibility" stepKey="clickAgainToOpenTableToolbar"/>
-        <comment userInput="Step key preserved for backwards compatibility" stepKey="waitForTinyMCETableToolbar"/>
+        <actionGroup ref="focusOnInlineTinyMCEEditor" stepKey="clickOnTextContentType">
+            <argument name="contentTypeXCoordinate" value="10"/>
+            <argument name="contentTypeYCoordinate" value="10"/>
+        </actionGroup>
+        <comment userInput="Step key preserved for backwards compatibility" stepKey="waitForTinyMCEToolbar"/>
+        <conditionalClick selector="{{TextOnStage.tinymce('1')}}" dependentSelector="{{WYSIWYGOnPageBuilderInline.tableToolbar}}" visible="false" stepKey="clickAgainToOpenTableToolbar"/>
+        <waitForPageLoad stepKey="waitForTinyMCETableToolbar"/>
         <waitForElementVisible selector="{{WYSIWYGOnPageBuilderInline.tableToolbar}}" stepKey="seeTableToolbar2"/>
         <seeElement selector="{{WYSIWYGOnPageBuilderInline.tableProperties}}" stepKey="seeTableProperties2"/>
         <seeElement selector="{{WYSIWYGOnPageBuilderInline.deleteTable}}" stepKey="seeDeleteTable2"/>
@@ -171,10 +174,13 @@
         </actionGroup>
 
         <!-- Initialize TinyMCE Table Toolbar & Verify All Table Toolbar Menu Items are Visible Again -->
-        <clickWithLeftButton x="10" y="10" selector="{{TextOnStage.tinymce('1')}}" stepKey="clickOnTextContentType2"/>
-        <waitForElementVisible selector="{{WYSIWYGOnPageBuilderInline.toolbar}}" stepKey="waitForTinymceToolbar2"/>
-        <comment userInput="Step key preserved for backwards compatibility" stepKey="clickAgainToOpenTableToolbar2"/>
-        <comment userInput="Step key preserved for backwards compatibility" stepKey="waitForTinymceTableToolbar2"/>
+        <actionGroup ref="focusOnInlineTinyMCEEditor" stepKey="clickOnTextContentType2">
+            <argument name="contentTypeXCoordinate" value="10"/>
+            <argument name="contentTypeYCoordinate" value="10"/>
+        </actionGroup>
+        <comment userInput="Step key preserved for backwards compatibility" stepKey="waitForTinymceToolbar2"/>
+        <conditionalClick selector="{{TextOnStage.tinymce('1')}}" dependentSelector="{{WYSIWYGOnPageBuilderInline.tableToolbar}}" visible="false" stepKey="clickAgainToOpenTableToolbar2"/>
+        <waitForPageLoad stepKey="waitForTinymceTableToolbar2"/>
         <waitForElementVisible selector="{{WYSIWYGOnPageBuilderInline.tableToolbar}}" stepKey="seeTableToolbar3"/>
         <seeElement selector="{{WYSIWYGOnPageBuilderInline.tableProperties}}" stepKey="seeTableProperties3"/>
         <seeElement selector="{{WYSIWYGOnPageBuilderInline.deleteTable}}" stepKey="seeDeleteTable3"/>

app/code/Magento/PageBuilder/view/adminhtml/web/js/wysiwyg/tinymce.js

@@ -172,6 +172,11 @@ export default class Wysiwyg implements WysiwygInterface {
 
         events.trigger("stage:interactionStart");
 
+        const element = document.querySelector(`#${this.elementId}`);
+        if (!element) {
+            return;
+        }
+
         // Wait for everything else to finish
         _.defer(() => delayUntil(
             () => {
@@ -203,7 +208,7 @@ export default class Wysiwyg implements WysiwygInterface {
                     document.body.appendChild(dialogContainer);
                 }
             },
-            () => document.querySelector(`#${this.elementId}`).classList.contains("mce-edit-focus"),
+            () => element.classList.contains("mce-edit-focus"),
             10,
         ));
     }