Convert checkout place order E2E tests to Playwright

tests/e2e-jest/specs/shopper/cart-checkout/checkout.test.js

@@ -333,31 +333,6 @@ describe( 'Shopper → Checkout', () => {
 		} );
 	} );
 
-	describe( 'Place Order', () => {
-		it( 'Guest user can place order', async () => {
-			if ( await shopper.isLoggedIn() ) {
-				await shopper.logout();
-			}
-			await shopper.block.goToShop();
-			await shopper.addToCartFromShopPage( SIMPLE_VIRTUAL_PRODUCT_NAME );
-			await shopper.block.goToCheckout();
-			await shopper.block.fillBillingDetails( BILLING_DETAILS );
-			await shopper.block.placeOrder();
-			await expect( page ).toMatch( 'Your order has been received.' );
-		} );
-
-		it( 'Logged in user can place an order', async () => {
-			await shopper.login();
-			await shopper.block.goToShop();
-			await shopper.addToCartFromShopPage( SIMPLE_VIRTUAL_PRODUCT_NAME );
-			await shopper.block.goToCheckout();
-			await shopper.block.fillBillingDetails( BILLING_DETAILS );
-			await shopper.block.placeOrder();
-			await expect( page ).toMatch( 'Your order has been received.' );
-			await shopper.logout();
-		} );
-	} );
-
 	describe( `Shipping`, () => {
 		afterEach( async () => {
 			await merchant.login();

tests/e2e/tests/checkout/checkout-block-place-order.block_theme.side_effects.spec.ts

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { test as base, expect } from '@woocommerce/e2e-playwright-utils';
+
+/**
+ * Internal dependencies
+ */
+import { CheckoutPage } from './checkout.page';
+import { SIMPLE_VIRTUAL_PRODUCT_NAME } from './constants';
+
+const test = base.extend< { pageObject: CheckoutPage } >( {
+	pageObject: async ( { page }, use ) => {
+		const pageObject = new CheckoutPage( {
+			page,
+		} );
+		await use( pageObject );
+	},
+} );
+
+test.describe( 'Shopper → Checkout block → Place Order', () => {
+	test.beforeEach( async ( { frontendUtils } ) => {
+		await frontendUtils.emptyCart();
+		await frontendUtils.goToShop();
+		await frontendUtils.addToCart( SIMPLE_VIRTUAL_PRODUCT_NAME );
+		await frontendUtils.goToCheckout();
+	} );
+
+	test( 'Guest user can place order', async ( { pageObject, page } ) => {
+		await pageObject.fillInCheckoutWithTestData();
+		await pageObject.placeOrder();
+		await expect(
+			page.getByText( 'Your order has been received.' )
+		).toBeVisible();
+	} );
+
+	test( 'Logged in user can place an order', async ( {
+		pageObject,
+		page,
+	} ) => {
+		await pageObject.fillInCheckoutWithTestData();
+		await pageObject.placeOrder();
+		await expect(
+			page.getByText( 'Your order has been received.' )
+		).toBeVisible();
+	} );
+} );

tests/e2e/tests/checkout/constants.ts

@@ -0,0 +1 @@
+export const SIMPLE_VIRTUAL_PRODUCT_NAME = 'Album';