Skip to content

Commit 9c62835

Browse files
hannahnidahannahnida
committed
#628: Page Builder Wysiwyg Editor Element blocks view to content area - Changed new Mftf test
1 parent ce9ebca commit 9c62835

File tree

2 files changed

+104
-43
lines changed

2 files changed

+104
-43
lines changed

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderWYSIWYGSection/WYSIWYGOnPageBuilderInlineSection.xml

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Page/etc/SectionObject.xsd">
1010
<section name="WYSIWYGOnPageBuilderInline">
1111
<element name="toolbar" type="button" selector=".mce-tinymce.mce-tinymce-inline"/>
12-
<element name="toolbarPath" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg}}]//div[contains(@class, 'mce-tinymce-inline')]" parameterized="true"/>
1312
<element name="inlineCss" type="button" selector=".mce-tinymce.mce-tinymce-inline"/>
1413
<element name="notCss" type="button" selector=".mce-tinymce:not(.mce-tinymce-inline)"/>
1514
<element name="undo" type="button" selector=".mce-tinymce-inline div[aria-label='Undo']"/>
@@ -33,7 +32,14 @@
3332
<element name="tableMenuFirstItem" type="text" selector="(//i[contains(@class, 'mce-i-table')])[{{arg1}}]" parameterized="true"/>
3433
<element name="tableGrid" type="text" selector="//a[@data-mce-x={{arg1}}][@data-mce-y={{arg2}}]" parameterized="true"/>
3534
<element name="tableToolbar" type="text" selector=".mce-tinymce-inline.mce-arrow.mce-container.mce-floatpanel[aria-label='Inline toolbar']"/>
36-
<element name="insertRowAfterButton" type="text" selector="div[aria-label='Insert row after'] button"/>
35+
<element name="tableProperties" type="button" selector="div[aria-label='Table properties'] button"/>
36+
<element name="deleteTable" type="button" selector="div[aria-label='Delete table'] button"/>
37+
<element name="insertRowBefore" type="button" selector="div[aria-label='Insert row before'] button"/>
38+
<element name="insertRowAfter" type="button" selector="div[aria-label='Insert row after'] button"/>
39+
<element name="deleteRow" type="button" selector="div[aria-label='Delete row'] button"/>
40+
<element name="insertColumnBefore" type="button" selector="div[aria-label='Insert column before'] button"/>
41+
<element name="insertColumnAfter" type="button" selector="div[aria-label='Insert column after'] button"/>
42+
<element name="deleteColumn" type="button" selector="div[aria-label='Delete column'] button"/>
3743
<element name="specialCharacter" type="button" selector=".mce-tinymce-inline div[aria-label='Special character']"/>
3844
<element name="insertWidget" type="button" selector=".mce-tinymce-inline div[aria-label='Insert Widget']"/>
3945
<element name="insertVariable" type="button" selector=".mce-tinymce-inline div[aria-label='Insert Variable']"/>

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

