[E2E][QIT] Add remaining merchant E2E test specs to QIT test-package

changelog/dev-qit-merchant-tests

@@ -0,0 +1,3 @@
+Significance: patch
+Type: dev
+Comment: Migration of merchant E2E tests to QIT Test Packages feature. No production code is affected.

tests/qit/README.md

@@ -71,6 +71,10 @@ E2E_JP_SITE_ID='<value>' E2E_JP_BLOG_TOKEN='<value>' E2E_JP_USER_TOKEN='<value>'
 
 # Run tests filtered by tag (e.g., @blocks, @shopper)
 E2E_JP_SITE_ID='<value>' E2E_JP_BLOG_TOKEN='<value>' E2E_JP_USER_TOKEN='<value>' npm run test:qit-e2e -- -- --grep "@blocks"
+
+# Run a specific test project (e.g., merchant, shopper)
+E2E_JP_SITE_ID='<value>' E2E_JP_BLOG_TOKEN='<value>' E2E_JP_USER_TOKEN='<value>' npm run test:qit-e2e -- -- --project=merchant
+# Available projects are defined in playwright.config.js
 ```
 
 > [!TIP]
@@ -93,3 +97,27 @@ npm run test:qit-e2e
 #### "Card testing attempt detected" errors
 
 If checkout tests fail with "Card testing attempt detected" errors, the test account may need server-side configuration to disable fraud protection for E2E testing. Contact the payments team for assistance.
+
+#### GitHub token errors during `composer install`
+
+When running `composer install`, you may encounter:
+
+```text
+Could not fetch https://api.github.com/repos/woocommerce/qit-cli/zipball/...
+please review your configured GitHub OAuth token
+```
+
+**Solution:** Use a fine-grained GitHub token with read-only access to public repositories.
+
+1. Go to GitHub → Settings → Developer settings → Personal access tokens → Fine-grained tokens
+2. Create a new token with:
+   - **Repository access:** Public repositories (read-only)
+   - No additional permissions required
+3. Configure Composer to use the token:
+
+   ```bash
+   composer config --global github-oauth.github.com YOUR_TOKEN
+   ```
+
+> [!NOTE]
+> Classic PAT tokens may not work for accessing woocommerce repos. Fine-grained tokens with public repo read access are sufficient.

tests/qit/test-package/playwright.config.js

@@ -82,7 +82,12 @@ export default defineConfig( {
 			testDir: './tests/woopayments/shopper',
 			use: { ...devices[ 'Desktop Chrome' ] },
 		},
-		// Additional projects for merchant and subscriptions subpackages
+		{
+			name: 'merchant',
+			testDir: './tests/woopayments/merchant',
+			use: { ...devices[ 'Desktop Chrome' ] },
+		},
+		// Additional project for subscriptions subpackage
 		// will be added when those tests are migrated.
 	],
 } );

tests/qit/test-package/qit-test.json

@@ -43,6 +43,15 @@
                     "run": ["npx playwright test --project=shopper"]
                 }
             }
+        },
+        "woocommerce-payments/merchant": {
+            "description": "Merchant admin tests for WooPayments",
+            "tags": ["woopayments", "merchant", "admin"],
+            "test": {
+                "phases": {
+                    "run": ["npx playwright test --project=merchant"]
+                }
+            }
         }
     },
     "timeout": 1800

tests/qit/test-package/tests/woopayments/merchant/merchant-admin-account-balance.spec.ts

@@ -0,0 +1,137 @@
+/**
+ * External dependencies
+ */
+import { test, expect } from '../../../fixtures/auth';
+
+/**
+ * Internal dependencies
+ */
+import { goToPaymentsOverview, dataHasLoaded } from '../../../utils/merchant';
+
+// Optional currency symbol, followed by one or more digits, decimal separator, or comma.
+const formattedCurrencyRegex = /[^\d.,]*[\d.,]+/;
+
+test.describe(
+	'Merchant account balance overview',
+	{ tag: '@merchant' },
+	() => {
+		test(
+			'View the total and available account balance for a single deposit currency',
+			{
+				tag: '@critical',
+			},
+			async ( { adminPage } ) => {
+				await test.step(
+					'Navigate to the Payments Overview screen',
+					async () => {
+						await goToPaymentsOverview( adminPage );
+						await dataHasLoaded( adminPage );
+					}
+				);
+
+				await test.step(
+					'Observe the total account balance, ensuring it has a formatted currency value',
+					async () => {
+						const totalBalanceValue = adminPage.getByLabel(
+							'Total balance',
+							{
+								exact: true,
+							}
+						);
+
+						await expect( totalBalanceValue ).toHaveText(
+							formattedCurrencyRegex
+						);
+					}
+				);
+
+				await test.step(
+					'Observe the available account balance, ensuring it has a formatted currency value',
+					async () => {
+						const availableFundsValue = adminPage.getByLabel(
+							'Available funds',
+							{
+								exact: true,
+							}
+						);
+
+						await expect( availableFundsValue ).toHaveText(
+							formattedCurrencyRegex
+						);
+					}
+				);
+			}
+		);
+
+		// @critical tag intentionally omitted until test is fully implemented.
+		// Unimplemented tests should not be marked critical as they provide false confidence in coverage.
+		test(
+			'View the total and available account balance for multiple deposit currencies',
+			{
+				tag: '@todo',
+				annotation: [
+					{
+						type: 'issue',
+						description:
+							'https://github.com/Automattic/woocommerce-payments/issues/9188',
+					},
+					{
+						type: 'description',
+						description:
+							'Test requirements not yet met: A merchant account with multiple deposit currencies must be available in our e2e environment',
+					},
+				],
+			},
+			async () => {
+				await test.step(
+					'Navigate to the Payments Overview screen',
+					() => {
+						// @todo https://github.com/Automattic/woocommerce-payments/issues/9188
+					}
+				);
+
+				await test.step(
+					'Select a deposit currency using the currency select input',
+					async () => {
+						// @todo https://github.com/Automattic/woocommerce-payments/issues/9188
+					}
+				);
+
+				await test.step(
+					'Observe the total account balance for the selected currency, ensuring it is correctly formatted with the currency symbol',
+					async () => {
+						// @todo https://github.com/Automattic/woocommerce-payments/issues/9188
+					}
+				);
+
+				await test.step(
+					'Observe the available account balance the selected currency, ensuring it is correctly formatted with the currency symbol',
+					async () => {
+						// @todo https://github.com/Automattic/woocommerce-payments/issues/9188
+					}
+				);
+
+				await test.step(
+					'Select a second deposit currency using the currency select input',
+					async () => {
+						// @todo https://github.com/Automattic/woocommerce-payments/issues/9188
+					}
+				);
+
+				await test.step(
+					'Observe the total account balance for the selected currency, ensuring it is correctly formatted with the currency symbol',
+					async () => {
+						// @todo https://github.com/Automattic/woocommerce-payments/issues/9188
+					}
+				);
+
+				await test.step(
+					'Observe the available account balance the selected currency, ensuring it is correctly formatted with the currency symbol',
+					async () => {
+						// @todo https://github.com/Automattic/woocommerce-payments/issues/9188
+					}
+				);
+			}
+		);
+	}
+);

tests/qit/test-package/tests/woopayments/merchant/merchant-admin-analytics.spec.ts

@@ -0,0 +1,117 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from '../../../fixtures/auth';
+import {
+	activateMulticurrency,
+	ensureOrderIsProcessed,
+	isMulticurrencyEnabled,
+	tableDataHasLoaded,
+	waitAndSkipTourComponent,
+	goToOrderAnalytics,
+} from '../../../utils/merchant';
+import { placeOrderWithCurrency } from '../../../utils/shopper';
+
+test.describe( 'Admin order analytics', { tag: '@merchant' }, () => {
+	let orderId: string;
+
+	// Extend timeout for the entire test suite to allow order processing
+	test.setTimeout( 120000 );
+
+	test.beforeAll( async ( { adminPage, customerPage } ) => {
+		// Set explicit timeout for this beforeAll hook
+		test.setTimeout( 120000 );
+
+		// Ensure multi-currency is enabled for the analytics tests
+		if ( false === ( await isMulticurrencyEnabled( adminPage ) ) ) {
+			await activateMulticurrency( adminPage );
+		}
+
+		// Place an order to ensure the analytics data is correct
+		orderId = await placeOrderWithCurrency( customerPage, 'USD' );
+		await ensureOrderIsProcessed( adminPage, orderId );
+
+		// Give analytics more time to process the order data
+		await adminPage.waitForTimeout( 2000 );
+	} );
+
+	test( 'should load without any errors', async ( { adminPage } ) => {
+		await goToOrderAnalytics( adminPage );
+		await tableDataHasLoaded( adminPage );
+		await waitAndSkipTourComponent(
+			adminPage,
+			'.woocommerce-revenue-report-date-tour'
+		);
+
+		const ordersTitle = adminPage.getByRole( 'heading', {
+			name: 'Orders',
+			level: 1,
+			exact: true,
+		} );
+		await expect( ordersTitle ).toBeVisible();
+
+		// Check for analytics data with retry mechanism
+		let hasData = false;
+		let attempts = 0;
+		const maxAttempts = 3;
+
+		while ( ! hasData && attempts < maxAttempts ) {
+			const noDataText = adminPage.getByText( 'No data to display' );
+			const noDataCount = await noDataText.count();
+
+			if ( noDataCount === 0 ) {
+				hasData = true;
+				break;
+			}
+
+			// If no data on first check, try refreshing
+			if ( attempts < maxAttempts - 1 ) {
+				await adminPage.reload();
+				await tableDataHasLoaded( adminPage );
+				await waitAndSkipTourComponent(
+					adminPage,
+					'.woocommerce-revenue-report-date-tour'
+				);
+				// Wait a bit more for data to load after refresh
+				await adminPage.waitForTimeout( 2000 );
+			}
+
+			attempts++;
+		}
+
+		// Verify that we have analytics data from the order created in beforeAll
+		const finalNoDataText = adminPage.getByText( 'No data to display' );
+		await expect( finalNoDataText ).toHaveCount( 0 );
+
+		// TODO: This visual regression test is flaky, we should revisit the approach.
+		// await expect( adminPage ).toHaveScreenshot();
+	} );
+
+	test( 'orders table should have the customer currency column', async ( {
+		adminPage,
+	} ) => {
+		await goToOrderAnalytics( adminPage );
+		await tableDataHasLoaded( adminPage );
+		await waitAndSkipTourComponent(
+			adminPage,
+			'.woocommerce-revenue-report-date-tour'
+		);
+
+		const columnToggle = adminPage.getByTitle(
+			'Choose which values to display'
+		);
+		await columnToggle.click();
+		const customerCurrencyToggle = adminPage.getByRole(
+			'menuitemcheckbox',
+			{
+				name: 'Customer Currency',
+			}
+		);
+		await expect( customerCurrencyToggle ).toBeVisible();
+		await customerCurrencyToggle.click();
+		const customerCurrencyColumn = adminPage.getByRole( 'columnheader', {
+			name: 'Customer Currency',
+		} );
+		await expect( customerCurrencyColumn ).toBeVisible();
+	} );
+} );

tests/qit/test-package/tests/woopayments/merchant/merchant-admin-deposits.spec.ts

@@ -0,0 +1,60 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from '../../../fixtures/auth';
+
+test.describe( 'Merchant deposits', { tag: '@merchant' }, () => {
+	test( 'Load the deposits list page', async ( { adminPage } ) => {
+		await adminPage.goto(
+			'/wp-admin/admin.php?page=wc-admin&path=/payments/payouts'
+		);
+
+		// Wait for the deposits table to load.
+		await adminPage
+			.locator( '.woocommerce-table__table.is-loading' )
+			.waitFor( { state: 'hidden' } );
+
+		expect(
+			adminPage.getByRole( 'heading', {
+				name: 'Payout history',
+			} )
+		).toBeVisible();
+	} );
+
+	test( 'Select deposits list advanced filters', async ( { adminPage } ) => {
+		await adminPage.goto(
+			'/wp-admin/admin.php?page=wc-admin&path=/payments/payouts'
+		);
+
+		// Wait for the deposits table to load.
+		await adminPage
+			.locator( '.woocommerce-table__table.is-loading' )
+			.waitFor( { state: 'hidden' } );
+
+		// Open the advanced filters.
+		await adminPage.getByRole( 'button', { name: 'All payouts' } ).click();
+		await adminPage
+			.getByRole( 'button', { name: 'Advanced filters' } )
+			.click();
+
+		// Select a filter
+		await adminPage.getByRole( 'button', { name: 'Add a Filter' } ).click();
+		await adminPage.getByRole( 'button', { name: 'Status' } ).click();
+
+		// Select a filter option
+		await adminPage
+			.getByLabel( 'Select a payout status', {
+				exact: true,
+			} )
+			.selectOption( 'Pending' );
+
+		// Scroll to the top to ensure the sticky header doesn't cover the filters.
+		await adminPage.evaluate( () => {
+			window.scrollTo( 0, 0 );
+		} );
+		// TODO: This visual regression test is not flaky, but we should revisit the approach.
+		// await expect(
+		// 	adminPage.locator( '.woocommerce-filters' ).last()
+		// ).toHaveScreenshot();
+	} );
+} );