Convert Shopper Checkout Purchase spec to Playwright

changelog/dev-10177-convert-shopper-checkout-purchase-spec

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Convert shopper-checkout-purchase spec from Puppeteer to Playwright

tests/e2e-pw/specs/shopper/shopper-checkout-purchase.spec.ts

@@ -1,42 +1,73 @@
 /**
  * External dependencies
  */
-import { test, expect } from '@playwright/test';
+import { test, expect, Page } from '@playwright/test';
 
 /**
  * Internal dependencies
  */
 
 import { config } from '../../config/default';
 import * as shopper from '../../utils/shopper';
+import * as devtools from '../../utils/devtools';
+import { getMerchant, getShopper } from '../../utils/helpers';
 
 test.describe( 'Successful purchase', () => {
-	test.beforeEach( async ( { page } ) => {
-		await shopper.addCartProduct( page );
-
-		await page.goto( '/checkout/' );
-		await shopper.fillBillingAddress(
-			page,
-			config.addresses.customer.billing
-		);
-	} );
-
-	test( 'using a basic card', async ( { page } ) => {
-		await shopper.fillCardDetails( page );
-		await shopper.placeOrder( page );
-
-		await expect(
-			page.getByText( 'Order received' ).first()
-		).toBeVisible();
-	} );
-
-	test( 'using a 3DS card', async ( { page } ) => {
-		await shopper.fillCardDetails( page, config.cards[ '3ds' ] );
-		await shopper.placeOrder( page );
-		await shopper.confirmCardAuthentication( page );
-
-		await expect(
-			page.getByText( 'Order received' ).first()
-		).toBeVisible();
-	} );
+	let merchantPage: Page;
+	let shopperPage: Page;
+
+	for ( const ctpEnabled of [ false, true ] ) {
+		test.describe( `Carding protection ${ ctpEnabled }`, () => {
+			test.beforeAll( async ( { browser } ) => {
+				shopperPage = ( await getShopper( browser ) ).shopperPage;
+				merchantPage = ( await getMerchant( browser ) ).merchantPage;
+				if ( ctpEnabled ) {
+					await devtools.enableCardTestingProtection( merchantPage );
+				}
+			} );
+
+			test.afterAll( async () => {
+				if ( ctpEnabled ) {
+					await devtools.disableCardTestingProtection( merchantPage );
+				}
+			} );
+
+			test.beforeEach( async () => {
+				await shopper.addCartProduct( shopperPage );
+				await shopper.setupCheckout(
+					shopperPage,
+					config.addresses.customer.billing
+				);
+				await shopper.expectFraudPreventionToken(
+					shopperPage,
+					ctpEnabled
+				);
+			} );
+
+			test( 'using a basic card', async () => {
+				await shopper.fillCardDetails( shopperPage );
+				await shopper.placeOrder( shopperPage );
+
+				await expect(
+					shopperPage.getByRole( 'heading', {
+						name: 'Order received',
+					} )
+				).toBeVisible();
+			} );
+
+			test( 'using a 3DS card', async () => {
+				await shopper.fillCardDetails(
+					shopperPage,
+					config.cards[ '3ds' ]
+				);
+				await shopper.placeOrder( shopperPage );
+				await shopper.confirmCardAuthentication( shopperPage );
+				await expect(
+					shopperPage.getByRole( 'heading', {
+						name: 'Order received',
+					} )
+				).toBeVisible();
+			} );
+		} );
+	}
 } );