Internal: Use only internal test methods to update Editor controls [E…

…D-14906] (#27467)

Co-authored-by: ElementorBot <48412871+elementorbot@users.noreply.github.com>

tests/playwright/pages/widgets/image-carousel.ts

@@ -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();
 

tests/playwright/sanity/assets/dev/js/editor/controls-conditions.test.ts

@@ -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' );
 

tests/playwright/sanity/assets/dev/js/editor/document/elements/copy-paste-style.test.ts

@@ -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' );

tests/playwright/sanity/assets/dev/js/editor/elements/views/widget.test.ts

@@ -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' );
 
@@ -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' );
 
@@ -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' );

tests/playwright/sanity/assets/dev/js/editor/introduction-tooltips/global-color-introduction.test.ts

@@ -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();
 
@@ -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();
 

tests/playwright/sanity/assets/dev/js/editor/introduction-tooltips/global-font-introduction.test.ts

@@ -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();
 
@@ -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();
 

tests/playwright/sanity/assets/dev/js/frontend/handlers/image-carousel/lazyload.test.ts

@@ -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' );

tests/playwright/sanity/button.test.ts

@@ -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 ) );
 

tests/playwright/sanity/container-grid.test.ts

@@ -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 }` );
@@ -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 ) => {
@@ -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' );

tests/playwright/sanity/container.test.ts

@@ -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' );
@@ -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();
 
@@ -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();
 
@@ -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();
 
@@ -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();
 
@@ -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();
 
@@ -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
@@ -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();
 
@@ -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' );
@@ -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();
 
@@ -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();
@@ -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' );
@@ -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();
@@ -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`.
@@ -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' );
@@ -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 );
@@ -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' );
 
@@ -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 );
 
@@ -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 );
@@ -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 );