Skip to content

Commit a9d1560

Browse files
davemacaulaydavemacaulay
committed
PB-170: TinyMCE Performance is very poor with multiple instances on Stage
- Convert tests to use more action groups
1 parent bd388fe commit a9d1560

File tree

2 files changed

+90
-34
lines changed

2 files changed

+90
-34
lines changed

‎app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/WYSIWYGActionGroup.xml

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,15 @@
6565
<waitForElementVisible selector="{{TinyMCESection.InsertVariableIcon}}" stepKey="waitForInsertVariable1"/>
6666
<click selector="{{TinyMCESection.InsertVariableIcon}}" stepKey="clickInsertVariable1"/>
6767
</actionGroup>
68+
<actionGroup name="seeVariableTinyMCE">
69+
<arguments>
70+
<argument name="section" defaultValue="TextOnStage"/>
71+
<argument name="index" defaultValue="1" type="string"/>
72+
<argument name="variable" defaultValue=""/>
73+
</arguments>
74+
<waitForElementVisible selector="{{section.text(index, variable.editPanelValue)}}" stepKey="waitForVariable"/>
75+
<seeElement selector="{{section.text(index, variable.editPanelValue)}}" stepKey="seeVariableOnStage"/>
76+
</actionGroup>
6877
<actionGroup name="addVariableToTinyMCE3" extends="addVariableToTinyMCE">
6978
<arguments>
7079
<argument name="variable" defaultValue=""/>
@@ -254,4 +263,44 @@
254263
<click selector="{{WYSIWYGOnPageBuilderInline.formatOption(format.label)}}" stepKey="clickFormat"/>
255264
<waitForElementNotVisible selector="{{WYSIWYGOnPageBuilderInline.formatOption(format.label)}}" stepKey="waitForFormatInvisible"/>
256265
</actionGroup>
266+
<actionGroup name="waitForTinyMCEFocus">
267+
<arguments>
268+
<argument name="section" defaultValue="TextOnStage"/>
269+
<argument name="index" defaultValue="1" type="string"/>
270+
</arguments>
271+
<waitForElementVisible selector="{{section.tinymceInFocus(index)}}" stepKey="waitForTinyMCEFocus"/>
272+
</actionGroup>
273+
<actionGroup name="clickDirectiveTinyMCE">
274+
<arguments>
275+
<argument name="section" defaultValue="TextOnStage"/>
276+
<argument name="index" defaultValue="1" type="string"/>
277+
<argument name="directive"/>
278+
</arguments>
279+
<click selector="{{section.directive(index, directive.editPanelValue)}}" stepKey="clickDirective"/>
280+
</actionGroup>
281+
<actionGroup name="seeDirectiveFocusedTinyMCE">
282+
<arguments>
283+
<argument name="section" defaultValue="TextOnStage"/>
284+
<argument name="index" defaultValue="1" type="string"/>
285+
<argument name="directive"/>
286+
</arguments>
287+
<waitForElementVisible selector="{{section.directiveFocused(index, directive.editPanelValue)}}" stepKey="waitForDirectiveFocused"/>
288+
<seeElement selector="{{section.directiveFocused(index, directive.editPanelValue)}}" stepKey="verifyDirectiveIsFocused"/>
289+
</actionGroup>
290+
<actionGroup name="scrollToTinyMCE">
291+
<arguments>
292+
<argument name="index" defaultValue="1" type="string"/>
293+
</arguments>
294+
<scrollTo selector="{{TextOnStage.tinymce(index)}}" stepKey="scrollToTinyMCE"/>
295+
</actionGroup>
296+
<actionGroup name="assertSelectedTextTinyMCE">
297+
<arguments>
298+
<argument name="expected"/>
299+
</arguments>
300+
<executeJS function="return window.getSelection().toString()" stepKey="selectionHeadingString"/>
301+
<assertEquals stepKey="assertSelectionText">
302+
<expectedResult type="string">{{expected.selection}}</expectedResult>
303+
<actualResult type="variable">selectionHeadingString</actualResult>
304+
</assertEquals>
305+
</actionGroup>
257306
</actionGroups>

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