Lines changed: 96 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
<stories value="Text"/>
1414
<title value="TinyMCE4 table toolbar on PageBuilder stage"/>
1515
<description value="Verify that WYSIWYG table toolbar doesn't overlap textarea"/>
16+
<severity value="AVERAGE"/>
1617
<group value="pagebuilder"/>
1718
<group value="pagebuilder-text"/>
1819
<group value="pagebuilder-tinyMCE"/>
@@ -34,73 +35,127 @@
3435
<actionGroup ref="duplicateContentType" stepKey="duplicateContentType">
3536
<argument name="contentType" value="PageBuilderColumnContentType"/>
3637
</actionGroup>
37-
<actionGroup ref="expandPageBuilderPanelMenuSection" stepKey="expandPageBuilderPanelMenuSection1">
38+
<actionGroup ref="expandPageBuilderPanelMenuSection" stepKey="expandPageBuilderPanelMenuSection">
3839
<argument name="contentType" value="PageBuilderTextContentType"/>
3940
</actionGroup>
4041
<actionGroup ref="dragContentTypeToStage" stepKey="dragTextToColumnContentType">
4142
<argument name="contentType" value="PageBuilderTextContentType"/>
4243
<argument name="containerTargetType" value="PageBuilderColumnContentType"/>
43-
<argument name="containerTargetIndex" value="2"/>
44+
<argument name="containerTargetIndex" value="1"/>
4445
</actionGroup>
4546
<!-- Add table to Text Editor -->
4647
<clickWithLeftButton x="10" y="10" selector="{{TextOnStage.tinymce('1')}}" stepKey="focusOnTextEditorArea"/>
48+
<waitForElementVisible selector="{{WYSIWYGOnPageBuilderInline.table}}" stepKey="waitForTableMenuItem"/>
4749
<click selector="{{WYSIWYGOnPageBuilderInline.table}}" stepKey="clickOnTableMenuItem"/>
48-
<moveMouseOver selector="{{WYSIWYGOnPageBuilderInline.tableMenuFirstItem('2')}}" stepKey="moveMouseOverTableMenuIFirstItem"/>
50+
<waitForElementVisible selector="{{WYSIWYGOnPageBuilderInline.tableMenuFirstItem('2')}}" stepKey="waitForTableMenuIFirstItem"/>
4951
<click selector="{{WYSIWYGOnPageBuilderInline.tableMenuFirstItem('2')}}" stepKey="clickOnTableMenuFirstItem"/>
50-
<click selector="{{WYSIWYGOnPageBuilderInline.tableGrid('6', '0')}}" stepKey="chooseTableSize"/>
52+
<waitForElement selector="{{WYSIWYGOnPageBuilderInline.tableGrid('6', '1')}}" stepKey="waitForTableGrid"/>
53+
<click selector="{{WYSIWYGOnPageBuilderInline.tableGrid('6', '1')}}" stepKey="chooseTableSize"/>
5154
<!-- Validate table size is 7 x 1 -->
5255
<seeElement selector="{{TextOnStage.elementInText('1', 'table', '1')}}" stepKey="seeTable"/>
53-
<seeElement selector="{{TextOnStage.elementInText('1', 'tr', '1')}}" stepKey="seeTableTr"/>
54-
<dontSeeElement selector="{{TextOnStage.elementInText('1', 'tr', '2')}}" stepKey="dontSeeMoreThan1TableTr"/>
56+
<seeElement selector="{{TextOnStage.elementInText('1', 'tr', '2')}}" stepKey="see2TableTr"/>
57+
<dontSeeElement selector="{{TextOnStage.elementInText('1', 'tr', '3')}}" stepKey="dontSeeMoreThan2TableTr"/>
5558
<seeElement selector="{{TextOnStage.elementInText('1', 'td', '7')}}" stepKey="see7TableTd"/>
5659
<dontSeeElement selector="{{TextOnStage.elementInText('1', 'td', '8')}}" stepKey="dontSeeMoreThan7TableTr"/>
57-
<!-- Validate that textarea is visible -->
60+
<!-- Validate all table toolbar menu items -->
61+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.tableProperties}}" stepKey="seeTableProperties"/>
62+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.deleteTable}}" stepKey="seeDeleteTable"/>
63+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.insertRowBefore}}" stepKey="seeInsertRowBefore"/>
64+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.insertRowAfter}}" stepKey="seeInsertRowAfter"/>
65+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.deleteRow}}" stepKey="seeDeleteRow"/>
66+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.insertColumnBefore}}" stepKey="seeInsertColumnBefore"/>
67+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.insertColumnAfter}}" stepKey="seeInsertColumnAfter"/>
68+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.deleteColumn}}" stepKey="seeDeleteColumn"/>
69+
<!-- Validate that table toolbar doesn't overlap table content -->
5870
<seeElement selector="{{TextOnStage.tinymceInFocus('1')}}" stepKey="seeFocusedTinyMCE"/>
5971
<seeElement selector="{{WYSIWYGOnPageBuilderInline.tableToolbar}}" stepKey="seeTableToolbar"/>
60-
<executeJS function="return document.querySelector(&quot;{{WYSIWYGOnPageBuilderInline.tableToolbar}}&quot;).getBoundingClientRect().top" stepKey="grabTableToolbarTopPosition"/>
61-
<executeJS function="return document.evaluate(&quot;{{WYSIWYGOnPageBuilderInline.toolbarPath('1')}}&quot;, document.body).iterateNext().getBoundingClientRect().top" stepKey="grabToolbarTopPosition"/>
62-
<executeJS function="return Math.abs({$grabTableToolbarTopPosition} - {$grabToolbarTopPosition})" stepKey="topPositionDifference"/>
72+
<executeJS function="return document.querySelector(&quot;{{WYSIWYGOnPageBuilderInline.tableToolbar}}&quot;).getBoundingClientRect().top + document.querySelector(&quot;{{WYSIWYGOnPageBuilderInline.tableToolbar}}&quot;).offsetHeight" stepKey="grabTableToolbarBottomPosition"/>
73+
<executeJS function="return document.evaluate(&quot;{{TextOnStage.tinymce('1')}}//table&quot;, document.body).iterateNext().getBoundingClientRect().top" stepKey="grabTableElementTopPosition"/>
74+
<executeJS function="return Math.abs({$grabTableToolbarBottomPosition} - {$grabTableElementTopPosition})" stepKey="topPositionDifference"/>
6375
<assertLessThanOrEqual stepKey="assertTopPositionDifference">
6476
<expectedResult type="int">2</expectedResult>
6577
<actualResult type="variable">topPositionDifference</actualResult>
6678
</assertLessThanOrEqual>
67-
<!-- Add new rows to table and verify that toolbar and textarea changed their position -->
68-
<waitForElementVisible selector="{{WYSIWYGOnPageBuilderInline.insertRowAfterButton}}" stepKey="waitForInsertRowButton"/>
69-
<click selector="{{WYSIWYGOnPageBuilderInline.insertRowAfterButton}}" stepKey="clickInsertRowButton"/>
70-
<waitForElementVisible selector="{{TextOnStage.elementInText('1', 'tr', '2')}}" stepKey="waitForTableSecondRow"/>
71-
<executeJS function="return document.querySelector(&quot;{{WYSIWYGOnPageBuilderInline.tableToolbar}}&quot;).getBoundingClientRect().top" stepKey="grabTableToolbarTopPosition2"/>
72-
<executeJS function="return document.evaluate(&quot;{{WYSIWYGOnPageBuilderInline.toolbarPath('1')}}&quot;, document.body).iterateNext().getBoundingClientRect().top" stepKey="grabToolbarTopPosition2"/>
73-
<executeJS function="return Math.abs({$grabTableToolbarTopPosition} - {$grabToolbarTopPosition})" stepKey="topPositionDifference2"/>
74-
<assertLessThanOrEqual stepKey="assertTopPositionDifference2">
75-
<expectedResult type="int">2</expectedResult>
76-
<actualResult type="variable">topPositionDifference2</actualResult>
77-
</assertLessThanOrEqual>
78-
<!-- Resize column to 4/12 and check toolbar position -->
79+
<!-- Move text to 6/12 column and verify default tinymce table toolbar -->
7980
<click selector="{{PageBuilderPanel.searchPanel}}" stepKey="unFocusEditor"/>
80-
<actionGroup ref="duplicateContentType" stepKey="duplicateColumnContentType">
81-
<argument name="contentType" value="PageBuilderColumnContentType"/>
81+
<actionGroup ref="moveContentTypeToContainer" stepKey="moveTextIntoThirdColumn">
82+
<argument name="contentType" value="PageBuilderTextContentType"/>
83+
<argument name="contentTypeIndex" value="1"/>
84+
<argument name="containerTargetType" value="PageBuilderColumnContentType"/>
85+
<argument name="containerTargetIndex" value="3"/>
8286
</actionGroup>
83-
<actionGroup ref="removeContentTypeFromStageByIndex" stepKey="removeColumnContentTypeFromStage">
84-
<argument name="contentType" value="PageBuilderColumnContentType"/>
85-
<argument name="contentTypeNumber" value="2"/>
87+
<clickWithLeftButton x="10" y="10" selector="{{TextOnStage.tinymce('1')}}" stepKey="clickOnTextContentType"/>
88+
<waitForPageLoad stepKey="waitForTinymceToolbar"/>
89+
<clickWithLeftButton x="10" y="10" selector="{{TextOnStage.tinymce('1')}}" stepKey="clickAgainToOpenTableToolbar"/>
90+
<waitForPageLoad stepKey="waitForTinymceTableToolbar"/>
91+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.tableToolbar}}" stepKey="seeTableToolbar2"/>
92+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.tableProperties}}" stepKey="seeTableProperties2"/>
93+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.deleteTable}}" stepKey="seeDeleteTable2"/>
94+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.insertRowBefore}}" stepKey="seeInsertRowBefore2"/>
95+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.insertRowAfter}}" stepKey="seeInsertRowAfter2"/>
96+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.deleteRow}}" stepKey="seeDeleteRow2"/>
97+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.insertColumnBefore}}" stepKey="seeInsertColumnBefore2"/>
98+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.insertColumnAfter}}" stepKey="seeInsertColumnAfter2"/>
99+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.deleteColumn}}" stepKey="seeDeleteColumn2"/>
100+
<executeJS function="return document.querySelector(&quot;{{WYSIWYGOnPageBuilderInline.tableToolbar}}&quot;).getBoundingClientRect().top + document.querySelector(&quot;{{WYSIWYGOnPageBuilderInline.tableToolbar}}&quot;).offsetHeight" stepKey="grabTableToolbarBottomPosition2"/>
101+
<executeJS function="return document.evaluate(&quot;{{TextOnStage.tinymce('1')}}//table&quot;, document.body).iterateNext().getBoundingClientRect().top" stepKey="grabTableElementTopPosition2"/>
102+
<executeJS function="return Math.abs({$grabTableToolbarBottomPosition2} - {$grabTableElementTopPosition2})" stepKey="topPositionDifference2"/>
103+
<assertGreaterThanOrEqual stepKey="assertTopPositionDifference2">
104+
<expectedResult type="int">12</expectedResult>
105+
<actualResult type="variable">topPositionDifference2</actualResult>
106+
</assertGreaterThanOrEqual>
107+
<executeJS function="return document.querySelector(&quot;{{WYSIWYGOnPageBuilderInline.tableToolbar}}&quot;).getBoundingClientRect().top" stepKey="grabTableToolbarTopPosition"/>
108+
<executeJS function="return document.evaluate(&quot;{{TextOnStage.tinymce('1')}}//table&quot;, document.body).iterateNext().getBoundingClientRect().top + document.evaluate(&quot;{{TextOnStage.tinymce('1')}}//table&quot;, document.body).iterateNext().offsetHeight" stepKey="grabTableElementBottomPosition"/>
109+
<executeJS function="return Math.abs({$grabTableToolbarTopPosition} - {$grabTableElementBottomPosition})" stepKey="bottomPositionDifference"/>
110+
<assertGreaterThanOrEqual stepKey="assertBottomPositionDifference">
111+
<expectedResult type="int">12</expectedResult>
112+
<actualResult type="variable">bottomPositionDifference</actualResult>
113+
</assertGreaterThanOrEqual>
114+
<!-- Validate other Content Types don't overlap toolbar -->
115+
<click selector="{{PageBuilderPanel.searchPanel}}" stepKey="unFocusEditor2"/>
116+
<actionGroup ref="expandPageBuilderPanelMenuSection" stepKey="expandPageBuilderPanelMenuSection2">
117+
<argument name="contentType" value="PageBuilderVideoContentType"/>
86118
</actionGroup>
87-
<executeJS function="return document.querySelector(&quot;{{WYSIWYGOnPageBuilderInline.tableToolbar}}&quot;).getBoundingClientRect().top" stepKey="grabTableToolbarTopPosition3"/>
88-
<executeJS function="return document.evaluate(&quot;{{WYSIWYGOnPageBuilderInline.toolbarPath('1')}}&quot;, document.body).iterateNext().getBoundingClientRect().top" stepKey="grabToolbarTopPosition3"/>
89-
<executeJS function="return Math.abs({$grabTableToolbarTopPosition} - {$grabToolbarTopPosition})" stepKey="topPositionDifference3"/>
119+
<actionGroup ref="dragContentTypeToStage" stepKey="dragVideoToColumnContentType">
120+
<argument name="contentType" value="PageBuilderVideoContentType"/>
121+
<argument name="containerTargetType" value="PageBuilderColumnContentType"/>
122+
<argument name="containerTargetIndex" value="1"/>
123+
</actionGroup>
124+
<actionGroup ref="openPageBuilderEditPanel" stepKey="openVideoEditMenuOnStage">
125+
<argument name="contentType" value="PageBuilderVideoContentType"/>
126+
</actionGroup>
127+
<actionGroup ref="fillSlideOutPanelFieldGeneral" stepKey="enterVideoUrlProperty">
128+
<argument name="property" value="PageBuilderVideoUrl_YouTube"/>
129+
</actionGroup>
130+
<actionGroup ref="conditionalClickSlideOutPanelFieldGeneral" stepKey="setAutoplayEnabled">
131+
<argument name="property" value="PageBuilderVideoAutoplay_Enabled"/>
132+
</actionGroup>
133+
<actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettings"/>
134+
<actionGroup ref="moveContentTypeToContainer" stepKey="moveTextIntoFirstColumn">
135+
<argument name="contentType" value="PageBuilderTextContentType"/>
136+
<argument name="contentTypeIndex" value="1"/>
137+
<argument name="containerTargetType" value="PageBuilderColumnContentType"/>
138+
<argument name="containerTargetIndex" value="1"/>
139+
</actionGroup>
140+
<clickWithLeftButton x="10" y="10" selector="{{TextOnStage.tinymce('1')}}" stepKey="clickOnTextContentType2"/>
141+
<waitForPageLoad stepKey="waitForTinymceToolbar2"/>
142+
<clickWithLeftButton x="10" y="10" selector="{{TextOnStage.tinymce('1')}}" stepKey="clickAgainToOpenTableToolbar2"/>
143+
<waitForPageLoad stepKey="waitForTinymceTableToolbar2"/>
144+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.tableToolbar}}" stepKey="seeTableToolbar3"/>
145+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.tableProperties}}" stepKey="seeTableProperties3"/>
146+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.deleteTable}}" stepKey="seeDeleteTable3"/>
147+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.insertRowBefore}}" stepKey="seeInsertRowBefore3"/>
148+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.insertRowAfter}}" stepKey="seeInsertRowAfter3"/>
149+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.deleteRow}}" stepKey="seeDeleteRow3"/>
150+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.insertColumnBefore}}" stepKey="seeInsertColumnBefore3"/>
151+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.insertColumnAfter}}" stepKey="seeInsertColumnAfter3"/>
152+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.deleteColumn}}" stepKey="seeDeleteColumn3"/>
153+
<executeJS function="return document.querySelector(&quot;{{WYSIWYGOnPageBuilderInline.tableToolbar}}&quot;).getBoundingClientRect().top + document.querySelector(&quot;{{WYSIWYGOnPageBuilderInline.tableToolbar}}&quot;).offsetHeight" stepKey="grabTableToolbarBottomPosition3"/>
154+
<executeJS function="return document.evaluate(&quot;{{TextOnStage.tinymce('1')}}//table&quot;, document.body).iterateNext().getBoundingClientRect().top" stepKey="grabTableElementTopPosition3"/>
155+
<executeJS function="return Math.abs({$grabTableToolbarBottomPosition} - {$grabTableElementTopPosition})" stepKey="topPositionDifference3"/>
90156
<assertLessThanOrEqual stepKey="assertTopPositionDifference3">
91157
<expectedResult type="int">2</expectedResult>
92158
<actualResult type="variable">topPositionDifference3</actualResult>
93159
</assertLessThanOrEqual>
94-
<!-- Resize column back to 3/12 and check toolbar and textarea are visible -->
95-
<executeJS function="return document.querySelector('{{ColumnOnBackend.columnResizeGridLine('1')}}').clientWidth" stepKey="guideWidth"/>
96-
<dragAndDrop selector1="{{ColumnOnBackend.columnX('1')}} {{ColumnOnBackend.columnResizeHandle}}" selector2="{{ColumnOnBackend.columnResizeGridLine('3')}}" x="$guideWidth" stepKey="dragColumn1"/>
97-
<waitForPageLoad stepKey="waitForDragAndDrop"/>
98-
<executeJS function="return document.querySelector(&quot;{{WYSIWYGOnPageBuilderInline.tableToolbar}}&quot;).getBoundingClientRect().top" stepKey="grabTableToolbarTopPosition4"/>
99-
<executeJS function="return document.evaluate(&quot;{{WYSIWYGOnPageBuilderInline.toolbarPath('1')}}&quot;, document.body).iterateNext().getBoundingClientRect().top" stepKey="grabToolbarTopPosition4"/>
100-
<executeJS function="return Math.abs({$grabTableToolbarTopPosition} - {$grabToolbarTopPosition})" stepKey="topPositionDifference4"/>
101-
<assertLessThanOrEqual stepKey="assertTopPositionDifference4">
102-
<expectedResult type="int">2</expectedResult>
103-
<actualResult type="variable">topPositionDifference4</actualResult>
104-
</assertLessThanOrEqual>
105160
</test>
106161
</tests>

0 commit comments

Comments
 (0)