From 24add081d2214b3893ef47dc4e491619266052e7 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 13 Oct 2023 13:39:13 +0400 Subject: [PATCH] Playwright Utils: Introduce the 'editor.saveDraft' helper (#55308) * Playwright Utils: Introduce the 'editor.saveDraft' helper * Update e2e tests where possible --- .../src/editor/index.ts | 3 ++ .../src/editor/save-draft.ts | 20 +++++++++++++ test/e2e/specs/editor/blocks/classic.spec.js | 7 +---- .../specs/editor/blocks/post-title.spec.js | 7 +---- test/e2e/specs/editor/plugins/nonce.spec.js | 5 +--- .../plugins/post-type-templates.spec.js | 21 ++------------ .../various/multi-block-selection.spec.js | 8 +----- .../e2e/specs/editor/various/new-post.spec.js | 5 +--- .../various/post-editor-template-mode.spec.js | 5 +--- test/e2e/specs/editor/various/undo.spec.js | 28 +++---------------- 10 files changed, 36 insertions(+), 73 deletions(-) create mode 100644 packages/e2e-test-utils-playwright/src/editor/save-draft.ts diff --git a/packages/e2e-test-utils-playwright/src/editor/index.ts b/packages/e2e-test-utils-playwright/src/editor/index.ts index 673149d4e69e0..8c10ba370b1a9 100644 --- a/packages/e2e-test-utils-playwright/src/editor/index.ts +++ b/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 ); diff --git a/packages/e2e-test-utils-playwright/src/editor/save-draft.ts b/packages/e2e-test-utils-playwright/src/editor/save-draft.ts new file mode 100644 index 0000000000000..319cded7a8012 --- /dev/null +++ b/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(); +} diff --git a/test/e2e/specs/editor/blocks/classic.spec.js b/test/e2e/specs/editor/blocks/classic.spec.js index 2dcc526851743..95d39906b0d8b 100644 --- a/test/e2e/specs/editor/blocks/classic.spec.js +++ b/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( '**' ); diff --git a/test/e2e/specs/editor/blocks/post-title.spec.js b/test/e2e/specs/editor/blocks/post-title.spec.js index 6959a1cd0bfa7..b5c536c0ff246 100644 --- a/test/e2e/specs/editor/blocks/post-title.spec.js +++ b/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', { diff --git a/test/e2e/specs/editor/plugins/nonce.spec.js b/test/e2e/specs/editor/plugins/nonce.spec.js index 0ffe0c5efb813..1fbb6add87ff7 100644 --- a/test/e2e/specs/editor/plugins/nonce.spec.js +++ b/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 ] ); diff --git a/test/e2e/specs/editor/plugins/post-type-templates.spec.js b/test/e2e/specs/editor/plugins/post-type-templates.spec.js index 9b2abddb0dd0e..a95f826c1f74c 100644 --- a/test/e2e/specs/editor/plugins/post-type-templates.spec.js +++ b/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( '' ); diff --git a/test/e2e/specs/editor/various/multi-block-selection.spec.js b/test/e2e/specs/editor/various/multi-block-selection.spec.js index 32fe45e6951bc..4fb39783954fa 100644 --- a/test/e2e/specs/editor/various/multi-block-selection.spec.js +++ b/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(); diff --git a/test/e2e/specs/editor/various/new-post.spec.js b/test/e2e/specs/editor/various/new-post.spec.js index 9d6f4ef45d9db..cc0243eb8e631 100644 --- a/test/e2e/specs/editor/various/new-post.spec.js +++ b/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(); diff --git a/test/e2e/specs/editor/various/post-editor-template-mode.spec.js b/test/e2e/specs/editor/various/post-editor-template-mode.spec.js index 629a437a41665..6f8bb5596bf2a 100644 --- a/test/e2e/specs/editor/various/post-editor-template-mode.spec.js +++ b/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 ) { diff --git a/test/e2e/specs/editor/various/undo.spec.js b/test/e2e/specs/editor/various/undo.spec.js index 51683997aaf6f..9df1c43b59474 100644 --- a/test/e2e/specs/editor/various/undo.spec.js +++ b/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.