Lines changed: 41 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2838,16 +2838,22 @@
28382838
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusEditor">
28392839
<argument name="contentType" value="PageBuilderTextContentType"/>
28402840
</actionGroup>
2841-
<click selector="{{TextOnStage.directive('1', TinyMCEVariableBaseURL.editPanelValue)}}" stepKey="clickOnWidgetPlaceholder"/>
2842-
<waitForElementVisible selector="{{TextOnStage.directiveFocused('1', TinyMCEVariableBaseURL.editPanelValue)}}" stepKey="waitForDirectiveFocused"/>
2843-
<seeElement selector="{{TextOnStage.directiveFocused('1', TinyMCEVariableBaseURL.editPanelValue)}}" stepKey="verifyDirectiveIsFocused"/>
2841+
<actionGroup ref="clickDirectiveTinyMCE" stepKey="clickDirectiveTinyMCE">
2842+
<argument name="directive" value="TinyMCEVariableBaseURL" />
2843+
</actionGroup>
2844+
<actionGroup ref="seeDirectiveFocusedTinyMCE" stepKey="seeDirectiveFocusedTinyMCE">
2845+
<argument name="directive" value="TinyMCEVariableBaseURL" />
2846+
</actionGroup>
28442847
<!-- Save page and verify single clicking on widget will retain selection -->
28452848
<actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
28462849
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
2847-
<click selector="{{TextOnStage.directive('1', TinyMCEVariableBaseURL.editPanelValue)}}" stepKey="clickOnWidgetPlaceholder2"/>
2848-
<waitForElementVisible selector="{{TextOnStage.tinymceInFocus('1')}}" stepKey="waitForTinyMCEFocus"/>
2849-
<waitForElementVisible selector="{{TextOnStage.directiveFocused('1', TinyMCEVariableBaseURL.editPanelValue)}}" stepKey="waitForDirectiveFocused2"/>
2850-
<seeElement selector="{{TextOnStage.directiveFocused('1', TinyMCEVariableBaseURL.editPanelValue)}}" stepKey="verifyDirectiveIsFocused2"/>
2850+
<actionGroup ref="clickDirectiveTinyMCE" stepKey="clickDirectiveTinyMCE2">
2851+
<argument name="directive" value="TinyMCEVariableBaseURL" />
2852+
</actionGroup>
2853+
<actionGroup ref="waitForTinyMCEFocus" stepKey="waitForTinyMCEFocus" />
2854+
<actionGroup ref="seeDirectiveFocusedTinyMCE" stepKey="seeDirectiveFocusedTinyMCE2">
2855+
<argument name="directive" value="TinyMCEVariableBaseURL" />
2856+
</actionGroup>
28512857
</test>
28522858
<test name="TextAddWidgetWithinStringInlineWYSIWYG">
28532859
<annotations>
@@ -2902,16 +2908,22 @@
29022908
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusEditor">
29032909
<argument name="contentType" value="PageBuilderTextContentType"/>
29042910
</actionGroup>
2905-
<click selector="{{TextOnStage.directive('1', TinyMCEWidgetCMSPageLink.editPanelValue)}}" stepKey="clickOnWidgetPlaceholder"/>
2906-
<waitForElementVisible selector="{{TextOnStage.directiveFocused('1', TinyMCEWidgetCMSPageLink.editPanelValue)}}" stepKey="waitForDirectiveFocused"/>
2907-
<seeElement selector="{{TextOnStage.directiveFocused('1', TinyMCEWidgetCMSPageLink.editPanelValue)}}" stepKey="verifyDirectiveIsFocused"/>
2911+
<actionGroup ref="clickDirectiveTinyMCE" stepKey="clickDirectiveTinyMCE">
2912+
<argument name="directive" value="TinyMCEWidgetCMSPageLink" />
2913+
</actionGroup>
2914+
<actionGroup ref="seeDirectiveFocusedTinyMCE" stepKey="seeDirectiveFocusedTinyMCE">
2915+
<argument name="directive" value="TinyMCEWidgetCMSPageLink" />
2916+
</actionGroup>
29082917
<!-- Save page and verify single clicking on widget will retain selection -->
29092918
<actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
29102919
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
2911-
<click selector="{{TextOnStage.directive('1', TinyMCEWidgetCMSPageLink.editPanelValue)}}" stepKey="clickOnWidgetPlaceholder2"/>
2912-
<waitForElementVisible selector="{{TextOnStage.tinymceInFocus('1')}}" stepKey="waitForTinyMCEFocus"/>
2913-
<waitForElementVisible selector="{{TextOnStage.directiveFocused('1', TinyMCEWidgetCMSPageLink.editPanelValue)}}" stepKey="waitForDirectiveFocused2"/>
2914-
<seeElement selector="{{TextOnStage.directiveFocused('1', TinyMCEWidgetCMSPageLink.editPanelValue)}}" stepKey="verifyDirectiveIsFocused2"/>
2920+
<actionGroup ref="clickDirectiveTinyMCE" stepKey="clickDirectiveTinyMCE2">
2921+
<argument name="directive" value="TinyMCEWidgetCMSPageLink" />
2922+
</actionGroup>
2923+
<actionGroup ref="waitForTinyMCEFocus" stepKey="waitForTinyMCEFocus" />
2924+
<actionGroup ref="seeDirectiveFocusedTinyMCE" stepKey="seeDirectiveFocusedTinyMCE2">
2925+
<argument name="directive" value="TinyMCEWidgetCMSPageLink" />
2926+
</actionGroup>
29152927
</test>
29162928
<test name="TextCopyAndPasteAllTextInlineWYSIWYG">
29172929
<annotations>
@@ -3052,11 +3064,12 @@
30523064
<actionGroup ref="addVariableToTinyMCEInline" stepKey="addVariableToTinyMCE">
30533065
<argument name="variable" value="TinyMCEVariableBaseURL"/>
30543066
</actionGroup>
3055-
<waitForElementVisible selector="{{TextOnStage.text('1', TinyMCEVariableBaseURL.editPanelValue)}}" stepKey="waitForVariable"/>
3056-
<seeElement selector="{{TextOnStage.text('1', TinyMCEVariableBaseURL.editPanelValue)}}" stepKey="seeVariableOnStage"/>
3067+
<actionGroup ref="seeVariableTinyMCE" stepKey="seeVariableTinyMCE">
3068+
<argument name="variable" value="TinyMCEVariableBaseURL"/>
3069+
</actionGroup>
30573070
<actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
30583071
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
3059-
<scrollTo selector="{{TextOnStage.tinymce('1')}}" stepKey="scrollToTinyMCE"/>
3072+
<actionGroup ref="scrollToTinyMCE" stepKey="scrollToTinyMCE"/>
30603073
<!-- Select portion of Heading "his is a h" -->
30613074
<executeInSelenium function="function ($webdriver) use ($I) {
30623075
$heading = $webdriver->findElement(\Facebook\WebDriver\WebDriverBy::xpath('//div[contains(@class, \'inline-wysiwyg\')]//h2'));
@@ -3068,15 +3081,13 @@
30683081
->perform();
30693082
}" stepKey="selectHeadingTextInTinyMCE"/>
30703083
<waitForElementVisible selector="{{TextOnStage.tinymceInFocus('1')}}" stepKey="waitForTinyMCEFocus"/>
3071-
<executeJS function="return window.getSelection().toString()" stepKey="selectionHeadingString"/>
3072-
<assertEquals stepKey="assertSelectionText">
3073-
<expectedResult type="string">{{TinyMCEPartialHeadingSelection.selection}}</expectedResult>
3074-
<actualResult type="variable">selectionHeadingString</actualResult>
3075-
</assertEquals>
3084+
<actionGroup ref="assertSelectedTextTinyMCE" stepKey="assertSelection">
3085+
<argument name="expected" value="TinyMCEPartialHeadingSelection"/>
3086+
</actionGroup>
30763087
<reloadPage stepKey="reloadPage" />
30773088
<waitForPageLoad stepKey="waitForReload" />
30783089
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage2"/>
3079-
<scrollTo selector="{{TextOnStage.tinymce('1')}}" stepKey="scrollToTinyMCE2"/>
3090+
<actionGroup ref="scrollToTinyMCE" stepKey="scrollToTinyMCE2"/>
30803091
<!-- Select portion of paragraph text "es stri" -->
30813092
<executeInSelenium function="function ($webdriver) use ($I) {
30823093
$text = $webdriver->findElement(\Facebook\WebDriver\WebDriverBy::xpath('//div[contains(@class, \'inline-wysiwyg\')]//p[2]'));
@@ -3088,15 +3099,13 @@
30883099
->perform();
30893100
}" stepKey="selectTextInTinyMCE"/>
30903101
<waitForElementVisible selector="{{TextOnStage.tinymceInFocus('1')}}" stepKey="waitForTinyMCEFocus2"/>
3091-
<executeJS function="return window.getSelection().toString()" stepKey="selectionTextString"/>
3092-
<assertEquals stepKey="assertSelectionText2">
3093-
<expectedResult type="string">{{TinyMCEPartialTextSelection.selection}}</expectedResult>
3094-
<actualResult type="variable">selectionTextString</actualResult>
3095-
</assertEquals>
3102+
<actionGroup ref="assertSelectedTextTinyMCE" stepKey="assertSelection2">
3103+
<argument name="expected" value="TinyMCEPartialTextSelection"/>
3104+
</actionGroup>
30963105
<reloadPage stepKey="reloadPage2" />
30973106
<waitForPageLoad stepKey="waitForReload2" />
30983107
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage3"/>
3099-
<scrollTo selector="{{TextOnStage.tinymce('1')}}" stepKey="scrollToTinyMCE3"/>
3108+
<actionGroup ref="scrollToTinyMCE" stepKey="scrollToTinyMCE3"/>
31003109
<!-- Select from part of the heading, over the variable, to part of the text string -->
31013110
<executeInSelenium function="function ($webdriver) use ($I) {
31023111
$heading = $webdriver->findElement(\Facebook\WebDriver\WebDriverBy::xpath('//div[contains(@class, \'inline-wysiwyg\')]//h2'));
@@ -3109,10 +3118,8 @@
31093118
->perform();
31103119
}" stepKey="selectHeadingTextAndVariableTinyMCE"/>
31113120
<waitForElementVisible selector="{{TextOnStage.tinymceInFocus('1')}}" stepKey="waitForTinyMCEFocus3"/>
3112-
<executeJS function="return window.getSelection().toString()" stepKey="selectionMultipleString"/>
3113-
<assertEquals stepKey="assertSelectionText3">
3114-
<expectedResult type="string">{{TinyMCEHeadingVariableTextSelection.selection}}</expectedResult>
3115-
<actualResult type="variable">selectionMultipleString</actualResult>
3116-
</assertEquals>
3121+
<actionGroup ref="assertSelectedTextTinyMCE" stepKey="assertSelection3">
3122+
<argument name="expected" value="TinyMCEHeadingVariableTextSelection"/>
3123+
</actionGroup>
31173124
</test>
31183125
</tests>

0 commit comments

Comments
 (0)