diff --git a/packages/e2e-test-utils-playwright/src/admin/create-new-post.js b/packages/e2e-test-utils-playwright/src/admin/create-new-post.js index ef077e8e935e39..81822e2514a731 100644 --- a/packages/e2e-test-utils-playwright/src/admin/create-new-post.js +++ b/packages/e2e-test-utils-playwright/src/admin/create-new-post.js @@ -30,20 +30,10 @@ export async function createNewPost( { await this.visitAdminPage( 'post-new.php', query ); - // Wait for both iframed and non-iframed canvas and resolve once the - // currently available one is ready. To make this work, we need an inner - // legacy canvas selector that is unavailable directly when the canvas is - // iframed. - await Promise.any( [ - this.page.locator( '.wp-block-post-content' ).waitFor(), - this.page - .frameLocator( '[name=editor-canvas]' ) - .locator( 'body > *' ) - .first() - .waitFor(), - ] ); - - await this.page.evaluate( ( welcomeGuide ) => { + await this.page.waitForFunction( ( welcomeGuide ) => { + if ( ! window?.wp?.data?.dispatch ) { + return false; + } window.wp.data .dispatch( 'core/preferences' ) .set( 'core/edit-post', 'welcomeGuide', welcomeGuide ); @@ -51,5 +41,7 @@ export async function createNewPost( { window.wp.data .dispatch( 'core/preferences' ) .set( 'core/edit-post', 'fullscreenMode', false ); + + return true; }, showWelcomeGuide ); } diff --git a/packages/e2e-test-utils-playwright/src/editor/get-blocks.ts b/packages/e2e-test-utils-playwright/src/editor/get-blocks.ts index f5adb295a00a55..858c9da980fc13 100644 --- a/packages/e2e-test-utils-playwright/src/editor/get-blocks.ts +++ b/packages/e2e-test-utils-playwright/src/editor/get-blocks.ts @@ -19,6 +19,10 @@ type Block = { * @return The blocks. */ export async function getBlocks( this: Editor, { full = false } = {} ) { + await this.page.waitForFunction( + () => window?.wp?.blocks && window?.wp?.data + ); + return await this.page.evaluate( ( [ _full ] ) => { // Remove other unpredictable properties like clientId from blocks for testing purposes. diff --git a/packages/e2e-test-utils-playwright/src/editor/get-edited-post-content.ts b/packages/e2e-test-utils-playwright/src/editor/get-edited-post-content.ts index c294cd7d1b9399..a0f14d70a2e83e 100644 --- a/packages/e2e-test-utils-playwright/src/editor/get-edited-post-content.ts +++ b/packages/e2e-test-utils-playwright/src/editor/get-edited-post-content.ts @@ -11,6 +11,8 @@ import type { Editor } from './index'; * @return Promise resolving with post content markup. */ export async function getEditedPostContent( this: Editor ) { + await this.page.waitForFunction( () => window?.wp?.data ); + return await this.page.evaluate( () => window.wp.data.select( 'core/editor' ).getEditedPostContent() ); diff --git a/packages/e2e-test-utils-playwright/src/editor/index.ts b/packages/e2e-test-utils-playwright/src/editor/index.ts index 395fbb4f98b696..673149d4e69e0c 100644 --- a/packages/e2e-test-utils-playwright/src/editor/index.ts +++ b/packages/e2e-test-utils-playwright/src/editor/index.ts @@ -1,7 +1,12 @@ /** * External dependencies */ -import type { Browser, Page, BrowserContext, Frame } from '@playwright/test'; +import type { + Browser, + Page, + BrowserContext, + FrameLocator, +} from '@playwright/test'; /** * Internal dependencies @@ -19,6 +24,7 @@ import { setContent } from './set-content'; import { showBlockToolbar } from './show-block-toolbar'; import { saveSiteEditorEntities } from './site-editor'; import { setIsFixedToolbar } from './set-is-fixed-toolbar'; +import { switchToLegacyCanvas } from './switch-to-legacy-canvas'; import { transformBlockTo } from './transform-block-to'; type EditorConstructorProps = { @@ -36,8 +42,8 @@ export class Editor { this.browser = this.context.browser()!; } - get canvas(): Frame | Page { - return this.page.frame( 'editor-canvas' ) || this.page; + get canvas(): FrameLocator { + return this.page.frameLocator( '[name="editor-canvas"]' ); } /** @borrows clickBlockOptionsMenuItem as this.clickBlockOptionsMenuItem */ @@ -72,6 +78,9 @@ export class Editor { /** @borrows setIsFixedToolbar as this.setIsFixedToolbar */ setIsFixedToolbar: typeof setIsFixedToolbar = setIsFixedToolbar.bind( this ); + /** @borrows switchToLegacyCanvas as this.switchToLegacyCanvas */ + switchToLegacyCanvas: typeof switchToLegacyCanvas = + switchToLegacyCanvas.bind( this ); /** @borrows transformBlockTo as this.transformBlockTo */ transformBlockTo: typeof transformBlockTo = transformBlockTo.bind( this ); } diff --git a/packages/e2e-test-utils-playwright/src/editor/insert-block.ts b/packages/e2e-test-utils-playwright/src/editor/insert-block.ts index 646bcd1b410a11..ef923cf667d37f 100644 --- a/packages/e2e-test-utils-playwright/src/editor/insert-block.ts +++ b/packages/e2e-test-utils-playwright/src/editor/insert-block.ts @@ -19,6 +19,10 @@ async function insertBlock( this: Editor, blockRepresentation: BlockRepresentation ) { + await this.page.waitForFunction( + () => window?.wp?.blocks && window?.wp?.data + ); + await this.page.evaluate( ( _blockRepresentation ) => { function recursiveCreateBlock( { name, diff --git a/packages/e2e-test-utils-playwright/src/editor/set-content.ts b/packages/e2e-test-utils-playwright/src/editor/set-content.ts index ff64a81db4d6c8..d44d22f74d049d 100644 --- a/packages/e2e-test-utils-playwright/src/editor/set-content.ts +++ b/packages/e2e-test-utils-playwright/src/editor/set-content.ts @@ -10,6 +10,10 @@ import type { Editor } from './index'; * @param html Serialized block HTML. */ async function setContent( this: Editor, html: string ) { + await this.page.waitForFunction( + () => window?.wp?.blocks && window?.wp?.data + ); + await this.page.evaluate( ( _html ) => { const blocks = window.wp.blocks.parse( _html ); diff --git a/packages/e2e-test-utils-playwright/src/editor/set-is-fixed-toolbar.ts b/packages/e2e-test-utils-playwright/src/editor/set-is-fixed-toolbar.ts index 0e642a1de76626..93c2cd14e1ebc5 100644 --- a/packages/e2e-test-utils-playwright/src/editor/set-is-fixed-toolbar.ts +++ b/packages/e2e-test-utils-playwright/src/editor/set-is-fixed-toolbar.ts @@ -10,6 +10,8 @@ import type { Editor } from './index'; * @param isFixed Boolean value true/false for on/off. */ export async function setIsFixedToolbar( this: Editor, isFixed: boolean ) { + await this.page.waitForFunction( () => window?.wp?.data ); + await this.page.evaluate( ( _isFixed ) => { window.wp.data .dispatch( 'core/preferences' ) diff --git a/packages/e2e-test-utils-playwright/src/editor/switch-to-legacy-canvas.ts b/packages/e2e-test-utils-playwright/src/editor/switch-to-legacy-canvas.ts new file mode 100644 index 00000000000000..b7c4c84487dbbf --- /dev/null +++ b/packages/e2e-test-utils-playwright/src/editor/switch-to-legacy-canvas.ts @@ -0,0 +1,20 @@ +/** + * Internal dependencies + */ +import type { Editor } from './index'; + +/** + * Switches to legacy (non-iframed) canvas. + * + * @param this + */ +export async function switchToLegacyCanvas( this: Editor ) { + await this.page.waitForFunction( () => window?.wp?.blocks ); + + await this.page.evaluate( () => { + window.wp.blocks.registerBlockType( 'test/v2', { + apiVersion: '2', + title: 'test', + } ); + } ); +} diff --git a/packages/e2e-test-utils-playwright/src/editor/transform-block-to.ts b/packages/e2e-test-utils-playwright/src/editor/transform-block-to.ts index 9701eb70ec65fb..75102983069d4a 100644 --- a/packages/e2e-test-utils-playwright/src/editor/transform-block-to.ts +++ b/packages/e2e-test-utils-playwright/src/editor/transform-block-to.ts @@ -10,6 +10,10 @@ import type { Editor } from './index'; * @param name Block name. */ export async function transformBlockTo( this: Editor, name: string ) { + await this.page.waitForFunction( + () => window?.wp?.blocks && window?.wp?.data + ); + await this.page.evaluate( ( [ blockName ] ) => { const clientIds = window.wp.data diff --git a/packages/e2e-test-utils-playwright/src/page-utils/drag-files.ts b/packages/e2e-test-utils-playwright/src/page-utils/drag-files.ts index f6378b73e33ecc..fa43fc76d27c33 100644 --- a/packages/e2e-test-utils-playwright/src/page-utils/drag-files.ts +++ b/packages/e2e-test-utils-playwright/src/page-utils/drag-files.ts @@ -54,29 +54,6 @@ async function dragFiles( } ) ); - const dataTransfer = await this.page.evaluateHandle( - async ( _fileObjects ) => { - const dt = new DataTransfer(); - const fileInstances = await Promise.all( - _fileObjects.map( async ( fileObject ) => { - const blob = await fetch( - `data:${ fileObject.mimeType };base64,${ fileObject.base64 }` - ).then( ( res ) => res.blob() ); - return new File( [ blob ], fileObject.name, { - type: fileObject.mimeType ?? undefined, - } ); - } ) - ); - - fileInstances.forEach( ( file ) => { - dt.items.add( file ); - } ); - - return dt; - }, - fileObjects - ); - // CDP doesn't actually support dragging files, this is only a _good enough_ // dummy data so that it will correctly send the relevant events. const dragData = { @@ -159,6 +136,29 @@ async function dragFiles( throw new Error( 'Element not found.' ); } + const dataTransfer = await locator.evaluateHandle( + async ( _node, _fileObjects ) => { + const dt = new DataTransfer(); + const fileInstances = await Promise.all( + _fileObjects.map( async ( fileObject: any ) => { + const blob = await fetch( + `data:${ fileObject.mimeType };base64,${ fileObject.base64 }` + ).then( ( res ) => res.blob() ); + return new File( [ blob ], fileObject.name, { + type: fileObject.mimeType ?? undefined, + } ); + } ) + ); + + fileInstances.forEach( ( file ) => { + dt.items.add( file ); + } ); + + return dt; + }, + fileObjects + ); + await locator.dispatchEvent( 'drop', { dataTransfer } ); await cdpSession.detach(); diff --git a/test/e2e/specs/editor/blocks/buttons.spec.js b/test/e2e/specs/editor/blocks/buttons.spec.js index 04cd358729a113..dcddfca2b5b284 100644 --- a/test/e2e/specs/editor/blocks/buttons.spec.js +++ b/test/e2e/specs/editor/blocks/buttons.spec.js @@ -30,7 +30,9 @@ test.describe( 'Buttons', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '/buttons' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'Content' ); diff --git a/test/e2e/specs/editor/blocks/classic.spec.js b/test/e2e/specs/editor/blocks/classic.spec.js index 30f6051fab29bc..2dcc526851743e 100644 --- a/test/e2e/specs/editor/blocks/classic.spec.js +++ b/test/e2e/specs/editor/blocks/classic.spec.js @@ -18,15 +18,10 @@ test.use( { } ); test.describe( 'Classic', () => { - test.beforeEach( async ( { admin, page } ) => { + test.beforeEach( async ( { admin, editor } ) => { await admin.createNewPost(); // To do: run with iframe. - await page.evaluate( () => { - window.wp.blocks.registerBlockType( 'test/v2', { - apiVersion: '2', - title: 'test', - } ); - } ); + await editor.switchToLegacyCanvas(); } ); test.afterAll( async ( { requestUtils } ) => { @@ -134,12 +129,7 @@ test.describe( 'Classic', () => { await page.unroute( '**' ); // To do: run with iframe. - await page.evaluate( () => { - window.wp.blocks.registerBlockType( 'test/v2', { - apiVersion: '2', - title: 'test', - } ); - } ); + await editor.switchToLegacyCanvas(); const errors = []; page.on( 'pageerror', ( exception ) => { diff --git a/test/e2e/specs/editor/blocks/code.spec.js b/test/e2e/specs/editor/blocks/code.spec.js index c4037d50b7dd51..6abfb15d10b83b 100644 --- a/test/e2e/specs/editor/blocks/code.spec.js +++ b/test/e2e/specs/editor/blocks/code.spec.js @@ -12,7 +12,9 @@ test.describe( 'Code', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '```' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( ' { await expect( warning ).toBeVisible(); await expect( placeholder ).toBeVisible(); - await editor.canvas.click( - 'role=button[name="Switch to editable mode"i]' - ); + await editor.canvas + .locator( 'role=button[name="Switch to editable mode"i]' ) + .click(); const commentTemplate = editor.canvas.locator( 'role=document[name="Block: Comment Template"i]' diff --git a/test/e2e/specs/editor/blocks/gallery.spec.js b/test/e2e/specs/editor/blocks/gallery.spec.js index f950036539c11b..ef693cb8b5bb9e 100644 --- a/test/e2e/specs/editor/blocks/gallery.spec.js +++ b/test/e2e/specs/editor/blocks/gallery.spec.js @@ -51,7 +51,9 @@ test.describe( 'Gallery', () => { plainText: `[gallery ids="${ uploadedMedia.id }"]`, } ); - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await pageUtils.pressKeys( 'primary+v' ); const img = editor.canvas.locator( @@ -204,7 +206,9 @@ test.describe( 'Gallery', () => { } ) => { await admin.createNewPost(); await editor.insertBlock( { name: 'core/gallery' } ); - await editor.canvas.click( 'role=button[name="Media Library"i]' ); + await editor.canvas + .locator( 'role=button[name="Media Library"i]' ) + .click(); const mediaLibrary = page.locator( 'role=dialog[name="Create gallery"i]' diff --git a/test/e2e/specs/editor/blocks/group.spec.js b/test/e2e/specs/editor/blocks/group.spec.js index 2de22245eb5b08..ccf522d8c4d533 100644 --- a/test/e2e/specs/editor/blocks/group.spec.js +++ b/test/e2e/specs/editor/blocks/group.spec.js @@ -29,9 +29,11 @@ test.describe( 'Group', () => { ); // Select the default, selected Group layout from the variation picker. - await editor.canvas.click( - 'role=button[name="Group: Gather blocks in a container."i]' - ); + await editor.canvas + .locator( + 'role=button[name="Group: Gather blocks in a container."i]' + ) + .click(); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); } ); @@ -40,7 +42,9 @@ test.describe( 'Group', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '/group' ); await expect( page.locator( 'role=option[name="Group"i][selected]' ) @@ -48,9 +52,11 @@ test.describe( 'Group', () => { await page.keyboard.press( 'Enter' ); // Select the default, selected Group layout from the variation picker. - await editor.canvas.click( - 'role=button[name="Group: Gather blocks in a container."i]' - ); + await editor.canvas + .locator( + 'role=button[name="Group: Gather blocks in a container."i]' + ) + .click(); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); } ); @@ -60,10 +66,12 @@ test.describe( 'Group', () => { page, } ) => { await editor.insertBlock( { name: 'core/group' } ); - await editor.canvas.click( - 'button[aria-label="Group: Gather blocks in a container."]' - ); - await editor.canvas.click( 'role=button[name="Add block"i]' ); + await editor.canvas + .locator( + 'button[aria-label="Group: Gather blocks in a container."]' + ) + .click(); + await editor.canvas.locator( 'role=button[name="Add block"i]' ).click(); await page.click( 'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]' ); diff --git a/test/e2e/specs/editor/blocks/heading.spec.js b/test/e2e/specs/editor/blocks/heading.spec.js index 4af974d7b4af6f..705bce2c3f2c9a 100644 --- a/test/e2e/specs/editor/blocks/heading.spec.js +++ b/test/e2e/specs/editor/blocks/heading.spec.js @@ -12,7 +12,9 @@ test.describe( 'Heading', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '### 3' ); await expect.poll( editor.getBlocks ).toMatchObject( [ @@ -27,7 +29,9 @@ test.describe( 'Heading', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '4' ); await page.keyboard.press( 'ArrowLeft' ); await page.keyboard.type( '#### ' ); @@ -44,7 +48,9 @@ test.describe( 'Heading', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '## 1. H' ); await expect.poll( editor.getBlocks ).toMatchObject( [ @@ -59,7 +65,9 @@ test.describe( 'Heading', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '## `code`' ); await expect.poll( editor.getBlocks ).toMatchObject( [ @@ -115,7 +123,9 @@ test.describe( 'Heading', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '### Heading' ); await editor.openDocumentSettingsSidebar(); @@ -147,7 +157,9 @@ test.describe( 'Heading', () => { } ); test( 'should correctly apply named colors', async ( { editor, page } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '## Heading' ); await editor.openDocumentSettingsSidebar(); @@ -185,7 +197,9 @@ test.describe( 'Heading', () => { page, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '## Heading' ); // Change text alignment @@ -216,7 +230,9 @@ test.describe( 'Heading', () => { page, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'Paragraph' ); // Change text alignment @@ -247,7 +263,9 @@ test.describe( 'Heading', () => { page, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '## Heading' ); // Change text alignment diff --git a/test/e2e/specs/editor/blocks/html.spec.js b/test/e2e/specs/editor/blocks/html.spec.js index 99a875f0810183..f034da6efe6173 100644 --- a/test/e2e/specs/editor/blocks/html.spec.js +++ b/test/e2e/specs/editor/blocks/html.spec.js @@ -10,7 +10,9 @@ test.describe( 'HTML block', () => { test( 'can be created by typing "/html"', async ( { editor, page } ) => { // Create a Custom HTML block with the slash shortcut. - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .getByRole( 'button', { name: 'Add default block' } ) + .click(); await page.keyboard.type( '/html' ); await expect( page.locator( 'role=option[name="Custom HTML"i][selected]' ) @@ -33,7 +35,9 @@ test.describe( 'HTML block', () => { test( 'should not encode <', async ( { editor, page } ) => { // Create a Custom HTML block with the slash shortcut. - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .getByRole( 'button', { name: 'Add default block' } ) + .click(); await page.keyboard.type( '/html' ); await expect( page.locator( 'role=option[name="Custom HTML"i][selected]' ) @@ -42,7 +46,6 @@ test.describe( 'HTML block', () => { await page.keyboard.type( '1 < 2' ); await editor.publishPost(); await page.reload(); - await page.waitForSelector( '[name="editor-canvas"]' ); await expect( editor.canvas.locator( '[data-type="core/html"] textarea' ) ).toBeVisible(); diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index b538e7598d96bc..db3ff72e3ab6eb 100644 --- a/test/e2e/specs/editor/blocks/image.spec.js +++ b/test/e2e/specs/editor/blocks/image.spec.js @@ -82,9 +82,9 @@ test.describe( 'Image', () => { await page.keyboard.type( '2' ); expect( - await editor.canvas.evaluate( - () => document.activeElement.innerHTML - ) + await editor.canvas + .locator( ':root' ) + .evaluate( () => document.activeElement.innerHTML ) ).toBe( '12' ); } ); @@ -112,9 +112,9 @@ test.describe( 'Image', () => { await page.keyboard.press( 'Enter' ); expect( - await editor.canvas.evaluate( - () => document.activeElement.innerHTML - ) + await editor.canvas + .locator( ':root' ) + .evaluate( () => document.activeElement.innerHTML ) ).toBe( '1
2' ); } ); @@ -166,9 +166,9 @@ test.describe( 'Image', () => { await page.keyboard.press( 'ArrowRight' ); expect( - await editor.canvas.evaluate( - () => document.activeElement.innerHTML - ) + await editor.canvas + .locator( ':root' ) + .evaluate( () => document.activeElement.innerHTML ) ).toBe( 'a' ); } ); @@ -392,7 +392,7 @@ test.describe( 'Image', () => { ); await expect( image ).toHaveAttribute( 'src', new RegExp( filename ) ); - await editor.canvas.focus( '.wp-block-image' ); + await editor.canvas.locator( '.wp-block-image' ).focus(); await pageUtils.pressKeys( 'primary+z' ); // Expect an empty image block (placeholder) rather than one with a @@ -406,13 +406,6 @@ test.describe( 'Image', () => { page, editor, } ) => { - // To do: run with iframe. - await page.evaluate( () => { - window.wp.blocks.registerBlockType( 'test/v2', { - apiVersion: '2', - title: 'test', - } ); - } ); await editor.insertBlock( { name: 'core/image' } ); const imageBlock = editor.canvas.getByRole( 'document', { name: 'Block: Image', diff --git a/test/e2e/specs/editor/blocks/list.spec.js b/test/e2e/specs/editor/blocks/list.spec.js index f4396982bb997f..6716a8fb5eac41 100644 --- a/test/e2e/specs/editor/blocks/list.spec.js +++ b/test/e2e/specs/editor/blocks/list.spec.js @@ -13,7 +13,9 @@ test.describe( 'List (@firefox)', () => { page, } ) => { // Create a block with some text that will trigger a list creation. - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '* A list item' ); // Create a second list item. @@ -38,7 +40,9 @@ test.describe( 'List (@firefox)', () => { pageUtils, } ) => { // Create a list with the slash block shortcut. - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'test' ); await pageUtils.pressKeys( 'ArrowLeft', { times: 4 } ); await page.keyboard.type( '* ' ); @@ -56,7 +60,9 @@ test.describe( 'List (@firefox)', () => { page, } ) => { // Create a block with some text that will trigger a list creation. - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '1) A list item' ); await expect.poll( editor.getEditedPostContent ).toBe( @@ -73,7 +79,9 @@ test.describe( 'List (@firefox)', () => { page, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '1. ' ); await pageUtils.pressKeys( 'primary+z' ); @@ -88,7 +96,9 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '* ' ); await page.keyboard.press( 'Backspace' ); @@ -103,7 +113,9 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '* ' ); await expect( editor.canvas.locator( '[data-type="core/list"]' ) @@ -121,7 +133,9 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '* ' ); await editor.showBlockToolbar(); await page.keyboard.press( 'Backspace' ); @@ -137,7 +151,9 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.evaluate( () => delete window.requestIdleCallback ); await page.keyboard.type( '* ' ); await expect( @@ -156,7 +172,9 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '* ' ); await page.keyboard.press( 'Escape' ); @@ -171,7 +189,9 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '* a' ); await page.keyboard.press( 'Backspace' ); await page.keyboard.press( 'Backspace' ); @@ -183,7 +203,9 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '* ' ); await expect( editor.canvas.locator( '[data-type="core/list"]' ) @@ -200,7 +222,9 @@ test.describe( 'List (@firefox)', () => { test( 'can be created by typing "/list"', async ( { editor, page } ) => { // Create a list with the slash block shortcut. - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '/list' ); await expect( page.locator( 'role=option[name="List"i][selected]' ) @@ -221,7 +245,9 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'test' ); await editor.transformBlockTo( 'core/list' ); @@ -238,12 +264,16 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'one' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'two' ); await page.keyboard.down( 'Shift' ); - await editor.canvas.click( '[data-type="core/paragraph"] >> nth=0' ); + await editor.canvas + .locator( '[data-type="core/paragraph"] >> nth=0' ) + .click(); await page.keyboard.up( 'Shift' ); await editor.transformBlockTo( 'core/list' ); @@ -265,7 +295,9 @@ test.describe( 'List (@firefox)', () => { page, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'one' ); await pageUtils.pressKeys( 'shift+Enter' ); await page.keyboard.type( 'two' ); @@ -289,14 +321,18 @@ test.describe( 'List (@firefox)', () => { page, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'one' ); await pageUtils.pressKeys( 'shift+Enter' ); await page.keyboard.type( '...' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'two' ); await page.keyboard.down( 'Shift' ); - await editor.canvas.click( '[data-type="core/paragraph"] >> nth=0' ); + await editor.canvas + .locator( '[data-type="core/paragraph"] >> nth=0' ) + .click(); await page.keyboard.up( 'Shift' ); await editor.transformBlockTo( 'core/list' ); @@ -559,7 +595,9 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '1. one' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'two' ); @@ -901,7 +939,9 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '* 1' ); // Should be at level 0. await page.keyboard.press( 'Enter' ); @@ -1015,7 +1055,9 @@ test.describe( 'List (@firefox)', () => { page, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '* 1' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( ' a' ); @@ -1046,7 +1088,9 @@ test.describe( 'List (@firefox)', () => { page, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '* 1' ); await page.keyboard.press( 'Enter' ); @@ -1069,7 +1113,9 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); // Tests the shortcut with a non breaking space. await page.keyboard.type( '*\u00a0' ); @@ -1085,7 +1131,9 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); // Tests the shortcut with a non breaking space. await page.keyboard.type( '* 1' ); @@ -1149,7 +1197,9 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '* 1' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( '2' ); @@ -1174,7 +1224,9 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '* 1' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( '2' ); @@ -1204,7 +1256,9 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '1. a' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'b' ); @@ -1261,7 +1315,9 @@ test.describe( 'List (@firefox)', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '* a' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'b' ); @@ -1304,7 +1360,9 @@ test.describe( 'List (@firefox)', () => { } ); test( 'can be exited to selected paragraph', async ( { editor, page } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '* ' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( '1' ); diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index 42ecb29aa6650f..1ddd4af8ab2e13 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -383,12 +383,12 @@ class ColorControl { await customLink.click(); // Submenu elements. - const submenuLink = this.editor.canvas - .locator( 'a' ) - .filter( { hasText: 'Submenu Link' } ); const submenuWrapper = this.editor.canvas .getByRole( 'document', { name: 'Block: Custom Link' } ) - .filter( { has: submenuLink } ); + .filter( { hasText: 'Submenu Link' } ); + const submenuLink = submenuWrapper + .locator( 'a' ) + .filter( { hasText: 'Submenu Link' } ); // Submenu link color. await expect( submenuLink ).toHaveCSS( 'color', submenuTextColor ); diff --git a/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js b/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js index 1c745d7a0e57ba..7e761f1861856f 100644 --- a/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js @@ -27,7 +27,7 @@ test.describe( 'Navigation block - Frontend interactivity', () => { postId: 'emptytheme//header', postType: 'wp_template_part', } ); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); await requestUtils.createNavigationMenu( { title: 'Hidden menu', content: ` @@ -88,7 +88,7 @@ test.describe( 'Navigation block - Frontend interactivity', () => { postId: 'emptytheme//header', postType: 'wp_template_part', } ); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); await requestUtils.createNavigationMenu( { title: 'Hidden menu', content: ` @@ -203,7 +203,7 @@ test.describe( 'Navigation block - Frontend interactivity', () => { postId: 'emptytheme//header', postType: 'wp_template_part', } ); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); await requestUtils.createNavigationMenu( { title: 'Hidden menu', content: ` @@ -268,7 +268,7 @@ test.describe( 'Navigation block - Frontend interactivity', () => { postId: 'emptytheme//header', postType: 'wp_template_part', } ); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); await requestUtils.createNavigationMenu( { title: 'Page list menu', content: ` diff --git a/test/e2e/specs/editor/blocks/paragraph.spec.js b/test/e2e/specs/editor/blocks/paragraph.spec.js index fcc15890a82492..3cf3654870a351 100644 --- a/test/e2e/specs/editor/blocks/paragraph.spec.js +++ b/test/e2e/specs/editor/blocks/paragraph.spec.js @@ -28,9 +28,11 @@ test.describe( 'Paragraph', () => { } ); await page.keyboard.type( '1' ); - const firstBlockTagName = await editor.canvas.evaluate( () => { - return document.querySelector( '[data-block]' ).tagName; - } ); + const firstBlockTagName = await editor.canvas + .locator( ':root' ) + .evaluate( () => { + return document.querySelector( '[data-block]' ).tagName; + } ); // The outer element should be a paragraph. Blocks should never have any // additional div wrappers so the markup remains simple and easy to @@ -61,14 +63,7 @@ test.describe( 'Paragraph', () => { editor, pageUtils, draggingUtils, - page, } ) => { - await page.evaluate( () => { - window.wp.blocks.registerBlockType( 'test/v2', { - apiVersion: '2', - title: 'test', - } ); - } ); await editor.insertBlock( { name: 'core/paragraph' } ); const testImageName = '10x10_e2e_test_image_z9T8jK.png'; @@ -112,7 +107,7 @@ test.describe( 'Paragraph', () => { attributes: { content: 'My Heading' }, } ); await editor.insertBlock( { name: 'core/paragraph' } ); - await editor.canvas.focus( 'text=My Heading' ); + await editor.canvas.locator( 'text=My Heading' ).focus(); await editor.showBlockToolbar(); const dragHandle = page.locator( diff --git a/test/e2e/specs/editor/blocks/pullquote.spec.js b/test/e2e/specs/editor/blocks/pullquote.spec.js index f2a6698f5065ff..33f833ca536788 100644 --- a/test/e2e/specs/editor/blocks/pullquote.spec.js +++ b/test/e2e/specs/editor/blocks/pullquote.spec.js @@ -12,7 +12,9 @@ test.describe( 'Quote', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'test' ); await editor.transformBlockTo( 'core/quote' ); diff --git a/test/e2e/specs/editor/blocks/quote.spec.js b/test/e2e/specs/editor/blocks/quote.spec.js index 13b7ee341ede72..d25dedd4a0a397 100644 --- a/test/e2e/specs/editor/blocks/quote.spec.js +++ b/test/e2e/specs/editor/blocks/quote.spec.js @@ -33,7 +33,9 @@ test.describe( 'Quote', () => { page, } ) => { // Create a block with some text that will trigger a paragraph creation. - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '> A quote' ); // Create a second paragraph. await page.keyboard.press( 'Enter' ); @@ -56,7 +58,9 @@ test.describe( 'Quote', () => { page, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'test' ); await pageUtils.pressKeys( 'ArrowLeft', { times: 'test'.length } ); await page.keyboard.type( '> ' ); @@ -71,7 +75,9 @@ test.describe( 'Quote', () => { test( 'can be created by typing "/quote"', async ( { editor, page } ) => { // Create a list with the slash block shortcut. - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '/quote' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'Iā€™m a quote' ); @@ -88,7 +94,9 @@ test.describe( 'Quote', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'test' ); await editor.transformBlockTo( 'core/quote' ); expect( await editor.getEditedPostContent() ).toBe( @@ -104,14 +112,16 @@ test.describe( 'Quote', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'one' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'two' ); await page.keyboard.down( 'Shift' ); - await editor.canvas.click( - 'role=document[name="Block: Paragraph"i] >> text=one' - ); + await editor.canvas + .locator( 'role=document[name="Block: Paragraph"i] >> text=one' ) + .click(); await page.keyboard.up( 'Shift' ); await editor.transformBlockTo( 'core/quote' ); expect( await editor.getEditedPostContent() ).toBe( diff --git a/test/e2e/specs/editor/blocks/separator.spec.js b/test/e2e/specs/editor/blocks/separator.spec.js index a2e088e14c3983..70c61535e71bf7 100644 --- a/test/e2e/specs/editor/blocks/separator.spec.js +++ b/test/e2e/specs/editor/blocks/separator.spec.js @@ -12,7 +12,9 @@ test.describe( 'Separator', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '---' ); await page.keyboard.press( 'Enter' ); diff --git a/test/e2e/specs/editor/blocks/spacer.spec.js b/test/e2e/specs/editor/blocks/spacer.spec.js index 77e978a0df3027..f089402514623c 100644 --- a/test/e2e/specs/editor/blocks/spacer.spec.js +++ b/test/e2e/specs/editor/blocks/spacer.spec.js @@ -10,7 +10,9 @@ test.describe( 'Spacer', () => { test( 'can be created by typing "/spacer"', async ( { editor, page } ) => { // Create a spacer with the slash block shortcut. - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '/spacer' ); await page.keyboard.press( 'Enter' ); @@ -22,7 +24,9 @@ test.describe( 'Spacer', () => { editor, } ) => { // Create a spacer with the slash block shortcut. - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '/spacer' ); await page.keyboard.press( 'Enter' ); diff --git a/test/e2e/specs/editor/blocks/table.spec.js b/test/e2e/specs/editor/blocks/table.spec.js index 689989f9022a3d..1e6dfdcd76e188 100644 --- a/test/e2e/specs/editor/blocks/table.spec.js +++ b/test/e2e/specs/editor/blocks/table.spec.js @@ -39,7 +39,9 @@ test.describe( 'Table', () => { await page.keyboard.type( '10' ); // Create the table. - await editor.canvas.click( 'role=button[name="Create Table"i]' ); + await editor.canvas + .locator( 'role=button[name="Create Table"i]' ) + .click(); // Expect the post content to have a correctly sized table. expect( await editor.getEditedPostContent() ).toMatchSnapshot(); @@ -49,12 +51,14 @@ test.describe( 'Table', () => { await editor.insertBlock( { name: 'core/table' } ); // Create the table. - await editor.canvas.click( 'role=button[name="Create Table"i]' ); + await editor.canvas + .locator( 'role=button[name="Create Table"i]' ) + .click(); // Click the first cell and add some text. - await editor.canvas.click( - 'role=textbox[name="Body cell text"i] >> nth=0' - ); + await editor.canvas + .locator( 'role=textbox[name="Body cell text"i] >> nth=0' ) + .click(); await page.keyboard.type( 'This' ); // Navigate to the next cell and add some text. @@ -92,7 +96,9 @@ test.describe( 'Table', () => { await expect( footerSwitch ).toBeHidden(); // // Create the table. - await editor.canvas.click( 'role=button[name="Create Table"i]' ); + await editor.canvas + .locator( 'role=button[name="Create Table"i]' ) + .click(); // Expect the header and footer switches to be present now that the table has been created. await page.click( @@ -105,19 +111,25 @@ test.describe( 'Table', () => { await headerSwitch.check(); await footerSwitch.check(); - await editor.canvas.click( - 'role=rowgroup >> nth=0 >> role=textbox[name="Header cell text"i] >> nth=0' - ); + await editor.canvas + .locator( + 'role=rowgroup >> nth=0 >> role=textbox[name="Header cell text"i] >> nth=0' + ) + .click(); await page.keyboard.type( 'header' ); - await editor.canvas.click( - 'role=rowgroup >> nth=1 >> role=textbox[name="Body cell text"i] >> nth=0' - ); + await editor.canvas + .locator( + 'role=rowgroup >> nth=1 >> role=textbox[name="Body cell text"i] >> nth=0' + ) + .click(); await page.keyboard.type( 'body' ); - await editor.canvas.click( - 'role=rowgroup >> nth=2 >> role=textbox[name="Footer cell text"i] >> nth=0' - ); + await editor.canvas + .locator( + 'role=rowgroup >> nth=2 >> role=textbox[name="Footer cell text"i] >> nth=0' + ) + .click(); await page.keyboard.type( 'footer' ); // Expect the table to have a header, body and footer with written content. @@ -139,7 +151,9 @@ test.describe( 'Table', () => { await editor.openDocumentSettingsSidebar(); // Create the table. - await editor.canvas.click( 'role=button[name="Create Table"i]' ); + await editor.canvas + .locator( 'role=button[name="Create Table"i]' ) + .click(); // Toggle on the switches and add some content. await page.click( @@ -147,9 +161,9 @@ test.describe( 'Table', () => { ); await page.locator( 'role=checkbox[name="Header section"i]' ).check(); await page.locator( 'role=checkbox[name="Footer section"i]' ).check(); - await editor.canvas.click( - 'role=textbox[name="Body cell text"i] >> nth=0' - ); + await editor.canvas + .locator( 'role=textbox[name="Body cell text"i] >> nth=0' ) + .click(); // Add a column. await editor.clickBlockToolbarButton( 'Edit table' ); @@ -158,9 +172,9 @@ test.describe( 'Table', () => { // Expect the table to have 3 columns across the header, body and footer. expect( await editor.getEditedPostContent() ).toMatchSnapshot(); - await editor.canvas.click( - 'role=textbox[name="Body cell text"i] >> nth=0' - ); + await editor.canvas + .locator( 'role=textbox[name="Body cell text"i] >> nth=0' ) + .click(); // Delete a column. await editor.clickBlockToolbarButton( 'Edit table' ); @@ -173,12 +187,16 @@ test.describe( 'Table', () => { test( 'allows columns to be aligned', async ( { editor, page } ) => { await editor.insertBlock( { name: 'core/table' } ); - await editor.canvas.click( 'role=spinbutton[name="Column count"i]' ); + await editor.canvas + .locator( 'role=spinbutton[name="Column count"i]' ) + .click(); await page.keyboard.press( 'Backspace' ); await page.keyboard.type( '4' ); // Create the table. - await editor.canvas.click( 'role=button[name="Create Table"i]' ); + await editor.canvas + .locator( 'role=button[name="Create Table"i]' ) + .click(); // Click the first cell and add some text. Don't align. const cells = editor.canvas.locator( @@ -218,7 +236,9 @@ test.describe( 'Table', () => { await editor.openDocumentSettingsSidebar(); // Create the table. - await editor.canvas.click( 'role=button[name="Create Table"i]' ); + await editor.canvas + .locator( 'role=button[name="Create Table"i]' ) + .click(); // Enable fixed width as it exacerbates the amount of empty space around the RichText. await page.click( @@ -229,9 +249,9 @@ test.describe( 'Table', () => { .check(); // Add multiple new lines to the first cell to make it taller. - await editor.canvas.click( - 'role=textbox[name="Body cell text"i] >> nth=0' - ); + await editor.canvas + .locator( 'role=textbox[name="Body cell text"i] >> nth=0' ) + .click(); await page.keyboard.type( '\n\n\n\n' ); // Get the bounding client rect for the second cell. @@ -251,12 +271,14 @@ test.describe( 'Table', () => { await editor.insertBlock( { name: 'core/table' } ); // Create the table. - await editor.canvas.click( 'role=button[name="Create Table"i]' ); + await editor.canvas + .locator( 'role=button[name="Create Table"i]' ) + .click(); // Click the first cell and add some text. - await editor.canvas.click( - 'role=document[name="Block: Table"i] >> figcaption' - ); + await editor.canvas + .locator( 'role=document[name="Block: Table"i] >> figcaption' ) + .click(); await page.keyboard.type( 'Caption!' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); } ); @@ -264,7 +286,9 @@ test.describe( 'Table', () => { test( 'up and down arrow navigation', async ( { editor, page } ) => { await editor.insertBlock( { name: 'core/table' } ); // Create the table. - await editor.canvas.click( 'role=button[name="Create Table"i]' ); + await editor.canvas + .locator( 'role=button[name="Create Table"i]' ) + .click(); await page.keyboard.type( '1' ); await page.keyboard.press( 'ArrowDown' ); await page.keyboard.type( '2' ); @@ -280,7 +304,9 @@ test.describe( 'Table', () => { await editor.insertBlock( { name: 'core/table' } ); // Create the table. - await editor.canvas.click( 'role=button[name="Create Table"i]' ); + await editor.canvas + .locator( 'role=button[name="Create Table"i]' ) + .click(); // Focus should be in first td. await expect( diff --git a/test/e2e/specs/editor/plugins/block-variations.spec.js b/test/e2e/specs/editor/plugins/block-variations.spec.js index 0b445aee451c66..9f12c987efd39b 100644 --- a/test/e2e/specs/editor/plugins/block-variations.spec.js +++ b/test/e2e/specs/editor/plugins/block-variations.spec.js @@ -48,7 +48,9 @@ test.describe( 'Block variations', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '/Large Quote' ); await page.keyboard.press( 'Enter' ); @@ -82,7 +84,9 @@ test.describe( 'Block variations', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '/Heading' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( '/Success Message' ); @@ -97,7 +101,9 @@ test.describe( 'Block variations', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '/Columns' ); await page.keyboard.press( 'Enter' ); @@ -120,7 +126,9 @@ test.describe( 'Block variations', () => { pageUtils, } ) => { await editor.openDocumentSettingsSidebar(); - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '/Large Quote' ); await page.keyboard.press( 'Enter' ); @@ -155,7 +163,9 @@ test.describe( 'Block variations', () => { pageUtils, } ) => { await editor.openDocumentSettingsSidebar(); - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '/Heading' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( '/Success Message' ); @@ -189,7 +199,9 @@ test.describe( 'Block variations', () => { pageUtils, } ) => { await editor.openDocumentSettingsSidebar(); - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '/Heading' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( '/Warning Message' ); diff --git a/test/e2e/specs/editor/plugins/custom-post-types.spec.js b/test/e2e/specs/editor/plugins/custom-post-types.spec.js index 1cceddbf04ad12..17a497f26cee02 100644 --- a/test/e2e/specs/editor/plugins/custom-post-types.spec.js +++ b/test/e2e/specs/editor/plugins/custom-post-types.spec.js @@ -20,7 +20,9 @@ test.describe( 'Test Custom Post Types', () => { page, } ) => { await admin.createNewPost( { postType: 'hierar-no-title' } ); - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'Parent Post' ); await editor.publishPost(); @@ -53,7 +55,9 @@ test.describe( 'Test Custom Post Types', () => { await page.getByRole( 'listbox' ).getByRole( 'option' ).first().click(); const parentPage = await parentPageLocator.inputValue(); - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'Child Post' ); await editor.publishPost(); await page.reload(); @@ -68,7 +72,9 @@ test.describe( 'Test Custom Post Types', () => { page, } ) => { await admin.createNewPost( { postType: 'leg_block_in_tpl' } ); - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'Hello there' ); await expect.poll( editor.getBlocks ).toMatchObject( [ diff --git a/test/e2e/specs/editor/plugins/format-api.spec.js b/test/e2e/specs/editor/plugins/format-api.spec.js index f98d8292ea8f6f..1e631615313bd1 100644 --- a/test/e2e/specs/editor/plugins/format-api.spec.js +++ b/test/e2e/specs/editor/plugins/format-api.spec.js @@ -21,7 +21,9 @@ test.describe( 'Using Format API', () => { page, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'First paragraph' ); await pageUtils.pressKeys( 'shiftAlt+ArrowLeft' ); await editor.clickBlockToolbarButton( 'More' ); diff --git a/test/e2e/specs/editor/plugins/hooks-api.spec.js b/test/e2e/specs/editor/plugins/hooks-api.spec.js index b3b5ed68f66f11..95bc5bf8bfd2c0 100644 --- a/test/e2e/specs/editor/plugins/hooks-api.spec.js +++ b/test/e2e/specs/editor/plugins/hooks-api.spec.js @@ -22,7 +22,9 @@ test.describe( 'Using Hooks API', () => { editor, } ) => { await editor.openDocumentSettingsSidebar(); - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'First paragraph' ); await page.click( `role=region[name="Editor settings"i] >> role=tab[name="Settings"i]` @@ -37,7 +39,9 @@ test.describe( 'Using Hooks API', () => { page, } ) => { await editor.openDocumentSettingsSidebar(); - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'First paragraph' ); const paragraphBlock = editor.canvas.locator( diff --git a/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js b/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js index cd6f440d2db0ed..c0627121f16497 100644 --- a/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js +++ b/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js @@ -107,7 +107,9 @@ test.describe( 'Allowed Blocks Setting on InnerBlocks', () => { editor, page, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '/Allowed Blocks Dynamic' ); await page.keyboard.press( 'Enter' ); diff --git a/test/e2e/specs/editor/plugins/nonce.spec.js b/test/e2e/specs/editor/plugins/nonce.spec.js index a05f3618b36417..0ffe0c5efb8139 100644 --- a/test/e2e/specs/editor/plugins/nonce.spec.js +++ b/test/e2e/specs/editor/plugins/nonce.spec.js @@ -12,12 +12,13 @@ test.describe( 'Nonce', () => { page, admin, requestUtils, + editor, } ) => { await admin.createNewPost(); + await expect( + editor.canvas.getByRole( 'textbox', { name: 'Add title' } ) + ).toBeFocused(); await page.keyboard.press( 'Enter' ); - // Wait until the network is idle. - // eslint-disable-next-line playwright/no-networkidle - await page.waitForLoadState( 'networkidle' ); await page.keyboard.type( 'test' ); /** 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 c743d08d8ae681..9b2abddb0dd0e2 100644 --- a/test/e2e/specs/editor/plugins/post-type-templates.spec.js +++ b/test/e2e/specs/editor/plugins/post-type-templates.spec.js @@ -35,7 +35,9 @@ test.describe( 'Post type templates', () => { // Remove a block from the template to verify that it's not // re-added after saving and reloading the editor. - await editor.canvas.focus( 'role=textbox[name="Add title"i]' ); + await editor.canvas + .locator( 'role=textbox[name="Add title"i]' ) + .focus(); await page.keyboard.press( 'ArrowDown' ); await page.keyboard.press( 'Backspace' ); await page.click( 'role=button[name="Save draft"i]' ); @@ -64,10 +66,9 @@ test.describe( 'Post type templates', () => { } ) => { // Remove all blocks from the template to verify that they're not // re-added after saving and reloading the editor. - await editor.canvas.fill( - 'role=textbox[name="Add title"i]', - 'My Empty Book' - ); + await editor.canvas + .locator( 'role=textbox[name="Add title"i]' ) + .fill( 'My Empty Book' ); await page.keyboard.press( 'ArrowDown' ); await pageUtils.pressKeys( 'primary+A' ); await page.keyboard.press( 'Backspace' ); @@ -125,11 +126,12 @@ test.describe( 'Post type templates', () => { // Remove the default block template to verify that it's not // re-added after saving and reloading the editor. - await editor.canvas.fill( - 'role=textbox[name="Add title"i]', - 'My Image Format' - ); - await editor.canvas.focus( 'role=document[name="Block: Image"i]' ); + await editor.canvas + .locator( 'role=textbox[name="Add title"i]' ) + .fill( 'My Image Format' ); + await editor.canvas + .locator( 'role=document[name="Block: Image"i]' ) + .focus(); await page.keyboard.press( 'Backspace' ); await page.click( 'role=button[name="Save draft"i]' ); await expect( diff --git a/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js b/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js index c5eafdafe918db..710e06b35e124f 100644 --- a/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js +++ b/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js @@ -20,7 +20,7 @@ test.describe( 'WP Editor Meta Boxes', () => { await admin.createNewPost(); // Add title to enable valid non-empty post save. - await editor.canvas + await page .locator( 'role=textbox[name="Add title"i]' ) .type( 'Hello Meta' ); diff --git a/test/e2e/specs/editor/various/a11y-region-navigation.spec.js b/test/e2e/specs/editor/various/a11y-region-navigation.spec.js index 2c28ba311d8c71..d8dda0cabdf843 100644 --- a/test/e2e/specs/editor/various/a11y-region-navigation.spec.js +++ b/test/e2e/specs/editor/various/a11y-region-navigation.spec.js @@ -22,6 +22,14 @@ test.describe( 'Region navigation (@firefox, @webkit)', () => { attributes: { content: 'Dummy text' }, } ); + const dummyParagraph = editor.canvas + .getByRole( 'document', { + name: 'Block: Paragraph', + } ) + .filter( { hasText: 'Dummy text' } ); + + await expect( dummyParagraph ).toBeFocused(); + // Navigate to first region and check that we made it. Must navigate forward 4 times as initial focus is placed in post title field. await page.keyboard.press( 'Control+`' ); await page.keyboard.press( 'Control+`' ); diff --git a/test/e2e/specs/editor/various/a11y.spec.js b/test/e2e/specs/editor/various/a11y.spec.js index 8b819d3866b6ca..0a5e421debedb7 100644 --- a/test/e2e/specs/editor/various/a11y.spec.js +++ b/test/e2e/specs/editor/various/a11y.spec.js @@ -23,15 +23,11 @@ test.describe( 'a11y (@firefox, @webkit)', () => { editor, } ) => { // To do: run with iframe. - await page.evaluate( () => { - window.wp.blocks.registerBlockType( 'test/v2', { - apiVersion: '2', - title: 'test', - } ); - } ); + await editor.switchToLegacyCanvas(); + // On a new post, initial focus is set on the Post title. await expect( - editor.canvas.locator( 'role=textbox[name=/Add title/i]' ) + page.locator( 'role=textbox[name=/Add title/i]' ) ).toBeFocused(); // Navigate to the 'Editor settings' region. await pageUtils.pressKeys( 'ctrl+`' ); @@ -54,14 +50,11 @@ test.describe( 'a11y (@firefox, @webkit)', () => { test( 'should constrain tabbing within a modal', async ( { page, pageUtils, + editor, } ) => { // To do: run with iframe. - await page.evaluate( () => { - window.wp.blocks.registerBlockType( 'test/v2', { - apiVersion: '2', - title: 'test', - } ); - } ); + await editor.switchToLegacyCanvas(); + // Open keyboard shortcuts modal. await pageUtils.pressKeys( 'access+h' ); diff --git a/test/e2e/specs/editor/various/adding-inline-tokens.spec.js b/test/e2e/specs/editor/various/adding-inline-tokens.spec.js index 0facffd9097e87..15f9d9ea877320 100644 --- a/test/e2e/specs/editor/various/adding-inline-tokens.spec.js +++ b/test/e2e/specs/editor/various/adding-inline-tokens.spec.js @@ -22,7 +22,9 @@ test.describe( 'adding inline tokens', () => { pageUtils, } ) => { // Create a paragraph. - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'a ' ); diff --git a/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js b/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js index 3cfc838fcadf25..6e1e0edfa3aba4 100644 --- a/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js +++ b/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js @@ -100,21 +100,25 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => { `; } - await editor.canvas.click( - 'role=button[name="Add default block"i]' - ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( testData.triggerString ); await expect( page.locator( `role=option[name="${ testData.optionText }"i]` ) ).toBeVisible(); - const ariaOwns = await editor.canvas.evaluate( () => { - return document.activeElement.getAttribute( 'aria-owns' ); - } ); - const ariaActiveDescendant = await editor.canvas.evaluate( () => { - return document.activeElement.getAttribute( - 'aria-activedescendant' - ); - } ); + const ariaOwns = await editor.canvas + .locator( ':root' ) + .evaluate( () => { + return document.activeElement.getAttribute( 'aria-owns' ); + } ); + const ariaActiveDescendant = await editor.canvas + .locator( ':root' ) + .evaluate( () => { + return document.activeElement.getAttribute( + 'aria-activedescendant' + ); + } ); // Ensure `aria-owns` is part of the same document and ensure the // selected option is equal to the active descendant. await expect( @@ -148,9 +152,9 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => { `; } - await editor.canvas.click( - 'role=button[name="Add default block"i]' - ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'Stuck in the middle with you.' ); await pageUtils.pressKeys( 'ArrowLeft', { times: 'you.'.length } ); await page.keyboard.type( testData.triggerString ); @@ -188,9 +192,9 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => { `; } - await editor.canvas.click( - 'role=button[name="Add default block"i]' - ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( testData.firstTriggerString ); await expect( page.locator( @@ -230,9 +234,9 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => { `; } - await editor.canvas.click( - 'role=button[name="Add default block"i]' - ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( testData.triggerString ); await expect( page.locator( `role=option[name="${ testData.optionText }"i]` ) @@ -269,9 +273,9 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => { `; } - await editor.canvas.click( - 'role=button[name="Add default block"i]' - ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( testData.triggerString ); await expect( page.locator( `role=option[name="${ testData.optionText }"i]` ) @@ -306,9 +310,9 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => { `; } - await editor.canvas.click( - 'role=button[name="Add default block"i]' - ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( testData.triggerString ); await expect( page.locator( `role=option[name="${ testData.optionText }"i]` ) @@ -327,9 +331,9 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => { page, editor, } ) => { - await editor.canvas.click( - 'role=button[name="Add default block"i]' - ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); // The 'Grapes' option is disabled in our test plugin, so it should not insert the grapes emoji await page.keyboard.type( 'Sorry, we are all out of ~g' ); await expect( @@ -395,9 +399,9 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => { `; } - await editor.canvas.click( - 'role=button[name="Add default block"i]' - ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); for ( let i = 0; i < 4; i++ ) { await page.keyboard.type( testData.triggerString ); @@ -423,7 +427,9 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => { page, editor, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '@fr' ); await expect( page.locator( 'role=option', { hasText: 'Frodo Baggins' } ) @@ -444,7 +450,9 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => { page, editor, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '@fr' ); await expect( page.locator( 'role=option', { hasText: 'Frodo Baggins' } ) @@ -460,7 +468,9 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => { editor, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '@' ); await pageUtils.pressKeys( 'primary+b' ); await page.keyboard.type( 'f' ); @@ -470,7 +480,9 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => { page.locator( 'role=option', { hasText: 'Frodo Baggins' } ) ).toBeVisible(); // Use the strong tag to move the selection by mouse within the mention. - await editor.canvas.click( '[data-type="core/paragraph"] strong' ); + await editor.canvas + .locator( '[data-type="core/paragraph"] strong' ) + .click(); await expect( page.locator( 'role=option', { hasText: 'Frodo Baggins' } ) ).toBeHidden(); @@ -480,7 +492,9 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => { page, editor, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '/' ); await expect( page.locator( `role=option[name="Image"i]` ) diff --git a/test/e2e/specs/editor/various/block-hierarchy-navigation.spec.js b/test/e2e/specs/editor/various/block-hierarchy-navigation.spec.js index 4dc49bc0f7510a..f0bfe5bff203fb 100644 --- a/test/e2e/specs/editor/various/block-hierarchy-navigation.spec.js +++ b/test/e2e/specs/editor/various/block-hierarchy-navigation.spec.js @@ -44,9 +44,9 @@ test.describe( 'Navigating the block hierarchy', () => { } ) => { await editor.openDocumentSettingsSidebar(); await editor.insertBlock( { name: 'core/columns' } ); - await editor.canvas.click( - 'role=button[name="Two columns; equal split"i]' - ); + await editor.canvas + .locator( 'role=button[name="Two columns; equal split"i]' ) + .click(); // Open the block inserter. await page.keyboard.press( 'ArrowDown' ); @@ -99,9 +99,9 @@ test.describe( 'Navigating the block hierarchy', () => { } ) => { await editor.openDocumentSettingsSidebar(); await editor.insertBlock( { name: 'core/columns' } ); - await editor.canvas.click( - 'role=button[name="Two columns; equal split"i]' - ); + await editor.canvas + .locator( 'role=button[name="Two columns; equal split"i]' ) + .click(); // Open the block inserter. await page.keyboard.press( 'ArrowDown' ); @@ -155,7 +155,9 @@ test.describe( 'Navigating the block hierarchy', () => { page, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'You say goodbye' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( '## Hello, hello' ); @@ -191,9 +193,11 @@ test.describe( 'Navigating the block hierarchy', () => { pageUtils, } ) => { await editor.insertBlock( { name: 'core/group' } ); - await editor.canvas.click( - 'role=button[name="Group: Gather blocks in a container."i]' - ); + await editor.canvas + .locator( + 'role=button[name="Group: Gather blocks in a container."i]' + ) + .click(); // Open the block inserter. await page.keyboard.press( 'ArrowDown' ); @@ -225,7 +229,9 @@ test.describe( 'Navigating the block hierarchy', () => { ] ); // Deselect the blocks. - await editor.canvas.click( 'role=textbox[name="Add title"i]' ); + await editor.canvas + .locator( 'role=textbox[name="Add title"i]' ) + .click(); // Open list view and return to the first block. await pageUtils.pressKeys( 'access+o' ); diff --git a/test/e2e/specs/editor/various/block-locking.spec.js b/test/e2e/specs/editor/various/block-locking.spec.js index 67a7f0357bc2a7..b40e7a4b7448a8 100644 --- a/test/e2e/specs/editor/various/block-locking.spec.js +++ b/test/e2e/specs/editor/various/block-locking.spec.js @@ -9,7 +9,9 @@ test.describe( 'Block Locking', () => { } ); test( 'can prevent removal', async ( { editor, page } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'Some paragraph' ); await editor.clickBlockOptionsMenuItem( 'Lock' ); @@ -23,7 +25,9 @@ test.describe( 'Block Locking', () => { } ); test( 'can disable movement', async ( { editor, page } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'First paragraph' ); await page.keyboard.type( 'Enter' ); @@ -47,7 +51,9 @@ test.describe( 'Block Locking', () => { } ); test( 'can lock everything', async ( { editor, page } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'Some paragraph' ); await editor.clickBlockOptionsMenuItem( 'Lock' ); @@ -62,7 +68,9 @@ test.describe( 'Block Locking', () => { } ); test( 'can unlock from toolbar', async ( { editor, page } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'Some paragraph' ); await editor.clickBlockOptionsMenuItem( 'Lock' ); diff --git a/test/e2e/specs/editor/various/block-mover.spec.js b/test/e2e/specs/editor/various/block-mover.spec.js index 4ed90191f25585..5c3b04a0697743 100644 --- a/test/e2e/specs/editor/various/block-mover.spec.js +++ b/test/e2e/specs/editor/various/block-mover.spec.js @@ -23,7 +23,7 @@ test.describe( 'block mover', () => { } ); // Select a block so the block mover is rendered. - await editor.canvas.focus( 'text=First Paragraph' ); + await editor.canvas.locator( 'text=First Paragraph' ).focus(); await editor.showBlockToolbar(); const moveDownButton = page.locator( @@ -47,7 +47,7 @@ test.describe( 'block mover', () => { attributes: { content: 'First Paragraph' }, } ); // Select a block so the block mover has the possibility of being rendered. - await editor.canvas.focus( 'text=First Paragraph' ); + await editor.canvas.locator( 'text=First Paragraph' ).focus(); await editor.showBlockToolbar(); // Ensure no block mover exists when only one block exists on the page. diff --git a/test/e2e/specs/editor/various/block-moving-mode.spec.js b/test/e2e/specs/editor/various/block-moving-mode.spec.js index 59c53682854292..5b8ef6bdcd051b 100644 --- a/test/e2e/specs/editor/various/block-moving-mode.spec.js +++ b/test/e2e/specs/editor/various/block-moving-mode.spec.js @@ -47,9 +47,11 @@ test.describe( 'Block moving mode', () => { test( 'can move block in the nested block', async ( { editor, page } ) => { // Create two group blocks with some blocks. await editor.insertBlock( { name: 'core/group' } ); - await editor.canvas.click( - 'role=button[name="Group: Gather blocks in a container."i]' - ); + await editor.canvas + .locator( + 'role=button[name="Group: Gather blocks in a container."i]' + ) + .click(); await page.keyboard.press( 'ArrowDown' ); await page.keyboard.press( 'Enter' ); await page.getByRole( 'option', { name: 'Paragraph' } ).click(); @@ -58,9 +60,11 @@ test.describe( 'Block moving mode', () => { await page.keyboard.type( 'Second Paragraph' ); await editor.insertBlock( { name: 'core/group' } ); - await editor.canvas.click( - 'role=button[name="Group: Gather blocks in a container."i]' - ); + await editor.canvas + .locator( + 'role=button[name="Group: Gather blocks in a container."i]' + ) + .click(); await page.keyboard.press( 'ArrowDown' ); await page.keyboard.press( 'Enter' ); await page.getByRole( 'option', { name: 'Paragraph' } ).click(); @@ -122,9 +126,11 @@ test.describe( 'Block moving mode', () => { attributes: { content: 'First Paragraph' }, } ); await editor.insertBlock( { name: 'core/group' } ); - await editor.canvas.click( - 'role=button[name="Group: Gather blocks in a container."i]' - ); + await editor.canvas + .locator( + 'role=button[name="Group: Gather blocks in a container."i]' + ) + .click(); await page.keyboard.press( 'ArrowDown' ); await page.keyboard.press( 'Enter' ); await page.getByRole( 'option', { name: 'Paragraph' } ).click(); diff --git a/test/e2e/specs/editor/various/compatibility-classic-editor.spec.js b/test/e2e/specs/editor/various/compatibility-classic-editor.spec.js index a1efbfa579b9a7..71522c1d439a54 100644 --- a/test/e2e/specs/editor/various/compatibility-classic-editor.spec.js +++ b/test/e2e/specs/editor/various/compatibility-classic-editor.spec.js @@ -17,7 +17,7 @@ test.describe( 'Compatibility with classic editor', () => { editor, } ) => { await editor.insertBlock( { name: 'core/html' } ); - await editor.canvas.focus( 'role=textbox[name="HTML"i]' ); + await editor.canvas.locator( 'role=textbox[name="HTML"i]' ).focus(); await page.keyboard.type( '' ); await page.keyboard.type( 'Random Link' ); await page.keyboard.type( ' ' ); diff --git a/test/e2e/specs/editor/various/content-only-lock.spec.js b/test/e2e/specs/editor/various/content-only-lock.spec.js index 03282357a72b65..e7d52562636f3b 100644 --- a/test/e2e/specs/editor/various/content-only-lock.spec.js +++ b/test/e2e/specs/editor/various/content-only-lock.spec.js @@ -24,8 +24,9 @@ test.describe( 'Content-only lock', () => { ` ); await pageUtils.pressKeys( 'secondary+M' ); - await page.waitForSelector( 'iframe[name="editor-canvas"]' ); - await editor.canvas.click( 'role=document[name="Block: Paragraph"i]' ); + await editor.canvas + .locator( 'role=document[name="Block: Paragraph"i]' ) + .click(); await page.keyboard.type( ' World' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); } ); @@ -49,8 +50,9 @@ test.describe( 'Content-only lock', () => { ` ); await pageUtils.pressKeys( 'secondary+M' ); - await page.waitForSelector( 'iframe[name="editor-canvas"]' ); - await editor.canvas.click( 'role=document[name="Block: Paragraph"i]' ); + await editor.canvas + .locator( 'role=document[name="Block: Paragraph"i]' ) + .click(); await page.keyboard.type( ' WP' ); await expect.poll( editor.getBlocks ).toMatchObject( [ { diff --git a/test/e2e/specs/editor/various/copy-cut-paste.spec.js b/test/e2e/specs/editor/various/copy-cut-paste.spec.js index 823926c1121a02..4c249349243669 100644 --- a/test/e2e/specs/editor/various/copy-cut-paste.spec.js +++ b/test/e2e/specs/editor/various/copy-cut-paste.spec.js @@ -13,7 +13,9 @@ test.describe( 'Copy/cut/paste', () => { page, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'Copy - collapsed selection' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( '2' ); @@ -32,13 +34,9 @@ test.describe( 'Copy/cut/paste', () => { pageUtils, } ) => { // To do: run with iframe. - await page.evaluate( () => { - window.wp.blocks.registerBlockType( 'test/v2', { - apiVersion: '2', - title: 'test', - } ); - } ); - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.switchToLegacyCanvas(); + + await page.locator( 'role=button[name="Add default block"i]' ).click(); await page.keyboard.type( 'Cut - collapsed selection' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( '2' ); @@ -66,7 +64,9 @@ test.describe( 'Copy/cut/paste', () => { await page.evaluate( () => { window.wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock(); } ); - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await pageUtils.pressKeys( 'primary+v' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); } ); @@ -85,7 +85,9 @@ test.describe( 'Copy/cut/paste', () => { await page.evaluate( () => { window.wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock(); } ); - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await pageUtils.pressKeys( 'primary+v' ); expect( await editor.getEditedPostContent() ).toMatchSnapshot(); } ); @@ -95,7 +97,9 @@ test.describe( 'Copy/cut/paste', () => { page, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'First block' ); await page.keyboard.press( 'Enter' ); @@ -247,7 +251,9 @@ test.describe( 'Copy/cut/paste', () => { page, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'A block' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'B block' ); @@ -259,9 +265,13 @@ test.describe( 'Copy/cut/paste', () => { await pageUtils.pressKeys( 'primary+ArrowLeft' ); // Sometimes the caret has not moved to the correct position before pressing Enter. // @see https://github.com/WordPress/gutenberg/issues/40303#issuecomment-1109434887 - await editor.canvas.waitForFunction( - () => window.getSelection().type === 'Caret' - ); + await expect + .poll( async () => + editor.canvas + .locator( ':root' ) + .evaluate( () => window.getSelection().type ) + ) + .toBe( 'Caret' ); // Create a new block at the top of the document to paste there. await page.keyboard.press( 'Enter' ); await page.keyboard.press( 'ArrowUp' ); @@ -274,7 +284,9 @@ test.describe( 'Copy/cut/paste', () => { page, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'A block' ); await editor.insertBlock( { name: 'core/spacer' } ); await page.keyboard.press( 'Enter' ); @@ -287,9 +299,13 @@ test.describe( 'Copy/cut/paste', () => { await pageUtils.pressKeys( 'primary+ArrowLeft' ); // Sometimes the caret has not moved to the correct position before pressing Enter. // @see https://github.com/WordPress/gutenberg/issues/40303#issuecomment-1109434887 - await editor.canvas.waitForFunction( - () => window.getSelection().type === 'Caret' - ); + await expect + .poll( async () => + editor.canvas + .locator( ':root' ) + .evaluate( () => window.getSelection().type ) + ) + .toBe( 'Caret' ); // Create a new block at the top of the document to paste there. await page.keyboard.press( 'Enter' ); await page.keyboard.press( 'ArrowUp' ); @@ -302,7 +318,9 @@ test.describe( 'Copy/cut/paste', () => { page, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'A block' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'B block' ); @@ -314,9 +332,13 @@ test.describe( 'Copy/cut/paste', () => { await pageUtils.pressKeys( 'primary+ArrowLeft' ); // Sometimes the caret has not moved to the correct position before pressing Enter. // @see https://github.com/WordPress/gutenberg/issues/40303#issuecomment-1109434887 - await editor.canvas.waitForFunction( - () => window.getSelection().type === 'Caret' - ); + await expect + .poll( async () => + editor.canvas + .locator( ':root' ) + .evaluate( () => window.getSelection().type ) + ) + .toBe( 'Caret' ); // Create a new block at the top of the document to paste there. await page.keyboard.press( 'Enter' ); await page.keyboard.press( 'ArrowUp' ); @@ -329,7 +351,9 @@ test.describe( 'Copy/cut/paste', () => { page, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'A block' ); await editor.insertBlock( { name: 'core/spacer' } ); await page.keyboard.press( 'Enter' ); @@ -342,9 +366,13 @@ test.describe( 'Copy/cut/paste', () => { await pageUtils.pressKeys( 'primary+ArrowLeft' ); // Sometimes the caret has not moved to the correct position before pressing Enter. // @see https://github.com/WordPress/gutenberg/issues/40303#issuecomment-1109434887 - await editor.canvas.waitForFunction( - () => window.getSelection().type === 'Caret' - ); + await expect + .poll( async () => + editor.canvas + .locator( ':root' ) + .evaluate( () => window.getSelection().type ) + ) + .toBe( 'Caret' ); // Create a new block at the top of the document to paste there. await page.keyboard.press( 'Enter' ); await page.keyboard.press( 'ArrowUp' ); @@ -369,9 +397,13 @@ test.describe( 'Copy/cut/paste', () => { await pageUtils.pressKeys( 'primary+ArrowLeft' ); // Sometimes the caret has not moved to the correct position before pressing Enter. // @see https://github.com/WordPress/gutenberg/issues/40303#issuecomment-1109434887 - await editor.canvas.waitForFunction( - () => window.getSelection().type === 'Caret' - ); + await expect + .poll( async () => + editor.canvas + .locator( ':root' ) + .evaluate( () => window.getSelection().type ) + ) + .toBe( 'Caret' ); // Create a new block at the top of the document to paste there. await page.keyboard.press( 'Enter' ); await page.keyboard.press( 'ArrowUp' ); @@ -396,9 +428,13 @@ test.describe( 'Copy/cut/paste', () => { await pageUtils.pressKeys( 'primary+ArrowLeft' ); // Sometimes the caret has not moved to the correct position before pressing Enter. // @see https://github.com/WordPress/gutenberg/issues/40303#issuecomment-1109434887 - await editor.canvas.waitForFunction( - () => window.getSelection().type === 'Caret' - ); + await expect + .poll( async () => + editor.canvas + .locator( ':root' ) + .evaluate( () => window.getSelection().type ) + ) + .toBe( 'Caret' ); // Create a new code block to paste there. await editor.insertBlock( { name: 'core/code' } ); await pageUtils.pressKeys( 'primary+v' ); @@ -420,9 +456,9 @@ test.describe( 'Copy/cut/paste', () => { await pageUtils.pressKeys( 'primary+v' ); // Expect the span to be filtered out. expect( - await editor.canvas.evaluate( - () => document.activeElement.innerHTML - ) + await editor.canvas + .locator( ':root' ) + .evaluate( () => document.activeElement.innerHTML ) ).toMatchSnapshot(); } ); @@ -440,9 +476,9 @@ test.describe( 'Copy/cut/paste', () => { // Ensure the selection is correct. await page.keyboard.type( 'y' ); expect( - await editor.canvas.evaluate( - () => document.activeElement.innerHTML - ) + await editor.canvas + .locator( ':root' ) + .evaluate( () => document.activeElement.innerHTML ) ).toBe( 'axyb' ); } ); diff --git a/test/e2e/specs/editor/various/draggable-blocks.spec.js b/test/e2e/specs/editor/various/draggable-blocks.spec.js index 2d95e3bdefe975..fb56b43dc6e031 100644 --- a/test/e2e/specs/editor/various/draggable-blocks.spec.js +++ b/test/e2e/specs/editor/various/draggable-blocks.spec.js @@ -42,9 +42,9 @@ test.describe( 'Draggable block', () => {

2

` ); - await editor.canvas.focus( - 'role=document[name="Block: Paragraph"i] >> text=2' - ); + await editor.canvas + .locator( 'role=document[name="Block: Paragraph"i] >> text=2' ) + .focus(); await editor.showBlockToolbar(); const dragHandle = page.locator( @@ -114,9 +114,9 @@ test.describe( 'Draggable block', () => {

2

` ); - await editor.canvas.focus( - 'role=document[name="Block: Paragraph"i] >> text=1' - ); + await editor.canvas + .locator( 'role=document[name="Block: Paragraph"i] >> text=1' ) + .focus(); await editor.showBlockToolbar(); const dragHandle = page.locator( @@ -197,9 +197,9 @@ test.describe( 'Draggable block', () => { ], } ); - await editor.canvas.focus( - 'role=document[name="Block: Paragraph"i] >> text=2' - ); + await editor.canvas + .locator( 'role=document[name="Block: Paragraph"i] >> text=2' ) + .focus(); await editor.showBlockToolbar(); const dragHandle = page.locator( @@ -278,9 +278,9 @@ test.describe( 'Draggable block', () => { ], } ); - await editor.canvas.focus( - 'role=document[name="Block: Paragraph"i] >> text=1' - ); + await editor.canvas + .locator( 'role=document[name="Block: Paragraph"i] >> text=1' ) + .focus(); await editor.showBlockToolbar(); const dragHandle = page.locator( @@ -342,13 +342,6 @@ test.describe( 'Draggable block', () => { editor, pageUtils, } ) => { - // To do: run with iframe. - await page.evaluate( () => { - window.wp.blocks.registerBlockType( 'test/v2', { - apiVersion: '2', - title: 'test', - } ); - } ); // Insert a row. await editor.insertBlock( { name: 'core/group', @@ -421,7 +414,7 @@ test.describe( 'Draggable block', () => { 'Dragging over the empty group block but outside the appender should still show the blue background' ).toHaveCSS( 'background-color', 'rgb(0, 124, 186)' ); - await drop(); + await drop( rowBlock ); await expect( rowAppender ).toBeHidden(); await expect.poll( editor.getBlocks ).toMatchObject( [ { @@ -453,7 +446,7 @@ test.describe( 'Draggable block', () => { 'rgb(0, 124, 186)' ); - await drop(); + await drop( columnAppender ); await expect( columnAppender ).toBeHidden(); await expect.poll( editor.getBlocks ).toMatchObject( [ { name: 'core/group' }, diff --git a/test/e2e/specs/editor/various/font-size-picker.spec.js b/test/e2e/specs/editor/various/font-size-picker.spec.js index ddc47e3ee6de66..5c6cb4b186e25e 100644 --- a/test/e2e/specs/editor/various/font-size-picker.spec.js +++ b/test/e2e/specs/editor/various/font-size-picker.spec.js @@ -24,9 +24,9 @@ test.describe( 'Font Size Picker', () => { page, } ) => { await editor.openDocumentSettingsSidebar(); - await editor.canvas.click( - 'role=button[name="Add default block"i]' - ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'Paragraph to be made "small"' ); await page.click( 'role=region[name="Editor settings"i] >> role=button[name="Set custom size"i]' @@ -47,9 +47,9 @@ test.describe( 'Font Size Picker', () => { pageUtils, } ) => { await editor.openDocumentSettingsSidebar(); - await editor.canvas.click( - 'role=button[name="Add default block"i]' - ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'Paragraph reset - custom size' ); await page.click( 'role=region[name="Editor settings"i] >> role=button[name="Set custom size"i]' @@ -139,9 +139,9 @@ test.describe( 'Font Size Picker', () => { pageUtils, } ) => { await editor.openDocumentSettingsSidebar(); - await editor.canvas.click( - 'role=button[name="Add default block"i]' - ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'Paragraph to be made "large"' ); await page.click( 'role=group[name="Font size"i] >> role=button[name="Font size"i]' @@ -161,9 +161,9 @@ test.describe( 'Font Size Picker', () => { pageUtils, } ) => { await editor.openDocumentSettingsSidebar(); - await editor.canvas.click( - 'role=button[name="Add default block"i]' - ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'Paragraph with font size reset using tools panel menu' ); @@ -194,9 +194,9 @@ test.describe( 'Font Size Picker', () => { pageUtils, } ) => { await editor.openDocumentSettingsSidebar(); - await editor.canvas.click( - 'role=button[name="Add default block"i]' - ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'Paragraph with font size reset using input field' ); @@ -231,9 +231,9 @@ test.describe( 'Font Size Picker', () => { page, } ) => { await editor.openDocumentSettingsSidebar(); - await editor.canvas.click( - 'role=button[name="Add default block"i]' - ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'Paragraph to be made "large"' ); await page.click( 'role=radiogroup[name="Font size"i] >> role=radio[name="Large"i]' @@ -250,9 +250,9 @@ test.describe( 'Font Size Picker', () => { page, } ) => { await editor.openDocumentSettingsSidebar(); - await editor.canvas.click( - 'role=button[name="Add default block"i]' - ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'Paragraph with font size reset using tools panel menu' ); @@ -281,9 +281,9 @@ test.describe( 'Font Size Picker', () => { pageUtils, } ) => { await editor.openDocumentSettingsSidebar(); - await editor.canvas.click( - 'role=button[name="Add default block"i]' - ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'Paragraph with font size reset using input field' ); diff --git a/test/e2e/specs/editor/various/footnotes.spec.js b/test/e2e/specs/editor/various/footnotes.spec.js index e3aa17c5a101cb..14a2fc653e3873 100644 --- a/test/e2e/specs/editor/various/footnotes.spec.js +++ b/test/e2e/specs/editor/various/footnotes.spec.js @@ -27,7 +27,9 @@ test.describe( 'Footnotes', () => { } ); test( 'can be inserted', async ( { editor, page } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'first paragraph' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'second paragraph' ); @@ -38,7 +40,7 @@ test.describe( 'Footnotes', () => { await page.keyboard.type( 'first footnote' ); - const id1 = await editor.canvas.evaluate( () => { + const id1 = await editor.canvas.locator( ':root' ).evaluate( () => { return document.activeElement.id; } ); @@ -58,7 +60,7 @@ test.describe( 'Footnotes', () => { }, ] ); - await editor.canvas.click( 'p:text("first paragraph")' ); + await editor.canvas.locator( 'p:text("first paragraph")' ).click(); await editor.showBlockToolbar(); await editor.clickBlockToolbarButton( 'More' ); @@ -66,7 +68,7 @@ test.describe( 'Footnotes', () => { await page.keyboard.type( 'second footnote' ); - const id2 = await editor.canvas.evaluate( () => { + const id2 = await editor.canvas.locator( ':root' ).evaluate( () => { return document.activeElement.id; } ); @@ -99,7 +101,7 @@ test.describe( 'Footnotes', () => { }, ] ); - await editor.canvas.click( 'p:text("first paragraph")' ); + await editor.canvas.locator( 'p:text("first paragraph")' ).click(); await editor.showBlockToolbar(); await editor.clickBlockToolbarButton( 'Move down' ); @@ -133,7 +135,7 @@ test.describe( 'Footnotes', () => { }, ] ); - await editor.canvas.click( `a[href="#${ id2 }-link"]` ); + await editor.canvas.locator( `a[href="#${ id2 }-link"]` ).click(); await page.keyboard.press( 'Backspace' ); expect( await editor.getBlocks() ).toMatchObject( [ @@ -161,7 +163,7 @@ test.describe( 'Footnotes', () => { }, ] ); - await editor.canvas.click( `a[href="#${ id1 }-link"]` ); + await editor.canvas.locator( `a[href="#${ id1 }-link"]` ).click(); await page.keyboard.press( 'Backspace' ); expect( await editor.getBlocks() ).toMatchObject( [ @@ -186,14 +188,16 @@ test.describe( 'Footnotes', () => { } ); test( 'can be inserted in a list', async ( { editor, page } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '* 1' ); await editor.clickBlockToolbarButton( 'More' ); await page.locator( 'button:text("Footnote")' ).click(); await page.keyboard.type( 'a' ); - const id1 = await editor.canvas.evaluate( () => { + const id1 = await editor.canvas.locator( ':root' ).evaluate( () => { return document.activeElement.id; } ); @@ -224,7 +228,9 @@ test.describe( 'Footnotes', () => { test( 'can be inserted in a table', async ( { editor, page } ) => { await editor.insertBlock( { name: 'core/table' } ); - await editor.canvas.click( 'role=button[name="Create Table"i]' ); + await editor.canvas + .locator( 'role=button[name="Create Table"i]' ) + .click(); await page.keyboard.type( '1' ); await editor.showBlockToolbar(); await editor.clickBlockToolbarButton( 'More' ); @@ -232,7 +238,7 @@ test.describe( 'Footnotes', () => { await page.keyboard.type( 'a' ); - const id1 = await editor.canvas.evaluate( () => { + const id1 = await editor.canvas.locator( ':root' ).evaluate( () => { return document.activeElement.id; } ); @@ -282,7 +288,9 @@ test.describe( 'Footnotes', () => { } ); test( 'works with revisions', async ( { editor, page } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'first paragraph' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'second paragraph' ); @@ -294,11 +302,11 @@ test.describe( 'Footnotes', () => { // Check if content is correctly slashed on save and restore. await page.keyboard.type( 'first footnote"' ); - const id1 = await editor.canvas.evaluate( () => { + const id1 = await editor.canvas.locator( ':root' ).evaluate( () => { return document.activeElement.id; } ); - await editor.canvas.click( 'p:text("first paragraph")' ); + await editor.canvas.locator( 'p:text("first paragraph")' ).click(); await editor.showBlockToolbar(); await editor.clickBlockToolbarButton( 'More' ); @@ -306,7 +314,7 @@ test.describe( 'Footnotes', () => { await page.keyboard.type( 'second footnote' ); - const id2 = await editor.canvas.evaluate( () => { + const id2 = await editor.canvas.locator( ':root' ).evaluate( () => { return document.activeElement.id; } ); @@ -322,7 +330,7 @@ test.describe( 'Footnotes', () => { }, ] ); - await editor.canvas.click( 'p:text("first paragraph")' ); + await editor.canvas.locator( 'p:text("first paragraph")' ).click(); await editor.showBlockToolbar(); await editor.clickBlockToolbarButton( 'Move down' ); @@ -348,7 +356,7 @@ test.describe( 'Footnotes', () => { await previewPage.close(); await editorPage.bringToFront(); - await editor.canvas.click( 'p:text("first paragraph")' ); + await editor.canvas.locator( 'p:text("first paragraph")' ).click(); // Open revisions. await editor.openDocumentSettingsSidebar(); @@ -383,7 +391,9 @@ test.describe( 'Footnotes', () => { } ); test( 'can be previewed when published', async ( { editor, page } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'a' ); await editor.showBlockToolbar(); @@ -396,7 +406,7 @@ test.describe( 'Footnotes', () => { const postId = await editor.publishPost(); // Test previewing changes to meta. - await editor.canvas.click( 'ol.wp-block-footnotes li span' ); + await editor.canvas.locator( 'ol.wp-block-footnotes li span' ).click(); await page.keyboard.press( 'End' ); await page.keyboard.type( '2' ); @@ -410,8 +420,9 @@ test.describe( 'Footnotes', () => { await previewPage.close(); await editorPage.bringToFront(); - // Test again, this time with an existing revision (different code path). - await editor.canvas.click( 'ol.wp-block-footnotes li span' ); + // Test again, this time with an existing revision (different code + // path). + await editor.canvas.locator( 'ol.wp-block-footnotes li span' ).click(); await page.keyboard.press( 'End' ); // Test slashing. await page.keyboard.type( '3"' ); diff --git a/test/e2e/specs/editor/various/inner-blocks-templates.spec.js b/test/e2e/specs/editor/various/inner-blocks-templates.spec.js index 47ef0dfe747912..0f9aed33d0773b 100644 --- a/test/e2e/specs/editor/various/inner-blocks-templates.spec.js +++ b/test/e2e/specs/editor/various/inner-blocks-templates.spec.js @@ -28,11 +28,9 @@ test.describe( 'Inner blocks templates', () => { name: 'test/test-inner-blocks-async-template', } ); - const blockWithTemplateContent = page - .frameLocator( '[name=editor-canvas]' ) - .locator( - 'role=document[name="Block: Test Inner Blocks Async Template"i] >> text=OneTwo' - ); + const blockWithTemplateContent = editor.canvas.locator( + 'role=document[name="Block: Test Inner Blocks Async Template"i] >> text=OneTwo' + ); // The block template content appears asynchronously, so wait for it. await expect( blockWithTemplateContent ).toBeVisible(); diff --git a/test/e2e/specs/editor/various/inserting-blocks.spec.js b/test/e2e/specs/editor/various/inserting-blocks.spec.js index cfef686ef5c879..a48fe117c97a2c 100644 --- a/test/e2e/specs/editor/various/inserting-blocks.spec.js +++ b/test/e2e/specs/editor/various/inserting-blocks.spec.js @@ -31,7 +31,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => { ); await admin.createNewPost(); - await insertingBlocksUtils.runWithoutIframe(); + await editor.switchToLegacyCanvas(); // We need a dummy block in place to display the drop indicator due to a bug. // @see https://github.com/WordPress/gutenberg/issues/44064 @@ -39,7 +39,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => { name: 'core/paragraph', attributes: { content: 'Dummy text' }, } ); - const paragraphBlock = editor.canvas.locator( + const paragraphBlock = page.locator( '[data-type="core/paragraph"] >> text=Dummy text' ); @@ -109,7 +109,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => { insertingBlocksUtils, } ) => { await admin.createNewPost(); - await insertingBlocksUtils.runWithoutIframe(); + await editor.switchToLegacyCanvas(); // We need a dummy block in place to display the drop indicator due to a bug. // @see https://github.com/WordPress/gutenberg/issues/44064 @@ -120,7 +120,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => { const beforeContent = await editor.getEditedPostContent(); - const paragraphBlock = editor.canvas.locator( + const paragraphBlock = page.locator( '[data-type="core/paragraph"] >> text=Dummy text' ); @@ -175,7 +175,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => { ); await admin.createNewPost(); - await insertingBlocksUtils.runWithoutIframe(); + await editor.switchToLegacyCanvas(); // We need a dummy block in place to display the drop indicator due to a bug. // @see https://github.com/WordPress/gutenberg/issues/44064 @@ -184,7 +184,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => { attributes: { content: 'Dummy text' }, } ); - const paragraphBlock = editor.canvas.locator( + const paragraphBlock = page.locator( '[data-type="core/paragraph"] >> text=Dummy text' ); @@ -245,7 +245,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => { insertingBlocksUtils, } ) => { await admin.createNewPost(); - await insertingBlocksUtils.runWithoutIframe(); + await editor.switchToLegacyCanvas(); // We need a dummy block in place to display the drop indicator due to a bug. // @see https://github.com/WordPress/gutenberg/issues/44064 @@ -256,7 +256,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => { const beforeContent = await editor.getEditedPostContent(); - const paragraphBlock = editor.canvas.locator( + const paragraphBlock = page.locator( '[data-type="core/paragraph"] >> text=Dummy text' ); @@ -307,10 +307,8 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => { admin, page, editor, - insertingBlocksUtils, } ) => { await admin.createNewPost(); - await insertingBlocksUtils.runWithoutIframe(); const inserterButton = page.getByRole( 'button', { name: 'Toggle block inserter', @@ -390,16 +388,4 @@ class InsertingBlocksUtils { 'data-testid=block-draggable-chip >> visible=true' ); } - - async runWithoutIframe() { - /** - * @todo Some drag an drop tests are failing, so run them without iframe for now. - */ - return await this.page.evaluate( () => { - window.wp.blocks.registerBlockType( 'test/v2', { - apiVersion: '2', - title: 'test', - } ); - } ); - } } diff --git a/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js b/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js index 8d1f37187fee18..57b958fdfc4b44 100644 --- a/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js +++ b/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js @@ -13,7 +13,9 @@ test.describe( 'Keep styles on block transforms', () => { editor, } ) => { await editor.openDocumentSettingsSidebar(); - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '## Heading' ); await page.click( 'role=button[name="Color Text styles"i]' ); await page.click( 'role=option[name="Color: Luminous vivid orange"i]' ); @@ -37,15 +39,10 @@ test.describe( 'Keep styles on block transforms', () => { pageUtils, editor, } ) => { - // To do: run with iframe. - await page.evaluate( () => { - window.wp.blocks.registerBlockType( 'test/v2', { - apiVersion: '2', - title: 'test', - } ); - } ); await editor.openDocumentSettingsSidebar(); - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'Line 1 to be made large' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'Line 2 to be made large' ); @@ -78,7 +75,9 @@ test.describe( 'Keep styles on block transforms', () => { editor, } ) => { await editor.openDocumentSettingsSidebar(); - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'Line 1 to be made large' ); await page.click( 'role=radio[name="Large"i]' ); await editor.showBlockToolbar(); diff --git a/test/e2e/specs/editor/various/list-view.spec.js b/test/e2e/specs/editor/various/list-view.spec.js index 7fd21085deae2a..222d743acdf395 100644 --- a/test/e2e/specs/editor/various/list-view.spec.js +++ b/test/e2e/specs/editor/various/list-view.spec.js @@ -261,13 +261,6 @@ test.describe( 'List View', () => { page, pageUtils, } ) => { - // To do: run with iframe. - await page.evaluate( () => { - window.wp.blocks.registerBlockType( 'test/v2', { - apiVersion: '2', - title: 'test', - } ); - } ); await editor.insertBlock( { name: 'core/image' } ); await editor.insertBlock( { name: 'core/paragraph', diff --git a/test/e2e/specs/editor/various/mentions.spec.js b/test/e2e/specs/editor/various/mentions.spec.js index 061b8d67a0801f..fef3b1c3e3d2e1 100644 --- a/test/e2e/specs/editor/various/mentions.spec.js +++ b/test/e2e/specs/editor/various/mentions.spec.js @@ -23,7 +23,9 @@ test.describe( 'autocomplete mentions', () => { } ); test( 'should insert mention', async ( { page, editor } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'I am @ad' ); await expect( page.locator( 'role=listbox >> role=option[name=/admin/i]' ) @@ -42,7 +44,9 @@ test.describe( 'autocomplete mentions', () => { editor, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'Stuck in the middle with you' ); await pageUtils.pressKeys( 'ArrowLeft', { times: 'you'.length } ); await page.keyboard.type( '@j' ); @@ -62,7 +66,9 @@ test.describe( 'autocomplete mentions', () => { page, editor, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'I am @j' ); await expect( page.locator( 'role=listbox >> role=option[name=/testuser/i]' ) 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 3374a13b98eb79..2473be99d218c9 100644 --- a/test/e2e/specs/editor/various/multi-block-selection.spec.js +++ b/test/e2e/specs/editor/various/multi-block-selection.spec.js @@ -248,20 +248,14 @@ test.describe( 'Multi-block selection', () => { multiBlockSelectionUtils, } ) => { // To do: run with iframe. - await page.evaluate( () => { - window.wp.blocks.registerBlockType( 'test/v2', { - apiVersion: '2', - title: 'test', - } ); - } ); - await editor.canvas - .getByRole( 'button', { name: 'Add default block' } ) - .click(); + await editor.switchToLegacyCanvas(); + + await page.getByRole( 'button', { name: 'Add default block' } ).click(); await page.keyboard.type( '1' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( '2' ); - await editor.canvas + await page .getByRole( 'document', { name: 'Block: Paragraph' } ) .filter( { hasText: '1' } ) .click( { modifiers: [ 'Shift' ] } ); @@ -278,11 +272,11 @@ test.describe( 'Multi-block selection', () => { .getByRole( 'toolbar', { name: 'Block tools' } ) .getByRole( 'button', { name: 'Group' } ) .click(); - await editor.canvas + await page .getByRole( 'document', { name: 'Block: Paragraph' } ) .filter( { hasText: '1' } ) .click(); - await editor.canvas + await page .getByRole( 'document', { name: 'Block: Paragraph' } ) .filter( { hasText: '2' } ) .click( { modifiers: [ 'Shift' ] } ); @@ -300,12 +294,8 @@ test.describe( 'Multi-block selection', () => { pageUtils, } ) => { // To do: run with iframe. - await page.evaluate( () => { - window.wp.blocks.registerBlockType( 'test/v2', { - apiVersion: '2', - title: 'test', - } ); - } ); + await editor.switchToLegacyCanvas(); + await editor.insertBlock( { name: 'core/paragraph', attributes: { content: 'test' }, @@ -317,16 +307,12 @@ test.describe( 'Multi-block selection', () => { .getByRole( 'button', { name: 'Dismiss this notice' } ) .filter( { hasText: 'Draft saved' } ) ).toBeVisible(); + await page.reload(); // To do: run with iframe. - await page.evaluate( () => { - window.wp.blocks.registerBlockType( 'test/v2', { - apiVersion: '2', - title: 'test', - } ); - } ); + await editor.switchToLegacyCanvas(); - await editor.canvas + await page .getByRole( 'document', { name: 'Block: Paragraph' } ) .click( { modifiers: [ 'Shift' ] } ); await pageUtils.pressKeys( 'primary+a' ); @@ -573,37 +559,42 @@ test.describe( 'Multi-block selection', () => { page, editor, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '12' ); await page.keyboard.press( 'ArrowLeft' ); - const [ coord1, coord2 ] = await editor.canvas.evaluate( () => { - const selection = window.getSelection(); - - if ( ! selection.rangeCount ) { - return; - } - - const range = selection.getRangeAt( 0 ); - const rect1 = range.getClientRects()[ 0 ]; - const element = document.querySelector( - '[data-type="core/paragraph"]' - ); - const rect2 = element.getBoundingClientRect(); - const iframeOffset = window.frameElement.getBoundingClientRect(); - - return [ - { - x: iframeOffset.x + rect1.x, - y: iframeOffset.y + rect1.y + rect1.height / 2, - }, - { - // Move a bit outside the paragraph. - x: iframeOffset.x + rect2.x - 5, - y: iframeOffset.y + rect2.y + rect2.height / 2, - }, - ]; - } ); + const [ coord1, coord2 ] = await editor.canvas + .locator( ':root' ) + .evaluate( () => { + const selection = window.getSelection(); + + if ( ! selection.rangeCount ) { + return; + } + + const range = selection.getRangeAt( 0 ); + const rect1 = range.getClientRects()[ 0 ]; + const element = document.querySelector( + '[data-type="core/paragraph"]' + ); + const rect2 = element.getBoundingClientRect(); + const iframeOffset = + window.frameElement.getBoundingClientRect(); + + return [ + { + x: iframeOffset.x + rect1.x, + y: iframeOffset.y + rect1.y + rect1.height / 2, + }, + { + // Move a bit outside the paragraph. + x: iframeOffset.x + rect2.x - 5, + y: iframeOffset.y + rect2.y + rect2.height / 2, + }, + ]; + } ); await page.mouse.click( coord1.x, coord1.y ); await page.mouse.down(); @@ -935,7 +926,9 @@ test.describe( 'Multi-block selection', () => { .toEqual( [] ); await expect .poll( () => - editor.canvas.evaluate( () => window.getSelection().toString() ) + editor.canvas + .locator( ':root' ) + .evaluate( () => window.getSelection().toString() ) ) .toBe( 'Post title' ); } ); @@ -1184,12 +1177,8 @@ test.describe( 'Multi-block selection', () => { editor, } ) => { // To do: run with iframe. - await page.evaluate( () => { - window.wp.blocks.registerBlockType( 'test/v2', { - apiVersion: '2', - title: 'test', - } ); - } ); + await editor.switchToLegacyCanvas(); + await editor.insertBlock( { name: 'core/paragraph', attributes: { content: '1[' }, @@ -1199,18 +1188,18 @@ test.describe( 'Multi-block selection', () => { attributes: { content: ']2' }, } ); // Focus and move the caret to the end. - await editor.canvas + await page .getByRole( 'document', { name: 'Block: Paragraph' } ) .filter( { hasText: ']2' } ) .click(); await page.keyboard.press( 'ArrowLeft' ); - const strongText = editor.canvas + const strongText = page .getByRole( 'region', { name: 'Editor content' } ) .getByText( '1', { exact: true } ); const strongBox = await strongText.boundingBox(); // Focus and move the caret to the end. - await editor.canvas + await page .getByRole( 'document', { name: 'Block: Paragraph' } ) .filter( { hasText: '1[' } ) .click( { @@ -1354,9 +1343,9 @@ class MultiBlockSelectionUtils { * Tests if the native selection matches the block selection. */ assertNativeSelection = async () => { - const selection = await this.#editor.canvas.evaluateHandle( () => - window.getSelection() - ); + const selection = await this.#editor.canvas + .locator( ':root' ) + .evaluateHandle( () => window.getSelection() ); const { isMultiSelected, selectionStart, selectionEnd } = await this.#page.evaluate( () => { diff --git a/test/e2e/specs/editor/various/new-post.spec.js b/test/e2e/specs/editor/various/new-post.spec.js index 4b192693c07b07..9d6f4ef45d9db1 100644 --- a/test/e2e/specs/editor/various/new-post.spec.js +++ b/test/e2e/specs/editor/various/new-post.spec.js @@ -74,10 +74,9 @@ test.describe( 'new editor state', () => { await admin.createNewPost(); // Enter a title for this post. - await editor.canvas.type( - 'role=textbox[name="Add title"i]', - 'Here is the title' - ); + await editor.canvas + .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( 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 5d63ff789e4ec7..629a437a41665b 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 @@ -156,7 +156,6 @@ class PostEditorTemplateMode { async createPostAndSaveDraft() { await this.admin.createNewPost(); - await this.editor.canvas.waitForLoadState(); // Create a random post. await this.page.keyboard.type( 'Just an FSE Post' ); await this.page.keyboard.press( 'Enter' ); diff --git a/test/e2e/specs/editor/various/post-visibility.spec.js b/test/e2e/specs/editor/various/post-visibility.spec.js index 3f83221c27b819..365209ef2e4e55 100644 --- a/test/e2e/specs/editor/various/post-visibility.spec.js +++ b/test/e2e/specs/editor/various/post-visibility.spec.js @@ -78,7 +78,9 @@ test.describe( 'Post visibility', () => { await admin.createNewPost(); // Enter a title for this post. - await editor.canvas.type( 'role=textbox[name="Add title"i]', 'Title' ); + await editor.canvas + .locator( 'role=textbox[name="Add title"i]' ) + .type( 'Title' ); await editor.openDocumentSettingsSidebar(); diff --git a/test/e2e/specs/editor/various/preview.spec.js b/test/e2e/specs/editor/various/preview.spec.js index a3fa4544f39f84..cfec384adba9bf 100644 --- a/test/e2e/specs/editor/various/preview.spec.js +++ b/test/e2e/specs/editor/various/preview.spec.js @@ -27,10 +27,9 @@ test.describe( 'Preview', () => { editorPage.locator( 'role=button[name="Preview"i]' ) ).toBeDisabled(); - await editor.canvas.type( - 'role=textbox[name="Add title"i]', - 'Hello World' - ); + await editor.canvas + .locator( 'role=textbox[name="Add title"i]' ) + .type( 'Hello World' ); const previewPage = await editor.openPreviewPage( editorPage ); const previewTitle = previewPage.locator( 'role=heading[level=1]' ); @@ -48,7 +47,9 @@ test.describe( 'Preview', () => { // Return to editor to change title. await editorPage.bringToFront(); - await editor.canvas.type( 'role=textbox[name="Add title"i]', '!' ); + await editor.canvas + .locator( 'role=textbox[name="Add title"i]' ) + .type( '!' ); await previewUtils.waitForPreviewNavigation( previewPage ); // Title in preview should match updated input. @@ -70,10 +71,9 @@ test.describe( 'Preview', () => { // Return to editor to change title. await editorPage.bringToFront(); - await editor.canvas.fill( - 'role=textbox[name="Add title"i]', - 'Hello World! And more.' - ); + await editor.canvas + .locator( 'role=textbox[name="Add title"i]' ) + .fill( 'Hello World! And more.' ); await previewUtils.waitForPreviewNavigation( previewPage ); // Title in preview should match updated input. @@ -109,7 +109,9 @@ test.describe( 'Preview', () => { const editorPage = page; // Type aaaaa in the title field. - await editor.canvas.type( 'role=textbox[name="Add title"]', 'aaaaa' ); + await editor.canvas + .locator( 'role=textbox[name="Add title"]' ) + .type( 'aaaaa' ); await editorPage.keyboard.press( 'Tab' ); // Save the post as a draft. @@ -129,10 +131,9 @@ test.describe( 'Preview', () => { await editorPage.bringToFront(); // Append bbbbb to the title, and tab away from the title so blur event is triggered. - await editor.canvas.fill( - 'role=textbox[name="Add title"i]', - 'aaaaabbbbb' - ); + await editor.canvas + .locator( 'role=textbox[name="Add title"i]' ) + .fill( 'aaaaabbbbb' ); await editorPage.keyboard.press( 'Tab' ); // Save draft and open the preview page right after. @@ -157,7 +158,9 @@ test.describe( 'Preview', () => { const editorPage = page; // Type Lorem in the title field. - await editor.canvas.type( 'role=textbox[name="Add title"i]', 'Lorem' ); + await editor.canvas + .locator( 'role=textbox[name="Add title"i]' ) + .type( 'Lorem' ); // Open the preview page. const previewPage = await editor.openPreviewPage( editorPage ); @@ -174,7 +177,9 @@ test.describe( 'Preview', () => { await page.click( 'role=button[name="Close panel"i]' ); // Change the title and preview again. - await editor.canvas.type( 'role=textbox[name="Add title"i]', ' Ipsum' ); + await editor.canvas + .locator( 'role=textbox[name="Add title"i]' ) + .type( ' Ipsum' ); await previewUtils.waitForPreviewNavigation( previewPage ); // Title in preview should match updated input. @@ -196,7 +201,9 @@ test.describe( 'Preview', () => { ).toBeVisible(); // Change the title. - await editor.canvas.type( 'role=textbox[name="Add title"i]', ' Draft' ); + await editor.canvas + .locator( 'role=textbox[name="Add title"i]' ) + .type( ' Draft' ); // Open the preview page. await previewUtils.waitForPreviewNavigation( previewPage ); @@ -227,10 +234,9 @@ test.describe( 'Preview with Custom Fields enabled', () => { const editorPage = page; // Add an initial title and content. - await editor.canvas.type( - 'role=textbox[name="Add title"i]', - 'title 1' - ); + await editor.canvas + .locator( 'role=textbox[name="Add title"i]' ) + .type( 'title 1' ); await editor.insertBlock( { name: 'core/paragraph', attributes: { content: 'content 1' }, @@ -254,14 +260,12 @@ test.describe( 'Preview with Custom Fields enabled', () => { // Return to editor and modify the title and content. await editorPage.bringToFront(); - await editor.canvas.fill( - 'role=textbox[name="Add title"i]', - 'title 2' - ); - await editor.canvas.fill( - 'role=document >> text="content 1"', - 'content 2' - ); + await editor.canvas + .locator( 'role=textbox[name="Add title"i]' ) + .fill( 'title 2' ); + await editor.canvas + .locator( 'role=document >> text="content 1"' ) + .fill( 'content 2' ); // Open the preview page. await previewUtils.waitForPreviewNavigation( previewPage ); diff --git a/test/e2e/specs/editor/various/rich-text.spec.js b/test/e2e/specs/editor/various/rich-text.spec.js index 4ebd2cd450e70b..2969a33d254852 100644 --- a/test/e2e/specs/editor/various/rich-text.spec.js +++ b/test/e2e/specs/editor/various/rich-text.spec.js @@ -35,7 +35,9 @@ test.describe( 'RichText', () => { editor, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'test' ); await pageUtils.pressKeys( 'primary+a' ); await pageUtils.pressKeys( 'primary+b' ); @@ -53,7 +55,9 @@ test.describe( 'RichText', () => { editor, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'Some ' ); await pageUtils.pressKeys( 'primary+b' ); await page.keyboard.type( 'bold' ); @@ -73,7 +77,9 @@ test.describe( 'RichText', () => { editor, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await pageUtils.pressKeys( 'primary+b' ); await pageUtils.pressKeys( 'primary+i' ); await page.keyboard.type( '1' ); @@ -102,11 +108,14 @@ test.describe( 'RichText', () => { await pageUtils.pressKeys( 'shift+ArrowLeft' ); await pageUtils.pressKeys( 'primary+b' ); - const count = await editor.canvas.evaluate( - () => - document.querySelectorAll( '*[data-rich-text-format-boundary]' ) - .length - ); + const count = await editor.canvas + .locator( ':root' ) + .evaluate( + () => + document.querySelectorAll( + '*[data-rich-text-format-boundary]' + ).length + ); expect( count ).toBe( 1 ); } ); @@ -114,7 +123,9 @@ test.describe( 'RichText', () => { page, editor, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'Some ' ); await editor.clickBlockToolbarButton( 'Bold' ); await page.keyboard.type( 'bold' ); @@ -134,7 +145,9 @@ test.describe( 'RichText', () => { editor, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'A `backtick`' ); expect( await editor.getBlocks() ).toMatchObject( [ @@ -155,7 +168,9 @@ test.describe( 'RichText', () => { page, editor, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '`a`' ); await page.keyboard.press( 'Backspace' ); @@ -171,7 +186,9 @@ test.describe( 'RichText', () => { page, editor, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '`a`' ); await page.keyboard.type( 'b' ); await page.keyboard.press( 'Backspace' ); @@ -184,7 +201,9 @@ test.describe( 'RichText', () => { page, editor, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '`a`' ); await page.evaluate( () => new Promise( window.requestIdleCallback ) ); // Move inside format boundary. @@ -200,7 +219,9 @@ test.describe( 'RichText', () => { page, editor, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'A `backtick` and more.' ); expect( await editor.getBlocks() ).toMatchObject( [ @@ -216,7 +237,9 @@ test.describe( 'RichText', () => { editor, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'A selection test.' ); await page.keyboard.press( 'Home' ); await page.keyboard.press( 'ArrowRight' ); @@ -246,14 +269,16 @@ test.describe( 'RichText', () => { editor, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '1' ); await pageUtils.pressKeys( 'primary+b' ); await page.keyboard.type( '2' ); await pageUtils.pressKeys( 'primary+b' ); await page.keyboard.type( '3' ); - await editor.canvas.evaluate( () => { + await editor.canvas.locator( ':root' ).evaluate( () => { let called; const { body } = document; const config = { @@ -313,7 +338,7 @@ test.describe( 'RichText', () => { await page.keyboard.type( '4' ); - await editor.canvas.evaluate( () => { + await editor.canvas.locator( ':root' ).evaluate( () => { // The selection change event should be called once. If there's only // one item in `window.unsubscribes`, it means that only one // function is present to disconnect the `mutationObserver`. @@ -339,7 +364,9 @@ test.describe( 'RichText', () => { editor, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await pageUtils.pressKeys( 'primary+b' ); await page.keyboard.type( '1' ); await pageUtils.pressKeys( 'primary+b' ); @@ -369,7 +396,9 @@ test.describe( 'RichText', () => { editor, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await pageUtils.pressKeys( 'primary+b' ); await page.keyboard.type( '12' ); await pageUtils.pressKeys( 'primary+b' ); @@ -391,7 +420,9 @@ test.describe( 'RichText', () => { editor, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '1' ); await page.keyboard.press( 'Tab' ); await pageUtils.pressKeys( 'shift+Tab' ); @@ -412,11 +443,13 @@ test.describe( 'RichText', () => { editor, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '1' ); // Simulate moving focus to a different app, then moving focus back, // without selection being changed. - await editor.canvas.evaluate( () => { + await editor.canvas.locator( ':root' ).evaluate( () => { const activeElement = document.activeElement; activeElement.blur(); activeElement.focus(); @@ -443,7 +476,9 @@ test.describe( 'RichText', () => { editor, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '1' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( '2' ); @@ -479,7 +514,9 @@ test.describe( 'RichText', () => { editor, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '2' ); await pageUtils.pressKeys( 'primary+a' ); await pageUtils.pressKeys( 'primary+x' ); @@ -500,7 +537,9 @@ test.describe( 'RichText', () => { editor, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '1' ); await pageUtils.pressKeys( 'primary+b' ); await page.keyboard.type( '2' ); @@ -525,7 +564,9 @@ test.describe( 'RichText', () => { editor, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '1' ); await page.keyboard.press( 'Enter' ); await page.keyboard.press( 'Backspace' ); @@ -545,7 +586,9 @@ test.describe( 'RichText', () => { editor, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await pageUtils.pressKeys( 'primary+b' ); await page.keyboard.type( '1' ); await page.keyboard.type( '2' ); @@ -571,7 +614,9 @@ test.describe( 'RichText', () => { editor, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); // Add text and select to color. await page.keyboard.type( '1' ); @@ -626,7 +671,9 @@ test.describe( 'RichText', () => { editor, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); // Create two lines of text in a paragraph. await page.keyboard.type( '1' ); await pageUtils.pressKeys( 'shift+Enter' ); @@ -668,7 +715,9 @@ test.describe( 'RichText', () => { editor, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); // Create an indented list of two lines. await page.keyboard.type( '* 1' ); @@ -717,7 +766,9 @@ test.describe( 'RichText', () => { } ); test( 'should navigate arround emoji', async ( { page, editor } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'šŸ“' ); // Only one press on arrow left should be required to move in front of // the emoji. @@ -735,12 +786,14 @@ test.describe( 'RichText', () => { test( 'should run input rules after composition end', async ( { editor, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); // Playwright doesn't support composition, so emulate it by inserting // text in the DOM directly, setting selection in the right place, and // firing `compositionend`. // See https://github.com/puppeteer/puppeteer/issues/4981. - await editor.canvas.evaluate( async () => { + await editor.canvas.locator( ':root' ).evaluate( async () => { document.activeElement.textContent = '`a`'; const selection = window.getSelection(); // The `selectionchange` and `compositionend` events should run in separate event @@ -767,7 +820,9 @@ test.describe( 'RichText', () => { editor, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await pageUtils.pressKeys( 'primary+b' ); await page.keyboard.type( '1' ); await pageUtils.pressKeys( 'primary+b' ); diff --git a/test/e2e/specs/editor/various/rtl.spec.js b/test/e2e/specs/editor/various/rtl.spec.js index 8475605e339fcb..aaf1186cc5abae 100644 --- a/test/e2e/specs/editor/various/rtl.spec.js +++ b/test/e2e/specs/editor/various/rtl.spec.js @@ -150,7 +150,9 @@ test.describe( 'RTL', () => { page, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await pageUtils.pressKeys( 'primary+b' ); await page.keyboard.type( ARABIC_ONE ); await pageUtils.pressKeys( 'primary+b' ); diff --git a/test/e2e/specs/editor/various/splitting-merging.spec.js b/test/e2e/specs/editor/various/splitting-merging.spec.js index 1c5e12be8abb11..29e7e5d64522c9 100644 --- a/test/e2e/specs/editor/various/splitting-merging.spec.js +++ b/test/e2e/specs/editor/various/splitting-merging.spec.js @@ -4,8 +4,11 @@ const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); test.describe( 'splitting and merging blocks (@firefox, @webkit)', () => { - test.beforeEach( async ( { admin } ) => { + test.beforeEach( async ( { admin, editor } ) => { await admin.createNewPost(); + await expect( + editor.canvas.getByRole( 'textbox', { name: 'Add title' } ) + ).toBeFocused(); } ); test.afterEach( async ( { requestUtils } ) => { diff --git a/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js b/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js index 23186dfff2de96..e706dfc3607dc3 100644 --- a/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js +++ b/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js @@ -79,7 +79,9 @@ test.describe( 'Toolbar roving tabindex', () => { // Move focus to the first toolbar item. await page.keyboard.press( 'Home' ); await ToolbarRovingTabindexUtils.expectLabelToHaveFocus( 'Table' ); - await editor.canvas.click( `role=button[name="Create Table"i]` ); + await editor.canvas + .locator( `role=button[name="Create Table"i]` ) + .click(); await pageUtils.pressKeys( 'Tab' ); await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation( 'Body cell text', diff --git a/test/e2e/specs/editor/various/undo.spec.js b/test/e2e/specs/editor/various/undo.spec.js index dfdbef60ffaa9c..51683997aaf6f0 100644 --- a/test/e2e/specs/editor/various/undo.spec.js +++ b/test/e2e/specs/editor/various/undo.spec.js @@ -20,7 +20,9 @@ test.describe( 'undo', () => { pageUtils, undoUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'before pause' ); await editor.page.waitForTimeout( 1000 ); await page.keyboard.type( ' after pause' ); @@ -88,7 +90,9 @@ test.describe( 'undo', () => { pageUtils, undoUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( 'before keyboard ' ); await pageUtils.pressKeys( 'primary+b' ); @@ -160,7 +164,9 @@ test.describe( 'undo', () => { } ); test( 'should undo bold', async ( { page, pageUtils, editor } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .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( @@ -169,8 +175,7 @@ test.describe( 'undo', () => { ) ).toBeVisible(); await page.reload(); - await page.waitForSelector( 'iframe[name="editor-canvas"]' ); - await editor.canvas.click( '[data-type="core/paragraph"]' ); + await editor.canvas.locator( '[data-type="core/paragraph"]' ).click(); await pageUtils.pressKeys( 'primary+a' ); await pageUtils.pressKeys( 'primary+b' ); await pageUtils.pressKeys( 'primary+z' ); @@ -190,7 +195,9 @@ test.describe( 'undo', () => { pageUtils, undoUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); const firstBlock = await editor.getEditedPostContent(); @@ -333,7 +340,9 @@ test.describe( 'undo', () => { // See: https://github.com/WordPress/gutenberg/issues/14950 // Issue is demonstrated from an edited post: create, save, and reload. - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .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( @@ -342,11 +351,12 @@ test.describe( 'undo', () => { ) ).toBeVisible(); await page.reload(); - await page.waitForSelector( 'iframe[name="editor-canvas"]' ); // Issue is demonstrated by forcing state merges (multiple inputs) on // an existing text after a fresh reload. - await editor.canvas.click( '[data-type="core/paragraph"] >> nth=0' ); + await editor.canvas + .locator( '[data-type="core/paragraph"] >> nth=0' ) + .click(); await page.keyboard.type( 'modified' ); // The issue is demonstrated after the one second delay to trigger the @@ -370,7 +380,9 @@ test.describe( 'undo', () => { page, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .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( @@ -388,7 +400,9 @@ test.describe( 'undo', () => { page, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '1' ); await editor.publishPost(); await pageUtils.pressKeys( 'primary+z' ); @@ -401,7 +415,9 @@ test.describe( 'undo', () => { page, pageUtils, } ) => { - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( '1' ); await page.click( 'role=button[name="Save draft"i]' ); @@ -416,7 +432,7 @@ test.describe( 'undo', () => { await expect( page.locator( 'role=button[name="Undo"]' ) ).toBeDisabled(); - await editor.canvas.click( '[data-type="core/paragraph"]' ); + await editor.canvas.locator( '[data-type="core/paragraph"]' ).click(); await page.keyboard.type( '2' ); @@ -446,7 +462,9 @@ test.describe( 'undo', () => { // block attribute as in the previous action and results in transient edits // and skipping `undo` history steps. const text = 'tonis'; - await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await editor.canvas + .locator( 'role=button[name="Add default block"i]' ) + .click(); await page.keyboard.type( text ); await editor.publishPost(); await pageUtils.pressKeys( 'primary+z' ); diff --git a/test/e2e/specs/editor/various/writing-flow.spec.js b/test/e2e/specs/editor/various/writing-flow.spec.js index 81bbcbbc758b93..98bb00a596f03c 100644 --- a/test/e2e/specs/editor/various/writing-flow.spec.js +++ b/test/e2e/specs/editor/various/writing-flow.spec.js @@ -10,8 +10,11 @@ test.use( { } ); test.describe( 'Writing Flow (@firefox, @webkit)', () => { - test.beforeEach( async ( { admin } ) => { + test.beforeEach( async ( { admin, editor } ) => { await admin.createNewPost(); + await expect( + editor.canvas.getByRole( 'textbox', { name: 'Add title' } ) + ).toBeFocused(); } ); test.afterAll( async ( { requestUtils } ) => { @@ -46,9 +49,11 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => { .poll( writingFlowUtils.getActiveBlockName ) .toBe( 'core/column' ); await page.keyboard.press( 'ArrowUp' ); - const activeElementBlockType = await editor.canvas.evaluate( () => - document.activeElement.getAttribute( 'data-type' ) - ); + const activeElementBlockType = await editor.canvas + .locator( ':root' ) + .evaluate( () => + document.activeElement.getAttribute( 'data-type' ) + ); expect( activeElementBlockType ).toBe( 'core/columns' ); await expect .poll( writingFlowUtils.getActiveBlockName ) @@ -515,12 +520,12 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => { } ) => { await page.keyboard.press( 'Enter' ); await page.keyboard.press( 'Enter' ); - await editor.canvas.evaluate( () => { + await editor.canvas.locator( ':root' ).evaluate( () => { document.activeElement.style.paddingTop = '100px'; } ); await page.keyboard.press( 'ArrowUp' ); await page.keyboard.type( '1' ); - await editor.canvas.evaluate( () => { + await editor.canvas.locator( ':root' ).evaluate( () => { document.activeElement.style.paddingBottom = '100px'; } ); await page.keyboard.press( 'ArrowDown' ); @@ -544,7 +549,7 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => { } ) => { await page.keyboard.press( 'Enter' ); await page.keyboard.press( 'Enter' ); - await editor.canvas.evaluate( () => { + await editor.canvas.locator( ':root' ).evaluate( () => { document.activeElement.style.lineHeight = 'normal'; } ); await page.keyboard.press( 'ArrowUp' ); @@ -745,7 +750,7 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => { } ) => { await page.keyboard.press( 'Enter' ); await page.keyboard.press( 'Enter' ); - await editor.canvas.evaluate( () => { + await editor.canvas.locator( ':root' ).evaluate( () => { document.activeElement.style.paddingLeft = '100px'; } ); await page.keyboard.press( 'Enter' ); @@ -1015,9 +1020,9 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => { await page.keyboard.type( 'a' ); async function getHeight() { - return await editor.canvas.evaluate( - () => document.activeElement.offsetHeight - ); + return await editor.canvas + .locator( ':root' ) + .evaluate( () => document.activeElement.offsetHeight ); } const height = await getHeight(); @@ -1049,9 +1054,9 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => { await page.keyboard.type( 'a' ); async function getHeight() { - return await editor.canvas.evaluate( - () => document.activeElement.offsetHeight - ); + return await editor.canvas + .locator( ':root' ) + .evaluate( () => document.activeElement.offsetHeight ); } const height = await getHeight(); @@ -1084,9 +1089,9 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => { await page.keyboard.type( 'a' ); async function getHeight() { - return await editor.canvas.evaluate( - () => document.activeElement.offsetHeight - ); + return await editor.canvas + .locator( ':root' ) + .evaluate( () => document.activeElement.offsetHeight ); } const height = await getHeight(); @@ -1135,19 +1140,23 @@ class WritingFlowUtils { await this.page.keyboard.press( 'Enter' ); await this.page.keyboard.type( '/columns' ); await this.page.keyboard.press( 'Enter' ); - await this.editor.canvas.click( - 'role=button[name="Two columns; equal split"i]' - ); - await this.editor.canvas.click( 'role=button[name="Add block"i]' ); + await this.editor.canvas + .locator( 'role=button[name="Two columns; equal split"i]' ) + .click(); + await this.editor.canvas + .locator( 'role=button[name="Add block"i]' ) + .click(); await this.page.click( 'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]' ); await this.page.keyboard.type( '1st col' ); // If this text is too long, it may wrap to a new line and cause test failure. That's why we're using "1st" instead of "First" here. - await this.editor.canvas.focus( - 'role=document[name="Block: Column (2 of 2)"i]' - ); - await this.editor.canvas.click( 'role=button[name="Add block"i]' ); + await this.editor.canvas + .locator( 'role=document[name="Block: Column (2 of 2)"i]' ) + .focus(); + await this.editor.canvas + .locator( 'role=button[name="Add block"i]' ) + .click(); await this.page.click( 'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]' ); diff --git a/test/e2e/specs/interactivity/directive-init.spec.ts b/test/e2e/specs/interactivity/directive-init.spec.ts index aa81ab1ea61db2..e18341a48fa3f4 100644 --- a/test/e2e/specs/interactivity/directive-init.spec.ts +++ b/test/e2e/specs/interactivity/directive-init.spec.ts @@ -53,7 +53,7 @@ test.describe( 'data-wp-init', () => { await toggle.click(); - await expect( show ).not.toBeVisible(); + await expect( show ).toBeHidden(); await expect( isMounted ).toHaveText( 'false' ); } ); @@ -65,7 +65,7 @@ test.describe( 'data-wp-init', () => { await toggle.click(); - await expect( show ).not.toBeVisible(); + await expect( show ).toBeHidden(); await expect( isMounted ).toHaveText( 'false' ); await toggle.click(); diff --git a/test/e2e/specs/interactivity/directive-slots.spec.ts b/test/e2e/specs/interactivity/directive-slots.spec.ts index d93e50f767215f..195af52fdb1bd2 100644 --- a/test/e2e/specs/interactivity/directive-slots.spec.ts +++ b/test/e2e/specs/interactivity/directive-slots.spec.ts @@ -108,7 +108,7 @@ test.describe( 'data-wp-slot', () => { await page.getByTestId( 'slot-5-button' ).click(); await expect( fillContainer ).toBeEmpty(); - await expect( slot5 ).not.toBeVisible(); + await expect( slot5 ).toBeHidden(); await expect( slots.getByTestId( 'fill' ) ).toBeVisible(); await expect( slots.locator( 'css= > *' ) ).toHaveText( [ '[1]', diff --git a/test/e2e/specs/site-editor/block-removal.spec.js b/test/e2e/specs/site-editor/block-removal.spec.js index c1d6cdfea00222..5c46ac769efd3f 100644 --- a/test/e2e/specs/site-editor/block-removal.spec.js +++ b/test/e2e/specs/site-editor/block-removal.spec.js @@ -17,7 +17,7 @@ test.describe( 'Site editor block removal prompt', () => { postId: 'emptytheme//index', postType: 'wp_template', } ); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); } ); test( 'should appear when attempting to remove Query Block', async ( { diff --git a/test/e2e/specs/site-editor/command-center.spec.js b/test/e2e/specs/site-editor/command-center.spec.js index 9d22248bc2362a..60c5ec30b1247f 100644 --- a/test/e2e/specs/site-editor/command-center.spec.js +++ b/test/e2e/specs/site-editor/command-center.spec.js @@ -19,6 +19,7 @@ test.describe( 'Site editor command palette', () => { test( 'Open the command palette and navigate to the page create page', async ( { page, + editor, } ) => { await page .getByRole( 'button', { name: 'Open command palette' } ) @@ -26,13 +27,11 @@ test.describe( 'Site editor command palette', () => { await page.keyboard.press( 'Meta+k' ); await page.keyboard.type( 'new page' ); await page.getByRole( 'option', { name: 'Add new page' } ).click(); - await page.waitForSelector( 'iframe[name="editor-canvas"]' ); - const frame = page.frame( 'editor-canvas' ); await expect( page ).toHaveURL( '/wp-admin/post-new.php?post_type=page' ); await expect( - frame.getByRole( 'textbox', { name: 'Add title' } ) + editor.canvas.getByRole( 'textbox', { name: 'Add title' } ) ).toBeVisible(); } ); diff --git a/test/e2e/specs/site-editor/font-library.spec.js b/test/e2e/specs/site-editor/font-library.spec.js index e6521cb7c540bc..6aca027a30e788 100644 --- a/test/e2e/specs/site-editor/font-library.spec.js +++ b/test/e2e/specs/site-editor/font-library.spec.js @@ -14,7 +14,7 @@ test.describe( 'Font Library', () => { postId: 'emptytheme//index', postType: 'wp_template', } ); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); } ); test( 'should display the "Manage Fonts" icon', async ( { page } ) => { @@ -39,7 +39,7 @@ test.describe( 'Font Library', () => { postId: 'twentytwentythree//index', postType: 'wp_template', } ); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); } ); test( 'should display the "Manage Fonts" icon', async ( { page } ) => { diff --git a/test/e2e/specs/site-editor/global-styles-sidebar.spec.js b/test/e2e/specs/site-editor/global-styles-sidebar.spec.js index 02717f1b194327..f255640cb2f12f 100644 --- a/test/e2e/specs/site-editor/global-styles-sidebar.spec.js +++ b/test/e2e/specs/site-editor/global-styles-sidebar.spec.js @@ -17,7 +17,7 @@ test.describe( 'Global styles sidebar', () => { postId: 'emptytheme//index', postType: 'wp_template', } ); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); } ); test( 'should filter blocks list results', async ( { page } ) => { diff --git a/test/e2e/specs/site-editor/hybrid-theme.spec.js b/test/e2e/specs/site-editor/hybrid-theme.spec.js index 060daf508491aa..7c9f3fc3a5e232 100644 --- a/test/e2e/specs/site-editor/hybrid-theme.spec.js +++ b/test/e2e/specs/site-editor/hybrid-theme.spec.js @@ -40,7 +40,7 @@ test.describe( 'Hybrid theme', () => { page.getByRole( 'region', { name: 'Editor content' } ) ).toBeVisible(); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); await expect( editor.canvas.getByRole( 'document', { diff --git a/test/e2e/specs/site-editor/iframe-rendering.spec.js b/test/e2e/specs/site-editor/iframe-rendering.spec.js index 02389cc936f06c..4391f134a9f80b 100644 --- a/test/e2e/specs/site-editor/iframe-rendering.spec.js +++ b/test/e2e/specs/site-editor/iframe-rendering.spec.js @@ -14,16 +14,15 @@ test.describe( 'Site editor iframe rendering mode', () => { test( 'Should render editor in standards mode.', async ( { admin, - page, + editor, } ) => { await admin.visitSiteEditor( { postId: 'emptytheme//index', postType: 'wp_template', } ); - - const compatMode = await page - .locator( 'iframe[name="editor-canvas"]' ) - .evaluate( ( iframe ) => iframe.contentDocument.compatMode ); + const compatMode = await editor.canvas + .locator( ':root' ) + .evaluate( () => document.compatMode ); // CSS1Compat = expected standards mode. // BackCompat = quirks mode. diff --git a/test/e2e/specs/site-editor/list-view.spec.js b/test/e2e/specs/site-editor/list-view.spec.js index 3057feaf7772b0..ed64574168bd02 100644 --- a/test/e2e/specs/site-editor/list-view.spec.js +++ b/test/e2e/specs/site-editor/list-view.spec.js @@ -18,7 +18,7 @@ test.describe( 'Site Editor List View', () => { postId: 'emptytheme//header', postType: 'wp_template_part', } ); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); } ); test( 'should open by default when preference is enabled', async ( { @@ -105,7 +105,7 @@ test.describe( 'Site Editor List View', () => { // Since focus is now inside the list view, the shortcut should close // the sidebar. await pageUtils.pressKeys( 'access+o' ); - await expect( listView ).not.toBeVisible(); + await expect( listView ).toBeHidden(); // Focus should now be on the list view toggle button. await expect( @@ -129,7 +129,7 @@ test.describe( 'Site Editor List View', () => { } ) ).toBeFocused(); await pageUtils.pressKeys( 'access+o' ); - await expect( listView ).not.toBeVisible(); + await expect( listView ).toBeHidden(); await expect( page.getByRole( 'button', { name: 'List View' } ) ).toBeFocused(); diff --git a/test/e2e/specs/site-editor/multi-entity-saving.spec.js b/test/e2e/specs/site-editor/multi-entity-saving.spec.js index b4d2f1dbda0d03..bb062aafa3e7f3 100644 --- a/test/e2e/specs/site-editor/multi-entity-saving.spec.js +++ b/test/e2e/specs/site-editor/multi-entity-saving.spec.js @@ -23,7 +23,7 @@ test.describe( 'Site Editor - Multi-entity save flow', () => { postId: 'emptytheme//index', postType: 'wp_template', } ); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); } ); test( 'save flow should work as expected', async ( { editor, page } ) => { diff --git a/test/e2e/specs/site-editor/push-to-global-styles.spec.js b/test/e2e/specs/site-editor/push-to-global-styles.spec.js index 937b2aea0fb454..9507245c192d2f 100644 --- a/test/e2e/specs/site-editor/push-to-global-styles.spec.js +++ b/test/e2e/specs/site-editor/push-to-global-styles.spec.js @@ -17,7 +17,7 @@ test.describe( 'Push to Global Styles button', () => { postId: 'emptytheme//index', postType: 'wp_template', } ); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); } ); test( 'should apply Heading block styles to all Heading blocks', async ( { diff --git a/test/e2e/specs/site-editor/site-editor-inserter.spec.js b/test/e2e/specs/site-editor/site-editor-inserter.spec.js index f8ab0a534d8580..98cb8e4e74149c 100644 --- a/test/e2e/specs/site-editor/site-editor-inserter.spec.js +++ b/test/e2e/specs/site-editor/site-editor-inserter.spec.js @@ -18,7 +18,7 @@ test.describe( 'Site Editor Inserter', () => { test.beforeEach( async ( { admin, editor } ) => { await admin.visitSiteEditor(); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); } ); test( 'inserter toggle button should toggle global inserter', async ( { diff --git a/test/e2e/specs/site-editor/style-book.spec.js b/test/e2e/specs/site-editor/style-book.spec.js index eeaa1270f3ff9e..08f5e6463ebc7f 100644 --- a/test/e2e/specs/site-editor/style-book.spec.js +++ b/test/e2e/specs/site-editor/style-book.spec.js @@ -20,7 +20,7 @@ test.describe( 'Style Book', () => { test.beforeEach( async ( { admin, editor, styleBook, page } ) => { await admin.visitSiteEditor(); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); await styleBook.open(); await expect( page.locator( 'role=region[name="Style Book"i]' ) @@ -30,16 +30,16 @@ test.describe( 'Style Book', () => { test( 'should disable toolbar buttons when open', async ( { page } ) => { await expect( page.locator( 'role=button[name="Toggle block inserter"i]' ) - ).not.toBeVisible(); + ).toBeHidden(); await expect( page.locator( 'role=button[name="Tools"i]' ) - ).not.toBeVisible(); + ).toBeHidden(); await expect( page.locator( 'role=button[name="Undo"i]' ) - ).not.toBeVisible(); + ).toBeHidden(); await expect( page.locator( 'role=button[name="Redo"i]' ) - ).not.toBeVisible(); + ).toBeHidden(); await expect( page.locator( 'role=button[name="View"i]' ) ).toBeDisabled(); @@ -139,7 +139,7 @@ test.describe( 'Style Book', () => { await expect( styleBookRegion, 'should close when close button is clicked' - ).not.toBeVisible(); + ).toBeHidden(); // Open Style Book again. await page.getByRole( 'button', { name: 'Style Book' } ).click(); @@ -153,7 +153,7 @@ test.describe( 'Style Book', () => { await expect( styleBookRegion, 'should close when Escape key is pressed' - ).not.toBeVisible(); + ).toBeHidden(); } ); } ); diff --git a/test/e2e/specs/site-editor/style-variations.spec.js b/test/e2e/specs/site-editor/style-variations.spec.js index ee71e856269b04..8868c733006687 100644 --- a/test/e2e/specs/site-editor/style-variations.spec.js +++ b/test/e2e/specs/site-editor/style-variations.spec.js @@ -39,7 +39,7 @@ test.describe( 'Global styles variations', () => { postId: 'gutenberg-test-themes/style-variations//index', postType: 'wp_template', } ); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); await siteEditorStyleVariations.browseStyles(); @@ -76,7 +76,7 @@ test.describe( 'Global styles variations', () => { postId: 'gutenberg-test-themes/style-variations//index', postType: 'wp_template', } ); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); await siteEditorStyleVariations.browseStyles(); await page.click( 'role=button[name="pink"i]' ); await page.click( @@ -117,7 +117,7 @@ test.describe( 'Global styles variations', () => { postId: 'gutenberg-test-themes/style-variations//index', postType: 'wp_template', } ); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); await siteEditorStyleVariations.browseStyles(); await page.click( 'role=button[name="yellow"i]' ); await page.click( @@ -164,7 +164,7 @@ test.describe( 'Global styles variations', () => { postId: 'gutenberg-test-themes/style-variations//index', postType: 'wp_template', } ); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); await siteEditorStyleVariations.browseStyles(); await page.click( 'role=button[name="pink"i]' ); await page.click( @@ -196,15 +196,16 @@ test.describe( 'Global styles variations', () => { postId: 'gutenberg-test-themes/style-variations//index', postType: 'wp_template', } ); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); await siteEditorStyleVariations.browseStyles(); await page.click( 'role=button[name="yellow"i]' ); - const frame = page.frame( 'editor-canvas' ); - const paragraph = frame.locator( 'text="My awesome paragraph"' ); + const paragraph = editor.canvas.locator( + 'text="My awesome paragraph"' + ); await expect( paragraph ).toHaveCSS( 'color', 'rgb(25, 25, 17)' ); - const body = frame.locator( 'css=body' ); + const body = editor.canvas.locator( 'css=body' ); await expect( body ).toHaveCSS( 'background-color', 'rgb(255, 239, 11)' diff --git a/test/e2e/specs/site-editor/template-part.spec.js b/test/e2e/specs/site-editor/template-part.spec.js index cd81a616b1fee1..d1c215ec2a4949 100644 --- a/test/e2e/specs/site-editor/template-part.spec.js +++ b/test/e2e/specs/site-editor/template-part.spec.js @@ -28,11 +28,13 @@ test.describe( 'Template Part', () => { postId: 'emptytheme//header', postType: 'wp_template_part', } ); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); // Insert a new template block and 'start blank'. await editor.insertBlock( { name: 'core/template-part' } ); - await editor.canvas.click( 'role=button[name="Start blank"i]' ); + await editor.canvas + .locator( 'role=button[name="Start blank"i]' ) + .click(); // Fill in a name in the dialog that pops up. await page.type( 'role=dialog >> role=textbox[name="Name"i]', 'New' ); @@ -56,7 +58,7 @@ test.describe( 'Template Part', () => { } ) => { // Visit the index. await admin.visitSiteEditor(); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); const headerTemplateParts = editor.canvas.locator( '[data-type="core/template-part"]' ); @@ -66,7 +68,7 @@ test.describe( 'Template Part', () => { // Insert a new template block and choose an existing header pattern. await editor.insertBlock( { name: 'core/template-part' } ); - await editor.canvas.click( 'role=button[name="Choose"i]' ); + await editor.canvas.locator( 'role=button[name="Choose"i]' ).click(); await page.click( 'role=listbox[name="Block Patterns"i] >> role=option[name="header"i]' ); @@ -83,7 +85,7 @@ test.describe( 'Template Part', () => { const paragraphText = 'Test 2'; await admin.visitSiteEditor(); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); // Add a block and select it. await editor.insertBlock( { name: 'core/paragraph', @@ -108,7 +110,7 @@ test.describe( 'Template Part', () => { // Check that the header contains the paragraph added earlier. const templatePartWithParagraph = editor.canvas.locator( '[data-type="core/template-part"]', - { has: paragraphBlock } + { hasText: paragraphText } ); await expect( templatePartWithParagraph ).toBeVisible(); @@ -123,7 +125,7 @@ test.describe( 'Template Part', () => { const paragraphText2 = 'Test 4'; await admin.visitSiteEditor(); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); // Add a block and select it. await editor.insertBlock( { name: 'core/paragraph', @@ -158,11 +160,11 @@ test.describe( 'Template Part', () => { // Check that the header contains the paragraph added earlier. const templatePartWithParagraph1 = editor.canvas.locator( '[data-type="core/template-part"]', - { has: paragraphBlock1 } + { hasText: paragraphText1 } ); const templatePartWithParagraph2 = editor.canvas.locator( '[data-type="core/template-part"]', - { has: paragraphBlock2 } + { hasText: paragraphText2 } ); // TODO: I couldn't find an easy way to assert that the same template @@ -185,7 +187,7 @@ test.describe( 'Template Part', () => { postId: 'emptytheme//header', postType: 'wp_template_part', } ); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); await editor.insertBlock( { name: 'core/paragraph', attributes: { @@ -196,14 +198,14 @@ test.describe( 'Template Part', () => { // Visit the index. await admin.visitSiteEditor(); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); // Check that the header contains the paragraph added earlier. const paragraph = editor.canvas.locator( `p >> text="${ paragraphText }"` ); const templatePartWithParagraph = editor.canvas.locator( '[data-type="core/template-part"]', - { has: paragraph } + { hasText: paragraphText } ); await expect( templatePartWithParagraph ).toBeVisible(); @@ -215,7 +217,7 @@ test.describe( 'Template Part', () => { // There should be a paragraph but no header template part. await expect( paragraph ).toBeVisible(); - await expect( templatePartWithParagraph ).not.toBeVisible(); + await expect( templatePartWithParagraph ).toBeHidden(); } ); test( 'shows changes in a template when a template part it contains is modified', async ( { @@ -228,7 +230,7 @@ test.describe( 'Template Part', () => { postId: 'emptytheme//header', postType: 'wp_template_part', } ); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); // Edit the header. await editor.insertBlock( { name: 'core/paragraph', @@ -241,7 +243,7 @@ test.describe( 'Template Part', () => { // Visit the index. await admin.visitSiteEditor(); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); const paragraph = editor.canvas.locator( `p >> text="${ paragraphText }"` ); @@ -261,7 +263,7 @@ test.describe( 'Template Part', () => { postId: 'emptytheme//header', postType: 'wp_template_part', } ); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); await editor.insertBlock( { name: 'core/paragraph', attributes: { @@ -300,7 +302,7 @@ test.describe( 'Template Part', () => { page, } ) => { await admin.visitSiteEditor(); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); // Add a block and select it. await editor.insertBlock( { @@ -341,7 +343,7 @@ test.describe( 'Template Part', () => { page, } ) => { await admin.visitSiteEditor(); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); // Select existing header template part. await editor.selectBlocks( @@ -355,7 +357,7 @@ test.describe( 'Template Part', () => { // Verify that the widget area import button is not there. await expect( page.getByRole( 'combobox', { name: 'Import widget area' } ) - ).not.toBeVisible(); + ).toBeHidden(); } ); test( 'Keeps focus in place on undo in template parts', async ( { @@ -368,7 +370,7 @@ test.describe( 'Template Part', () => { postId: 'emptytheme//header', postType: 'wp_template_part', } ); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); // Select the site title block. const siteTitle = editor.canvas.getByRole( 'document', { diff --git a/test/e2e/specs/site-editor/template-revert.spec.js b/test/e2e/specs/site-editor/template-revert.spec.js index c8edc034901a2b..c281b71d16a183 100644 --- a/test/e2e/specs/site-editor/template-revert.spec.js +++ b/test/e2e/specs/site-editor/template-revert.spec.js @@ -23,7 +23,7 @@ test.describe( 'Template Revert', () => { test.beforeEach( async ( { admin, requestUtils, editor } ) => { await requestUtils.deleteAllTemplates( 'wp_template' ); await admin.visitSiteEditor(); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); } ); test( 'should delete the template after saving the reverted template', async ( { @@ -55,7 +55,7 @@ test.describe( 'Template Revert', () => { page.locator( 'role=region[name="Editor settings"i] >> role=button[name="Actions"i]' ) - ).not.toBeVisible(); + ).toBeHidden(); } ); test( 'should show the original content after revert', async ( { @@ -277,7 +277,7 @@ test.describe( 'Template Revert', () => { await editor.saveSiteEditorEntities(); await admin.visitSiteEditor(); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); const contentAfter = await templateRevertUtils.getCurrentSiteEditorContent(); expect( contentAfter ).toEqual( contentBefore ); diff --git a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js index a7ecebfd9ed443..61fbf7c795a60b 100644 --- a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js +++ b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js @@ -31,7 +31,7 @@ test.describe( 'Global styles revisions', () => { editor, userGlobalStylesRevisions, } ) => { - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); const currentRevisions = await userGlobalStylesRevisions.getGlobalStylesRevisions(); await userGlobalStylesRevisions.openStylesPanel(); @@ -66,7 +66,7 @@ test.describe( 'Global styles revisions', () => { editor, userGlobalStylesRevisions, } ) => { - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); await userGlobalStylesRevisions.openStylesPanel(); await page.getByRole( 'button', { name: 'Colors styles' } ).click(); await page @@ -110,7 +110,7 @@ test.describe( 'Global styles revisions', () => { editor, userGlobalStylesRevisions, } ) => { - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); await userGlobalStylesRevisions.openStylesPanel(); await userGlobalStylesRevisions.openRevisions(); const lastRevisionButton = page diff --git a/test/e2e/specs/site-editor/writing-flow.spec.js b/test/e2e/specs/site-editor/writing-flow.spec.js index f9681a5ea2d46f..8ee6ce0e565572 100644 --- a/test/e2e/specs/site-editor/writing-flow.spec.js +++ b/test/e2e/specs/site-editor/writing-flow.spec.js @@ -24,7 +24,7 @@ test.describe( 'Site editor writing flow', () => { postId: 'emptytheme//header', postType: 'wp_template_part', } ); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); // Select the first site title block. const siteTitleBlock = editor.canvas.locator( 'role=document[name="Block: Site Title"i]' @@ -52,7 +52,7 @@ test.describe( 'Site editor writing flow', () => { postId: 'emptytheme//header', postType: 'wp_template_part', } ); - await editor.canvas.click( 'body' ); + await editor.canvas.locator( 'body' ).click(); // Make sure the sidebar is open. await editor.openDocumentSettingsSidebar(); diff --git a/test/e2e/specs/widgets/customizing-widgets.spec.js b/test/e2e/specs/widgets/customizing-widgets.spec.js index e771c92fc24eef..6a6a51cae26860 100644 --- a/test/e2e/specs/widgets/customizing-widgets.spec.js +++ b/test/e2e/specs/widgets/customizing-widgets.spec.js @@ -36,11 +36,7 @@ test.describe( 'Widgets Customizer', () => { await requestUtils.activateTheme( 'twentytwentyone' ); } ); - test( 'should add blocks', async ( { - page, - widgetsCustomizerPage, - editor, - } ) => { + test( 'should add blocks', async ( { page, widgetsCustomizerPage } ) => { const previewFrame = widgetsCustomizerPage.previewFrame; await widgetsCustomizerPage.visitCustomizerPage(); @@ -86,9 +82,11 @@ test.describe( 'Widgets Customizer', () => { await page.click( 'role=option[name="Search"i]' ); - await editor.canvas.focus( - 'role=document[name="Block: Search"i] >> role=textbox[name="Label text"i]' - ); + await page + .locator( + 'role=document[name="Block: Search"i] >> role=textbox[name="Label text"i]' + ) + .focus(); await page.keyboard.type( 'My ' ); @@ -233,7 +231,6 @@ test.describe( 'Widgets Customizer', () => { page, requestUtils, widgetsCustomizerPage, - editor, } ) => { await requestUtils.addWidgetBlock( `\n

First Paragraph

\n`, @@ -282,7 +279,7 @@ test.describe( 'Widgets Customizer', () => { await headingWidget.click(); // noop click on the widget text to unfocus the editor and hide toolbar await editHeadingWidget.click(); - const headingBlock = editor.canvas.locator( + const headingBlock = page.locator( 'role=document[name="Block: Heading"i] >> text="First Heading"' ); await expect( headingBlock ).toBeFocused(); @@ -586,13 +583,12 @@ test.describe( 'Widgets Customizer', () => { test( 'preserves content in the Custom HTML block', async ( { page, widgetsCustomizerPage, - editor, } ) => { await widgetsCustomizerPage.visitCustomizerPage(); await widgetsCustomizerPage.expandWidgetArea( 'Footer #1' ); await widgetsCustomizerPage.addBlock( 'Custom HTML' ); - const HTMLBlockTextarea = editor.canvas.locator( + const HTMLBlockTextarea = page.locator( 'role=document[name="Block: Custom HTML"i] >> role=textbox[name="HTML"i]' ); await HTMLBlockTextarea.type( 'hello' );