E2E Utils: add setPreferences and editPost utils (WordPress#55099)

packages/e2e-test-utils-playwright/src/admin/create-new-post.ts

@@ -0,0 +1,38 @@
+/**
+ * Internal dependencies
+ */
+import type { Admin } from './';
+
+interface NewPostOptions {
+	postType?: string;
+	title?: string;
+	content?: string;
+	excerpt?: string;
+	showWelcomeGuide?: boolean;
+}
+
+/**
+ * Creates new post.
+ *
+ * @param this
+ * @param options Options to create new post.
+ */
+export async function createNewPost(
+	this: Admin,
+	options: NewPostOptions = {}
+) {
+	const query = new URLSearchParams();
+	const { postType, title, content, excerpt } = options;
+
+	if ( postType ) query.set( 'post_type', postType );
+	if ( title ) query.set( 'post_title', title );
+	if ( content ) query.set( 'content', content );
+	if ( excerpt ) query.set( 'excerpt', excerpt );
+
+	await this.visitAdminPage( 'post-new.php', query.toString() );
+
+	await this.editor.setPreferences( 'core/edit-post', {
+		welcomeGuide: options.showWelcomeGuide ?? false,
+		fullscreenMode: false,
+	} );
+}

packages/e2e-test-utils-playwright/src/admin/edit-post.ts

@@ -0,0 +1,24 @@
+/**
+ * Internal dependencies
+ */
+import type { Admin } from '.';
+
+/**
+ * Open the post with given ID in the editor.
+ *
+ * @param this
+ * @param postId Post ID to visit.
+ */
+export async function editPost( this: Admin, postId: string | number ) {
+	const query = new URLSearchParams();
+
+	query.set( 'post', String( postId ) );
+	query.set( 'action', 'edit' );
+
+	await this.visitAdminPage( 'post.php', query.toString() );
+
+	await this.editor.setPreferences( 'core/edit-post', {
+		welcomeGuide: false,
+		fullscreenMode: false,
+	} );
+}

packages/e2e-test-utils-playwright/src/admin/index.ts

@@ -9,29 +9,36 @@ import type { Browser, Page, BrowserContext } from '@playwright/test';
 import { createNewPost } from './create-new-post';
 import { getPageError } from './get-page-error';
 import { visitAdminPage } from './visit-admin-page';
+import { editPost } from './edit-post';
 import { visitSiteEditor } from './visit-site-editor';
 import type { PageUtils } from '../page-utils';
+import type { Editor } from '../editor';
 
 type AdminConstructorProps = {
 	page: Page;
 	pageUtils: PageUtils;
+	editor: Editor;
 };
 
 export class Admin {
-	browser: Browser;
 	page: Page;
-	pageUtils: PageUtils;
 	context: BrowserContext;
+	browser: Browser;
+	pageUtils: PageUtils;
+	editor: Editor;
 
-	constructor( { page, pageUtils }: AdminConstructorProps ) {
+	constructor( { page, pageUtils, editor }: AdminConstructorProps ) {
 		this.page = page;
 		this.context = page.context();
 		this.browser = this.context.browser()!;
 		this.pageUtils = pageUtils;
+		this.editor = editor;
 	}
 
 	/** @borrows createNewPost as this.createNewPost */
 	createNewPost: typeof createNewPost = createNewPost.bind( this );
+	/** @borrows editPost as this.editPost */
+	editPost: typeof editPost = editPost.bind( this );
 	/** @borrows getPageError as this.getPageError */
 	getPageError: typeof getPageError = getPageError.bind( this );
 	/** @borrows visitAdminPage as this.visitAdminPage */

packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts

@@ -1,72 +1,51 @@
-/**
- * WordPress dependencies
- */
-import { addQueryArgs } from '@wordpress/url';
-
 /**
  * Internal dependencies
  */
 import type { Admin } from './';
 
-export interface SiteEditorQueryParams {
-	postId: string | number;
-	postType: string;
+interface SiteEditorOptions {
+	postId?: string | number;
+	postType?: string;
+	path?: string;
+	canvas?: string;
+	showWelcomeGuide?: boolean;
 }
 
-const CANVAS_SELECTOR = 'iframe[title="Editor canvas"i] >> visible=true';
-
 /**
- * Visits the Site Editor main page
- *
- * By default, it also skips the welcome guide. The option can be disabled if need be.
+ * Visits the Site Editor main page.
  *
  * @param this
- * @param query            Query params to be serialized as query portion of URL.
- * @param skipWelcomeGuide Whether to skip the welcome guide as part of the navigation.
+ * @param options Options to visit the site editor.
  */
 export async function visitSiteEditor(
 	this: Admin,
-	query: SiteEditorQueryParams,
-	skipWelcomeGuide = true
+	options: SiteEditorOptions = {}
 ) {
-	const path = addQueryArgs( '', {
-		...query,
-	} ).slice( 1 );
-
-	await this.visitAdminPage( 'site-editor.php', path );
-
-	if ( skipWelcomeGuide ) {
-		await this.page.evaluate( () => {
-			window.wp.data
-				.dispatch( 'core/preferences' )
-				.set( 'core/edit-site', 'welcomeGuide', false );
-
-			window.wp.data
-				.dispatch( 'core/preferences' )
-				.set( 'core/edit-site', 'welcomeGuideStyles', false );
-
-			window.wp.data
-				.dispatch( 'core/preferences' )
-				.set( 'core/edit-site', 'welcomeGuidePage', false );
-
-			window.wp.data
-				.dispatch( 'core/preferences' )
-				.set( 'core/edit-site', 'welcomeGuideTemplate', false );
+	const { postId, postType, path, canvas } = options;
+	const query = new URLSearchParams();
+
+	if ( postId ) query.set( 'postId', String( postId ) );
+	if ( postType ) query.set( 'postType', postType );
+	if ( path ) query.set( 'path', path );
+	if ( canvas ) query.set( 'canvas', canvas );
+
+	await this.visitAdminPage( 'site-editor.php', query.toString() );
+
+	if ( ! options.showWelcomeGuide ) {
+		await this.editor.setPreferences( 'core/edit-site', {
+			welcomeGuide: false,
+			welcomeGuideStyles: false,
+			welcomeGuidePage: false,
+			welcomeGuideTemplate: false,
 		} );
 	}
 
-	// Check if the current page has an editor canvas first.
-	if ( ( await this.page.locator( CANVAS_SELECTOR ).count() ) > 0 ) {
-		// The site editor initially loads with an empty body,
-		// we need to wait for the editor canvas to be rendered.
-		await this.page
-			.frameLocator( CANVAS_SELECTOR )
-			.locator( 'body > *' )
-			.first()
-			.waitFor();
-	}
-
-	// TODO: Ideally the content underneath the canvas loader should be marked inert until it's ready.
+	/**
+	 * @todo This is a workaround for the fact that the editor canvas is seen as
+	 * ready and visible before the loading spinner is hidden. Ideally, the
+	 * content underneath the loading overlay should be marked inert until the
+	 * loading is done.
+	 */
 	await this.page
 		.locator( '.edit-site-canvas-loader' )
 		// Bigger timeout is needed for larger entities, for example the large

packages/e2e-test-utils-playwright/src/editor/index.ts

@@ -22,6 +22,7 @@ import { publishPost } from './publish-post';
 import { saveDraft } from './save-draft';
 import { selectBlocks } from './select-blocks';
 import { setContent } from './set-content';
+import { setPreferences } from './set-preferences';
 import { showBlockToolbar } from './show-block-toolbar';
 import { saveSiteEditorEntities } from './site-editor';
 import { setIsFixedToolbar } from './set-is-fixed-toolbar';
@@ -76,6 +77,8 @@ export class Editor {
 	selectBlocks: typeof selectBlocks = selectBlocks.bind( this );
 	/** @borrows setContent as this.setContent */
 	setContent: typeof setContent = setContent.bind( this );
+	/** @borrows setPreferences as this.setPreferences */
+	setPreferences: typeof setPreferences = setPreferences.bind( this );
 	/** @borrows showBlockToolbar as this.showBlockToolbar */
 	showBlockToolbar: typeof showBlockToolbar = showBlockToolbar.bind( this );
 	/** @borrows setIsFixedToolbar as this.setIsFixedToolbar */

packages/e2e-test-utils-playwright/src/editor/set-preferences.ts

@@ -0,0 +1,37 @@
+/**
+ * Internal dependencies
+ */
+import type { Editor } from './index';
+
+type PreferencesContext =
+	| 'core/edit-post'
+	| 'core/edit-site'
+	| 'core/customize-widgets';
+
+/**
+ * Set the preferences of the editor.
+ *
+ * @param this
+ * @param context     Context to set preferences for.
+ * @param preferences Preferences to set.
+ */
+export async function setPreferences(
+	this: Editor,
+	context: PreferencesContext,
+	preferences: Record< string, any >
+) {
+	await this.page.waitForFunction( () => window?.wp?.data );
+
+	await this.page.evaluate(
+		async ( props ) => {
+			for ( const [ key, value ] of Object.entries(
+				props.preferences
+			) ) {
+				await window.wp.data
+					.dispatch( 'core/preferences' )
+					.set( props.context, key, value );
+			}
+		},
+		{ context, preferences }
+	);
+}

packages/e2e-test-utils-playwright/src/test.ts

@@ -119,8 +119,8 @@ const test = base.extend<
 		lighthousePort: number;
 	}
 >( {
-	admin: async ( { page, pageUtils }, use ) => {
-		await use( new Admin( { page, pageUtils } ) );
+	admin: async ( { page, pageUtils, editor }, use ) => {
+		await use( new Admin( { page, pageUtils, editor } ) );
 	},
 	editor: async ( { page }, use ) => {
 		await use( new Editor( { page } ) );

test/e2e/specs/editor/blocks/query.spec.js

@@ -21,7 +21,10 @@ test.describe( 'Query block', () => {
 	} );
 
 	test.beforeEach( async ( { admin } ) => {
-		await admin.createNewPost( { postType: 'page', title: 'Query Page' } );
+		await admin.createNewPost( {
+			postType: 'page',
+			title: 'Query Page',
+		} );
 	} );
 
 	test.afterEach( async ( { requestUtils } ) => {

test/e2e/specs/editor/local/demo.spec.js

@@ -7,21 +7,12 @@ test.describe( 'New editor state', () => {
 	test( 'content should load, making the post dirty', async ( {
 		page,
 		admin,
+		editor,
 	} ) => {
 		await admin.visitAdminPage( 'post-new.php', 'gutenberg-demo' );
-		await page.waitForFunction( () => {
-			if ( ! window?.wp?.data?.dispatch ) {
-				return false;
-			}
-			window.wp.data
-				.dispatch( 'core/preferences' )
-				.set( 'core/edit-post', 'welcomeGuide', false );
-
-			window.wp.data
-				.dispatch( 'core/preferences' )
-				.set( 'core/edit-post', 'fullscreenMode', false );
-
-			return true;
+		await editor.setPreferences( 'core/edit-site', {
+			welcomeGuide: false,
+			fullscreenMode: false,
 		} );
 
 		const isDirty = await page.evaluate( () => {

test/e2e/specs/editor/various/block-renaming.spec.js

@@ -15,10 +15,8 @@ test.describe( 'Block Renaming', () => {
 			pageUtils,
 		} ) => {
 			// Turn on block list view by default.
-			await page.evaluate( () => {
-				window.wp.data
-					.dispatch( 'core/preferences' )
-					.set( 'core/edit-site', 'showListViewByDefault', true );
+			await editor.setPreferences( 'core/edit-site', {
+				showListViewByDefault: true,
 			} );
 
 			const listView = page.getByRole( 'treegrid', {

test/e2e/specs/editor/various/post-editor-template-mode.spec.js

@@ -121,10 +121,8 @@ class PostEditorTemplateMode {
 
 	async disableTemplateWelcomeGuide() {
 		// Turn off the welcome guide.
-		await this.page.evaluate( () => {
-			window.wp.data
-				.dispatch( 'core/preferences' )
-				.set( 'core/edit-post', 'welcomeGuideTemplate', false );
+		await this.editor.setPreferences( 'core/edit-post', {
+			welcomeGuideTemplate: false,
 		} );
 	}
 

test/e2e/specs/editor/various/preview.spec.js

@@ -295,7 +295,10 @@ test.describe( 'Preview with private custom post type', () => {
 		admin,
 		page,
 	} ) => {
-		await admin.createNewPost( { postType: 'not_public', title: 'aaaaa' } );
+		await admin.createNewPost( {
+			postType: 'not_public',
+			title: 'aaaaa',
+		} );
 
 		// Open the view menu.
 		await page.click( 'role=button[name="Preview"i]' );