Merge pull request #270 from woocommerce/upkeep/e2e-tests-utils

Move to `@woocommerce/e2e-utils-playwright`

package.json

@@ -15,6 +15,7 @@
 	"devDependencies": {
 		"@playwright/test": "^1.37.1",
 		"@woocommerce/dependency-extraction-webpack-plugin": "^3.0.1",
+		"@woocommerce/e2e-utils-playwright": "^0.2.1",
 		"@woocommerce/eslint-plugin": "^2.2.0",
 		"@wordpress/env": "^9.10.0",
 		"@wordpress/scripts": "^29.0.0",

tests/e2e/specs/payment-flow/cancelled-one-time-payment.test.js

@@ -1,7 +1,12 @@
+/**
+ * External dependencies
+ */
+import { addOneOrMoreProductToCart } from '@woocommerce/e2e-utils-playwright';
+
 /**
  * Internal dependencies
  */
-import {addProductToCart, changeCurrency, editPayfastSetting, fillBillingDetails, goToOrderEditPage} from '../../utils';
+import {changeCurrency, editPayfastSetting, fillBillingDetails, goToOrderEditPage} from '../../utils';
 import {customer, payfastSandboxCredentials} from "../../config";
 
 /**
@@ -41,7 +46,7 @@ test.describe( 'Verify Payfast Cancelled One-Time Payment Process - @foundationa
 		test.slow();
 
 		const page = checkoutBlock;
-		await addProductToCart( {page, productUrl:'/product/simple-product/'} );
+		await addOneOrMoreProductToCart( page, 'simple-product' );
 		await page.goto('/checkout/', { waitUntil: 'networkidle' });
 		await fillBillingDetails(page, customer.billing, true);
 
@@ -74,7 +79,7 @@ test.describe( 'Verify Payfast Cancelled One-Time Payment Process - @foundationa
 
 		const page = checkoutPage;
 
-		await addProductToCart( {page, productUrl: '/product/simple-product/'} );
+		await addOneOrMoreProductToCart( page, 'simple-product' );
 		await page.goto( '/shortcode-checkout/' );
 		await fillBillingDetails(page, customer.billing);
 

tests/e2e/specs/payment-flow/one-time-payment.test.js

@@ -1,7 +1,12 @@
+/**
+ * External dependencies
+ */
+import { addOneOrMoreProductToCart } from '@woocommerce/e2e-utils-playwright';
+
 /**
  * Internal dependencies
  */
-import {addProductToCart, changeCurrency, clearEmailLogs, editPayfastSetting, fillBillingDetails, goToOrderEditPage} from '../../utils';
+import {changeCurrency, clearEmailLogs, editPayfastSetting, fillBillingDetails, goToOrderEditPage} from '../../utils';
 import {customer, payfastSandboxCredentials} from "../../config";
 
 /**
@@ -44,7 +49,7 @@ test.describe( 'Verify Payfast One-Time Payment Process - @foundational', async
 
 		await clearEmailLogs( {page: adminPage} );
 
-		await addProductToCart( {page: checkoutBlock, productUrl:'/product/simple-product/'} );
+		await addOneOrMoreProductToCart( checkoutBlock, 'simple-product' );
 		await checkoutBlock.goto('/checkout/' , { waitUntil: 'networkidle' });
 		await fillBillingDetails(checkoutBlock, customer.billing, true);
 
@@ -82,7 +87,7 @@ test.describe( 'Verify Payfast One-Time Payment Process - @foundational', async
 
 		let waitForURL;
 
-		await addProductToCart( {page: checkoutPage, productUrl: '/product/simple-product/'} );
+		await addOneOrMoreProductToCart( checkoutPage, 'simple-product' );
 		await checkoutPage.goto( '/shortcode-checkout/' );
 		await fillBillingDetails(checkoutPage, customer.billing);
 

tests/e2e/utils/index.js

@@ -1,3 +1,11 @@
+/**
+ * External dependencies
+ */
+import { fillBillingCheckoutBlocks } from '@woocommerce/e2e-utils-playwright';
+
+/**
+ * Internal dependencies
+ */
 import {customer} from "../config";
 import {expect} from "@playwright/test";
 
@@ -230,12 +238,28 @@ export async function blockFillBillingDetails(page, customerDetails) {
 		await card.locator('.wc-block-components-address-card__edit').click();
 	}
 
-	await page.getByLabel( 'First name' ).fill( customerDetails.firstname );
-	await page.getByLabel( 'Last name' ).fill( customerDetails.lastname );
-	await page.getByLabel( 'Address', {exact: true} ).fill( customerDetails.addressfirstline );
-	await page.getByLabel( 'City' ).fill( customerDetails.city );
-	await page.getByLabel( 'Zip Code' ).fill( customerDetails.postcode );
-	await page.getByLabel( 'Phone (optional)' ).fill( customerDetails.phone );
+	await fillBillingCheckoutBlocks(
+		page,
+		{
+			country: customerDetails.country,
+			firstName: customerDetails.firstname,
+			lastName: customerDetails.lastname,
+			address: customerDetails.addressfirstline,
+			zip: customerDetails.postcode,
+			city: customerDetails.city,
+			state: null,
+			isPostalCode: true,
+		}
+	);
+
+	await page.getByLabel( 'Add a note to your order' ).check();
+	await page
+		.getByPlaceholder(
+			'Notes about your order.'
+		)
+		.fill( 'This is to avoid flakiness' );
+
+	await page.waitForLoadState('networkidle');
 }
 
 /**
@@ -257,6 +281,6 @@ export async function fillBillingDetails(
 	await page.getByLabel( 'Last name' ).fill( customerBillingDetails.lastname );
 	await page.getByLabel( 'Street address' ).fill( customerBillingDetails.addressfirstline );
 	await page.getByLabel( 'Town / City' ).fill( customerBillingDetails.city );
-	await page.getByLabel( 'Zip Code' ).fill( customerBillingDetails.postcode );
+	await page.getByLabel( 'Postcode / ZIP' ).fill( customerBillingDetails.postcode );
 	await page.getByLabel( 'Phone' ).fill( customerBillingDetails.phone );
 }