MC-5383: Option Menus, Heading Inline Editor & tinyMCE Inline Editor Are Cut Off on Full Screen View

- Corrected selector index for dropping and duplicating content types
- Updated test steps fro consistency and stability
- Fixed incorrect annotations

Author: Hwashiang Yu

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

@@ -1305,7 +1305,7 @@
     <test name="HeadingLiveEditToolbarNotCutOffInFullScreenMode">
         <annotations>
             <features value="PageBuilder"/>
-            <stories value="Panel"/>
+            <stories value="Heading"/>
             <title value="Heading live edit toolbar should not overflow viewport bounds (get 'cut off') in full screen mode"/>
             <description value="As a content creator I want live edit toolbar for heading content type to be always positioned within viewport bounds so that they are accessible to me within the UI"/>
             <severity value="MAJOR"/>
@@ -1330,11 +1330,6 @@
         <actionGroup ref="dragContentTypeToStage" stepKey="dragColumnIntoStage">
             <argument name="contentType" value="PageBuilderColumnContentType"/>
         </actionGroup>
-        <!-- Add Heading Content Type -->
-        <comment userInput="Add Heading Content Type" stepKey="commentAddInnerContentType"/>
-        <actionGroup ref="expandPageBuilderPanelGroup" stepKey="expandPageBuilderInnerContentTypePanelGroup">
-            <argument name="group" value="PageBuilderHeadingContentType"/>
-        </actionGroup>
         <!-- Duplicate left column 3 times to create 1/12 column on the left configuration -->
         <comment userInput="Duplicate left column 3 times to create 1/12 column on the left configuration" stepKey="commentInitialResize"/>
         <actionGroup ref="duplicateContentType" stepKey="duplicateFirstColumn1Of3">
@@ -1349,7 +1344,12 @@
             <argument name="contentType" value="PageBuilderColumnContentType"/>
             <argument name="targetIndex" value="1"/>
         </actionGroup>
-        <waitForElementVisible selector="{{ColumnOnBackend.displayLabel('1','1/12')}}" stepKey="validateFirstColumnWidth"/>
+        <seeElement selector="{{ColumnOnBackend.displayLabel('1','1/12')}}" stepKey="validateFirstColumnWidth"/>
+        <!-- Add Heading Content Type -->
+        <comment userInput="Add Heading Content Type" stepKey="commentAddInnerContentType"/>
+        <actionGroup ref="expandPageBuilderPanelGroup" stepKey="expandPageBuilderInnerContentTypePanelGroup">
+            <argument name="group" value="PageBuilderHeadingContentType"/>
+        </actionGroup>
         <actionGroup ref="dragContentTypeToContainer" stepKey="dragInnerContentTypeIntoColumn">
             <argument name="contentType" value="PageBuilderHeadingContentType"/>
             <argument name="containerTargetType" value="PageBuilderColumnContentType"/>
@@ -1425,7 +1425,7 @@
     <test name="HeadingOptionsMenuNotOverflowRight">
         <annotations>
             <features value="PageBuilder"/>
-            <stories value="Panel"/>
+            <stories value="Heading"/>
             <title value="Heading options menu should not overflow viewport bounds (get 'cut off') on the right"/>
             <description value="As a content creator I want heading options menus to be always positioned within viewport bounds so that they are accessible to me within the UI"/>
             <severity value="MAJOR"/>
@@ -1454,13 +1454,13 @@
         <comment userInput="Duplicate right column 2 times to create 1/12 column on the right configuration" stepKey="commentInitialResize"/>
         <actionGroup ref="duplicateContentType" stepKey="duplicateLastColumn1Of2">
             <argument name="contentType" value="PageBuilderColumnContentType"/>
-            <argument name="targetIndex" value="1"/>
+            <argument name="targetIndex" value="2"/>
         </actionGroup>
         <actionGroup ref="duplicateContentType" stepKey="duplicateLastColumn2Of2">
             <argument name="contentType" value="PageBuilderColumnContentType"/>
-            <argument name="targetIndex" value="2"/>
+            <argument name="targetIndex" value="3"/>
         </actionGroup>
-        <waitForElementVisible selector="{{ColumnOnBackend.displayLabel('3','1/12')}}" stepKey="validateLastColumnWidth"/>
+        <seeElement selector="{{ColumnOnBackend.displayLabel('4','1/12')}}" stepKey="validateLastColumnWidth"/>
         <!-- Add Heading Content Type -->
         <comment userInput="Add Heading Content Type" stepKey="commentAddHeadingContentType"/>
         <actionGroup ref="expandPageBuilderPanelGroup" stepKey="expandHeadingPageBuilderPanelGroup">
