diff --git a/.github/files/e2e-tests/e2e-matrix.js b/.github/files/e2e-tests/e2e-matrix.js index 4a5f37c4f9072..46eb58e08b025 100644 --- a/.github/files/e2e-tests/e2e-matrix.js +++ b/.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( { diff --git a/tools/e2e-commons/pages/wp-admin/block-editor.js b/tools/e2e-commons/pages/wp-admin/block-editor.js index e8b1479415bcb..e248c617cc901 100644 --- a/tools/e2e-commons/pages/wp-admin/block-editor.js +++ b/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 ) { diff --git a/tools/e2e-commons/pages/wp-admin/blocks/editor-canvas.js b/tools/e2e-commons/pages/wp-admin/blocks/editor-canvas.js new file mode 100644 index 0000000000000..9e510afdc68d0 --- /dev/null +++ b/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; + } +} diff --git a/tools/e2e-commons/pages/wp-admin/blocks/eventbrite.js b/tools/e2e-commons/pages/wp-admin/blocks/eventbrite.js index 4ff79ce94ca4f..dfae8ae9772ca 100644 --- a/tools/e2e-commons/pages/wp-admin/blocks/eventbrite.js +++ b/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 ) { diff --git a/tools/e2e-commons/pages/wp-admin/blocks/form.js b/tools/e2e-commons/pages/wp-admin/blocks/form.js index ae7b046918630..01fbc495cf10e 100644 --- a/tools/e2e-commons/pages/wp-admin/blocks/form.js +++ b/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')` ); } /** diff --git a/tools/e2e-commons/pages/wp-admin/blocks/mailchimp.js b/tools/e2e-commons/pages/wp-admin/blocks/mailchimp.js index edad54cd7ae65..3c2a326289a08 100644 --- a/tools/e2e-commons/pages/wp-admin/blocks/mailchimp.js +++ b/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 ); } /** diff --git a/tools/e2e-commons/pages/wp-admin/blocks/pinterest.js b/tools/e2e-commons/pages/wp-admin/blocks/pinterest.js index 15f763260b277..6b01ec9c8b670 100644 --- a/tools/e2e-commons/pages/wp-admin/blocks/pinterest.js +++ b/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 ) { diff --git a/tools/e2e-commons/pages/wp-admin/blocks/simple-payments.js b/tools/e2e-commons/pages/wp-admin/blocks/simple-payments.js index 9689334adc19d..c7f175462d241 100644 --- a/tools/e2e-commons/pages/wp-admin/blocks/simple-payments.js +++ b/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' ); } } diff --git a/tools/e2e-commons/pages/wp-admin/blocks/subscribe.js b/tools/e2e-commons/pages/wp-admin/blocks/subscribe.js index f4a67561b7ef2..7f9770101f748 100644 --- a/tools/e2e-commons/pages/wp-admin/blocks/subscribe.js +++ b/tools/e2e-commons/pages/wp-admin/blocks/subscribe.js @@ -1,5 +1,4 @@ import PageActions from '../../page-actions.js'; - export default class SubscribeBlock extends PageActions { constructor( blockId, page ) { super( page, 'Subscribe' ); @@ -7,7 +6,6 @@ export default class SubscribeBlock extends PageActions { this.page = page; this.blockSelector = '#block-' + blockId; } - static name() { return 'subscriptions'; } @@ -15,7 +13,6 @@ export default class SubscribeBlock extends PageActions { static title() { return 'Subscribe'; } - async checkBlock() { await this.page.waitForResponse( r => diff --git a/tools/e2e-commons/pages/wp-admin/blocks/tilled-gallery.js b/tools/e2e-commons/pages/wp-admin/blocks/tilled-gallery.js index 89245dec97189..860ac1a4cd5db 100644 --- a/tools/e2e-commons/pages/wp-admin/blocks/tilled-gallery.js +++ b/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' ); diff --git a/tools/e2e-commons/pages/wp-admin/blocks/word-ads.js b/tools/e2e-commons/pages/wp-admin/blocks/word-ads.js index 0704851bac766..3d39fa81c2eb6 100644 --- a/tools/e2e-commons/pages/wp-admin/blocks/word-ads.js +++ b/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' ) ); } /** diff --git a/tools/e2e-commons/pages/wp-admin/index.js b/tools/e2e-commons/pages/wp-admin/index.js index cf86ba9c78cf4..859684c345e6f 100644 --- a/tools/e2e-commons/pages/wp-admin/index.js +++ b/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';