diff --git a/plugins/woocommerce/changelog/e2e-fix-gutenberg-daily-tests b/plugins/woocommerce/changelog/e2e-fix-gutenberg-daily-tests new file mode 100644 index 00000000000..3ae0f6eb50a --- /dev/null +++ b/plugins/woocommerce/changelog/e2e-fix-gutenberg-daily-tests @@ -0,0 +1,4 @@ +Significance: patch +Type: dev + +E2E tests: Fix flaky Gutenberg tests diff --git a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/homepage.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/homepage.spec.js index 91b4932ab5b..5c73d44e140 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/homepage.spec.js +++ b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/homepage.spec.js @@ -2,6 +2,7 @@ const { test: base, expect, request } = require( '@playwright/test' ); const { AssemblerPage } = require( './assembler.page' ); const { activateTheme, DEFAULT_THEME } = require( '../../../utils/themes' ); const { setOption } = require( '../../../utils/options' ); +const { encodeCredentials } = require( '../../../utils/plugin-utils' ); const test = base.extend( { pageObject: async ( { page }, use ) => { @@ -163,21 +164,50 @@ test.skip( 'Assembler -> Homepage', { tag: '@gutenberg' }, () => { await waitResponse; await page.goto( baseURL ); - // Get all the content between the header and the footer. - const homepageHTML = await page - .locator( - '//header/following-sibling::*[following-sibling::footer]' - ) - .all(); - let index = 0; - for ( const element of homepageHTML ) { - await expect( - await element.getAttribute( 'class' ) - ).toMatchSnapshot( { - name: `selected-homepage-blocks-class-frontend-${ index }`, - } ); - index++; + // Check if Gutenberg is installed + const apiContext = await request.newContext( { + baseURL, + extraHTTPHeaders: { + Authorization: `Basic ${ encodeCredentials( + 'admin', + 'password' + ) }`, + cookie: '', + }, + } ); + const listPluginsResponse = await apiContext.get( + `/wp-json/wp/v2/plugins`, + { + failOnStatusCode: true, + } + ); + const pluginsList = await listPluginsResponse.json(); + const withGutenbergPlugin = pluginsList.find( + ( { textdomain } ) => textdomain === 'gutenberg' + ); + + // if testing with Gutenberg, perform Gutenberg-specific testing + // eslint-disable-next-line playwright/no-conditional-in-test + if ( withGutenbergPlugin ) { + // Get all the content between the header and the footer. + const homepageHTML = await page + .locator( + '//header/following-sibling::*[following-sibling::footer]' + ) + .all(); + + let index = 0; + for ( const element of homepageHTML ) { + await expect( + await element.getAttribute( 'class' ) + ).toMatchSnapshot( { + name: `${ + withGutenbergPlugin ? 'gutenberg' : '' + }-selected-homepage-blocks-class-frontend-${ index }`, + } ); + index++; + } } } ); diff --git a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/homepage.spec.js-snapshots/gutenberg-selected-homepage-blocks-class-frontend-0 b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/homepage.spec.js-snapshots/gutenberg-selected-homepage-blocks-class-frontend-0 new file mode 100644 index 00000000000..6e8d1489d3a --- /dev/null +++ b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/homepage.spec.js-snapshots/gutenberg-selected-homepage-blocks-class-frontend-0 @@ -0,0 +1 @@ +wp-block-group alignfull has-global-padding is-content-justification-center is-layout-constrained wp-container-core-group-is-layout-5 wp-block-group-is-layout-constrained \ No newline at end of file diff --git a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/homepage.spec.js-snapshots/gutenberg-selected-homepage-blocks-class-frontend-1 b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/homepage.spec.js-snapshots/gutenberg-selected-homepage-blocks-class-frontend-1 new file mode 100644 index 00000000000..45e5bab5d6a --- /dev/null +++ b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/homepage.spec.js-snapshots/gutenberg-selected-homepage-blocks-class-frontend-1 @@ -0,0 +1 @@ +wp-block-group alignfull has-global-padding is-content-justification-center is-layout-constrained wp-container-core-group-is-layout-7 wp-block-group-is-layout-constrained \ No newline at end of file diff --git a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/homepage.spec.js-snapshots/gutenberg-selected-homepage-blocks-class-frontend-2 b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/homepage.spec.js-snapshots/gutenberg-selected-homepage-blocks-class-frontend-2 new file mode 100644 index 00000000000..9b5f023055b --- /dev/null +++ b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/homepage.spec.js-snapshots/gutenberg-selected-homepage-blocks-class-frontend-2 @@ -0,0 +1 @@ +wp-block-group alignfull has-global-padding is-content-justification-center is-layout-constrained wp-container-core-group-is-layout-8 wp-block-group-is-layout-constrained \ No newline at end of file diff --git a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/homepage.spec.js-snapshots/gutenberg-selected-homepage-blocks-class-frontend-3 b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/homepage.spec.js-snapshots/gutenberg-selected-homepage-blocks-class-frontend-3 new file mode 100644 index 00000000000..9255472358e --- /dev/null +++ b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/homepage.spec.js-snapshots/gutenberg-selected-homepage-blocks-class-frontend-3 @@ -0,0 +1 @@ +wp-block-group alignfull has-global-padding is-content-justification-center is-layout-constrained wp-container-core-group-is-layout-9 wp-block-group-is-layout-constrained \ No newline at end of file diff --git a/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-page.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-page.spec.js index 46cb88ecf5a..f5fae88cfba 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-page.spec.js +++ b/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-page.spec.js @@ -4,6 +4,7 @@ const { fillPageTitle, getCanvas, publishPage, + closeChoosePatternModal, } = require( '../../utils/editor' ); const test = baseTest.extend( { @@ -18,6 +19,8 @@ test.describe( test( 'can create new page', async ( { page, testPage } ) => { await goToPageEditor( { page } ); + await closeChoosePatternModal( { page } ); + await fillPageTitle( page, testPage.title ); const canvas = await getCanvas( page ); diff --git a/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-post.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-post.spec.js index 238cf1aa8e1..b03e79fe5da 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-post.spec.js +++ b/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-post.spec.js @@ -14,7 +14,6 @@ test.describe( 'Can create a new post', { tag: [ '@gutenberg', '@services' ] }, () => { - // eslint-disable-next-line playwright/expect-expect test( 'can create new post', async ( { page, testPost } ) => { await goToPostEditor( { page } ); diff --git a/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-woocommerce-blocks.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-woocommerce-blocks.spec.js index 66755338c17..ed5768ae08e 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-woocommerce-blocks.spec.js +++ b/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-woocommerce-blocks.spec.js @@ -5,6 +5,7 @@ const { insertBlock, getCanvas, publishPage, + closeChoosePatternModal, } = require( '../../utils/editor' ); const { getInstalledWordPressVersion } = require( '../../utils/wordpress' ); @@ -146,6 +147,9 @@ test.describe( testPage, } ) => { await goToPageEditor( { page } ); + + await closeChoosePatternModal( { page } ); + await fillPageTitle( page, testPage.title ); const wordPressVersion = await getInstalledWordPressVersion(); diff --git a/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-woocommerce-patterns.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-woocommerce-patterns.spec.js index 7e4c0de361f..27071e6cb29 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-woocommerce-patterns.spec.js +++ b/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-woocommerce-patterns.spec.js @@ -5,6 +5,7 @@ const { insertBlock, getCanvas, publishPage, + closeChoosePatternModal, } = require( '../../utils/editor' ); const { getInstalledWordPressVersion } = require( '../../utils/wordpress' ); @@ -34,6 +35,9 @@ test.describe( testPage, } ) => { await goToPageEditor( { page } ); + + await closeChoosePatternModal( { page } ); + await fillPageTitle( page, testPage.title ); const wordPressVersion = await getInstalledWordPressVersion(); diff --git a/plugins/woocommerce/tests/e2e-pw/utils/editor.js b/plugins/woocommerce/tests/e2e-pw/utils/editor.js index d3f3761fe41..18c73af4714 100644 --- a/plugins/woocommerce/tests/e2e-pw/utils/editor.js +++ b/plugins/woocommerce/tests/e2e-pw/utils/editor.js @@ -1,14 +1,13 @@ const { expect } = require( '@playwright/test' ); -const closeWelcomeModal = async ( { page } ) => { - // Close welcome popup if prompted - try { - await page - .getByLabel( 'Close', { exact: true } ) - .click( { timeout: 5000 } ); - } catch ( error ) { - // Welcome modal wasn't present, skipping action. - } +const closeChoosePatternModal = async ( { page } ) => { + const closeModal = page.getByRole( 'button', { + name: 'Close', + exact: true, + } ); + await page.addLocatorHandler( closeModal, async () => { + await closeModal.click(); + } ); }; const disableWelcomeModal = async ( { page } ) => { @@ -42,14 +41,23 @@ const getCanvas = async ( page ) => { const goToPageEditor = async ( { page } ) => { await page.goto( 'wp-admin/post-new.php?post_type=page' ); await disableWelcomeModal( { page } ); + await page.waitForResponse( + ( response ) => + response.url().includes( '//page' ) && response.status() === 200 + ); }; const goToPostEditor = async ( { page } ) => { await page.goto( 'wp-admin/post-new.php' ); await disableWelcomeModal( { page } ); + await page.waitForResponse( + ( response ) => + response.url().includes( '//single' ) && response.status() === 200 + ); }; const fillPageTitle = async ( page, title ) => { + await ( await getCanvas( page ) ).getByLabel( 'Add title' ).click(); await ( await getCanvas( page ) ).getByLabel( 'Add title' ).fill( title ); }; @@ -132,7 +140,7 @@ const publishPage = async ( page, pageTitle ) => { }; module.exports = { - closeWelcomeModal, + closeChoosePatternModal, goToPageEditor, goToPostEditor, disableWelcomeModal,