[e2e tests] Fix flakiness in page publishing action (#51196)

plugins/woocommerce/changelog/e2e-fix-page-publish-flakiness

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+E2E tests: fix flakiness in page publishing action

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 } );

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 );

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 );
 		} );
 	}
 );

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 = {