Commit 621c6e8afa for woocommerce
commit 621c6e8afae558dbe125117a1bf1c1991abdf86f
Author: theAverageDev (Luca Tumedei) <luca@theaveragedev.com>
Date: Mon Feb 9 14:12:43 2026 +0100
Convert e2e-pw test specs to TypeScript (batch 1) (#63190)
diff --git a/plugins/woocommerce/changelog/e2e-pw-ts-conversion-02 b/plugins/woocommerce/changelog/e2e-pw-ts-conversion-02
new file mode 100644
index 0000000000..9432a51303
--- /dev/null
+++ b/plugins/woocommerce/changelog/e2e-pw-ts-conversion-02
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Convert first set of e2e-pw tests to TypeScript.
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/basic/basic.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/basic/basic.spec.ts
similarity index 82%
rename from plugins/woocommerce/tests/e2e-pw/tests/basic/basic.spec.js
rename to plugins/woocommerce/tests/e2e-pw/tests/basic/basic.spec.ts
index ed5966061a..08337ca5c7 100644
--- a/plugins/woocommerce/tests/e2e-pw/tests/basic/basic.spec.js
+++ b/plugins/woocommerce/tests/e2e-pw/tests/basic/basic.spec.ts
@@ -1,6 +1,13 @@
-const { test, expect } = require( '@playwright/test' );
-const { logIn } = require( '../../utils/login' );
-const { admin, customer } = require( '../../test-data/data' );
+/**
+ * External dependencies
+ */
+import { test, expect } from '@playwright/test';
+
+/**
+ * Internal dependencies
+ */
+import { logIn } from '../../utils/login';
+import { admin, customer } from '../../test-data/data';
test( 'Load the home page', async ( { page } ) => {
await page.goto( './' );
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/basic/dashboard-access.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/basic/dashboard-access.spec.ts
similarity index 81%
rename from plugins/woocommerce/tests/e2e-pw/tests/basic/dashboard-access.spec.js
rename to plugins/woocommerce/tests/e2e-pw/tests/basic/dashboard-access.spec.ts
index 7f68ffda92..6ba7154147 100644
--- a/plugins/woocommerce/tests/e2e-pw/tests/basic/dashboard-access.spec.js
+++ b/plugins/woocommerce/tests/e2e-pw/tests/basic/dashboard-access.spec.ts
@@ -1,8 +1,12 @@
+/**
+ * External dependencies
+ */
+import { test, expect } from '@playwright/test';
+
/**
* Internal dependencies
*/
-const { test, expect } = require( '@playwright/test' );
-const { CUSTOMER_STATE_PATH } = require( '../../playwright.config' );
+import { CUSTOMER_STATE_PATH } from '../../playwright.config';
test.describe( 'Customer-role users are blocked from accessing the WP Dashboard.', () => {
test.use( { storageState: CUSTOMER_STATE_PATH } );
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/basic/page-loads.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/basic/page-loads.spec.ts
similarity index 99%
rename from plugins/woocommerce/tests/e2e-pw/tests/basic/page-loads.spec.js
rename to plugins/woocommerce/tests/e2e-pw/tests/basic/page-loads.spec.ts
index 4ca092a5fa..7609a9ddd7 100644
--- a/plugins/woocommerce/tests/e2e-pw/tests/basic/page-loads.spec.js
+++ b/plugins/woocommerce/tests/e2e-pw/tests/basic/page-loads.spec.ts
@@ -187,7 +187,7 @@ const wcPages = [
];
const product = getFakeProduct();
-let orderId;
+let orderId: number;
test.use( { storageState: ADMIN_STATE_PATH } );
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/brands/create-product-brand.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/brands/create-product-brand.spec.ts
similarity index 69%
rename from plugins/woocommerce/tests/e2e-pw/tests/brands/create-product-brand.spec.js
rename to plugins/woocommerce/tests/e2e-pw/tests/brands/create-product-brand.spec.ts
index 04f77bf4b9..46eea81dc2 100644
--- a/plugins/woocommerce/tests/e2e-pw/tests/brands/create-product-brand.spec.js
+++ b/plugins/woocommerce/tests/e2e-pw/tests/brands/create-product-brand.spec.ts
@@ -1,5 +1,20 @@
-const { test, expect } = require( '@playwright/test' );
-const { ADMIN_STATE_PATH } = require( '../../playwright.config' );
+/**
+ * External dependencies
+ */
+import { test, expect } from '@playwright/test';
+
+/**
+ * Internal dependencies
+ */
+import { ADMIN_STATE_PATH } from '../../playwright.config';
+
+interface Brand {
+ name: string;
+ slug: string;
+ parentBrand: string;
+ description: string;
+ thumbnailFileName: string;
+}
test.use( { storageState: ADMIN_STATE_PATH } );
@@ -20,17 +35,11 @@ test( 'Merchant can add brands', async ( { page } ) => {
await page.waitForSelector( '.wp-list-table' );
};
- const createBrandIfNotExist = async (
- name,
- slug,
- parentBrand,
- description,
- thumbnailFileName
- ) => {
+ const createBrandIfNotExist = async ( brand: Brand ) => {
// Create "WooCommerce" brand if it does not exist.
const cellVisible = await page
.locator( '#posts-filter' )
- .getByRole( 'cell', { name: slug, exact: true } )
+ .getByRole( 'cell', { name: brand.slug, exact: true } )
.isVisible();
if ( cellVisible ) {
@@ -38,21 +47,23 @@ test( 'Merchant can add brands', async ( { page } ) => {
}
await page.getByRole( 'textbox', { name: 'Name' } ).click();
- await page.getByRole( 'textbox', { name: 'Name' } ).fill( name );
+ await page.getByRole( 'textbox', { name: 'Name' } ).fill( brand.name );
await page.getByRole( 'textbox', { name: 'Slug' } ).click();
- await page.getByRole( 'textbox', { name: 'Slug' } ).fill( slug );
+ await page.getByRole( 'textbox', { name: 'Slug' } ).fill( brand.slug );
await page
.getByRole( 'combobox', { name: 'Parent Brand' } )
- .selectOption( { label: parentBrand } );
+ .selectOption( { label: brand.parentBrand } );
await page.getByRole( 'textbox', { name: 'Description' } ).click();
await page
.getByRole( 'textbox', { name: 'Description' } )
- .fill( description );
+ .fill( brand.description );
await page.getByRole( 'button', { name: 'Upload/Add image' } ).click();
await page.getByRole( 'tab', { name: 'Media Library' } ).click();
- await page.getByRole( 'checkbox', { name: thumbnailFileName } ).click();
+ await page
+ .getByRole( 'checkbox', { name: brand.thumbnailFileName } )
+ .click();
await page.getByRole( 'button', { name: 'Use image' } ).click();
await page.getByRole( 'button', { name: 'Add New Brand' } ).click();
@@ -65,7 +76,7 @@ test( 'Merchant can add brands', async ( { page } ) => {
await expect(
page
.locator( '#posts-filter' )
- .getByRole( 'cell', { name: slug, exact: true } )
+ .getByRole( 'cell', { name: brand.slug, exact: true } )
).toHaveCount( 1 );
};
@@ -77,21 +88,18 @@ test( 'Merchant can add brands', async ( { page } ) => {
*
* After a brand is edited, you will be redirected to the Brands page.
*/
- const editBrand = async (
- currentName,
- { name, slug, parentBrand, description, thumbnailFileName }
- ) => {
+ const editBrand = async ( currentName: string, brand: Brand ) => {
await page.getByLabel( `“${ currentName }” (Edit)` ).click();
- await page.getByLabel( 'Name' ).fill( name );
- await page.getByLabel( 'Slug' ).fill( slug );
+ await page.getByLabel( 'Name' ).fill( brand.name );
+ await page.getByLabel( 'Slug' ).fill( brand.slug );
await page
.getByLabel( 'Parent Brand' )
- .selectOption( { label: parentBrand } );
- await page.getByLabel( 'Description' ).fill( description );
+ .selectOption( { label: brand.parentBrand } );
+ await page.getByLabel( 'Description' ).fill( brand.description );
await page.getByRole( 'button', { name: 'Upload/Add image' } ).click();
await page.getByRole( 'tab', { name: 'Media Library' } ).click();
- await page.getByLabel( thumbnailFileName ).click();
+ await page.getByLabel( brand.thumbnailFileName ).click();
await page.getByRole( 'button', { name: 'Use image' } ).click();
await page.getByRole( 'button', { name: 'Update' } ).click();
@@ -108,7 +116,7 @@ test( 'Merchant can add brands', async ( { page } ) => {
await expect(
page
.locator( '#posts-filter' )
- .getByRole( 'cell', { name: slug, exact: true } )
+ .getByRole( 'cell', { name: brand.slug, exact: true } )
).toHaveCount( 1 );
};
@@ -120,7 +128,7 @@ test( 'Merchant can add brands', async ( { page } ) => {
*
* After a brand is deleted, you will be redirected to the Brands page.
*/
- const deleteBrand = async ( name ) => {
+ const deleteBrand = async ( name: string ) => {
await page.getByLabel( `“${ name }” (Edit)` ).click();
// After clicking the "Delete" button, there will be a confirmation dialog.
@@ -142,31 +150,31 @@ test( 'Merchant can add brands', async ( { page } ) => {
};
await goToBrandsPage();
- await createBrandIfNotExist(
- 'WooCommerce',
- 'woocommerce',
- 'None',
- 'All things WooCommerce!',
- 'image-01'
- );
+ await createBrandIfNotExist( {
+ name: 'WooCommerce',
+ slug: 'woocommerce',
+ parentBrand: 'None',
+ description: 'All things WooCommerce!',
+ thumbnailFileName: 'image-01',
+ } );
// Create child brand under the "WooCommerce" parent brand.
- await createBrandIfNotExist(
- 'WooCommerce Apparels',
- 'woocommerce-apparels',
- 'WooCommerce',
- 'Cool WooCommerce clothings!',
- 'image-02'
- );
+ await createBrandIfNotExist( {
+ name: 'WooCommerce Apparels',
+ slug: 'woocommerce-apparels',
+ parentBrand: 'WooCommerce',
+ description: 'Cool WooCommerce clothings!',
+ thumbnailFileName: 'image-02',
+ } );
// Create a dummy child brand called "WooCommerce Dummy" under the "WooCommerce" parent brand.
- await createBrandIfNotExist(
- 'WooCommerce Dummy',
- 'woocommerce-dummy',
- 'WooCommerce',
- 'Dummy WooCommerce brand!',
- 'image-02'
- );
+ await createBrandIfNotExist( {
+ name: 'WooCommerce Dummy',
+ slug: 'woocommerce-dummy',
+ parentBrand: 'WooCommerce',
+ description: 'Dummy WooCommerce brand!',
+ thumbnailFileName: 'image-02',
+ } );
// Edit the dummy child brand from "WooCommerce Dummy" to "WooCommerce Dummy Edited".
await editBrand( 'WooCommerce Dummy', {
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/customer/customer-list.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/customer/customer-list.spec.ts
similarity index 97%
rename from plugins/woocommerce/tests/e2e-pw/tests/customer/customer-list.spec.js
rename to plugins/woocommerce/tests/e2e-pw/tests/customer/customer-list.spec.ts
index ecaa0dd27f..d2c8814496 100644
--- a/plugins/woocommerce/tests/e2e-pw/tests/customer/customer-list.spec.js
+++ b/plugins/woocommerce/tests/e2e-pw/tests/customer/customer-list.spec.ts
@@ -71,11 +71,18 @@ const test = baseTest.extend( {
},
};
- const customers = [];
+ interface Customer {
+ id: number;
+ first_name: string;
+ last_name: string;
+ email: string;
+ }
+
+ const customers: Customer[] = [];
for ( const customer of Object.values( customerData ) ) {
await restApi
- .post( `${ WC_API_PATH }/customers`, customer )
+ .post< Customer >( `${ WC_API_PATH }/customers`, customer )
.then( ( response ) => {
customers.push( response.data );
} );
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/editor/command-palette.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/editor/command-palette.spec.ts
similarity index 95%
rename from plugins/woocommerce/tests/e2e-pw/tests/editor/command-palette.spec.js
rename to plugins/woocommerce/tests/e2e-pw/tests/editor/command-palette.spec.ts
index 4e9665f347..5e3875149c 100644
--- a/plugins/woocommerce/tests/e2e-pw/tests/editor/command-palette.spec.js
+++ b/plugins/woocommerce/tests/e2e-pw/tests/editor/command-palette.spec.ts
@@ -1,6 +1,7 @@
/**
* External dependencies
*/
+import { Page } from '@playwright/test';
import {
disableWelcomeModal,
WC_API_PATH,
@@ -16,7 +17,13 @@ import { expect, test as baseTest } from '../../fixtures/fixtures';
const macOS = process.platform === 'darwin';
const cmdKeyCombo = macOS ? 'Meta+k' : 'Control+k';
-const clickOnCommandPaletteOption = async ( { page, optionName } ) => {
+const clickOnCommandPaletteOption = async ( {
+ page,
+ optionName,
+}: {
+ page: Page;
+ optionName: string;
+} ) => {
// Press `Ctrl` + `K` to open the command palette.
await page.keyboard.press( cmdKeyCombo );
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/js-file-monitor/monitor-js-file-number.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/js-file-monitor/monitor-js-file-number.spec.ts
similarity index 92%
rename from plugins/woocommerce/tests/e2e-pw/tests/js-file-monitor/monitor-js-file-number.spec.js
rename to plugins/woocommerce/tests/e2e-pw/tests/js-file-monitor/monitor-js-file-number.spec.ts
index 542359b10a..1cea2e40c9 100644
--- a/plugins/woocommerce/tests/e2e-pw/tests/js-file-monitor/monitor-js-file-number.spec.js
+++ b/plugins/woocommerce/tests/e2e-pw/tests/js-file-monitor/monitor-js-file-number.spec.ts
@@ -1,5 +1,12 @@
-const { test, expect } = require( '@playwright/test' );
-const { ADMIN_STATE_PATH } = require( '../../playwright.config' );
+/**
+ * External dependencies
+ */
+import { test, expect } from '@playwright/test';
+
+/**
+ * Internal dependencies
+ */
+import { ADMIN_STATE_PATH } from '../../playwright.config';
const pageGroups = [
{
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/marketing/overview.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/marketing/overview.spec.ts
similarity index 93%
rename from plugins/woocommerce/tests/e2e-pw/tests/marketing/overview.spec.js
rename to plugins/woocommerce/tests/e2e-pw/tests/marketing/overview.spec.ts
index 964443878a..16c92abbd3 100644
--- a/plugins/woocommerce/tests/e2e-pw/tests/marketing/overview.spec.js
+++ b/plugins/woocommerce/tests/e2e-pw/tests/marketing/overview.spec.ts
@@ -1,6 +1,13 @@
-const { test, expect } = require( '@playwright/test' );
-const { tags } = require( '../../fixtures/fixtures' );
-const { ADMIN_STATE_PATH } = require( '../../playwright.config' );
+/**
+ * External dependencies
+ */
+import { test, expect } from '@playwright/test';
+
+/**
+ * Internal dependencies
+ */
+import { tags } from '../../fixtures/fixtures';
+import { ADMIN_STATE_PATH } from '../../playwright.config';
test.describe( 'Marketing page', () => {
test.use( { storageState: ADMIN_STATE_PATH } );