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

Move to @woocommerce/e2e-utils-playwright

package.json

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

tests/e2e/bin/initialize.sh

@@ -16,6 +16,7 @@ wp-env run tests-cli wp wc tool run install_pages --user=1
 wp-env run tests-cli wp option update woocommerce_currency "USD"
 wp-env run tests-cli wp option update woocommerce_default_country "US:CA"
 wp-env run tests-cli wp wc payment_gateway update cod --enabled=true --user=1
+wp-env run tests-cli wp option update woocommerce_coming_soon "no"
 
 wp-env run tests-cli wp user create customer [email protected] --user_pass=password --role=customer
 

tests/e2e/utils/index.js

@@ -4,6 +4,10 @@
 import { expect, Page } from '@playwright/test';
 import moment from 'moment';
 import { pluginConfig } from '../config';
+import {
+	fillBillingCheckoutBlocks,
+	getOrderIdFromUrl,
+} from '@woocommerce/e2e-utils-playwright';
 
 /**
  * Internal dependencies
@@ -326,40 +330,31 @@ export async function addToCart(page) {
  * @param {Object} customerDetails Customer billing details
  */
 export async function blockFillBillingDetails(page, customerDetails) {
-	await page.waitForTimeout(3000);
 	const card = await page.locator('.wc-block-components-address-card');
 	if (await card.isVisible()) {
 		await card.locator('.wc-block-components-address-card__edit').click();
 	}
 	await page.locator('#email').fill(customerDetails.email);
-	await page.locator('#billing-first_name').fill(customerDetails.firstname);
-	await page.locator('#billing-last_name').fill(customerDetails.lastname);
-	await page
-		.locator('#billing-country')
-		.selectOption(customerDetails.country);
-	await page
-		.locator('#billing-address_1')
-		.fill(customerDetails.addressfirstline);
-	if (
-		await page
-			.locator('.wc-block-components-address-form__address_2-toggle')
-			.isVisible()
-	) {
-		await page
-			.locator('.wc-block-components-address-form__address_2-toggle')
-			.click();
-	}
-	await page
-		.locator('#billing-address_2')
-		.fill(customerDetails.addresssecondline);
-	await page.locator('#billing-city').fill(customerDetails.city);
-	if (customerDetails.state) {
-		await page
-			.locator('#billing-state')
-			.selectOption(customerDetails.state);
-	}
-	await page.locator('#billing-postcode').fill(customerDetails.postcode);
-	await page.locator('#billing-postcode').blur();
+
+	await fillBillingCheckoutBlocks(
+		page,
+		{
+			country: customerDetails.country,
+			firstName: customerDetails.firstname,
+			lastName: customerDetails.lastname,
+			address: customerDetails.addressfirstline,
+			zip: customerDetails.postcode,
+			city: customerDetails.city,
+			state: customerDetails.state ?? null
+		  }
+	);
+	await page.getByLabel( 'Add a note to your order' ).check();
+    await page
+		.getByPlaceholder(
+			'Notes about your order',
+			{ exact: false }
+		)
+		.fill( 'This is to avoid flakiness' );
 	await page.waitForLoadState('networkidle');
 }
 
@@ -379,10 +374,8 @@ export async function placeOrder(page, isBlock = false) {
 	await expect(
 		page.getByRole('heading', { name: 'Order received' })
 	).toBeVisible();
-	const orderId = await page
-		.locator('li.woocommerce-order-overview__order strong')
-		.textContent();
-	return orderId;
+
+	return await getOrderIdFromUrl( page );
 }
 
 /**