@@ -1469,7 +1469,7 @@
         <actionGroup ref="dragContentTypeToContainer" stepKey="dragHeadingContentTypeIntoColumn">
             <argument name="contentType" value="PageBuilderHeadingContentType"/>
             <argument name="containerTargetType" value="PageBuilderColumnContentType"/>
-            <argument name="containerTargetIndex" value="2"/>
+            <argument name="containerTargetIndex" value="4"/>
             <argument name="contentTypeIndex" value="1"/>
         </actionGroup>
         <actionGroup ref="clickOutsideLiveEditHeading" stepKey="unFocusHeadingEditor">
@@ -1483,7 +1483,7 @@
         <actionGroup ref="dragContentTypeToContainer" stepKey="dragInnerContentTypeIntoColumn">
             <argument name="contentType" value="PageBuilderTextContentType"/>
             <argument name="containerTargetType" value="PageBuilderColumnContentType"/>
-            <argument name="containerTargetIndex" value="2"/>
+            <argument name="containerTargetIndex" value="4"/>
             <argument name="contentTypeIndex" value="1"/>
         </actionGroup>
         <actionGroup ref="unFocusOptionMenu" stepKey="unFocusTextEditor">

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

@@ -2650,7 +2650,7 @@
     <test name="TextTooltipMenusAreNotCutOffInFullScreenMode" extends="HeadingLiveEditToolbarNotCutOffInFullScreenMode">
         <annotations>
             <features value="PageBuilder"/>
-            <stories value="Panel"/>
+            <stories value="Text"/>
             <title value="Text tooltip menus should not overflow viewport bounds (get 'cut off') in full screen mode"/>
             <description value="As a content creator I want text tooltip menus to be always positioned within viewport bounds so that they are accessible to me within the UI"/>
             <severity value="MAJOR"/>
@@ -2684,6 +2684,7 @@
         <waitForElementVisible selector="{{TextOnStage.wysiwyg('1')}}" stepKey="waitForContentTypeToBeVisible"/>
         <click selector="{{TextOnStage.wysiwyg('1')}}" stepKey="focusOnInnerContentType"/>
         <waitForPageLoad after="focusOnInnerContentType" stepKey="waitForToolbarAnimationAfterOverflow"/>
+        <waitForElementVisible selector="{{PageBuilderStage.inlineWYSIWYGEditorPanel(PageBuilderTextContentType.role, '1')}}" after="waitForToolbarAnimationAfterOverflow" stepKey="waitForToolbarVisibleAfterOverflow"/>
         <executeJS function="return document.evaluate(`{{PageBuilderStage.inlineWYSIWYGEditorPanel(PageBuilderTextContentType.role, '1')}}`, document.body).iterateNext().getBoundingClientRect().top" stepKey="toolbarTopPositionAfterOverflow"/>
         <executeJS function="return document.evaluate(`{{TextOnStage.wysiwyg('1')}}`, document.body).iterateNext().getBoundingClientRect().bottom" stepKey="inputBoxBottomPositionAfterOverflow"/>
         <executeJS function="return document.evaluate(`{{TextOnStage.wysiwyg('1')}}`, document.body).iterateNext().getBoundingClientRect().top" stepKey="inputBoxTopPositionAfterOverflow"/>
@@ -2692,6 +2693,7 @@
         </actionGroup>
         <click selector="{{TextOnStage.wysiwyg('1')}}" stepKey="focusOnInnerContentTypeAfterExitFullScreen"/>
         <waitForPageLoad after="focusOnInnerContentTypeAfterExitFullScreen" stepKey="waitForToolbarAnimationAfterExitFullScreen"/>
+        <waitForElementVisible selector="{{PageBuilderStage.inlineWYSIWYGEditorPanel(PageBuilderTextContentType.role, '1')}}" after="waitForToolbarAnimationAfterExitFullScreen" stepKey="waitForToolbarVisibleAfterExitFullScreen"/>
         <executeJS function="return document.evaluate(`{{TextOnStage.wysiwyg('1')}}`, document.body).iterateNext().getBoundingClientRect().top" stepKey="inputBoxTopPositionAfterExitFullScreen"/>
         <executeJS function="return document.evaluate(`{{PageBuilderStage.inlineWYSIWYGEditorPanel(PageBuilderTextContentType.role, '1')}}`, document.body).iterateNext().getBoundingClientRect().top" stepKey="toolbarTopPositionAfterExitFullScreen"/>
         <executeJS function="return document.evaluate(`{{PageBuilderStage.inlineWYSIWYGEditorPanel(PageBuilderTextContentType.role, '1')}}`, document.body).iterateNext().getBoundingClientRect().bottom" stepKey="toolbarBottomPositionAfterExitFullScreen"/>