fix few more e2e

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();

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 );

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'
 		);
 

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.

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
 		);

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' );
 	} );
 } );