hello-theme/tests/playwright/assets/breakpoints.ts

import { Locator, type Page } from '@playwright/test';
import EditorPage from '../pages/editor-page.ts';
import { BreakpointEditableDevice, Device } from '../types/types.ts';
import EditorSelectors from '../selectors/editor-selectors.ts';

export default class {
	readonly page: Page;
	constructor( page: Page ) {
		this.page = page;
	}

	static getDeviceLocator( page: Page, device: Device ): Locator {
		const baseLocator = page.locator( '[aria-label="Switch Device"]' );
		return baseLocator.locator( `[data-testid="switch-device-to-${ device }"]` );
	}

	static getAll(): Device[] {
		return [ 'mobile', 'mobile_extra', 'tablet', 'tablet_extra', 'laptop', 'desktop', 'widescreen' ];
	}

	static getBasic(): Device[] {
		return [ 'mobile', 'tablet', 'desktop' ];
	}

	async saveOrUpdate( editor: EditorPage, toReload = false ) {
		const hasTopBar: boolean = await editor.hasTopBar();
		if ( hasTopBar ) {
			await editor.saveSiteSettingsWithTopBar( toReload );
		} else {
			await editor.saveSiteSettingsNoTopBar();
		}
	}

	async addAllBreakpoints( editor: EditorPage, experimentPostId?: string ) {
		await editor.openSiteSettings( 'settings-layout' );
		await editor.openSection( 'section_breakpoints' );
		await this.page.waitForSelector( 'text=Active Breakpoints' );

		const devices = [ 'Mobile Landscape', 'Tablet Landscape', 'Laptop', 'Widescreen' ];

		for ( const device of devices ) {
			if ( await this.page.$( '.select2-selection__e-plus-button' ) ) {
				await this.page.click( '.select2-selection__e-plus-button' );
				await this.page.click( `li:has-text("${ device }")` );
			}
		}

		await this.saveOrUpdate( editor, true );

		if ( experimentPostId ) {
			await this.page.goto( `/wp-admin/post.php?post=${ experimentPostId }&action=elementor` );
		} else {
			await this.page.reload();

			if ( await this.page.$( '#elementor-panel-header-kit-close' ) ) {
				await this.page.locator( '#elementor-panel-header-kit-close' ).click( { timeout: 30000 } );
			}
		}

		await this.page.waitForSelector( '#elementor-editor-wrapper' );
	}

	async resetBreakpoints( editor: EditorPage ) {
		await editor.openSiteSettings( 'settings-layout' );
		await editor.openSection( 'section_breakpoints' );
		await this.page.waitForSelector( 'text=Active Breakpoints' );

		const removeBreakpointButton = EditorSelectors.panels.siteSettings.layout.breakpoints.removeBreakpointButton;
		while ( await this.page.locator( removeBreakpointButton ).count() > 0 ) {
			await this.page.click( removeBreakpointButton );
		}
		await this.saveOrUpdate( editor, true );
	}

	getBreakpointInputLocator( page: Page, device: BreakpointEditableDevice ): Locator {
		return page.locator( `input[data-setting="viewport_${ device }"]` );
	}

	async setBreakpoint( editor: EditorPage, device: BreakpointEditableDevice, value: number ) {
		await editor.openSiteSettings( 'settings-layout' );
		await editor.openSection( 'section_breakpoints' );
		await this.page.waitForSelector( 'text=Active Breakpoints' );

		const locator = this.getBreakpointInputLocator( this.page, device );
		await locator.fill( String( value ) );
		await this.saveOrUpdate( editor );
		await this.page.locator( EditorSelectors.toast ).waitFor();
	}
}