diff --git a/packages/e2e-test-utils/src/drag-and-resize.js b/packages/e2e-test-utils/src/drag-and-resize.js index f3c45eec479ec..595f33c454dda 100644 --- a/packages/e2e-test-utils/src/drag-and-resize.js +++ b/packages/e2e-test-utils/src/drag-and-resize.js @@ -16,8 +16,24 @@ export async function dragAndResize( element, delta ) { height: elementHeight, } = await element.boundingBox(); - const originX = elementX + elementWidth / 2; - const originY = elementY + elementHeight / 2; + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + + const windowRect = await frame.evaluate( () => { + if ( window.frameElement ) { + return { x: 0, y: 0 }; + } + + const winRect = window.frameElement.getBoundingClientRect(); + return { + x: winRect.x, + y: winRect.y, + }; + } ); + + const originX = windowRect.x + elementX + elementWidth / 2; + const originY = windowRect.y + elementY + elementHeight / 2; await page.mouse.move( originX, originY ); await page.mouse.down(); diff --git a/packages/e2e-tests/specs/editor/blocks/spacer.test.js b/packages/e2e-tests/specs/editor/blocks/spacer.test.js index 4850d73570e96..e1e48512aa11a 100644 --- a/packages/e2e-tests/specs/editor/blocks/spacer.test.js +++ b/packages/e2e-tests/specs/editor/blocks/spacer.test.js @@ -5,7 +5,6 @@ import { clickBlockAppender, getEditedPostContent, createNewPost, - dragAndResize, } from '@wordpress/e2e-test-utils'; describe( 'Spacer', () => { @@ -28,13 +27,36 @@ describe( 'Spacer', () => { await page.keyboard.type( '/spacer' ); await page.keyboard.press( 'Enter' ); - const resizableHandle = await page.$( - '.block-library-spacer__resize-container .components-resizable-box__handle' - ); - await dragAndResize( resizableHandle, { x: 0, y: 50 } ); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + + const [ coord1, coord2 ] = await frame.evaluate( () => { + const element = document.querySelector( + '.block-library-spacer__resize-container .components-resizable-box__handle' + ); + const rect = element.getBoundingClientRect(); + const winRect = window.frameElement.getBoundingClientRect(); + return [ + { + x: winRect.x + rect.x + rect.width / 2, + y: winRect.y + rect.y + rect.height / 2, + }, + { + x: winRect.x + rect.x + rect.width / 2, + y: winRect.y + rect.y + rect.height / 2 + 50, + }, + ]; + } ); + + await page.mouse.move( coord1.x, coord1.y ); + await page.mouse.down(); + await page.mouse.move( coord2.x, coord2.y ); + await page.mouse.up(); + expect( await getEditedPostContent() ).toMatchSnapshot(); - const selectedSpacer = await page.$( + const selectedSpacer = await frame.$( '[data-type="core/spacer"].is-selected' ); expect( selectedSpacer ).not.toBe( null ); diff --git a/packages/e2e-tests/specs/editor/plugins/container-blocks.test.js b/packages/e2e-tests/specs/editor/plugins/container-blocks.test.js index e6d162eb18520..cbfb89033597a 100644 --- a/packages/e2e-tests/specs/editor/plugins/container-blocks.test.js +++ b/packages/e2e-tests/specs/editor/plugins/container-blocks.test.js @@ -98,8 +98,12 @@ describe( 'Container block without paragraph support', () => { it( 'ensures we can use the alternative block appender properly', async () => { await insertBlock( 'Container without paragraph' ); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + // Open the specific appender used when there's no paragraph support. - await page.click( + await frame.click( '.block-editor-inner-blocks .block-list-appender .block-list-appender__toggle' ); diff --git a/packages/e2e-tests/specs/editor/plugins/custom-post-types.test.js b/packages/e2e-tests/specs/editor/plugins/custom-post-types.test.js index fdfa152256a35..0026dce0b24d5 100644 --- a/packages/e2e-tests/specs/editor/plugins/custom-post-types.test.js +++ b/packages/e2e-tests/specs/editor/plugins/custom-post-types.test.js @@ -37,7 +37,10 @@ describe( 'Test Custom Post Types', () => { it( 'It should be able to create an hierarchical post without title support', async () => { // Create a parent post. await createNewPost( { postType: 'hierar-no-title' } ); - await page.click( '.block-editor-writing-flow' ); + let frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + await frame.click( '.block-editor-writing-flow' ); await page.keyboard.type( 'Parent Post' ); await publishPost(); // Create a post that is a child of the previously created post. @@ -52,7 +55,10 @@ describe( 'Test Custom Post Types', () => { '.editor-page-attributes__parent select', valueToSelect ); - await page.click( '.block-editor-writing-flow' ); + frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + await frame.click( '.block-editor-writing-flow' ); await page.keyboard.type( 'Child Post' ); await publishPost(); // Reload the child post and verify it is still correctly selected as a child post. diff --git a/packages/e2e-tests/specs/editor/plugins/hooks-api.test.js b/packages/e2e-tests/specs/editor/plugins/hooks-api.test.js index e015de70257c7..dd70634a3e155 100644 --- a/packages/e2e-tests/specs/editor/plugins/hooks-api.test.js +++ b/packages/e2e-tests/specs/editor/plugins/hooks-api.test.js @@ -33,7 +33,10 @@ describe( 'Using Hooks API', () => { it( 'Pressing reset block button resets the block', async () => { await clickBlockAppender(); await page.keyboard.type( 'First paragraph' ); - const paragraphContent = await page.$eval( + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + const paragraphContent = await frame.$eval( 'p[data-type="core/paragraph"]', ( element ) => element.textContent ); diff --git a/packages/e2e-tests/specs/editor/plugins/innerblocks-locking-all-embed.js b/packages/e2e-tests/specs/editor/plugins/innerblocks-locking-all-embed.js index a0a83fbf90e61..e6e7fc92d0726 100644 --- a/packages/e2e-tests/specs/editor/plugins/innerblocks-locking-all-embed.js +++ b/packages/e2e-tests/specs/editor/plugins/innerblocks-locking-all-embed.js @@ -43,14 +43,17 @@ describe( 'Embed block inside a locked all parent', () => { it( 'embed block should be able to embed external content', async () => { await insertBlock( 'Test Inner Blocks Locking All Embed' ); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); const embedInputSelector = '.components-placeholder__input[aria-label="Embed URL"]'; - await page.waitForSelector( embedInputSelector ); - await page.click( embedInputSelector ); + await frame.waitForSelector( embedInputSelector ); + await frame.click( embedInputSelector ); // This URL should not have a trailing slash. await page.keyboard.type( 'https://twitter.com/wordpress' ); await page.keyboard.press( 'Enter' ); // The twitter block should appear correctly. - await page.waitForSelector( 'figure.wp-block-embed' ); + await frame.waitForSelector( 'figure.wp-block-embed' ); } ); } );