Commit a21c3c74ff4 for woocommerce

commit a21c3c74ff4aaf2f53706ac5ca5a8a779b5733fb
Author: theAverageDev (Luca Tumedei) <luca.tumedei@automattic.com>
Date:   Thu Mar 19 09:34:00 2026 +0100

    Convert e2e-pw config files to ESM TypeScript and update shell script (#63726)

    * Rename e2e-pw config and paypal-fixtures files from .js to .ts

    * Convert e2e-pw config files to ESM TypeScript and update shell script

    * Add .js config fallback in run-tests-with-env.sh and update README

    * Add comment noting __dirname ESM shimming in playwright.config.ts

diff --git a/plugins/woocommerce/changelog/e2e-pw-ts-conversion-config-files b/plugins/woocommerce/changelog/e2e-pw-ts-conversion-config-files
new file mode 100644
index 00000000000..6a76fbc90e5
--- /dev/null
+++ b/plugins/woocommerce/changelog/e2e-pw-ts-conversion-config-files
@@ -0,0 +1,3 @@
+Significance: patch
+Type: dev
+Comment: Convert e2e-pw config files to ESM TypeScript and update shell script.
diff --git a/plugins/woocommerce/tests/e2e-pw/README.md b/plugins/woocommerce/tests/e2e-pw/README.md
index 0fff2a032c8..e90f03b3cb9 100644
--- a/plugins/woocommerce/tests/e2e-pw/README.md
+++ b/plugins/woocommerce/tests/e2e-pw/README.md
@@ -136,9 +136,13 @@ If you need to create a new pre-defined environment, you can follow these steps:
   Example: `tests/e2e-pw/envs/my-new-env`
 - create an `env-setup.sh` file in the new folder. This file should contain any setup steps for the environment. This
   will run before any test execution.
-- create a `playwright.config.js` file in the new folder. This file should contain the configuration for the
+- create a `playwright.config.ts` file in the new folder. This file should contain the configuration for the
   environment.
   It's recommended that the config extends the default configuration and only updates the necessary values.
+
+> [!NOTE]
+> If you previously created a custom environment with a `playwright.config.js` file, it will still work — the test runner falls back to `.js` when no `.ts` config is found. However, new environments should use `.ts`.
+
 - if you need to store an encrypted `.env` file, first create the `.env` file in the `tests/e2e-pw` folder, then
   run `E2E_ENV_KEY='your-key' ./tests/e2e-pw/bin/dotenv.sh -e my-new-env`. This script command will encrypt the `.env`
   file into `tests/e2e-pw/envs/my-new-env/.env.enc`.
diff --git a/plugins/woocommerce/tests/e2e-pw/envs/default-hpos-disabled/playwright.config.js b/plugins/woocommerce/tests/e2e-pw/envs/default-hpos-disabled/playwright.config.ts
similarity index 56%
rename from plugins/woocommerce/tests/e2e-pw/envs/default-hpos-disabled/playwright.config.js
rename to plugins/woocommerce/tests/e2e-pw/envs/default-hpos-disabled/playwright.config.ts
index 4c4c00bba6f..63afae57544 100644
--- a/plugins/woocommerce/tests/e2e-pw/envs/default-hpos-disabled/playwright.config.js
+++ b/plugins/woocommerce/tests/e2e-pw/envs/default-hpos-disabled/playwright.config.ts
@@ -1,13 +1,16 @@
-let config = require( '../../playwright.config.js' );
-const { tags } = require( '../../fixtures/fixtures' );
+/**
+ * Internal dependencies
+ */
+import defaultConfig, { setupProjects } from '../../playwright.config';
+import { tags } from '../../fixtures/fixtures';

 process.env.USE_WP_ENV = 'true';
 process.env.DISABLE_HPOS = '1';

-config = {
-	...config.default,
+const config = {
+	...defaultConfig,
 	projects: [
-		...config.setupProjects,
+		...setupProjects,
 		{
 			name: 'e2e-hpos-disabled',
 			grep: new RegExp( tags.HPOS ),
@@ -21,4 +24,4 @@ config = {
 	],
 };

-module.exports = config;
+export default config;
diff --git a/plugins/woocommerce/tests/e2e-pw/envs/default-object-cache/playwright.config.js b/plugins/woocommerce/tests/e2e-pw/envs/default-object-cache/playwright.config.js
deleted file mode 100644
index ab29a29a95d..00000000000
--- a/plugins/woocommerce/tests/e2e-pw/envs/default-object-cache/playwright.config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const config = require( '../../playwright.config.js' );
-
-process.env.USE_WP_ENV = 'true';
-
-module.exports = config;
diff --git a/plugins/woocommerce/tests/e2e-pw/envs/default-object-cache/playwright.config.ts b/plugins/woocommerce/tests/e2e-pw/envs/default-object-cache/playwright.config.ts
new file mode 100644
index 00000000000..293480c8ef4
--- /dev/null
+++ b/plugins/woocommerce/tests/e2e-pw/envs/default-object-cache/playwright.config.ts
@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import config from '../../playwright.config';
+
+process.env.USE_WP_ENV = 'true';
+
+export default config;
diff --git a/plugins/woocommerce/tests/e2e-pw/envs/default-pressable/playwright.config.js b/plugins/woocommerce/tests/e2e-pw/envs/default-pressable/playwright.config.ts
similarity index 67%
rename from plugins/woocommerce/tests/e2e-pw/envs/default-pressable/playwright.config.js
rename to plugins/woocommerce/tests/e2e-pw/envs/default-pressable/playwright.config.ts
index f88f3542213..92a53571d5d 100644
--- a/plugins/woocommerce/tests/e2e-pw/envs/default-pressable/playwright.config.js
+++ b/plugins/woocommerce/tests/e2e-pw/envs/default-pressable/playwright.config.ts
@@ -1,5 +1,11 @@
-let config = require( '../../playwright.config.js' );
-const { tags } = require( '../../fixtures/fixtures' );
+/**
+ * Internal dependencies
+ */
+import defaultConfig, {
+	setupProjects,
+	TESTS_ROOT_PATH,
+} from '../../playwright.config';
+import { tags } from '../../fixtures/fixtures';

 process.env.IS_PRESSABLE = 'true';
 process.env.INSTALL_WC = 'true';
@@ -8,13 +14,13 @@ const grepInvert = new RegExp(
 	`${ tags.SKIP_ON_PRESSABLE }|${ tags.SKIP_ON_EXTERNAL_ENV }|${ tags.COULD_BE_LOWER_LEVEL_TEST }|${ tags.NON_CRITICAL }|${ tags.TO_BE_REMOVED }`
 );

-config = {
-	...config.default,
+const config = {
+	...defaultConfig,
 	projects: [
-		...config.setupProjects,
+		...setupProjects,
 		{
 			name: 'reset',
-			testDir: `${ config.TESTS_ROOT_PATH }/fixtures`,
+			testDir: `${ TESTS_ROOT_PATH }/fixtures`,
 			testMatch: 'reset.setup.ts',
 		},
 		{
@@ -32,4 +38,4 @@ config = {
 	],
 };

-module.exports = config;
+export default config;
diff --git a/plugins/woocommerce/tests/e2e-pw/envs/default-wpcom/playwright.config.js b/plugins/woocommerce/tests/e2e-pw/envs/default-wpcom/playwright.config.ts
similarity index 66%
rename from plugins/woocommerce/tests/e2e-pw/envs/default-wpcom/playwright.config.js
rename to plugins/woocommerce/tests/e2e-pw/envs/default-wpcom/playwright.config.ts
index 683c074801d..5c12cc89c5e 100644
--- a/plugins/woocommerce/tests/e2e-pw/envs/default-wpcom/playwright.config.js
+++ b/plugins/woocommerce/tests/e2e-pw/envs/default-wpcom/playwright.config.ts
@@ -1,5 +1,11 @@
-let config = require( '../../playwright.config.js' );
-const { tags } = require( '../../fixtures/fixtures' );
+/**
+ * Internal dependencies
+ */
+import defaultConfig, {
+	setupProjects,
+	TESTS_ROOT_PATH,
+} from '../../playwright.config';
+import { tags } from '../../fixtures/fixtures';

 process.env.IS_WPCOM = 'true';
 process.env.INSTALL_WC = 'true';
@@ -8,13 +14,13 @@ const grepInvert = new RegExp(
 	`${ tags.SKIP_ON_WPCOM }|${ tags.SKIP_ON_EXTERNAL_ENV }|${ tags.COULD_BE_LOWER_LEVEL_TEST }|${ tags.NON_CRITICAL }|${ tags.TO_BE_REMOVED }`
 );

-config = {
-	...config.default,
+const config = {
+	...defaultConfig,
 	projects: [
-		...config.setupProjects,
+		...setupProjects,
 		{
 			name: 'reset',
-			testDir: `${ config.TESTS_ROOT_PATH }/fixtures`,
+			testDir: `${ TESTS_ROOT_PATH }/fixtures`,
 			testMatch: 'reset.setup.ts',
 		},
 		{
@@ -32,4 +38,4 @@ config = {
 	],
 };

-module.exports = config;
+export default config;
diff --git a/plugins/woocommerce/tests/e2e-pw/envs/default/playwright.config.js b/plugins/woocommerce/tests/e2e-pw/envs/default/playwright.config.js
deleted file mode 100644
index ab29a29a95d..00000000000
--- a/plugins/woocommerce/tests/e2e-pw/envs/default/playwright.config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const config = require( '../../playwright.config.js' );
-
-process.env.USE_WP_ENV = 'true';
-
-module.exports = config;
diff --git a/plugins/woocommerce/tests/e2e-pw/envs/default/playwright.config.ts b/plugins/woocommerce/tests/e2e-pw/envs/default/playwright.config.ts
new file mode 100644
index 00000000000..293480c8ef4
--- /dev/null
+++ b/plugins/woocommerce/tests/e2e-pw/envs/default/playwright.config.ts
@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import config from '../../playwright.config';
+
+process.env.USE_WP_ENV = 'true';
+
+export default config;
diff --git a/plugins/woocommerce/tests/e2e-pw/envs/gutenberg-nightly/playwright.config.js b/plugins/woocommerce/tests/e2e-pw/envs/gutenberg-nightly/playwright.config.js
deleted file mode 100644
index 80db724180c..00000000000
--- a/plugins/woocommerce/tests/e2e-pw/envs/gutenberg-nightly/playwright.config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const config = require( '../gutenberg-stable/playwright.config.js' );
-
-module.exports = config;
diff --git a/plugins/woocommerce/tests/e2e-pw/envs/gutenberg-nightly/playwright.config.ts b/plugins/woocommerce/tests/e2e-pw/envs/gutenberg-nightly/playwright.config.ts
new file mode 100644
index 00000000000..f2cb6ad26d7
--- /dev/null
+++ b/plugins/woocommerce/tests/e2e-pw/envs/gutenberg-nightly/playwright.config.ts
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import config from '../gutenberg-stable/playwright.config';
+
+export default config;
diff --git a/plugins/woocommerce/tests/e2e-pw/envs/gutenberg-stable/playwright.config.js b/plugins/woocommerce/tests/e2e-pw/envs/gutenberg-stable/playwright.config.js
deleted file mode 100644
index dc0f49da2dd..00000000000
--- a/plugins/woocommerce/tests/e2e-pw/envs/gutenberg-stable/playwright.config.js
+++ /dev/null
@@ -1,18 +0,0 @@
-let config = require( '../../playwright.config.js' );
-const { tags } = require( '../../fixtures/fixtures' );
-
-process.env.USE_WP_ENV = 'true';
-
-config = {
-	...config.default,
-	projects: [
-		...config.setupProjects,
-		{
-			name: 'Gutenberg',
-			grep: new RegExp( tags.GUTENBERG ),
-			dependencies: [ 'site setup' ],
-		},
-	],
-};
-
-module.exports = config;
diff --git a/plugins/woocommerce/tests/e2e-pw/envs/gutenberg-stable/playwright.config.ts b/plugins/woocommerce/tests/e2e-pw/envs/gutenberg-stable/playwright.config.ts
new file mode 100644
index 00000000000..de1858b8177
--- /dev/null
+++ b/plugins/woocommerce/tests/e2e-pw/envs/gutenberg-stable/playwright.config.ts
@@ -0,0 +1,21 @@
+/**
+ * Internal dependencies
+ */
+import defaultConfig, { setupProjects } from '../../playwright.config';
+import { tags } from '../../fixtures/fixtures';
+
+process.env.USE_WP_ENV = 'true';
+
+const config = {
+	...defaultConfig,
+	projects: [
+		...setupProjects,
+		{
+			name: 'Gutenberg',
+			grep: new RegExp( tags.GUTENBERG ),
+			dependencies: [ 'site setup' ],
+		},
+	],
+};
+
+export default config;
diff --git a/plugins/woocommerce/tests/e2e-pw/envs/woocommerce-payments/playwright.config.js b/plugins/woocommerce/tests/e2e-pw/envs/woocommerce-payments/playwright.config.js
deleted file mode 100644
index 2b4a4f5a7e9..00000000000
--- a/plugins/woocommerce/tests/e2e-pw/envs/woocommerce-payments/playwright.config.js
+++ /dev/null
@@ -1,18 +0,0 @@
-let config = require( '../../playwright.config.js' );
-const { tags } = require( '../../fixtures/fixtures' );
-
-process.env.USE_WP_ENV = 'true';
-
-config = {
-	...config.default,
-	projects: [
-		...config.setupProjects,
-		{
-			name: 'WooPayments',
-			grep: new RegExp( tags.PAYMENTS ),
-			dependencies: [ 'site setup' ],
-		},
-	],
-};
-
-module.exports = config;
diff --git a/plugins/woocommerce/tests/e2e-pw/envs/woocommerce-payments/playwright.config.ts b/plugins/woocommerce/tests/e2e-pw/envs/woocommerce-payments/playwright.config.ts
new file mode 100644
index 00000000000..6e1db9fb134
--- /dev/null
+++ b/plugins/woocommerce/tests/e2e-pw/envs/woocommerce-payments/playwright.config.ts
@@ -0,0 +1,21 @@
+/**
+ * Internal dependencies
+ */
+import defaultConfig, { setupProjects } from '../../playwright.config';
+import { tags } from '../../fixtures/fixtures';
+
+process.env.USE_WP_ENV = 'true';
+
+const config = {
+	...defaultConfig,
+	projects: [
+		...setupProjects,
+		{
+			name: 'WooPayments',
+			grep: new RegExp( tags.PAYMENTS ),
+			dependencies: [ 'site setup' ],
+		},
+	],
+};
+
+export default config;
diff --git a/plugins/woocommerce/tests/e2e-pw/envs/woocommerce-paypal-payments/playwright.config.js b/plugins/woocommerce/tests/e2e-pw/envs/woocommerce-paypal-payments/playwright.config.js
deleted file mode 100644
index 2e1b090bfe0..00000000000
--- a/plugins/woocommerce/tests/e2e-pw/envs/woocommerce-paypal-payments/playwright.config.js
+++ /dev/null
@@ -1,18 +0,0 @@
-let config = require( '../../playwright.config.js' );
-const { tags } = require( '../../fixtures/fixtures' );
-
-process.env.USE_WP_ENV = 'true';
-
-config = {
-	...config.default,
-	projects: [
-		...config.setupProjects,
-		{
-			name: 'WooCommerce PayPal Payments',
-			grep: new RegExp( tags.PAYMENTS ),
-			dependencies: [ 'site setup' ],
-		},
-	],
-};
-
-module.exports = config;
diff --git a/plugins/woocommerce/tests/e2e-pw/envs/woocommerce-paypal-payments/playwright.config.ts b/plugins/woocommerce/tests/e2e-pw/envs/woocommerce-paypal-payments/playwright.config.ts
new file mode 100644
index 00000000000..7a8f720dfae
--- /dev/null
+++ b/plugins/woocommerce/tests/e2e-pw/envs/woocommerce-paypal-payments/playwright.config.ts
@@ -0,0 +1,21 @@
+/**
+ * Internal dependencies
+ */
+import defaultConfig, { setupProjects } from '../../playwright.config';
+import { tags } from '../../fixtures/fixtures';
+
+process.env.USE_WP_ENV = 'true';
+
+const config = {
+	...defaultConfig,
+	projects: [
+		...setupProjects,
+		{
+			name: 'WooCommerce PayPal Payments',
+			grep: new RegExp( tags.PAYMENTS ),
+			dependencies: [ 'site setup' ],
+		},
+	],
+};
+
+export default config;
diff --git a/plugins/woocommerce/tests/e2e-pw/envs/woocommerce-services/playwright.config.js b/plugins/woocommerce/tests/e2e-pw/envs/woocommerce-services/playwright.config.js
deleted file mode 100644
index fe2d62050c7..00000000000
--- a/plugins/woocommerce/tests/e2e-pw/envs/woocommerce-services/playwright.config.js
+++ /dev/null
@@ -1,18 +0,0 @@
-let config = require( '../../playwright.config.js' );
-const { tags } = require( '../../fixtures/fixtures' );
-
-process.env.USE_WP_ENV = 'true';
-
-config = {
-	...config.default,
-	projects: [
-		...config.setupProjects,
-		{
-			name: 'WooCommerce Shipping & Tax',
-			grep: new RegExp( tags.SERVICES ),
-			dependencies: [ 'site setup' ],
-		},
-	],
-};
-
-module.exports = config;
diff --git a/plugins/woocommerce/tests/e2e-pw/envs/woocommerce-services/playwright.config.ts b/plugins/woocommerce/tests/e2e-pw/envs/woocommerce-services/playwright.config.ts
new file mode 100644
index 00000000000..29a1b2ab7ba
--- /dev/null
+++ b/plugins/woocommerce/tests/e2e-pw/envs/woocommerce-services/playwright.config.ts
@@ -0,0 +1,21 @@
+/**
+ * Internal dependencies
+ */
+import defaultConfig, { setupProjects } from '../../playwright.config';
+import { tags } from '../../fixtures/fixtures';
+
+process.env.USE_WP_ENV = 'true';
+
+const config = {
+	...defaultConfig,
+	projects: [
+		...setupProjects,
+		{
+			name: 'WooCommerce Shipping & Tax',
+			grep: new RegExp( tags.SERVICES ),
+			dependencies: [ 'site setup' ],
+		},
+	],
+};
+
+export default config;
diff --git a/plugins/woocommerce/tests/e2e-pw/fixtures/paypal-fixtures.js b/plugins/woocommerce/tests/e2e-pw/fixtures/paypal-fixtures.ts
similarity index 100%
rename from plugins/woocommerce/tests/e2e-pw/fixtures/paypal-fixtures.js
rename to plugins/woocommerce/tests/e2e-pw/fixtures/paypal-fixtures.ts
diff --git a/plugins/woocommerce/tests/e2e-pw/playwright.config.js b/plugins/woocommerce/tests/e2e-pw/playwright.config.ts
similarity index 96%
rename from plugins/woocommerce/tests/e2e-pw/playwright.config.js
rename to plugins/woocommerce/tests/e2e-pw/playwright.config.ts
index 1ec8dfb15cd..d5f6b7b2b9e 100644
--- a/plugins/woocommerce/tests/e2e-pw/playwright.config.js
+++ b/plugins/woocommerce/tests/e2e-pw/playwright.config.ts
@@ -2,8 +2,10 @@
  * External dependencies
  */
 import { defineConfig, devices } from '@playwright/test';
+import dotenv from 'dotenv';

-require( 'dotenv' ).config( { path: __dirname + '/.env' } );
+// __dirname is not natively available in ESM, but Playwright's config loader shims it.
+dotenv.config( { path: __dirname + '/.env' } );

 if ( ! process.env.BASE_URL ) {
 	process.env.BASE_URL =
diff --git a/plugins/woocommerce/tests/e2e-pw/run-tests-with-env.sh b/plugins/woocommerce/tests/e2e-pw/run-tests-with-env.sh
index b6ef660a6f5..fc8221bce69 100644
--- a/plugins/woocommerce/tests/e2e-pw/run-tests-with-env.sh
+++ b/plugins/woocommerce/tests/e2e-pw/run-tests-with-env.sh
@@ -67,7 +67,17 @@ title
 title "Running tests with environment: '$envName'"
 title

-configFile="$SCRIPT_PATH/envs/$envName/playwright.config.js"
+configFileTs="$SCRIPT_PATH/envs/$envName/playwright.config.ts"
+configFileJs="$SCRIPT_PATH/envs/$envName/playwright.config.js"
+
+if [ -f "$configFileTs" ]; then
+	configFile="$configFileTs"
+elif [ -f "$configFileJs" ]; then
+	configFile="$configFileJs"
+else
+	echo "No Playwright config found for environment '$envName' (expected .ts or .js)." >&2
+	exit 1
+fi
 echo "Using config file: $configFile"
 echo "Arguments: $*"
 title