Fix more e2e tests

packages/e2e-test-utils/README.md

@@ -55,6 +55,7 @@ Clicks a button based on the text on the button.
 _Parameters_
 
 -   _buttonText_ `string`: The text that appears on the button to click.
+-   _frame_ `Object`: 
 
 <a name="clickOnCloseModalButton" href="#clickOnCloseModalButton">#</a> **clickOnCloseModalButton**
 

packages/e2e-test-utils/src/click-button.js

@@ -2,9 +2,10 @@
  * Clicks a button based on the text on the button.
  *
  * @param {string} buttonText The text that appears on the button to click.
+ * @param {Object} frame
  */
-export async function clickButton( buttonText ) {
-	const button = await page.waitForXPath(
+export async function clickButton( buttonText, frame = page ) {
+	const button = await frame.waitForXPath(
 		`//button[contains(text(), '${ buttonText }')]`
 	);
 	await button.click();

packages/e2e-tests/specs/editor/blocks/heading.test.js

@@ -83,7 +83,10 @@ describe( 'Heading', () => {
 		await page.click( COLOR_INPUT_FIELD_SELECTOR );
 		await pressKeyWithModifier( 'primary', 'A' );
 		await page.keyboard.type( '#7700ff' );
-		await page.click( 'h3[data-type="core/heading"]' );
+		const frame = await page
+			.frames()
+			.find( ( f ) => f.name() === 'editor-content' );
+		await frame.click( 'h3[data-type="core/heading"]' );
 		await page.waitForSelector(
 			'.component-color-indicator[aria-label="(Color: #7700ff)"]'
 		);
@@ -101,7 +104,10 @@ describe( 'Heading', () => {
 		const colorButtonSelector = `//button[@aria-label='Color: Luminous vivid orange']`;
 		const [ colorButton ] = await page.$x( colorButtonSelector );
 		await colorButton.click();
-		await page.click( 'h2[data-type="core/heading"]' );
+		const frame = await page
+			.frames()
+			.find( ( f ) => f.name() === 'editor-content' );
+		await frame.click( 'h2[data-type="core/heading"]' );
 		await page.waitForXPath(
 			`${ colorButtonSelector }[@aria-pressed='true']`
 		);

packages/e2e-tests/specs/editor/blocks/table.test.js

@@ -34,38 +34,42 @@ describe( 'Table', () => {
 	it( 'displays a form for choosing the row and column count of the table', async () => {
 		await insertBlock( 'Table' );
 
+		const frame = await page
+			.frames()
+			.find( ( f ) => f.name() === 'editor-content' );
+
 		// Check for existence of the column count field.
-		const columnCountLabel = await page.$x(
+		const columnCountLabel = await frame.$x(
 			"//div[@data-type='core/table']//label[text()='Column Count']"
 		);
 		expect( columnCountLabel ).toHaveLength( 1 );
 
 		// Modify the column count.
 		await columnCountLabel[ 0 ].click();
-		const currentColumnCount = await page.evaluate(
+		const currentColumnCount = await frame.evaluate(
 			() => document.activeElement.value
 		);
 		expect( currentColumnCount ).toBe( '2' );
 		await page.keyboard.press( 'Backspace' );
 		await page.keyboard.type( '5' );
 
 		// Check for existence of the row count field.
-		const rowCountLabel = await page.$x(
+		const rowCountLabel = await frame.$x(
 			"//div[@data-type='core/table']//label[text()='Row Count']"
 		);
 		expect( rowCountLabel ).toHaveLength( 1 );
 
 		// Modify the row count.
 		await rowCountLabel[ 0 ].click();
-		const currentRowCount = await page.evaluate(
+		const currentRowCount = await frame.evaluate(
 			() => document.activeElement.value
 		);
 		expect( currentRowCount ).toBe( '2' );
 		await page.keyboard.press( 'Backspace' );
 		await page.keyboard.type( '10' );
 
 		// Create the table.
-		await clickButton( createButtonLabel );
+		await clickButton( createButtonLabel, frame );
 
 		// Expect the post content to have a correctly sized table.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
@@ -74,11 +78,15 @@ describe( 'Table', () => {
 	it( 'allows text to by typed into cells', async () => {
 		await insertBlock( 'Table' );
 
+		const frame = await page
+			.frames()
+			.find( ( f ) => f.name() === 'editor-content' );
+
 		// Create the table.
-		await clickButton( createButtonLabel );
+		await clickButton( createButtonLabel, frame );
 
 		// Click the first cell and add some text.
-		await page.click( 'td' );
+		await frame.click( 'td' );
 		await page.keyboard.type( 'This' );
 
 		// Tab to the next cell and add some text.
@@ -109,8 +117,12 @@ describe( 'Table', () => {
 		expect( headerSwitch ).toHaveLength( 0 );
 		expect( footerSwitch ).toHaveLength( 0 );
 
+		const frame = await page
+			.frames()
+			.find( ( f ) => f.name() === 'editor-content' );
+
 		// Create the table.
-		await clickButton( createButtonLabel );
+		await clickButton( createButtonLabel, frame );
 
 		// Expect the header and footer switches to be present now that the table has been created.
 		headerSwitch = await page.$x( headerSwitchSelector );
@@ -122,13 +134,13 @@ describe( 'Table', () => {
 		await headerSwitch[ 0 ].click();
 		await footerSwitch[ 0 ].click();
 
-		await page.click( 'thead th' );
+		await frame.click( 'thead th' );
 		await page.keyboard.type( 'header' );
 
-		await page.click( 'tbody td' );
+		await frame.click( 'tbody td' );
 		await page.keyboard.type( 'body' );
 
-		await page.click( 'tfoot td' );
+		await frame.click( 'tfoot td' );
 		await page.keyboard.type( 'footer' );
 
 		// Expect the table to have a header, body and footer with written content.
@@ -145,8 +157,12 @@ describe( 'Table', () => {
 	it( 'allows adding and deleting columns across the table header, body and footer', async () => {
 		await insertBlock( 'Table' );
 
+		const frame = await page
+			.frames()
+			.find( ( f ) => f.name() === 'editor-content' );
+
 		// Create the table.
-		await clickButton( createButtonLabel );
+		await clickButton( createButtonLabel, frame );
 
 		// Toggle on the switches and add some content.
 		const headerSwitch = await page.$x(
@@ -158,7 +174,7 @@ describe( 'Table', () => {
 		await headerSwitch[ 0 ].click();
 		await footerSwitch[ 0 ].click();
 
-		await page.click( 'td' );
+		await frame.click( 'td' );
 
 		// Add a column.
 		await clickBlockToolbarButton( 'Edit table' );
@@ -167,7 +183,7 @@ describe( 'Table', () => {
 		// Expect the table to have 3 columns across the header, body and footer.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 
-		await page.click( 'td' );
+		await frame.click( 'td' );
 
 		// Delete a column.
 		await clickBlockToolbarButton( 'Edit table' );
@@ -180,18 +196,22 @@ describe( 'Table', () => {
 	it( 'allows columns to be aligned', async () => {
 		await insertBlock( 'Table' );
 
-		const [ columnCountLabel ] = await page.$x(
+		const frame = await page
+			.frames()
+			.find( ( f ) => f.name() === 'editor-content' );
+
+		const [ columnCountLabel ] = await frame.$x(
 			"//div[@data-type='core/table']//label[text()='Column Count']"
 		);
 		await columnCountLabel.click();
 		await page.keyboard.press( 'Backspace' );
 		await page.keyboard.type( '4' );
 
 		// Create the table.
-		await clickButton( createButtonLabel );
+		await clickButton( createButtonLabel, frame );
 
 		// Click the first cell and add some text. Don't align.
-		const cells = await page.$$( 'td,th' );
+		const cells = await frame.$$( 'td,th' );
 		await cells[ 0 ].click();
 		await page.keyboard.type( 'None' );
 
@@ -218,8 +238,12 @@ describe( 'Table', () => {
 	it( 'allows cells to be selected when the cell area outside of the RichText is clicked', async () => {
 		await insertBlock( 'Table' );
 
+		const frame = await page
+			.frames()
+			.find( ( f ) => f.name() === 'editor-content' );
+
 		// Create the table.
-		await clickButton( createButtonLabel );
+		await clickButton( createButtonLabel, frame );
 
 		// Enable fixed width as it exascerbates the amount of empty space around the RichText.
 		const [ fixedWidthSwitch ] = await page.$x(
@@ -228,19 +252,20 @@ describe( 'Table', () => {
 		await fixedWidthSwitch.click();
 
 		// Add multiple new lines to the first cell to make it taller.
-		await page.click( 'td' );
+		await frame.click( 'td' );
 		await page.keyboard.type( '\n\n\n\n' );
 
 		// Get the bounding client rect for the second cell.
-		const { x: secondCellX, y: secondCellY } = await page.evaluate( () => {
+		const { x: secondCellX, y: secondCellY } = await frame.evaluate( () => {
 			const secondCell = document.querySelectorAll(
 				'.wp-block-table td'
 			)[ 1 ];
 			// Page.evaluate can only return a serializable value to the
 			// parent process, so destructure and restructure the result
 			// into an object.
 			const { x, y } = secondCell.getBoundingClientRect();
-			return { x, y };
+			const winRect = window.frameElement.getBoundingClientRect();
+			return { x: x + winRect.x, y: y + winRect.y };
 		} );
 
 		// Click in the top left corner of the second cell and type some text.
@@ -254,11 +279,15 @@ describe( 'Table', () => {
 	it( 'allows a caption to be added', async () => {
 		await insertBlock( 'Table' );
 
+		const frame = await page
+			.frames()
+			.find( ( f ) => f.name() === 'editor-content' );
+
 		// Create the table.
-		await clickButton( createButtonLabel );
+		await clickButton( createButtonLabel, frame );
 
 		// Click the first cell and add some text.
-		await page.click( '.wp-block-table figcaption' );
+		await frame.click( '.wp-block-table figcaption' );
 		await page.keyboard.type( 'Caption!' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();

packages/e2e-tests/specs/editor/plugins/wp-editor-meta-box.test.js

@@ -19,8 +19,11 @@ describe( 'WP Editor Meta Boxes', () => {
 	} );
 
 	it( 'Should save the changes', async () => {
+		const frame = await page
+			.frames()
+			.find( ( f ) => f.name() === 'editor-content' );
 		// Add title to enable valid non-empty post save.
-		await page.type( '.editor-post-title__input', 'Hello Meta' );
+		await frame.type( '.editor-post-title__input', 'Hello Meta' );
 
 		// Type something
 		await expect( page ).toClick( '#test_tinymce_id-html' );

packages/e2e-tests/specs/editor/various/autosave.test.js

@@ -310,7 +310,11 @@ describe( 'autosave', () => {
 		await page.keyboard.type( 'before publish' );
 		await publishPost();
 
-		await page.click( '[data-type="core/paragraph"]' );
+		const frame = await page
+			.frames()
+			.find( ( f ) => f.name() === 'editor-content' );
+
+		await frame.click( '[data-type="core/paragraph"]' );
 		await page.keyboard.type( ' after publish' );
 
 		// Trigger remote autosave

packages/e2e-tests/specs/editor/various/editor-modes.test.js

@@ -16,8 +16,11 @@ describe( 'Editing modes (visual/HTML)', () => {
 	} );
 
 	it( 'should switch between visual and HTML modes', async () => {
+		const frame = await page
+			.frames()
+			.find( ( f ) => f.name() === 'editor-content' );
 		// This block should be in "visual" mode by default.
-		let visualBlock = await page.$$(
+		let visualBlock = await frame.$$(
 			'.block-editor-block-list__layout .block-editor-block-list__block.rich-text'
 		);
 		expect( visualBlock ).toHaveLength( 1 );
@@ -34,7 +37,7 @@ describe( 'Editing modes (visual/HTML)', () => {
 		await changeModeButton.click();
 
 		// Wait for the block to be converted to HTML editing mode.
-		const htmlBlock = await page.$$(
+		const htmlBlock = await frame.$$(
 			'.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea'
 		);
 		expect( htmlBlock ).toHaveLength( 1 );
@@ -51,7 +54,7 @@ describe( 'Editing modes (visual/HTML)', () => {
 		await changeModeButton.click();
 
 		// This block should be in "visual" mode by default.
-		visualBlock = await page.$$(
+		visualBlock = await frame.$$(
 			'.block-editor-block-list__layout .block-editor-block-list__block.rich-text'
 		);
 		expect( visualBlock ).toHaveLength( 1 );
@@ -89,8 +92,12 @@ describe( 'Editing modes (visual/HTML)', () => {
 		);
 		await changeModeButton.click();
 
+		const frame = await page
+			.frames()
+			.find( ( f ) => f.name() === 'editor-content' );
+
 		// Make sure the paragraph content is rendered as expected.
-		let htmlBlockContent = await page.$eval(
+		let htmlBlockContent = await frame.$eval(
 			'.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea',
 			( node ) => node.textContent
 		);
@@ -106,7 +113,7 @@ describe( 'Editing modes (visual/HTML)', () => {
 		);
 
 		// Make sure the HTML content updated.
-		htmlBlockContent = await page.$eval(
+		htmlBlockContent = await frame.$eval(
 			'.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea',
 			( node ) => node.textContent
 		);

packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js

@@ -10,7 +10,10 @@ import {
 } from '@wordpress/e2e-test-utils';
 
 async function getActiveLabel() {
-	return await page.evaluate( () => {
+	const frame = await page
+		.frames()
+		.find( ( f ) => f.name() === 'editor-content' );
+	return await frame.evaluate( () => {
 		return (
 			document.activeElement.getAttribute( 'aria-label' ) ||
 			document.activeElement.innerHTML
@@ -22,6 +25,7 @@ const navigateToContentEditorTop = async () => {
 	// Use 'Ctrl+`' to return to the top of the editor
 	await pressKeyWithModifier( 'ctrl', '`' );
 	await pressKeyWithModifier( 'ctrl', '`' );
+	await expect( await getActiveLabel() ).toBe( 'Editor content' );
 };
 
 const tabThroughParagraphBlock = async ( paragraphText ) => {
@@ -33,8 +37,11 @@ const tabThroughParagraphBlock = async ( paragraphText ) => {
 
 	await page.keyboard.press( 'Tab' );
 	await expect( await getActiveLabel() ).toBe( 'Paragraph block' );
+	const frame = await page
+		.frames()
+		.find( ( f ) => f.name() === 'editor-content' );
 	await expect(
-		await page.evaluate( () => document.activeElement.innerHTML )
+		await frame.evaluate( () => document.activeElement.innerHTML )
 	).toBe( paragraphText );
 
 	await page.keyboard.press( 'Tab' );