[e2e tests] Fix the cleanup of created test pages and move to fixtures (

woocommerce#46944) * Added testPage fixture and testPgeTitle fixture option * Update create-cart-block.spec.js to use testPage fixture * Add changelog * Update create-checkout-block.spec.js to use testPage fixture * Update create-page.spec.js to use testPage fixture * Update create-woocommerce-blocks.spec.js to use testPage fixture * Update create-woocommerce-patterns.spec.js to use testPage fixture * Update cart-block.spec.js to use testPage fixture * Update cart-block-calculate-shipping.spec.js to use testPage fixture * Update cart-block-coupons.spec.js to use testPage fixture * Update checkout.spec.js to use some utils * Update checkout-block-coupons.spec.js to use testPage fixture * Use cart utils in checkout-create-account.spec.js * Use cart utils in checkout-login.spec.js * Use cart utils in order-email-receiving.spec.js * Update shop-products-filter-by-price.spec.js to use testPage fixture * Add helpers.js * Move the page title random name generator in the base fixture to ensure uniqueness * Remove eslint exceptions * Use api fixture
n2erjo00 · Apr 26, 2024 · fb9613e · fb9613e
1 parent 94e438f
commit fb9613e
Show file tree

Hide file tree

Showing 22 changed files with 243 additions and 418 deletions.
diff --git a/plugins/woocommerce/changelog/e2e-fix-cleanup-for-created-pages b/plugins/woocommerce/changelog/e2e-fix-cleanup-for-created-pages
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+E2E tests: fix cleanup of created test pages and migrate to using fixtures
diff --git a/plugins/woocommerce/tests/e2e-pw/fixtures/fixtures.js b/plugins/woocommerce/tests/e2e-pw/fixtures/fixtures.js
@@ -1,6 +1,7 @@
 const base = require( '@playwright/test' );
 const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
 const { admin } = require( '../test-data/data' );
+const { random } = require( '../utils/helpers' );
 
 exports.test = base.test.extend( {
 	api: async ( { baseURL }, use ) => {
@@ -43,6 +44,35 @@ exports.test = base.test.extend( {
 
 		await use( wpApi );
 	},
+
+	testPageTitlePrefix: [ '', { option: true } ],
+
+	testPage: async ( { wpApi, testPageTitlePrefix }, use ) => {
+		const pageTitle = `${ testPageTitlePrefix } Page ${ random() }`;
+		const pageSlug = pageTitle.replace( / /gi, '-' ).toLowerCase();
+
+		await use( { title: pageTitle, slug: pageSlug } );
+
+		// Cleanup
+		const pages = await wpApi.get(
+			`/wp-json/wp/v2/pages?slug=${ pageSlug }`,
+			{
+				data: {
+					_fields: [ 'id' ],
+				},
+				failOnStatusCode: false,
+			}
+		);
+
+		for ( const page of await pages.json() ) {
+			console.log( `Deleting page ${ page.id }` );
+			await wpApi.delete( `/wp-json/wp/v2/pages/${ page.id }`, {
+				data: {
+					force: true,
+				},
+			} );
+		}
+	},
 } );
 
 exports.expect = base.expect;
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-cart-block.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-cart-block.spec.js
@@ -1,43 +1,33 @@
-const { test, expect } = require( '@playwright/test' );
+const { test: baseTest, expect } = require( '../../fixtures/fixtures' );
 const {
 	goToPageEditor,
 	fillPageTitle,
 	insertBlock,
 	transformIntoBlocks,
+	publishPage,
 } = require( '../../utils/editor' );
-const uuid = require( 'uuid' );
 
-const transformedCartBlockTitle = `Transformed Cart ${ uuid.v1() }`;
-const transformedCartBlockSlug = transformedCartBlockTitle
-	.replace( / /gi, '-' )
-	.toLowerCase();
-
-test.describe( 'Transform Classic Cart To Cart Block', () => {
-	test.use( { storageState: process.env.ADMINSTATE } );
+baseTest.describe( 'Transform Classic Cart To Cart Block', () => {
+	const test = baseTest.extend( {
+		storageState: process.env.ADMINSTATE,
+		testPageTitlePrefix: 'Transformed cart',
+	} );
 
-	test( 'can transform classic cart to cart block', async ( { page } ) => {
+	test( 'can transform classic cart to cart block', async ( {
+		page,
+		testPage,
+	} ) => {
 		await goToPageEditor( { page } );
 
-		await fillPageTitle( page, transformedCartBlockTitle );
+		await fillPageTitle( page, testPage.title );
 		await insertBlock( page, 'Classic Cart' );
 		await transformIntoBlocks( page );
-
-		// save and publish the page
-		await page
-			.getByRole( 'button', { name: 'Publish', exact: true } )
-			.click();
-		await page
-			.getByRole( 'region', { name: 'Editor publish' } )
-			.getByRole( 'button', { name: 'Publish', exact: true } )
-			.click();
-		await expect(
-			page.getByText( `${ transformedCartBlockTitle } is now live.` )
-		).toBeVisible();
+		await publishPage( page, testPage.title );
 
 		// go to frontend to verify transformed cart block
-		await page.goto( transformedCartBlockSlug );
+		await page.goto( testPage.slug );
 		await expect(
-			page.getByRole( 'heading', { name: transformedCartBlockTitle } )
+			page.getByRole( 'heading', { name: testPage.title } )
 		).toBeVisible();
 		await expect(
 			page.getByRole( 'heading', {

diff --git a/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-checkout-block.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-checkout-block.spec.js
@@ -1,34 +1,25 @@
-const { test, expect } = require( '@playwright/test' );
+const { test: baseTest, expect } = require( '../../fixtures/fixtures' );
 const {
 	goToPageEditor,
 	getCanvas,
 	fillPageTitle,
 	insertBlock,
 	transformIntoBlocks,
+	publishPage,
 } = require( '../../utils/editor' );
-const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
-const uuid = require( 'uuid' );
-
-const transformedCheckoutBlockTitle = `Transformed Checkout ${ uuid.v1() }`;
-const transformedCheckoutBlockSlug = transformedCheckoutBlockTitle
-	.replace( / /gi, '-' )
-	.toLowerCase();
 
 const simpleProductName = 'Very Simple Product';
 const singleProductPrice = '999.00';
 
 let productId, shippingZoneId;
 
-test.describe( 'Transform Classic Checkout To Checkout Block', () => {
-	test.use( { storageState: process.env.ADMINSTATE } );
+baseTest.describe( 'Transform Classic Checkout To Checkout Block', () => {
+	const test = baseTest.extend( {
+		storageState: process.env.ADMINSTATE,
+		testPageTitlePrefix: 'Transformed checkout',
+	} );
 
-	test.beforeAll( async ( { baseURL } ) => {
-		const api = new wcApi( {
-			url: baseURL,
-			consumerKey: process.env.CONSUMER_KEY,
-			consumerSecret: process.env.CONSUMER_SECRET,
-			version: 'wc/v3',
-		} );
+	test.beforeAll( async ( { api } ) => {
 		// enable COD
 		await api.put( 'payment_gateways/cod', {
 			enabled: true,
@@ -56,13 +47,7 @@ test.describe( 'Transform Classic Checkout To Checkout Block', () => {
 		} );
 	} );
 
-	test.afterAll( async ( { baseURL } ) => {
-		const api = new wcApi( {
-			url: baseURL,
-			consumerKey: process.env.CONSUMER_KEY,
-			consumerSecret: process.env.CONSUMER_SECRET,
-			version: 'wc/v3',
-		} );
+	test.afterAll( async ( { api } ) => {
 		await api.delete( `products/${ productId }`, {
 			force: true,
 		} );
@@ -79,18 +64,12 @@ test.describe( 'Transform Classic Checkout To Checkout Block', () => {
 
 	test( 'can transform classic checkout to checkout block', async ( {
 		page,
-		baseURL,
+		api,
+		testPage,
 	} ) => {
-		const api = new wcApi( {
-			url: baseURL,
-			consumerKey: process.env.CONSUMER_KEY,
-			consumerSecret: process.env.CONSUMER_SECRET,
-			version: 'wc/v3',
-		} );
-
 		await goToPageEditor( { page } );
 
-		await fillPageTitle( page, transformedCheckoutBlockTitle );
+		await fillPageTitle( page, testPage.title );
 		await insertBlock( page, 'Classic Checkout' );
 		await transformIntoBlocks( page );
 
@@ -101,17 +80,7 @@ test.describe( 'Transform Classic Checkout To Checkout Block', () => {
 		await canvas.getByLabel( 'Block: Terms and Conditions' ).click();
 		await page.getByLabel( 'Require checkbox' ).check();
 
-		// save and publish the page
-		await page
-			.getByRole( 'button', { name: 'Publish', exact: true } )
-			.click();
-		await page
-			.getByRole( 'region', { name: 'Editor publish' } )
-			.getByRole( 'button', { name: 'Publish', exact: true } )
-			.click();
-		await expect(
-			page.getByText( `${ transformedCheckoutBlockTitle } is now live.` )
-		).toBeVisible();
+		await publishPage( page, testPage.title );
 
 		// add additional payment option after page creation
 		await api.put( 'payment_gateways/bacs', {
@@ -152,9 +121,9 @@ test.describe( 'Transform Classic Checkout To Checkout Block', () => {
 		// go to frontend to verify transformed checkout block
 		// before that add product to cart to be able to visit checkout page
 		await page.goto( `/cart/?add-to-cart=${ productId }` );
-		await page.goto( transformedCheckoutBlockSlug );
+		await page.goto( testPage.slug );
 		await expect(
-			page.getByRole( 'heading', { name: transformedCheckoutBlockTitle } )
+			page.getByRole( 'heading', { name: testPage.title } )
 		).toBeVisible();
 		await expect(
 			page

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
@@ -1,45 +1,21 @@
-const { test, expect, request } = require( '@playwright/test' );
-const { admin } = require( '../../test-data/data' );
+const { test: baseTest } = require( '../../fixtures/fixtures' );
 const {
 	goToPageEditor,
 	fillPageTitle,
 	getCanvas,
+	publishPage,
 } = require( '../../utils/editor' );
 
-const pageTitle = `Page-${ new Date().getTime().toString() }`;
-
-test.describe( 'Can create a new page', () => {
-	test.use( { storageState: process.env.ADMINSTATE } );
-
-	test.afterAll( async ( { baseURL } ) => {
-		const base64auth = Buffer.from(
-			`${ admin.username }:${ admin.password }`
-		).toString( 'base64' );
-		const wpApi = await request.newContext( {
-			baseURL: `${ baseURL }/wp-json/wp/v2/`,
-			extraHTTPHeaders: {
-				Authorization: `Basic ${ base64auth }`,
-			},
-		} );
-
-		let response = await wpApi.get( `pages` );
-		const allPages = await response.json();
-
-		await allPages.forEach( async ( page ) => {
-			if ( page.title.rendered === pageTitle ) {
-				response = await wpApi.delete( `pages/${ page.id }`, {
-					data: {
-						force: true,
-					},
-				} );
-			}
-		} );
+baseTest.describe( 'Can create a new page', () => {
+	const test = baseTest.extend( {
+		storageState: process.env.ADMINSTATE,
 	} );
 
-	test( 'can create new page', async ( { page } ) => {
+	// eslint-disable-next-line playwright/expect-expect
+	test( 'can create new page', async ( { page, testPage } ) => {
 		await goToPageEditor( { page } );
 
-		await fillPageTitle( page, pageTitle );
+		await fillPageTitle( page, testPage.title );
 
 		const canvas = await getCanvas( page );
 
@@ -53,17 +29,6 @@ test.describe( 'Can create a new page', () => {
 			} )
 			.fill( 'Test Page' );
 
-		await page
-			.getByRole( 'button', { name: 'Publish', exact: true } )
-			.click();
-
-		await page
-			.getByRole( 'region', { name: 'Editor publish' } )
-			.getByRole( 'button', { name: 'Publish', exact: true } )
-			.click();
-
-		await expect(
-			page.getByText( `${ pageTitle } is now live.` )
-		).toBeVisible();
+		await publishPage( page, testPage.title );
 	} );
 } );
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
@@ -1,15 +1,11 @@
-const { test, expect } = require( '@playwright/test' );
+const { test: baseTest, expect } = require( '../../fixtures/fixtures' );
 const {
 	goToPageEditor,
 	fillPageTitle,
 	insertBlock,
 	getCanvas,
 	publishPage,
 } = require( '../../utils/editor' );
-const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
-const uuid = require( 'uuid' );
-
-const allWooBlocksPageTitle = `Insert All Woo Blocks ${ uuid.v1() }`;
 
 const simpleProductName = 'Simplest Product';
 const singleProductPrice = '555.00';
@@ -93,16 +89,13 @@ const blocks = [
 
 let productId, shippingZoneId, productTagId, attributeId, productCategoryId;
 
-test.describe( 'Insert All WooCommerce Blocks Into Page', () => {
-	test.use( { storageState: process.env.ADMINSTATE } );
+baseTest.describe( 'Add WooCommerce Blocks Into Page', () => {
+	const test = baseTest.extend( {
+		storageState: process.env.ADMINSTATE,
+		testPageTitlePrefix: 'Woocommerce Blocks',
+	} );
 
-	test.beforeAll( async ( { baseURL } ) => {
-		const api = new wcApi( {
-			url: baseURL,
-			consumerKey: process.env.CONSUMER_KEY,
-			consumerSecret: process.env.CONSUMER_SECRET,
-			version: 'wc/v3',
-		} );
+	test.beforeAll( async ( { api } ) => {
 		// add product attribute
 		await api
 			.post( 'products/attributes', {
@@ -172,13 +165,7 @@ test.describe( 'Insert All WooCommerce Blocks Into Page', () => {
 		} );
 	} );
 
-	test.afterAll( async ( { baseURL } ) => {
-		const api = new wcApi( {
-			url: baseURL,
-			consumerKey: process.env.CONSUMER_KEY,
-			consumerSecret: process.env.CONSUMER_SECRET,
-			version: 'wc/v3',
-		} );
+	test.afterAll( async ( { api } ) => {
 		await api.delete( `products/${ productId }`, {
 			force: true,
 		} );
@@ -196,10 +183,13 @@ test.describe( 'Insert All WooCommerce Blocks Into Page', () => {
 		} );
 	} );
 
-	test( `can insert all WooCommerce blocks into page`, async ( { page } ) => {
+	test( `can insert all WooCommerce blocks into page`, async ( {
+		page,
+		testPage,
+	} ) => {
 		await goToPageEditor( { page } );
 
-		await fillPageTitle( page, allWooBlocksPageTitle );
+		await fillPageTitle( page, testPage.title );
 
 		for ( let i = 0; i < blocks.length; i++ ) {
 			await test.step( `Insert ${ blocks[ i ].name } block`, async () => {
@@ -227,7 +217,7 @@ test.describe( 'Insert All WooCommerce Blocks Into Page', () => {
 			} );
 		}
 
-		await publishPage( page, allWooBlocksPageTitle );
+		await publishPage( page, testPage.title );
 
 		// check all blocks inside the page after publishing
 		// except the product price due to invisibility and false-positive