Skip to content

Commit 972cae6

Browse files
committed
PB-170: TinyMCE Performance is very poor with multiple instances on Stage
- Improve functional tests
1 parent a9d1560 commit 972cae6

File tree

3 files changed

+91
-60
lines changed

3 files changed

+91
-60
lines changed

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

Lines changed: 57 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -69,10 +69,10 @@
6969
<arguments>
7070
<argument name="section" defaultValue="TextOnStage"/>
7171
<argument name="index" defaultValue="1" type="string"/>
72-
<argument name="variable" defaultValue=""/>
72+
<argument name="labelValue" defaultValue=""/>
7373
</arguments>
74-
<waitForElementVisible selector="{{section.text(index, variable.editPanelValue)}}" stepKey="waitForVariable"/>
75-
<seeElement selector="{{section.text(index, variable.editPanelValue)}}" stepKey="seeVariableOnStage"/>
74+
<waitForElementVisible selector="{{section.text(index, labelValue)}}" stepKey="waitForVariable"/>
75+
<seeElement selector="{{section.text(index, labelValue)}}" stepKey="seeVariable"/>
7676
</actionGroup>
7777
<actionGroup name="addVariableToTinyMCE3" extends="addVariableToTinyMCE">
7878
<arguments>
@@ -252,55 +252,90 @@
252252
<waitForPageLoad stepKey="waitForPageLoad1"/>
253253
<click selector="{{PageBuilderPanel.searchPanel}}" stepKey="loseFocusFromEditor"/>
254254
</actionGroup>
255-
<actionGroup name="formatTextInlineTinyMCE">
255+
<actionGroup name="formatTextTinyMCE">
256256
<arguments>
257+
<argument name="section" defaultValue="WYSIWYGOnPageBuilderInline"/>
257258
<!-- Receives pagebuilder_tinymce_format -->
258259
<argument name="format" defaultValue="TinyMCEFormatHeading1"/>
259260
</arguments>
260-
<waitForElementVisible selector="{{WYSIWYGOnPageBuilderInline.formatSelector}}" stepKey="waitForFormatList"/>
261-
<click selector="{{WYSIWYGOnPageBuilderInline.formatSelector}}" stepKey="expandFormatList"/>
262-
<waitForElementVisible selector="{{WYSIWYGOnPageBuilderInline.formatOption(format.label)}}" stepKey="waitForFormatVisible"/>
263-
<click selector="{{WYSIWYGOnPageBuilderInline.formatOption(format.label)}}" stepKey="clickFormat"/>
264-
<waitForElementNotVisible selector="{{WYSIWYGOnPageBuilderInline.formatOption(format.label)}}" stepKey="waitForFormatInvisible"/>
261+
<waitForElementVisible selector="{{section.formatSelector}}" stepKey="waitForFormatList"/>
262+
<click selector="{{section.formatSelector}}" stepKey="expandFormatList"/>
263+
<waitForElementVisible selector="{{section.formatOption(format.label)}}" stepKey="waitForFormatOptionVisible"/>
264+
<click selector="{{section.formatOption(format.label)}}" stepKey="clickFormatOption"/>
265+
<waitForElementNotVisible selector="{{section.formatOption(format.label)}}" stepKey="waitForFormatInvisible"/>
265266
</actionGroup>
266-
<actionGroup name="waitForTinyMCEFocus">
267+
<actionGroup name="waitForTinyMCEInFocus">
267268
<arguments>
268269
<argument name="section" defaultValue="TextOnStage"/>
269270
<argument name="index" defaultValue="1" type="string"/>
270271
</arguments>
271-
<waitForElementVisible selector="{{section.tinymceInFocus(index)}}" stepKey="waitForTinyMCEFocus"/>
272+
<waitForElementVisible selector="{{section.tinymceInFocus(index)}}" stepKey="waitForTinyMCEInFocus"/>
272273
</actionGroup>
273274
<actionGroup name="clickDirectiveTinyMCE">
274275
<arguments>
275276
<argument name="section" defaultValue="TextOnStage"/>
276277
<argument name="index" defaultValue="1" type="string"/>
277-
<argument name="directive"/>
278+
<argument name="labelValue" defaultValue=""/>
278279
</arguments>
279-
<click selector="{{section.directive(index, directive.editPanelValue)}}" stepKey="clickDirective"/>
280+
<waitForElementVisible selector="{{section.directive(index, labelValue)}}" stepKey="waitForDirective"/>
281+
<click selector="{{section.directive(index, labelValue)}}" stepKey="clickDirective"/>
280282
</actionGroup>
281283
<actionGroup name="seeDirectiveFocusedTinyMCE">
282284
<arguments>
283285
<argument name="section" defaultValue="TextOnStage"/>
284286
<argument name="index" defaultValue="1" type="string"/>
285-
<argument name="directive"/>
287+
<argument name="labelValue" defaultValue=""/>
286288
</arguments>
287-
<waitForElementVisible selector="{{section.directiveFocused(index, directive.editPanelValue)}}" stepKey="waitForDirectiveFocused"/>
288-
<seeElement selector="{{section.directiveFocused(index, directive.editPanelValue)}}" stepKey="verifyDirectiveIsFocused"/>
289+
<waitForElementVisible selector="{{section.directiveFocused(index, labelValue)}}" stepKey="waitForDirectiveFocused"/>
290+
<seeElement selector="{{section.directiveFocused(index, labelValue)}}" stepKey="verifyDirectiveIsFocused"/>
289291
</actionGroup>
290292
<actionGroup name="scrollToTinyMCE">
291293
<arguments>
294+
<argument name="section" defaultValue="TextOnStage"/>
292295
<argument name="index" defaultValue="1" type="string"/>
293296
</arguments>
294-
<scrollTo selector="{{TextOnStage.tinymce(index)}}" stepKey="scrollToTinyMCE"/>
297+
<scrollTo selector="{{section.tinymce(index)}}" stepKey="scrollToTinyMCE"/>
298+
<waitForElementVisible selector="{{section.tinymce(index)}}" stepKey="waitForTinyMCEVisible"/>
295299
</actionGroup>
296-
<actionGroup name="assertSelectedTextTinyMCE">
300+
<actionGroup name="assertSelectedText">
297301
<arguments>
298-
<argument name="expected"/>
302+
<argument name="expectedSelectedText"/>
299303
</arguments>
300-
<executeJS function="return window.getSelection().toString()" stepKey="selectionHeadingString"/>
304+
<executeJS function="return window.getSelection().toString()" stepKey="selectionString"/>
301305
<assertEquals stepKey="assertSelectionText">
302-
<expectedResult type="string">{{expected.selection}}</expectedResult>
303-
<actualResult type="variable">selectionHeadingString</actualResult>
306+
<expectedResult type="string">{{expectedSelectedText.selection}}</expectedResult>
307+
<actualResult type="variable">selectionString</actualResult>
304308
</assertEquals>
305309
</actionGroup>
310+
<actionGroup name="doubleClickVariableTinyMCE">
311+
<arguments>
312+
<argument name="section" defaultValue="TextOnStage"/>
313+
<argument name="index" defaultValue="1" type="string"/>
314+
<argument name="variable"/>
315+
</arguments>
316+
<doubleClick selector="{{section.directive(index, variable.editPanelValue)}}" stepKey="doubleClickOnVariablePlaceholder"/>
317+
<waitForLoadingMaskToDisappear stepKey="waitForLoadingMaskToDisappear"/>
318+
<waitForElementVisible selector="{{VariableSection.CancelBtnEnabled}}" stepKey="waitForCancelButton"/>
319+
<waitForElementVisible selector="{{VariableSection.Radio(variable.variableName)}}" stepKey="waitForVariableAfterDoubleClick"/>
320+
</actionGroup>
321+
<actionGroup name="closeVariablePanelTinyMCE">
322+
<waitForElementVisible selector="{{VariableSection.CancelBtnEnabled}}" stepKey="waitForCancelButton"/>
323+
<click selector="{{VariableSection.CancelBtnEnabled}}" stepKey="clickCancelButton"/>
324+
<waitForElementNotVisible selector="{{VariableSection.CancelBtnEnabled}}" stepKey="waitForVariableCancelNotVisible"/>
325+
</actionGroup>
326+
<actionGroup name="doubleClickWidgetTinyMCE">
327+
<arguments>
328+
<argument name="section" defaultValue="TextOnStage"/>
329+
<argument name="index" defaultValue="1" type="string"/>
330+
<argument name="widget"/>
331+
</arguments>
332+
<doubleClick selector="{{section.directive('1', TinyMCEWidgetCMSPageLink.editPanelValue)}}" stepKey="doubleClickOnWidgetPlaceholder"/>
333+
<waitForPageLoad stepKey="waitForPageLoad"/>
334+
<waitForLoadingMaskToDisappear stepKey="waitForLoadingMaskToDisappear"/>
335+
<waitForElementVisible selector="{{WidgetSection.CancelBtnEnabled}}" stepKey="waitForWidgetType"/>
336+
</actionGroup>
337+
<actionGroup name="closeWidgetPanelTinyMCE">
338+
<click selector="{{WidgetSection.CancelBtnEnabled}}" stepKey="clickInsertWidget3"/>
339+
<waitForLoadingMaskToDisappear stepKey="waitForLoadingMaskToDisappear7"/>
340+
</actionGroup>
306341
</actionGroups>

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderBannerSection.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
<element name="messageContentWidget" type="text" selector="(//div[@data-content-type='banner'])[{{arg1}}]//div[@data-element='content']//a[contains(@href,'{{arg2}}{{arg3}}')]" parameterized="true"/>
4242
<element name="messageContentTextArea" type="text" selector="(//div[@data-content-type='banner'])[{{arg1}}]//div[@data-element='wrapper']//div[@data-element='content'][contains(text(),'{{arg2}}')]" parameterized="true"/>
4343
<element name="messageContentTextAreaImage" type="text" selector="(//div[@data-content-type='banner'])[{{arg1}}]//div[@data-element='wrapper']//div[@data-element='content']//img[contains(@src, {{arg2}})]" parameterized="true"/>
44-
<element name="messageContentHeightJS" type="text" selector="return document.evaluate(&quot;(//div[@data-content-type='banner'])[{{arg1}}]//*[contains(text(),'{{arg2}}')]&quot;, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.clientHeight;" parameterized="true"/>
44+
<element name="messageContentHeightJS" type="text" selector="return document.evaluate(&quot;(//div[@data-content-type='banner'])[{{arg1}}]//div[contains(@class, 'pagebuilder-banner-text-content')]//*[contains(text(),'{{arg2}}')]&quot;, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.clientHeight;" parameterized="true"/>
4545
<element name="linkUrl" type="button" selector="(//div[@data-content-type='banner'])[{{arg1}}]/a[@data-element='link'][contains(@href,'{{arg2}}')]" parameterized="true"/>
4646
<element name="openInNewTab" type="button" selector="(//div[@data-content-type='banner'])[{{arg1}}]/a[@data-element='link'][contains(@target,'_blank')]" parameterized="true"/>
4747
<element name="button" type="button" selector="(//div[@data-content-type='banner'])[{{arg1}}]//div[@data-element='wrapper']//button" parameterized="true"/>

0 commit comments

Comments
 (0)