diff --git a/plugins/woocommerce/changelog/e2e-fix-page-publish-flakiness b/plugins/woocommerce/changelog/e2e-fix-page-publish-flakiness new file mode 100644 index 00000000000..3e929fa61f4 --- /dev/null +++ b/plugins/woocommerce/changelog/e2e-fix-page-publish-flakiness @@ -0,0 +1,4 @@ +Significance: patch +Type: dev + +E2E tests: fix flakiness in page publishing action diff --git a/plugins/woocommerce/tests/e2e-pw/fixtures/fixtures.js b/plugins/woocommerce/tests/e2e-pw/fixtures/fixtures.js index d07a55fb8d9..9fea5162154 100644 --- a/plugins/woocommerce/tests/e2e-pw/fixtures/fixtures.js +++ b/plugins/woocommerce/tests/e2e-pw/fixtures/fixtures.js @@ -48,7 +48,7 @@ exports.test = base.test.extend( { testPageTitlePrefix: [ '', { option: true } ], testPage: async ( { wpApi, testPageTitlePrefix }, use ) => { - const pageTitle = `${ testPageTitlePrefix } Page ${ random() }`; + const pageTitle = `${ testPageTitlePrefix } Page ${ random() }`.trim(); const pageSlug = pageTitle.replace( / /gi, '-' ).toLowerCase(); await use( { title: pageTitle, slug: pageSlug } ); @@ -77,7 +77,7 @@ exports.test = base.test.extend( { testPostTitlePrefix: [ '', { option: true } ], testPost: async ( { wpApi, testPostTitlePrefix }, use ) => { - const postTitle = `${ testPostTitlePrefix } Post ${ random() }`; + const postTitle = `${ testPostTitlePrefix } Post ${ random() }`.trim(); const postSlug = postTitle.replace( / /gi, '-' ).toLowerCase(); await use( { title: postTitle, slug: postSlug } ); 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 f5fae88cfba..8916e1c6bbb 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 @@ -18,9 +18,7 @@ test.describe( // eslint-disable-next-line playwright/expect-expect 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 b03e79fe5da..19a7d337f86 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 @@ -31,7 +31,7 @@ test.describe( } ) .fill( 'Test Post' ); - await publishPage( page, testPost.title ); + await publishPage( page, testPost.title, true ); } ); } ); diff --git a/plugins/woocommerce/tests/e2e-pw/utils/editor.js b/plugins/woocommerce/tests/e2e-pw/utils/editor.js index c837a59594e..e6be385fc40 100644 --- a/plugins/woocommerce/tests/e2e-pw/utils/editor.js +++ b/plugins/woocommerce/tests/e2e-pw/utils/editor.js @@ -129,17 +129,35 @@ const transformIntoBlocks = async ( page ) => { ); }; -const publishPage = async ( page, pageTitle ) => { +const publishPage = async ( page, pageTitle, isPost = false ) => { await page .getByRole( 'button', { name: 'Publish', exact: true } ) .dispatchEvent( 'click' ); + + const createPageResponse = page.waitForResponse( ( response ) => { + return ( + response.url().includes( isPost ? '/posts/' : '/pages/' ) && + response.ok() && + response.request().method() === 'POST' && + response + .json() + .then( + ( json ) => + json.title.rendered === pageTitle && + json.status === 'publish' + ) + ); + } ); + await page .getByRole( 'region', { name: 'Editor publish' } ) .getByRole( 'button', { name: 'Publish', exact: true } ) .click(); - await expect( - page.getByText( `${ pageTitle } is now live.` ) - ).toBeVisible(); + + // Validating that page was published via UI elements is not reliable, + // installed plugins (e.g. WooCommerce PayPal Payments) can interfere and add flakiness to the flow. + // In WC context, checking the API response is possibly the most reliable way to ensure the page was published. + await createPageResponse; }; module.exports = {