Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Internal: Use only internal test methods to update Editor controls [ED-14906] #27467

Merged
merged 30 commits into from
May 23, 2024
Merged

Internal: Use only internal test methods to update Editor controls [ED-14906] #27467

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
4827a58
Internal: Use only internal test methods to update Editor controls
rami-elementor May 22, 2024
a7bba1e
Lint
rami-elementor May 22, 2024
879631f
Merge branch 'main' into setting-controls-in-tests
elementorbot May 22, 2024
b4ddbf4
Update
rami-elementor May 22, 2024
8f054be
Revert
rami-elementor May 22, 2024
e5b3812
Revert
rami-elementor May 22, 2024
b892059
Merge branch 'main' into setting-controls-in-tests
elementorbot May 22, 2024
050869e
Revert
rami-elementor May 22, 2024
fc048c4
Revert
rami-elementor May 22, 2024
93e90b1
Update
rami-elementor May 22, 2024
cb20115
Merge branch 'main' into setting-controls-in-tests
elementorbot May 22, 2024
f464d95
Merge branch 'main' into setting-controls-in-tests
elementorbot May 22, 2024
f01b36e
Revert
rami-elementor May 23, 2024
741debf
Revert
rami-elementor May 23, 2024
327d95d
Revert
rami-elementor May 23, 2024
6a6f4dc
Revert
rami-elementor May 23, 2024
c27e16f
Update
rami-elementor May 23, 2024
0461148
Update
rami-elementor May 23, 2024
b863fb3
Update choose control to receive values
rami-elementor May 23, 2024
b574d27
Update
rami-elementor May 23, 2024
a051ed6
Revert "Update"
rami-elementor May 23, 2024
5a4392f
Revert "Update choose control to receive values"
rami-elementor May 23, 2024
d027b76
Merge branch 'main' into setting-controls-in-tests
elementorbot May 23, 2024
91a90b7
Merge branch 'main' into setting-controls-in-tests
elementorbot May 23, 2024
ecc32bf
Update
rami-elementor May 23, 2024
2a5eaa3
Update
rami-elementor May 23, 2024
ac1dee5
Update
rami-elementor May 23, 2024
3339571
Update
rami-elementor May 23, 2024
f4da659
Update
rami-elementor May 23, 2024
2122cac
Update
rami-elementor May 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
359 changes: 202 additions & 157 deletions tests/playwright/pages/editor-page.ts
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion tests/playwright/pages/widgets/image-carousel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default class ImageCarousel extends Content {
async addImageGallery( args?: {images?: string[], metaData?: boolean} ) {
const defaultImages = [ 'A.jpg', 'B.jpg', 'C.jpg', 'D.jpg', 'E.jpg' ];

await this.editorPage.activatePanelTab( 'content' );
await this.editorPage.openPanelTab( 'content' );
await this.page.locator( EditorSelectors.imageCarousel.addGalleryBtn ).click();
await this.page.getByRole( 'tab', { name: 'Media Library' } ).click();

Expand Down
2 changes: 1 addition & 1 deletion tests/playwright/sanity/assets/dev/js/editor/controls-conditions.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ test( 'Editor Responsive Control Conditions', async ( { page }, testInfo ) => {

await expect( backgroundPositionControl ).toBeVisible();

await page.selectOption( '.elementor-control-background_size_mobile >> select', 'initial' );
await editor.setSelectControlValue( 'background_size_mobile', 'initial' );

const customBackgroundSizeControl = page.locator( '.elementor-control-background_bg_width_mobile' );

Expand Down
2 changes: 1 addition & 1 deletion tests/playwright/sanity/assets/dev/js/editor/document/elements/copy-paste-style.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ test( 'A page can be saved successfully after copy-paste style', async ( { page

await editor.selectElement( heading1 );

await editor.activatePanelTab( 'style' );
await editor.openPanelTab( 'style' );

await page.locator( '.elementor-control-title_color .pcr-button' ).click();
await page.locator( '.pcr-app.visible .pcr-interaction input.pcr-result' ).fill( '#77A5BD' );
Expand Down
8 changes: 4 additions & 4 deletions tests/playwright/sanity/assets/dev/js/editor/elements/views/widget.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,8 @@ test.describe( `$e.run( 'editor/elements/views/widget' )`, () => {
await page.hover( '.elementor-control-image .elementor-control-media__content' );
await page.hover( '.elementor-control-media-area' );
await page.click( '.elementor-control-media__remove' );
await page.locator( '.elementor-control-title_text input' ).fill( '' );
await page.locator( '.elementor-control-description_text textarea' ).fill( '' );
await editor.setTextControlValue( 'title_text', '' );
await editor.setTextareaControlValue( 'description_text', '' );
await page.waitForTimeout( 500 );
await editor.getPreviewFrame().waitForSelector( '.elementor-widget .elementor-widget-empty-icon' );

Expand Down Expand Up @@ -79,7 +79,7 @@ test.describe( `$e.run( 'editor/elements/views/widget' )`, () => {

// Act.
await editor.addWidget( 'video' );
await page.selectOption( '.elementor-control-video_type >> select', 'hosted' );
await editor.setSelectControlValue( 'video_type', 'hosted' );
await page.waitForTimeout( 500 );
await editor.getPreviewFrame().waitForSelector( '.elementor-widget .elementor-widget-empty-icon' );

Expand All @@ -96,7 +96,7 @@ test.describe( `$e.run( 'editor/elements/views/widget' )`, () => {

// Act.
await editor.addWidget( 'google_maps' );
await page.locator( '.elementor-control-address input' ).fill( '' );
await editor.setTextControlValue( 'address', '' );
await editor.page.waitForLoadState( 'domcontentloaded' );
await page.waitForTimeout( 500 );
await editor.getPreviewFrame().waitForSelector( '.elementor-widget .elementor-widget-empty-icon' );
Expand Down
4 changes: 2 additions & 2 deletions ...right/sanity/assets/dev/js/editor/introduction-tooltips/global-color-introduction.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ test.describe( 'Global color introduction tests', () => {

// Act.
await editor.addWidget( 'heading' );
await editor.activatePanelTab( 'style' );
await editor.openPanelTab( 'style' );
await page.click( '.pickr' );
const tooltipDialogCounter = await page.getByText( 'Check out Global Colors' ).count();

Expand All @@ -38,7 +38,7 @@ test.describe( 'Global color introduction tests', () => {

// Act.
await editor.addWidget( 'heading' );
await editor.activatePanelTab( 'style' );
await editor.openPanelTab( 'style' );
await page.click( '.pickr' );
const tooltipDialogCounter = await page.getByText( 'Check out Global Colors' ).count();

Expand Down
4 changes: 2 additions & 2 deletions ...wright/sanity/assets/dev/js/editor/introduction-tooltips/global-font-introduction.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ test.describe( 'Global font introduction tests', () => {

// Act.
await editor.addWidget( 'heading' );
await editor.activatePanelTab( 'style' );
await editor.openPanelTab( 'style' );
await page.click( '.elementor-control-typography_typography .elementor-control-popover-toggle-toggle-label' );
const tooltipDialogCounter = await page.getByText( 'Check out Global Fonts' ).count();

Expand All @@ -38,7 +38,7 @@ test.describe( 'Global font introduction tests', () => {

// Act.
await editor.addWidget( 'heading' );
await editor.activatePanelTab( 'style' );
await editor.openPanelTab( 'style' );
await page.click( '.elementor-control-typography_typography .elementor-control-popover-toggle-toggle-label' );
const tooltipDialogCounter = await page.getByText( 'Check out Global Fonts' ).count();

Expand Down
2 changes: 1 addition & 1 deletion tests/playwright/sanity/assets/dev/js/frontend/handlers/image-carousel/lazyload.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ test( 'Image Carousel widget sanity test lazyload', async ( { page }, testInfo )

// Set Image carousel settings
await page.click( '#elementor-controls >> text=Image Carousel' );
await page.selectOption( '.elementor-control-slides_to_show >> select', '1' );
await editor.setSelectControlValue( 'slides_to_show', '1' );

const widget = await editor.getPreviewFrame().waitForSelector( '.elementor-image-carousel' );
const widgetImages = await widget.$$( '.swiper-slide >> img' );
Expand Down
2 changes: 1 addition & 1 deletion tests/playwright/sanity/button.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ test( 'Button controls should return to default', async ( { page }, testInfo ) =
editor = await wpAdmin.openNewPage();

await editor.addWidget( 'button' );
await editor.activatePanelTab( 'style' );
await editor.openPanelTab( 'style' );

await editor.getPreviewFrame().waitForSelector( EditorSelectors.button.getByName( defaultBtnName ) );

Expand Down
8 changes: 4 additions & 4 deletions tests/playwright/sanity/container-grid.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ test.describe( 'Container Grid tests @container', () => {
} );

await test.step( 'Assert justify align and content start on full width', async () => {
await page.selectOption( '.elementor-control-content_width >> select', 'full' );
await editor.setSelectControlValue( 'content_width', 'full' );
await page.locator( '.elementor-control-grid_justify_content [data-tooltip="Start"]' ).click();
await page.locator( '.elementor-control-grid_align_content [data-tooltip="Start"]' ).click();
container = frame.locator( `.elementor-element-${ containerId }` );
Expand All @@ -143,7 +143,7 @@ test.describe( 'Container Grid tests @container', () => {
} );

await test.step( 'Assert that the drag area is visible when using boxed width', async () => {
await page.selectOption( '.elementor-control-content_width >> select', 'boxed' );
await editor.setSelectControlValue( 'content_width', 'boxed' );
const dragAreaIsVisible = await editor.getPreviewFrame()
.locator( '.elementor-empty-view' )
.evaluate( ( element: HTMLElement ) => {
Expand All @@ -153,8 +153,8 @@ test.describe( 'Container Grid tests @container', () => {
} );

await test.step( 'Assert boxed width content alignment', async () => {
await page.selectOption( '.elementor-control-content_width >> select', 'boxed' );
await page.locator( '.elementor-control-grid_columns_grid .elementor-slider-input input' ).fill( '' );
await editor.setSelectControlValue( 'content_width', 'boxed' );
await editor.setSliderControlValue( 'grid_columns_grid', '' );

// Add flex container.
const flexContainerId = await editor.addElement( { elType: 'container' }, 'document' );
Expand Down
90 changes: 41 additions & 49 deletions tests/playwright/sanity/container.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,7 @@ test.describe( 'Container tests @container', () => {
await editor.addWidget( widgets.toggle, containerId );
await editor.addWidget( widgets.video, containerId );

// Set background colour to spacer.
await editor.setBackgroundColor( '#A81830', spacer );
// Select container.
await editor.selectElement( containerId );
// Set row direction.
await page.click( '.elementor-control-flex_direction i.eicon-arrow-right' );
Expand All @@ -96,8 +94,7 @@ test.describe( 'Container tests @container', () => {
// Act
await editor.togglePreviewMode();
await editor.selectElement( containerId );
// Set full content width.
await page.selectOption( '.elementor-control-content_width >> select', 'full' );
await editor.setSelectControlValue( 'content_width', 'full' );
await editor.hideVideoControls();
await editor.togglePreviewMode();

Expand All @@ -111,7 +108,7 @@ test.describe( 'Container tests @container', () => {
// Align items: flex-start
await page.click( '.elementor-control-flex_align_items i.eicon-align-start-v' );
// Set `min-height` to test if there are `flex-grow` issues.
await page.locator( '.elementor-control-min_height .elementor-control-input-wrapper input' ).fill( '1500' );
await editor.setSliderControlValue( 'min_height', '1500' );
await editor.hideVideoControls();
await editor.togglePreviewMode();

Expand All @@ -121,8 +118,7 @@ test.describe( 'Container tests @container', () => {
// Act
await editor.togglePreviewMode();
await editor.selectElement( containerId );
// Content Width: boxed
await page.selectOption( '.elementor-control-content_width >> select', 'boxed' );
await editor.setSelectControlValue( 'content_width', 'boxed' );
await editor.hideVideoControls();
await editor.togglePreviewMode();

Expand All @@ -145,12 +141,11 @@ test.describe( 'Container tests @container', () => {
await editor.addWidget( widgets.heading, container );
await editor.selectElement( container );
// Set position absolute.
await editor.activatePanelTab( 'advanced' );
await page.waitForSelector( '.elementor-control-position >> select' );
await page.selectOption( '.elementor-control-position >> select', 'absolute' );
await page.locator( '.elementor-control-z_index .elementor-control-input-wrapper input' ).fill( '50' );
await page.locator( '.elementor-control-_offset_x .elementor-control-input-wrapper input' ).fill( '50' );
await page.locator( '.elementor-control-_offset_y .elementor-control-input-wrapper input' ).fill( '50' );
await editor.openPanelTab( 'advanced' );
await editor.setSelectControlValue( 'position', 'absolute' );
await editor.setNumberControlValue( 'z_index', '50' );
await editor.setSliderControlValue( '_offset_x', '50' );
await editor.setSliderControlValue( '_offset_y', '50' );

await editor.togglePreviewMode();

Expand All @@ -167,8 +162,8 @@ test.describe( 'Container tests @container', () => {
// Select container.
await editor.selectElement( container );
// Set full content width
await editor.activatePanelTab( 'layout' );
await page.selectOption( '.elementor-control-content_width >> select', 'full' );
await editor.openPanelTab( 'layout' );
await editor.setSelectControlValue( 'content_width', 'full' );

await editor.togglePreviewMode();

Expand Down Expand Up @@ -200,12 +195,11 @@ test.describe( 'Container tests @container', () => {
// Select container.
await editor.selectElement( container );
// Set position fixed.
await editor.activatePanelTab( 'advanced' );
await page.selectOption( '.elementor-control-position >> select', 'fixed' );
await page.locator( '.elementor-control-z_index .elementor-control-input-wrapper input' ).fill( '50' );
await page.locator( '.elementor-control-_offset_x .elementor-control-input-wrapper input' ).fill( '50' );
await page.locator( '.elementor-control-_offset_y .elementor-control-input-wrapper input' ).fill( '50' );

await editor.openPanelTab( 'advanced' );
await editor.setSelectControlValue( 'position', 'fixed' );
await editor.setNumberControlValue( 'z_index', '50' );
await editor.setSliderControlValue( '_offset_x', '50' );
await editor.setSliderControlValue( '_offset_y', '50' );
await editor.togglePreviewMode();

// Assert
Expand Down Expand Up @@ -234,20 +228,20 @@ test.describe( 'Container tests @container', () => {
// Act
// Set container content full content width.
await editor.selectElement( container );
await editor.activatePanelTab( 'layout' );
await page.selectOption( '.elementor-control-content_width >> select', 'full' );
await editor.openPanelTab( 'layout' );
await editor.setSelectControlValue( 'content_width', 'full' );

// Act.
// Add widget.
await editor.addWidget( 'heading', container );
// Select container.
await editor.selectElement( container );
// Set position fixed.
await editor.activatePanelTab( 'advanced' );
await page.selectOption( '.elementor-control-position >> select', 'fixed' );
await page.locator( '.elementor-control-z_index .elementor-control-input-wrapper input' ).fill( '50' );
await page.locator( '.elementor-control-_offset_x .elementor-control-input-wrapper input' ).fill( '50' );
await page.locator( '.elementor-control-_offset_y .elementor-control-input-wrapper input' ).fill( '50' );
await editor.openPanelTab( 'advanced' );
await editor.setSelectControlValue( 'position', 'fixed' );
await editor.setNumberControlValue( 'z_index', '50' );
await editor.setSliderControlValue( '_offset_x', '50' );
await editor.setSliderControlValue( '_offset_y', '50' );

await editor.togglePreviewMode();

Expand Down Expand Up @@ -283,8 +277,8 @@ test.describe( 'Container tests @container', () => {
await editor.useCanvasTemplate();
await page.waitForLoadState( 'domcontentloaded' );

// Set row direction.
await editor.selectElement( container );
// Set row direction.
await page.click( '.elementor-control-flex_direction i.eicon-arrow-right' );
// Set flex-wrap: wrap.
await page.click( '.elementor-control-flex_wrap .elementor-control-input-wrapper .eicon-wrap' );
Expand All @@ -300,7 +294,7 @@ test.describe( 'Container tests @container', () => {
await editor.getPreviewFrame().waitForSelector( '.elementor-widget-google_maps iframe' );
// Set widget custom width to 40%.
await editor.setWidgetCustomWidth( '40' );
await editor.setWidgetToFlexGrow();
await page.locator( '.elementor-control-_flex_size .elementor-control-input-wrapper .eicon-grow' ).click();
// Set widget mask.
await editor.setWidgetMask();

Expand All @@ -326,8 +320,8 @@ test.describe( 'Container tests @container', () => {
await expect.soft( page.locator( '.elementor-context-menu-list__item-duplicate .elementor-context-menu-list__item__title' ) ).toBeVisible();
await page.locator( '.elementor-context-menu-list__item-duplicate .elementor-context-menu-list__item__title' ).click();
// Add flex grow effect.
await editor.activatePanelTab( 'advanced' );
await editor.setWidgetToFlexGrow();
await editor.openPanelTab( 'advanced' );
await page.locator( '.elementor-control-_flex_size .elementor-control-input-wrapper .eicon-grow' ).click();

// Hide editor and map controls.
await editor.hideMapControls();
Expand Down Expand Up @@ -369,16 +363,16 @@ test.describe( 'Container tests @container', () => {

await page.waitForLoadState( 'domcontentloaded' );
await editor.selectElement( containerId );
await page.locator( '.elementor-control-min_height .elementor-control-input-wrapper input' ).fill( '200' );
await editor.activatePanelTab( 'style' );
await editor.setSliderControlValue( 'min_height', '200' );
await editor.openPanelTab( 'style' );
await page.locator( '[data-tooltip="Video"]' ).click();
await page.locator( '[data-setting="background_video_link"]' ).fill( videoURL );
await page.locator( '.elementor-control-background_video_fallback .eicon-plus-circle' ).click();
await page.locator( '#menu-item-browse' ).click();
await page.setInputFiles( 'input[type="file"]', './tests/playwright/resources/mountain-image.jpeg' );
await page.waitForLoadState( 'networkidle' );
await page.click( '.button.media-button' );
await page.locator( '.elementor-control-section_background_overlay' ).click();
await editor.openSection( 'section_background_overlay' );
await page.locator( '.elementor-control-background_overlay_background [data-tooltip="Classic"]' ).click();
await page.locator( '.elementor-control-background_overlay_color .pcr-button' ).click();
await page.locator( '.pcr-app.visible .pcr-interaction input.pcr-result' ).fill( '#61CE70' );
Expand All @@ -394,12 +388,12 @@ test.describe( 'Container tests @container', () => {
await editor.togglePreviewMode();

await editor.selectElement( containerId );
await editor.activatePanelTab( 'style' );
await editor.openPanelTab( 'style' );
await editor.openSection( 'section_border' );
await page.selectOption( '.elementor-control-border_border .elementor-control-input-wrapper select', 'solid' );
await page.locator( '.elementor-control-border_width .elementor-control-input-wrapper input' ).first().fill( '30' );
await page.locator( '.elementor-control-border_radius .elementor-control-input-wrapper input' ).first().fill( '60' );
await editor.setContainerBorderColor( '#333333', containerId );
await editor.setSelectControlValue( 'border_border', 'solid' );
await editor.setDimensionsValue( 'border_width', '30' );
await editor.setDimensionsValue( 'border_radius', '60' );
await editor.setColorControlValue( 'border_color', '#333333' );
await page.locator( 'body' ).click();

await editor.togglePreviewMode();
Expand Down Expand Up @@ -428,8 +422,8 @@ test.describe( 'Container tests @container', () => {
// Act.
// Add widgets.
const spacer = await editor.addWidget( 'spacer', containerId );
// Set background colour and custom width.
await editor.activatePanelTab( 'advanced' );

await editor.openPanelTab( 'advanced' );
await editor.setWidgetCustomWidth( '20' );
await editor.setBackgroundColor( '#A81830', spacer );
// Set container `align-items: center`.
Expand Down Expand Up @@ -495,8 +489,8 @@ test.describe( 'Container tests @container', () => {
// Act.
await editor.addWidget( 'heading', containerId );
await editor.selectElement( containerId );
await editor.activatePanelTab( 'advanced' );
await page.locator( '.elementor-control-_section_transform .elementor-panel-heading-title' ).click();
await editor.openPanelTab( 'advanced' );
await editor.openSection( '_section_transform' );
// Set rotation.
await page.locator( '.elementor-control-_transform_rotate_popover .elementor-control-popover-toggle-toggle-label' ).click();
await page.locator( '.elementor-control-_transform_rotateZ_effect .elementor-control-input-wrapper input' ).fill( '2' );
Expand Down Expand Up @@ -578,7 +572,7 @@ test.describe( 'Container tests @container', () => {
containers[ index ].id = await editor.addElement( { elType: 'container' }, 'document' );

// Set various controls
await page.locator( '.elementor-control-container_type select' ).selectOption( 'grid' );
await editor.setSelectControlValue( 'container_type', 'grid' );
const clickOptions = { position: { x: 0, y: 0 } }; // This is to avoid the "tipsy" alt info that can block the click of the next item.
await page.locator( `.elementor-control-grid_justify_items .eicon-align-${ container.setting }-h` ).click( clickOptions );
await page.locator( `.elementor-control-grid_align_items .eicon-align-${ container.setting }-v` ).click( clickOptions );
Expand Down Expand Up @@ -704,7 +698,6 @@ test.describe( 'Container tests @container', () => {
frame = editor.getPreviewFrame();

await editor.addElement( { elType: 'container' }, 'document' );

// Set row direction.
await page.click( '.elementor-control-flex_direction i.eicon-arrow-right' );

Expand Down Expand Up @@ -760,7 +753,6 @@ test.describe( 'Container tests @container', () => {

// Set row direction.
await page.click( '.elementor-control-flex_direction i.eicon-arrow-right' );

await editor.addElement( { widgetType: widgets.spacer, elType: 'widget' }, container );
await editor.addWidget( widgets.image, container );

Expand Down Expand Up @@ -972,7 +964,7 @@ test.describe( 'Container tests @container', () => {

// Act.
// Just in case it's not Boxed by default
await page.selectOption( '.elementor-control-content_width >> select', 'boxed' );
await editor.setSelectControlValue( 'content_width', 'boxed' );

const childContainer = await editor.addElement( { elType: 'container' }, parentContainer );
const nestedChildContainer1 = await editor.addElement( { elType: 'container' }, childContainer );
Expand All @@ -988,7 +980,7 @@ test.describe( 'Container tests @container', () => {
await test.step( '“Full Width” Parent container to default to "Boxed" content width on child container', async () => {
const parentContainer = await editor.addElement( { elType: 'container' }, 'document' );

await page.selectOption( '.elementor-control-content_width >> select', 'full' );
await editor.setSelectControlValue( 'content_width', 'full' );

const childContainer = await editor.addElement( { elType: 'container' }, parentContainer );
const nestedChildContainer1 = await editor.addElement( { elType: 'container' }, childContainer );
Expand Down
Loading
Loading