Playwright Utils: Introduce the 'editor.saveDraft' helper (#55308)

* Playwright Utils: Introduce the 'editor.saveDraft' helper
* Update e2e tests where possible

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

@@ -19,6 +19,7 @@ import { insertBlock } from './insert-block';
 import { openDocumentSettingsSidebar } from './open-document-settings-sidebar';
 import { openPreviewPage } from './preview';
 import { publishPost } from './publish-post';
+import { saveDraft } from './save-draft';
 import { selectBlocks } from './select-blocks';
 import { setContent } from './set-content';
 import { showBlockToolbar } from './show-block-toolbar';
@@ -66,6 +67,8 @@ export class Editor {
 	openPreviewPage: typeof openPreviewPage = openPreviewPage.bind( this );
 	/** @borrows publishPost as this.publishPost */
 	publishPost: typeof publishPost = publishPost.bind( this );
+	/** @borrows saveDraft as this.saveDraft */
+	saveDraft: typeof saveDraft = saveDraft.bind( this );
 	/** @borrows saveSiteEditorEntities as this.saveSiteEditorEntities */
 	saveSiteEditorEntities: typeof saveSiteEditorEntities =
 		saveSiteEditorEntities.bind( this );

packages/e2e-test-utils-playwright/src/editor/save-draft.ts

@@ -0,0 +1,20 @@
+/**
+ * Internal dependencies
+ */
+import type { Editor } from './index';
+
+/**
+ * Saves the post as a draft, resolving once the request is complete (once a notice
+ * is displayed).
+ */
+export async function saveDraft( this: Editor ) {
+	await this.page
+		.getByRole( 'region', { name: 'Editor top bar' } )
+		.getByRole( 'button', { name: 'Save draft' } )
+		.click();
+
+	await this.page
+		.getByRole( 'button', { name: 'Dismiss this notice' } )
+		.filter( { hasText: 'Draft saved' } )
+		.waitFor();
+}

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

@@ -119,12 +119,7 @@ test.describe( 'Classic', () => {
 		// Move focus away.
 		await pageUtils.pressKeys( 'shift+Tab' );
 
-		await page.click( 'role=button[name="Save draft"i]' );
-
-		await expect(
-			page.locator( 'role=button[name="Saved"i]' )
-		).toBeDisabled();
-
+		await editor.saveDraft();
 		await page.reload();
 		await page.unroute( '**' );
 

test/e2e/specs/editor/blocks/post-title.spec.js

@@ -19,12 +19,7 @@ test.describe( 'Post Title block', () => {
 			.fill( 'Just tweaking the post title' );
 
 		// Save the post draft and reload.
-		await page.getByRole( 'button', { name: 'Save draft' } ).click();
-		await expect(
-			page
-				.getByRole( 'button', { name: 'Dismiss this notice' } )
-				.filter( { hasText: 'Draft saved' } )
-		).toBeVisible();
+		await editor.saveDraft();
 		await page.reload();
 
 		const titleBlock = editor.canvas.getByRole( 'document', {

test/e2e/specs/editor/plugins/nonce.spec.js

@@ -75,11 +75,8 @@ test.describe( 'Nonce', () => {
 			}
 		} );
 
-		await page.click( 'role=button[name=/Save draft/i]' );
 		// Saving draft should still succeed after retrying.
-		await expect(
-			page.locator( 'role=button[name="Dismiss this notice"i]' )
-		).toContainText( /Draft saved/i );
+		await editor.saveDraft();
 
 		// We expect a 403 status only once.
 		expect( saveDraftResponses ).toEqual( [ 403, 200 ] );

test/e2e/specs/editor/plugins/post-type-templates.spec.js

@@ -40,12 +40,7 @@ test.describe( 'Post type templates', () => {
 				.focus();
 			await page.keyboard.press( 'ArrowDown' );
 			await page.keyboard.press( 'Backspace' );
-			await page.click( 'role=button[name="Save draft"i]' );
-			await expect(
-				page.locator(
-					'role=button[name="Dismiss this notice"i] >> text=Draft saved'
-				)
-			).toBeVisible();
+			await editor.saveDraft();
 			await page.reload();
 
 			const expectedContent = await page.evaluate( ( content ) => {
@@ -72,12 +67,7 @@ test.describe( 'Post type templates', () => {
 			await page.keyboard.press( 'ArrowDown' );
 			await pageUtils.pressKeys( 'primary+A' );
 			await page.keyboard.press( 'Backspace' );
-			await page.click( 'role=button[name="Save draft"i]' );
-			await expect(
-				page.locator(
-					'role=button[name="Dismiss this notice"i] >> text=Draft saved'
-				)
-			).toBeVisible();
+			await editor.saveDraft();
 			await page.reload();
 
 			await expect.poll( editor.getEditedPostContent ).toBe( '' );
@@ -133,12 +123,7 @@ test.describe( 'Post type templates', () => {
 				.locator( 'role=document[name="Block: Image"i]' )
 				.focus();
 			await page.keyboard.press( 'Backspace' );
-			await page.click( 'role=button[name="Save draft"i]' );
-			await expect(
-				page.locator(
-					'role=button[name="Dismiss this notice"i] >> text=Draft saved'
-				)
-			).toBeVisible();
+			await editor.saveDraft();
 			await page.reload();
 
 			await expect.poll( editor.getEditedPostContent ).toBe( '' );

test/e2e/specs/editor/various/multi-block-selection.spec.js

@@ -301,13 +301,7 @@ test.describe( 'Multi-block selection', () => {
 			attributes: { content: 'test' },
 		} );
 
-		await page.getByRole( 'button', { name: 'Save draft' } ).click();
-		await expect(
-			page
-				.getByRole( 'button', { name: 'Dismiss this notice' } )
-				.filter( { hasText: 'Draft saved' } )
-		).toBeVisible();
-
+		await editor.saveDraft();
 		await page.reload();
 		// To do: run with iframe.
 		await editor.switchToLegacyCanvas();

test/e2e/specs/editor/various/new-post.spec.js

@@ -78,10 +78,7 @@ test.describe( 'new editor state', () => {
 			.locator( 'role=textbox[name="Add title"i]' )
 			.type( 'Here is the title' );
 		// Save the post as a draft.
-		await page.click( 'role=button[name="Save draft"i]' );
-		await page.waitForSelector(
-			'role=button[name="Dismiss this notice"] >> text=Draft saved'
-		);
+		await editor.saveDraft();
 
 		// Reload the browser so a post is loaded with a title.
 		await page.reload();

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

@@ -169,10 +169,7 @@ class PostEditorTemplateMode {
 		// Save the post
 		// Saving shouldn't be necessary but unfortunately,
 		// there's a template resolution bug forcing us to do so.
-		await this.page.click( 'role=button[name="Save draft"i]' );
-		await this.page.waitForSelector(
-			'role=button[name="Dismiss this notice"] >> text=Draft saved'
-		);
+		await this.editor.saveDraft();
 	}
 
 	async createNewTemplate( templateName ) {

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

@@ -168,12 +168,7 @@ test.describe( 'undo', () => {
 			.locator( 'role=button[name="Add default block"i]' )
 			.click();
 		await page.keyboard.type( 'test' );
-		await page.click( 'role=button[name="Save draft"i]' );
-		await expect(
-			page.locator(
-				'role=button[name="Dismiss this notice"i] >> text=Draft saved'
-			)
-		).toBeVisible();
+		await editor.saveDraft();
 		await page.reload();
 		await editor.canvas.locator( '[data-type="core/paragraph"]' ).click();
 		await pageUtils.pressKeys( 'primary+a' );
@@ -344,12 +339,7 @@ test.describe( 'undo', () => {
 			.locator( 'role=button[name="Add default block"i]' )
 			.click();
 		await page.keyboard.type( 'original' );
-		await page.click( 'role=button[name="Save draft"i]' );
-		await expect(
-			page.locator(
-				'role=button[name="Dismiss this notice"i] >> text=Draft saved'
-			)
-		).toBeVisible();
+		await editor.saveDraft();
 		await page.reload();
 
 		// Issue is demonstrated by forcing state merges (multiple inputs) on
@@ -384,12 +374,7 @@ test.describe( 'undo', () => {
 			.locator( 'role=button[name="Add default block"i]' )
 			.click();
 		await page.keyboard.type( '1' );
-		await page.click( 'role=button[name="Save draft"i]' );
-		await expect(
-			page.locator(
-				'role=button[name="Dismiss this notice"i] >> text=Draft saved'
-			)
-		).toBeVisible();
+		await editor.saveDraft();
 		await pageUtils.pressKeys( 'primary+z' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe( '' );
@@ -420,12 +405,7 @@ test.describe( 'undo', () => {
 			.click();
 
 		await page.keyboard.type( '1' );
-		await page.click( 'role=button[name="Save draft"i]' );
-		await expect(
-			page.locator(
-				'role=button[name="Dismiss this notice"i] >> text=Draft saved'
-			)
-		).toBeVisible();
+		await editor.saveDraft();
 		await page.reload();
 
 		// Expect undo button to be disabled.