E2E Utils: add setPreferences and editPost utils

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

@@ -294,7 +294,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]' );