E2E tests: handle block editor frame when using Gutenberg (#28386)

.github/files/e2e-tests/e2e-matrix.js

@@ -81,14 +81,12 @@ switch ( process.env.GITHUB_EVENT_NAME ) {
 			const refType = process.env.REF_TYPE;
 
 			if ( repoName === 'jetpack-production' ) {
-				// Tests with Gutenberg fail since Gutenberg 14.9.0 introduced an iframe in the block editor.
-				// Temporary disable the suite until a permanent fix is in place.
-				// projects.push( {
-				// 	project: 'Blocks with latest Gutenberg',
-				// 	path: 'projects/plugins/jetpack/tests/e2e',
-				// 	testArgs: [ 'blocks', '--retries=1' ],
-				// 	suite: 'gutenberg',
-				// } );
+				projects.push( {
+					project: 'Blocks with latest Gutenberg',
+					path: 'projects/plugins/jetpack/tests/e2e',
+					testArgs: [ 'blocks', '--retries=1' ],
+					suite: 'gutenberg',
+				} );
 
 				if ( refType === 'tag' || refName === 'trunk' ) {
 					projects.push( {

tools/e2e-commons/pages/wp-admin/block-editor.js

@@ -1,11 +1,14 @@
 import WpPage from '../wp-page.js';
 import logger from '../../logger.cjs';
 import { resolveSiteUrl } from '../../helpers/utils-helper.cjs';
+import { BlockEditorCanvas } from './index.js';
 
 export default class BlockEditorPage extends WpPage {
 	constructor( page ) {
 		const url = resolveSiteUrl() + '/wp-admin/post-new.php';
 		super( page, { expectedSelectors: [ '#editor' ], url } );
+
+		this.canvasPage = new BlockEditorCanvas( page );
 	}
 
 	//region selectors
@@ -80,14 +83,15 @@ export default class BlockEditorPage extends WpPage {
 	}
 
 	async getInsertedBlock( blockName ) {
-		return (
-			await this.waitForElementToBeVisible( this.insertedBlockSel( blockName ) )
-		 ).getAttribute( 'data-block' );
+		const blockElement = await this.canvasPage
+			.canvas()
+			.waitForSelector( this.insertedBlockSel( blockName ) );
+		return blockElement.getAttribute( 'data-block' );
 	}
 
 	async setTitle( title ) {
 		await this.selectPostTitle();
-		await this.fill( this.postTitleFldSel, title );
+		await this.canvasPage.canvas().fill( this.postTitleFldSel, title );
 	}
 
 	async publishPost() {
@@ -107,8 +111,8 @@ export default class BlockEditorPage extends WpPage {
 	}
 
 	async selectPostTitle() {
-		await this.focus( this.postTitleFldSel );
-		await this.click( this.postTitleFldSel );
+		await this.canvasPage.canvas().focus( this.postTitleFldSel );
+		await this.canvasPage.canvas().click( this.postTitleFldSel );
 	}
 
 	async waitForAvailableBlock( blockSlug ) {

tools/e2e-commons/pages/wp-admin/blocks/editor-canvas.js

@@ -0,0 +1,10 @@
+import PageActions from '../../page-actions.js';
+
+export default class BlockEditorCanvas extends PageActions {
+	constructor( page ) {
+		super( page, 'BlockEditorCanvas', [ '.edit-post-visual-editor' ] );
+	}
+	canvas() {
+		return this.page.frame( 'editor-canvas' ) || this.page;
+	}
+}

tools/e2e-commons/pages/wp-admin/blocks/eventbrite.js

@@ -1,6 +1,6 @@
-import PageActions from '../../page-actions.js';
+import BlockEditorCanvas from './editor-canvas.js';
 
-export default class EventbriteBlock extends PageActions {
+export default class EventbriteBlock extends BlockEditorCanvas {
 	constructor( blockId, page, eventId ) {
 		super( page, 'Eventbrite block' );
 		this.blockTitle = EventbriteBlock.title();
@@ -24,12 +24,9 @@ export default class EventbriteBlock extends PageActions {
 		const inputSelector = this.getSelector( '.components-placeholder__input' );
 		const descriptionSelector = this.getSelector( "button[type='submit']" );
 
-		await this.fill( inputSelector, this.embedUrl() );
-		await this.click( descriptionSelector );
-		await this.waitForElementToBeVisible(
-			'.wp-block-jetpack-eventbrite .components-sandbox',
-			30000
-		);
+		await this.canvas().fill( inputSelector, this.embedUrl() );
+		await this.canvas().click( descriptionSelector );
+		await this.canvas().waitForSelector( '.wp-block-jetpack-eventbrite .components-sandbox' );
 	}
 
 	getSelector( selector ) {

tools/e2e-commons/pages/wp-admin/blocks/form.js

@@ -1,12 +1,11 @@
-import PageActions from '../../page-actions.js';
-
-export default class FormBlock extends PageActions {
+import BlockEditorCanvas from './editor-canvas.js';
+import logger from '../../../logger.cjs';
+export default class FormBlock extends BlockEditorCanvas {
 	constructor( blockId, page ) {
 		super( page, 'Form block' );
 		this.blockTitle = FormBlock.title();
 		this.blockSelector = '#block-' + blockId;
 	}
-
 	static name() {
 		return 'contact-form';
 	}
@@ -15,8 +14,10 @@ export default class FormBlock extends PageActions {
 		return 'Form';
 	}
 
-	async selectFormVariation( variationText = 'Contact Form' ) {
-		await this.click( `text=${ variationText }` );
+	async selectFormVariation() {
+		logger.step( `Selecting form variation` );
+		await this.canvas().click( `button:has-text('Explore Form Patterns')` );
+		await this.click( `button:has-text('Choose')` );
 	}
 
 	/**

tools/e2e-commons/pages/wp-admin/blocks/mailchimp.js

@@ -1,10 +1,10 @@
 import { LoginPage, ConnectionsPage } from '../../wpcom/index.js';
 import logger from '../../../logger.cjs';
-import PageActions from '../../page-actions.js';
+import BlockEditorCanvas from './editor-canvas.js';
 import axios from 'axios';
 import { resolveSiteUrl } from '../../../helpers/utils-helper.cjs';
 
-export default class MailchimpBlock extends PageActions {
+export default class MailchimpBlock extends BlockEditorCanvas {
 	constructor( blockId, page ) {
 		super( page, 'Mailchimp block' );
 		this.blockTitle = MailchimpBlock.title();
@@ -50,10 +50,19 @@ export default class MailchimpBlock extends PageActions {
 		} else {
 			logger.step( `Connecting Mailchimp` );
 
-			const formSelector = await this.waitForElementToBeVisible( this.setupFormBtnSel );
+			const formSelector = await this.canvas().waitForSelector( this.setupFormBtnSel );
 			const hrefProperty = await formSelector.getProperty( 'href' );
 			const connectionsUrl = await hrefProperty.jsonValue();
-			const wpComTab = await this.clickAndWaitForNewPage( this.setupFormBtnSel );
+			// const wpComTab = await this.clickAndWaitForNewPage( this.setupFormBtnSel );
+
+			const [ wpComTab ] = await Promise.all( [
+				this.page.context().waitForEvent( 'page' ),
+				this.canvas().click( this.setupFormBtnSel ),
+			] );
+
+			logger.action( 'Waiting for new page' );
+			await wpComTab.waitForLoadState();
+			await wpComTab.bringToFront();
 
 			// Quick fix for redirect URL not working with site ID
 			const workingUrl = connectionsUrl.replace(
@@ -93,10 +102,10 @@ export default class MailchimpBlock extends PageActions {
 			}
 
 			await this.page.bringToFront();
-			await this.click( this.recheckConnectionLnkSel );
+			await this.canvas().click( this.recheckConnectionLnkSel );
 		}
 
-		await this.waitForElementToBeVisible( this.joinBtnSel );
+		await this.canvas().waitForSelector( this.joinBtnSel );
 	}
 
 	/**

tools/e2e-commons/pages/wp-admin/blocks/pinterest.js

@@ -1,6 +1,6 @@
-import PageActions from '../../page-actions.js';
+import BlockEditorCanvas from './editor-canvas.js';
 
-export default class PinterestBlock extends PageActions {
+export default class PinterestBlock extends BlockEditorCanvas {
 	constructor( blockId, page, pinId ) {
 		super( page, 'Pinterest block' );
 		this.blockTitle = PinterestBlock.title();
@@ -25,12 +25,9 @@ export default class PinterestBlock extends PageActions {
 		const inputSelector = this.getSelector( '.components-placeholder__input' );
 		const descriptionSelector = this.getSelector( "button[type='submit']" );
 
-		await this.fill( inputSelector, this.embedUrl() );
-		await this.click( descriptionSelector );
-		await this.waitForElementToBeVisible(
-			'.wp-block-jetpack-pinterest .components-sandbox',
-			30000
-		);
+		await this.canvas().fill( inputSelector, this.embedUrl() );
+		await this.canvas().click( descriptionSelector );
+		await this.canvas().waitForSelector( '.wp-block-jetpack-pinterest .components-sandbox' );
 	}
 
 	getSelector( selector ) {

tools/e2e-commons/pages/wp-admin/blocks/simple-payments.js

@@ -1,6 +1,6 @@
-import PageActions from '../../page-actions.js';
+import BlockEditorCanvas from './editor-canvas.js';
 
-export default class SimplePaymentBlock extends PageActions {
+export default class SimplePaymentBlock extends BlockEditorCanvas {
 	constructor( blockId, page ) {
 		super( page, 'Pay with PayPal block' );
 		this.blockTitle = SimplePaymentBlock.title();
@@ -27,10 +27,10 @@ export default class SimplePaymentBlock extends PageActions {
 		const priceSelector = this.getSelector( '.simple-payments__field-price input' );
 		const emailSelector = this.getSelector( '.simple-payments__field-email input' );
 
-		await this.fill( titleSelector, title );
-		await this.fill( descriptionSelector, description );
-		await this.fill( priceSelector, price );
-		await this.fill( emailSelector, email );
+		await this.canvas().fill( titleSelector, title );
+		await this.canvas().fill( descriptionSelector, description );
+		await this.canvas().fill( priceSelector, price );
+		await this.canvas().fill( emailSelector, email );
 		await this.waitForResponse();
 	}
 
@@ -50,8 +50,6 @@ export default class SimplePaymentBlock extends PageActions {
 	 * @param {page} page Playwright page instance
 	 */
 	static async isRendered( page ) {
-		const containerSelector = '.jetpack-simple-payments-product';
-
-		await page.waitForSelector( containerSelector );
+		await page.waitForSelector( '.jetpack-simple-payments-product' );
 	}
 }

tools/e2e-commons/pages/wp-admin/blocks/subscribe.js

@@ -1,21 +1,18 @@
 import PageActions from '../../page-actions.js';
-
 export default class SubscribeBlock extends PageActions {
 	constructor( blockId, page ) {
 		super( page, 'Subscribe' );
 		this.blockTitle = SubscribeBlock.title();
 		this.page = page;
 		this.blockSelector = '#block-' + blockId;
 	}
-
 	static name() {
 		return 'subscriptions';
 	}
 
 	static title() {
 		return 'Subscribe';
 	}
-
 	async checkBlock() {
 		await this.page.waitForResponse(
 			r =>

tools/e2e-commons/pages/wp-admin/blocks/tilled-gallery.js

@@ -1,6 +1,6 @@
-import PageActions from '../../page-actions.js';
+import BlockEditorCanvas from './editor-canvas.js';
 
-export default class TiledGallery extends PageActions {
+export default class TiledGallery extends BlockEditorCanvas {
 	constructor( blockId, page ) {
 		super( page, 'Tiled Gallery block' );
 		this.blockTitle = TiledGallery.title();
@@ -16,7 +16,7 @@ export default class TiledGallery extends PageActions {
 	}
 
 	async addImages( numImages = 4 ) {
-		await this.click( this.#getSelector( 'button.jetpack-external-media-button-menu' ) );
+		await this.canvas().click( this.#getSelector( 'button.jetpack-external-media-button-menu' ) );
 		await this.click( 'text=Openverse' );
 
 		const modal = this.page.getByRole( 'dialog' );

tools/e2e-commons/pages/wp-admin/blocks/word-ads.js

@@ -1,6 +1,5 @@
-import PageActions from '../../page-actions.js';
-
-export default class WordAdsBlock extends PageActions {
+import BlockEditorCanvas from './editor-canvas.js';
+export default class WordAdsBlock extends BlockEditorCanvas {
 	constructor( blockId, page ) {
 		super( page, 'Ad block' );
 		this.blockTitle = WordAdsBlock.title();
@@ -27,7 +26,7 @@ export default class WordAdsBlock extends PageActions {
 	}
 
 	async focus() {
-		return await this.click( this.getSelector( '.wp-block-jetpack-wordads' ) );
+		return await this.canvas().click( this.getSelector( '.wp-block-jetpack-wordads' ) );
 	}
 
 	/**

tools/e2e-commons/pages/wp-admin/index.js

@@ -7,6 +7,7 @@ export { default as WordAdsBlock } from './blocks/word-ads.js';
 export { default as FormBlock } from './blocks/form.js';
 export { default as TiledGalleryBlock } from './blocks/tilled-gallery.js';
 export { default as SubscribeBlock } from './blocks/subscribe.js';
+export { default as BlockEditorCanvas } from './blocks/editor-canvas.js';
 
 export { default as DashboardPage } from './dashboard.js';
 export { default as InPlacePlansPage } from './in-place-plans.js';