From 7532c570bd3a8a422b83fffcbf346efc2c92a569 Mon Sep 17 00:00:00 2001 From: mimi Date: Wed, 8 Jun 2022 10:14:30 +0900 Subject: [PATCH 01/10] WIP --- .../src/editor/click-block-appender.ts | 20 +++++++ .../src/editor/index.ts | 2 + .../specs/editor/blocks/spacer.testttttt.js | 52 +++++++++++++++++++ 3 files changed, 74 insertions(+) create mode 100644 packages/e2e-test-utils-playwright/src/editor/click-block-appender.ts create mode 100644 test/e2e/specs/editor/blocks/spacer.testttttt.js diff --git a/packages/e2e-test-utils-playwright/src/editor/click-block-appender.ts b/packages/e2e-test-utils-playwright/src/editor/click-block-appender.ts new file mode 100644 index 00000000000000..a1b5cfd2210642 --- /dev/null +++ b/packages/e2e-test-utils-playwright/src/editor/click-block-appender.ts @@ -0,0 +1,20 @@ +/** + * Internal dependencies + */ + import type { Editor } from './index'; + +/** + * Clicks the default block appender. + */ +export async function clickBlockAppender(this: Editor) { + // The block appender is only visible when there's no selection. + await this.page.evaluate( () => + // @ts-ignore (Reason: wp isn't typed) + window.wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock() + ); + const appender = await this.page.waitForSelector( + '.block-editor-default-block-appender__content' + ); + await appender.click(); + await this.page.evaluate( () => new Promise( (resolve) => {window.requestIdleCallback(resolve)} ) ); +} diff --git a/packages/e2e-test-utils-playwright/src/editor/index.ts b/packages/e2e-test-utils-playwright/src/editor/index.ts index 074cdd358266c8..a36c2aa3395bc5 100644 --- a/packages/e2e-test-utils-playwright/src/editor/index.ts +++ b/packages/e2e-test-utils-playwright/src/editor/index.ts @@ -6,6 +6,7 @@ import type { Browser, Page, BrowserContext, Frame } from '@playwright/test'; /** * Internal dependencies */ +// import { clickBlockAppender } from './click-block-appender'; import { clickBlockOptionsMenuItem } from './click-block-options-menu-item'; import { clickBlockToolbarButton } from './click-block-toolbar-button'; import { getEditedPostContent } from './get-edited-post-content'; @@ -52,6 +53,7 @@ export class Editor { return frame; } + // clickBlockAppender = clickBlockAppender; clickBlockOptionsMenuItem = clickBlockOptionsMenuItem; clickBlockToolbarButton = clickBlockToolbarButton; getEditedPostContent = getEditedPostContent; diff --git a/test/e2e/specs/editor/blocks/spacer.testttttt.js b/test/e2e/specs/editor/blocks/spacer.testttttt.js new file mode 100644 index 00000000000000..b96706ea2fb59f --- /dev/null +++ b/test/e2e/specs/editor/blocks/spacer.testttttt.js @@ -0,0 +1,52 @@ +/** + * WordPress dependencies + */ +// import { +// clickBlockAppender, +// getEditedPostContent, +// createNewPost, +// dragAndResize, +// } from '@wordpress/e2e-test-utils'; +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.describe( 'Spacer', () => { + test.beforeEach( async ( { admin } ) => { + await admin.createNewPost(); + } ); + + test( 'can be created by typing "/spacer"', async ( { editor, page } ) => { + // Create a spacer with the slash block shortcut. + await editor.clickBlockAppender(); + await page.keyboard.type( '/spacer' ); + await page.waitForXPath( + `//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Spacer')]` + ); + await page.keyboard.press( 'Enter' ); + + expect( await editor.getEditedPostContent() ).toMatchSnapshot(); + } ); + + test( 'can be resized using the drag handle and remains selected after being dragged', async ( { + page, + editor, + } ) => { + // Create a spacer with the slash block shortcut. + await editor.clickBlockAppender(); + await page.keyboard.type( '/spacer' ); + await page.waitForXPath( + `//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Spacer')]` + ); + await page.keyboard.press( 'Enter' ); + + const resizableHandle = await page.locator( + '.block-library-spacer__resize-container .components-resizable-box__handle' + ); + await editor.dragAndResize( resizableHandle, { x: 0, y: 50 } ); + expect( await editor.getEditedPostContent() ).toMatchSnapshot(); + + const selectedSpacer = await page.locator( + '[data-type="core/spacer"].is-selected' + ); + expect( selectedSpacer ).not.toBe( null ); + } ); +} ); From 391d3aff0203176e5e443f7700f41cfc05a43ba1 Mon Sep 17 00:00:00 2001 From: mimi Date: Wed, 8 Jun 2022 11:49:51 +0900 Subject: [PATCH 02/10] migrate / spacer test to playwright --- .../src/editor/click-block-appender.ts | 20 --------- .../src/editor/drag-and-resize.ts | 41 +++++++++++++++++++ .../src/editor/index.ts | 4 +- test/e2e/playwright.config.ts | 2 +- ...be-created-by-typing-spacer-1-chromium.txt | 3 ++ ...elected-after-being-dragged-1-chromium.txt | 3 ++ .../{spacer.testttttt.js => spacer.spec.js} | 16 +++----- 7 files changed, 55 insertions(+), 34 deletions(-) delete mode 100644 packages/e2e-test-utils-playwright/src/editor/click-block-appender.ts create mode 100644 packages/e2e-test-utils-playwright/src/editor/drag-and-resize.ts create mode 100644 test/e2e/specs/editor/blocks/__snapshots__/Spacer-can-be-created-by-typing-spacer-1-chromium.txt create mode 100644 test/e2e/specs/editor/blocks/__snapshots__/Spacer-can-be-resized-using-the-drag-handle-and-remains-selected-after-being-dragged-1-chromium.txt rename test/e2e/specs/editor/blocks/{spacer.testttttt.js => spacer.spec.js} (67%) diff --git a/packages/e2e-test-utils-playwright/src/editor/click-block-appender.ts b/packages/e2e-test-utils-playwright/src/editor/click-block-appender.ts deleted file mode 100644 index a1b5cfd2210642..00000000000000 --- a/packages/e2e-test-utils-playwright/src/editor/click-block-appender.ts +++ /dev/null @@ -1,20 +0,0 @@ -/** - * Internal dependencies - */ - import type { Editor } from './index'; - -/** - * Clicks the default block appender. - */ -export async function clickBlockAppender(this: Editor) { - // The block appender is only visible when there's no selection. - await this.page.evaluate( () => - // @ts-ignore (Reason: wp isn't typed) - window.wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock() - ); - const appender = await this.page.waitForSelector( - '.block-editor-default-block-appender__content' - ); - await appender.click(); - await this.page.evaluate( () => new Promise( (resolve) => {window.requestIdleCallback(resolve)} ) ); -} diff --git a/packages/e2e-test-utils-playwright/src/editor/drag-and-resize.ts b/packages/e2e-test-utils-playwright/src/editor/drag-and-resize.ts new file mode 100644 index 00000000000000..4d6f12749b79b8 --- /dev/null +++ b/packages/e2e-test-utils-playwright/src/editor/drag-and-resize.ts @@ -0,0 +1,41 @@ +/** + * External dependencies + */ +import type { Locator } from '@playwright/test'; +/** + * Internal dependencies + */ +import type { Editor } from './index'; + +type Delta = { + x: number; + y: number; +}; + +/** + * Clicks an element, drags a particular distance and releases the mouse button. + * + * @param {Editor} this + * @param {Object} element The puppeteer element handle. + * @param {Object} delta Object containing movement distances. + * @param {number} delta.x Horizontal distance to drag. + * @param {number} delta.y Vertical distance to drag. + * + * @return {Promise} Promise resolving when drag completes. + */ +export async function dragAndResize( + this: Editor, + element: Locator, + delta: Delta +) { + const elementPoint = await element.boundingBox(); + if ( elementPoint ) { + await this.page.mouse.move( elementPoint.x, elementPoint.y ); + await this.page.mouse.down(); + await this.page.mouse.move( + elementPoint.x + delta.x, + elementPoint.y + delta.y + ); + await this.page.mouse.up(); + } +} diff --git a/packages/e2e-test-utils-playwright/src/editor/index.ts b/packages/e2e-test-utils-playwright/src/editor/index.ts index a36c2aa3395bc5..e2dd9fa1c720bd 100644 --- a/packages/e2e-test-utils-playwright/src/editor/index.ts +++ b/packages/e2e-test-utils-playwright/src/editor/index.ts @@ -6,9 +6,9 @@ import type { Browser, Page, BrowserContext, Frame } from '@playwright/test'; /** * Internal dependencies */ -// import { clickBlockAppender } from './click-block-appender'; import { clickBlockOptionsMenuItem } from './click-block-options-menu-item'; import { clickBlockToolbarButton } from './click-block-toolbar-button'; +import { dragAndResize } from './drag-and-resize'; import { getEditedPostContent } from './get-edited-post-content'; import { insertBlock } from './insert-block'; import { openDocumentSettingsSidebar } from './open-document-settings-sidebar'; @@ -53,9 +53,9 @@ export class Editor { return frame; } - // clickBlockAppender = clickBlockAppender; clickBlockOptionsMenuItem = clickBlockOptionsMenuItem; clickBlockToolbarButton = clickBlockToolbarButton; + dragAndResize = dragAndResize; getEditedPostContent = getEditedPostContent; insertBlock = insertBlock; openDocumentSettingsSidebar = openDocumentSettingsSidebar; diff --git a/test/e2e/playwright.config.ts b/test/e2e/playwright.config.ts index 01f311d831fca3..6970c8d2a0e3ec 100644 --- a/test/e2e/playwright.config.ts +++ b/test/e2e/playwright.config.ts @@ -46,7 +46,7 @@ const config: PlaywrightTestConfig = { }, webServer: { command: 'npm run wp-env start', - port: 8889, + port: 9001, timeout: 120_000, // 120 seconds. reuseExistingServer: true, }, diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Spacer-can-be-created-by-typing-spacer-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Spacer-can-be-created-by-typing-spacer-1-chromium.txt new file mode 100644 index 00000000000000..d933c0bbc6ef07 --- /dev/null +++ b/test/e2e/specs/editor/blocks/__snapshots__/Spacer-can-be-created-by-typing-spacer-1-chromium.txt @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Spacer-can-be-resized-using-the-drag-handle-and-remains-selected-after-being-dragged-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Spacer-can-be-resized-using-the-drag-handle-and-remains-selected-after-being-dragged-1-chromium.txt new file mode 100644 index 00000000000000..e24e78a20e6b53 --- /dev/null +++ b/test/e2e/specs/editor/blocks/__snapshots__/Spacer-can-be-resized-using-the-drag-handle-and-remains-selected-after-being-dragged-1-chromium.txt @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/test/e2e/specs/editor/blocks/spacer.testttttt.js b/test/e2e/specs/editor/blocks/spacer.spec.js similarity index 67% rename from test/e2e/specs/editor/blocks/spacer.testttttt.js rename to test/e2e/specs/editor/blocks/spacer.spec.js index b96706ea2fb59f..5ec7016949161e 100644 --- a/test/e2e/specs/editor/blocks/spacer.testttttt.js +++ b/test/e2e/specs/editor/blocks/spacer.spec.js @@ -16,11 +16,8 @@ test.describe( 'Spacer', () => { test( 'can be created by typing "/spacer"', async ( { editor, page } ) => { // Create a spacer with the slash block shortcut. - await editor.clickBlockAppender(); + await page.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '/spacer' ); - await page.waitForXPath( - `//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Spacer')]` - ); await page.keyboard.press( 'Enter' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); @@ -31,20 +28,17 @@ test.describe( 'Spacer', () => { editor, } ) => { // Create a spacer with the slash block shortcut. - await editor.clickBlockAppender(); + await page.click( 'role=button[name="Add default block"i]' ); await page.keyboard.type( '/spacer' ); - await page.waitForXPath( - `//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Spacer')]` - ); await page.keyboard.press( 'Enter' ); - const resizableHandle = await page.locator( - '.block-library-spacer__resize-container .components-resizable-box__handle' + const resizableHandle = page.locator( + '[aria-label="Block: Spacer"] .block-library-spacer__resize-container .components-resizable-box__handle' ); await editor.dragAndResize( resizableHandle, { x: 0, y: 50 } ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); - const selectedSpacer = await page.locator( + const selectedSpacer = page.locator( '[data-type="core/spacer"].is-selected' ); expect( selectedSpacer ).not.toBe( null ); From d94e9906f52a2a2c122b7c21cbe93ec473718763 Mon Sep 17 00:00:00 2001 From: mimi Date: Wed, 8 Jun 2022 11:52:50 +0900 Subject: [PATCH 03/10] env / reset to the original value --- test/e2e/playwright.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/playwright.config.ts b/test/e2e/playwright.config.ts index 6970c8d2a0e3ec..01f311d831fca3 100644 --- a/test/e2e/playwright.config.ts +++ b/test/e2e/playwright.config.ts @@ -46,7 +46,7 @@ const config: PlaywrightTestConfig = { }, webServer: { command: 'npm run wp-env start', - port: 9001, + port: 8889, timeout: 120_000, // 120 seconds. reuseExistingServer: true, }, From 307ccfe36b58e7edcc9543dda19b49aebe2f98d9 Mon Sep 17 00:00:00 2001 From: mimi Date: Wed, 8 Jun 2022 12:15:53 +0900 Subject: [PATCH 04/10] remove puppeter files --- .../blocks/__snapshots__/spacer.test.js.snap | 13 ----- .../specs/editor/blocks/spacer.test.js | 48 ------------------- 2 files changed, 61 deletions(-) delete mode 100644 packages/e2e-tests/specs/editor/blocks/__snapshots__/spacer.test.js.snap delete mode 100644 packages/e2e-tests/specs/editor/blocks/spacer.test.js diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/spacer.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/spacer.test.js.snap deleted file mode 100644 index d63bd30a0e0618..00000000000000 --- a/packages/e2e-tests/specs/editor/blocks/__snapshots__/spacer.test.js.snap +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Spacer can be created by typing "/spacer" 1`] = ` -" -
-" -`; - -exports[`Spacer can be resized using the drag handle and remains selected after being dragged 1`] = ` -" -
-" -`; diff --git a/packages/e2e-tests/specs/editor/blocks/spacer.test.js b/packages/e2e-tests/specs/editor/blocks/spacer.test.js deleted file mode 100644 index 258fc59a6d1eed..00000000000000 --- a/packages/e2e-tests/specs/editor/blocks/spacer.test.js +++ /dev/null @@ -1,48 +0,0 @@ -/** - * WordPress dependencies - */ -import { - clickBlockAppender, - getEditedPostContent, - createNewPost, - dragAndResize, -} from '@wordpress/e2e-test-utils'; - -describe( 'Spacer', () => { - beforeEach( async () => { - await createNewPost(); - } ); - - it( 'can be created by typing "/spacer"', async () => { - // Create a spacer with the slash block shortcut. - await clickBlockAppender(); - await page.keyboard.type( '/spacer' ); - await page.waitForXPath( - `//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Spacer')]` - ); - await page.keyboard.press( 'Enter' ); - - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); - - it( 'can be resized using the drag handle and remains selected after being dragged', async () => { - // Create a spacer with the slash block shortcut. - await clickBlockAppender(); - await page.keyboard.type( '/spacer' ); - await page.waitForXPath( - `//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Spacer')]` - ); - await page.keyboard.press( 'Enter' ); - - const resizableHandle = await page.$( - '.block-library-spacer__resize-container .components-resizable-box__handle' - ); - await dragAndResize( resizableHandle, { x: 0, y: 50 } ); - expect( await getEditedPostContent() ).toMatchSnapshot(); - - const selectedSpacer = await page.$( - '[data-type="core/spacer"].is-selected' - ); - expect( selectedSpacer ).not.toBe( null ); - } ); -} ); From 6fcce8c17e3b1237ed4ed45cfbcf512c05db17e3 Mon Sep 17 00:00:00 2001 From: mimi Date: Wed, 8 Jun 2022 13:33:23 +0900 Subject: [PATCH 05/10] Remove unneeded comments --- test/e2e/specs/editor/blocks/spacer.spec.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/test/e2e/specs/editor/blocks/spacer.spec.js b/test/e2e/specs/editor/blocks/spacer.spec.js index 5ec7016949161e..e2e08b4b084b5b 100644 --- a/test/e2e/specs/editor/blocks/spacer.spec.js +++ b/test/e2e/specs/editor/blocks/spacer.spec.js @@ -1,12 +1,6 @@ /** * WordPress dependencies */ -// import { -// clickBlockAppender, -// getEditedPostContent, -// createNewPost, -// dragAndResize, -// } from '@wordpress/e2e-test-utils'; const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); test.describe( 'Spacer', () => { From 636e03400af42f24c961295d2d71de4716a43fb8 Mon Sep 17 00:00:00 2001 From: mimi Date: Wed, 8 Jun 2022 14:58:04 +0900 Subject: [PATCH 06/10] Update spacer.spec.js --- .../src/editor/drag-and-resize.ts | 41 ------------------- .../src/editor/index.ts | 2 - test/e2e/specs/editor/blocks/spacer.spec.js | 16 +++++--- 3 files changed, 10 insertions(+), 49 deletions(-) delete mode 100644 packages/e2e-test-utils-playwright/src/editor/drag-and-resize.ts diff --git a/packages/e2e-test-utils-playwright/src/editor/drag-and-resize.ts b/packages/e2e-test-utils-playwright/src/editor/drag-and-resize.ts deleted file mode 100644 index 4d6f12749b79b8..00000000000000 --- a/packages/e2e-test-utils-playwright/src/editor/drag-and-resize.ts +++ /dev/null @@ -1,41 +0,0 @@ -/** - * External dependencies - */ -import type { Locator } from '@playwright/test'; -/** - * Internal dependencies - */ -import type { Editor } from './index'; - -type Delta = { - x: number; - y: number; -}; - -/** - * Clicks an element, drags a particular distance and releases the mouse button. - * - * @param {Editor} this - * @param {Object} element The puppeteer element handle. - * @param {Object} delta Object containing movement distances. - * @param {number} delta.x Horizontal distance to drag. - * @param {number} delta.y Vertical distance to drag. - * - * @return {Promise} Promise resolving when drag completes. - */ -export async function dragAndResize( - this: Editor, - element: Locator, - delta: Delta -) { - const elementPoint = await element.boundingBox(); - if ( elementPoint ) { - await this.page.mouse.move( elementPoint.x, elementPoint.y ); - await this.page.mouse.down(); - await this.page.mouse.move( - elementPoint.x + delta.x, - elementPoint.y + delta.y - ); - await this.page.mouse.up(); - } -} diff --git a/packages/e2e-test-utils-playwright/src/editor/index.ts b/packages/e2e-test-utils-playwright/src/editor/index.ts index e2dd9fa1c720bd..074cdd358266c8 100644 --- a/packages/e2e-test-utils-playwright/src/editor/index.ts +++ b/packages/e2e-test-utils-playwright/src/editor/index.ts @@ -8,7 +8,6 @@ import type { Browser, Page, BrowserContext, Frame } from '@playwright/test'; */ import { clickBlockOptionsMenuItem } from './click-block-options-menu-item'; import { clickBlockToolbarButton } from './click-block-toolbar-button'; -import { dragAndResize } from './drag-and-resize'; import { getEditedPostContent } from './get-edited-post-content'; import { insertBlock } from './insert-block'; import { openDocumentSettingsSidebar } from './open-document-settings-sidebar'; @@ -55,7 +54,6 @@ export class Editor { clickBlockOptionsMenuItem = clickBlockOptionsMenuItem; clickBlockToolbarButton = clickBlockToolbarButton; - dragAndResize = dragAndResize; getEditedPostContent = getEditedPostContent; insertBlock = insertBlock; openDocumentSettingsSidebar = openDocumentSettingsSidebar; diff --git a/test/e2e/specs/editor/blocks/spacer.spec.js b/test/e2e/specs/editor/blocks/spacer.spec.js index e2e08b4b084b5b..e5c4b2a3b9069d 100644 --- a/test/e2e/specs/editor/blocks/spacer.spec.js +++ b/test/e2e/specs/editor/blocks/spacer.spec.js @@ -27,14 +27,18 @@ test.describe( 'Spacer', () => { await page.keyboard.press( 'Enter' ); const resizableHandle = page.locator( - '[aria-label="Block: Spacer"] .block-library-spacer__resize-container .components-resizable-box__handle' + 'role=document[name="Block: Spacer"i] >> css=.block-library-spacer__resize-container .components-resizable-box__handle' ); - await editor.dragAndResize( resizableHandle, { x: 0, y: 50 } ); + const elementPoint = await resizableHandle.boundingBox(); + await page.mouse.move( elementPoint.x, elementPoint.y ); + await page.mouse.down(); + await page.mouse.move( elementPoint.x + 0, elementPoint.y + 50 ); + await page.mouse.up(); + expect( await editor.getEditedPostContent() ).toMatchSnapshot(); - const selectedSpacer = page.locator( - '[data-type="core/spacer"].is-selected' - ); - expect( selectedSpacer ).not.toBe( null ); + await expect( + page.locator( 'role=document[name="Block Spacer"i]' ) + ).not.toBe( null ); } ); } ); From 4274bfb4f71e27af12625c60a37a1169919fe1dd Mon Sep 17 00:00:00 2001 From: mimi Date: Fri, 10 Jun 2022 08:45:03 +0900 Subject: [PATCH 07/10] feature / Update spacer test --- test/e2e/specs/editor/blocks/spacer.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/e2e/specs/editor/blocks/spacer.spec.js b/test/e2e/specs/editor/blocks/spacer.spec.js index e5c4b2a3b9069d..16e2a00368c7bd 100644 --- a/test/e2e/specs/editor/blocks/spacer.spec.js +++ b/test/e2e/specs/editor/blocks/spacer.spec.js @@ -38,7 +38,7 @@ test.describe( 'Spacer', () => { expect( await editor.getEditedPostContent() ).toMatchSnapshot(); await expect( - page.locator( 'role=document[name="Block Spacer"i]' ) - ).not.toBe( null ); + page.locator( 'role=document[name="Block: Spacer"i]' ) + ).toBeFocused(); } ); } ); From ff0dd8bd3a63a2cbc8c7f3ad5abc5c3c7905bd34 Mon Sep 17 00:00:00 2001 From: miminari Date: Thu, 16 Jun 2022 16:13:26 +0900 Subject: [PATCH 08/10] docs / Add comment for spacer e2e test --- test/e2e/specs/editor/blocks/spacer.spec.js | 1 + 1 file changed, 1 insertion(+) diff --git a/test/e2e/specs/editor/blocks/spacer.spec.js b/test/e2e/specs/editor/blocks/spacer.spec.js index 16e2a00368c7bd..32987c3f7632d2 100644 --- a/test/e2e/specs/editor/blocks/spacer.spec.js +++ b/test/e2e/specs/editor/blocks/spacer.spec.js @@ -27,6 +27,7 @@ test.describe( 'Spacer', () => { await page.keyboard.press( 'Enter' ); const resizableHandle = page.locator( + // Because there are no other accessible attributes we can query for the resize handles 'role=document[name="Block: Spacer"i] >> css=.block-library-spacer__resize-container .components-resizable-box__handle' ); const elementPoint = await resizableHandle.boundingBox(); From 733b7946beab2511744976d7364113e35f2af059 Mon Sep 17 00:00:00 2001 From: miminari Date: Thu, 16 Jun 2022 16:19:26 +0900 Subject: [PATCH 09/10] docs / Update comment for spacer e2e test --- test/e2e/specs/editor/blocks/spacer.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/spacer.spec.js b/test/e2e/specs/editor/blocks/spacer.spec.js index 32987c3f7632d2..2792996f36e861 100644 --- a/test/e2e/specs/editor/blocks/spacer.spec.js +++ b/test/e2e/specs/editor/blocks/spacer.spec.js @@ -27,7 +27,7 @@ test.describe( 'Spacer', () => { await page.keyboard.press( 'Enter' ); const resizableHandle = page.locator( - // Because there are no other accessible attributes we can query for the resize handles + // We need to use class name selectors because there are no other accessible attributes that we can query for the resize handles 'role=document[name="Block: Spacer"i] >> css=.block-library-spacer__resize-container .components-resizable-box__handle' ); const elementPoint = await resizableHandle.boundingBox(); From f106d95dc8f0523bd3239ea6489806ef3193350e Mon Sep 17 00:00:00 2001 From: mimi Date: Sat, 18 Jun 2022 16:49:02 +0900 Subject: [PATCH 10/10] Update test/e2e/specs/editor/blocks/spacer.spec.js Co-authored-by: Kai Hao --- test/e2e/specs/editor/blocks/spacer.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/e2e/specs/editor/blocks/spacer.spec.js b/test/e2e/specs/editor/blocks/spacer.spec.js index 2792996f36e861..41e63c2e4e9dec 100644 --- a/test/e2e/specs/editor/blocks/spacer.spec.js +++ b/test/e2e/specs/editor/blocks/spacer.spec.js @@ -27,8 +27,8 @@ test.describe( 'Spacer', () => { await page.keyboard.press( 'Enter' ); const resizableHandle = page.locator( - // We need to use class name selectors because there are no other accessible attributes that we can query for the resize handles - 'role=document[name="Block: Spacer"i] >> css=.block-library-spacer__resize-container .components-resizable-box__handle' + // Use class name selector until we have `data-testid` for the resize handles. + 'role=document[name="Block: Spacer"i] >> css=.components-resizable-box__handle' ); const elementPoint = await resizableHandle.boundingBox(); await page.mouse.move( elementPoint.x, elementPoint.y );