Port admin analytics E2E tests from Puppeteer to Playwright (#10127)

Co-authored-by: Ismael Martín Alabarce <[email protected]>

changelog/update-9957-playwright-migration-admin-order-analytics

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Admin analytics page E2E tests for Playwright

tests/e2e-pw/specs/merchant/merchant-admin-analytics.spec.ts

@@ -0,0 +1,85 @@
+/**
+ * External dependencies
+ */
+import { test, expect } from '@playwright/test';
+
+/**
+ * Internal dependencies
+ */
+import * as shopper from '../../utils/shopper';
+import { getMerchant, getShopper, useMerchant } from '../../utils/helpers';
+import {
+	activateMulticurrency,
+	ensureOrderIsProcessed,
+	isMulticurrencyEnabled,
+	tableDataHasLoaded,
+	waitAndSkipTourComponent,
+} from '../../utils/merchant';
+import { goToOrderAnalytics } from '../../utils/merchant-navigation';
+
+test.describe( 'Admin order analytics', () => {
+	let orderId: string;
+
+	// Use the merchant user for this test suite.
+	useMerchant();
+
+	test.beforeAll( async ( { browser } ) => {
+		const { shopperPage } = await getShopper( browser );
+		const { merchantPage } = await getMerchant( browser );
+
+		if ( false === ( await isMulticurrencyEnabled( merchantPage ) ) ) {
+			await activateMulticurrency( merchantPage );
+		}
+
+		// Place an order to ensure the analytics data is correct.
+		orderId = await shopper.placeOrderWithCurrency( shopperPage, 'USD' );
+		await ensureOrderIsProcessed( merchantPage, orderId );
+	} );
+
+	test( 'should load without any errors', async ( { browser } ) => {
+		const { merchantPage } = await getMerchant( browser );
+		await goToOrderAnalytics( merchantPage );
+		await tableDataHasLoaded( merchantPage );
+		await waitAndSkipTourComponent(
+			merchantPage,
+			'.woocommerce-revenue-report-date-tour'
+		);
+
+		const ordersTitle = merchantPage.getByRole( 'heading', {
+			name: 'Orders',
+			level: 1,
+			exact: true,
+		} );
+		await expect( ordersTitle ).toBeVisible();
+		await expect( merchantPage ).toHaveScreenshot();
+	} );
+
+	test( 'orders table should have the customer currency column', async ( {
+		browser,
+	} ) => {
+		const { merchantPage } = await getMerchant( browser );
+		await goToOrderAnalytics( merchantPage );
+		await tableDataHasLoaded( merchantPage );
+		await waitAndSkipTourComponent(
+			merchantPage,
+			'.woocommerce-revenue-report-date-tour'
+		);
+
+		const columnToggle = merchantPage.getByTitle(
+			'Choose which values to display'
+		);
+		await columnToggle.click();
+		const customerCurrencyToggle = merchantPage.getByRole(
+			'menuitemcheckbox',
+			{
+				name: 'Customer Currency',
+			}
+		);
+		await expect( customerCurrencyToggle ).toBeVisible();
+		await customerCurrencyToggle.click();
+		const customerCurrencyColumn = merchantPage.getByRole( 'columnheader', {
+			name: 'Customer Currency',
+		} );
+		await expect( customerCurrencyColumn ).toBeVisible();
+	} );
+} );

tests/e2e-pw/utils/helpers.ts

@@ -20,7 +20,7 @@ export const customerStorageFile = path.resolve(
 export const wpAdminLogin = async (
 	page: Page,
 	user: { username: string; password: string }
-): void => {
+): Promise< void > => {
 	await page.goto( `/wp-admin` );
 	await page.getByLabel( 'Username or Email Address' ).fill( user.username );
 	await page.getByLabel( 'Password', { exact: true } ).fill( user.password ); // Need exact match to avoid resolving "Show password" button.

tests/e2e-pw/utils/merchant-navigation.ts

@@ -23,6 +23,37 @@ export const goToWooPaymentsSettings = async ( page: Page ) => {
 	);
 };
 
+export const goToOptionsPage = async ( page: Page ) => {
+	await page.goto( '/wp-admin/options.php', {
+		waitUntil: 'load',
+	} );
+};
+
+export const goToActionScheduler = async (
+	page: Page,
+	status?: string,
+	search?: string
+) => {
+	let pageUrl = '/wp-admin/tools.php?page=action-scheduler';
+	if ( status ) {
+		pageUrl += `&status=${ status }`;
+	}
+	if ( search ) {
+		pageUrl += `&s=${ search }`;
+	}
+	await page.goto( pageUrl, {
+		waitUntil: 'load',
+	} );
+};
+
+export const goToOrderAnalytics = async ( page: Page ) => {
+	await page.goto(
+		'/wp-admin/admin.php?page=wc-admin&path=%2Fanalytics%2Forders',
+		{ waitUntil: 'load' }
+	);
+	await dataHasLoaded( page );
+};
+
 export const goToMultiCurrencySettings = async ( page: Page ) => {
 	await page.goto(
 		'/wp-admin/admin.php?page=wc-settings&tab=wcpay_multi_currency',

tests/e2e-pw/utils/merchant.ts

@@ -14,6 +14,28 @@ export const dataHasLoaded = async ( page: Page ) => {
 	await expect( page.locator( '.is-loadable-placeholder' ) ).toHaveCount( 0 );
 };
 
+export const tableDataHasLoaded = async ( page: Page ) => {
+	await page
+		.locator( '.woocommerce-table__table.is-loading' )
+		.waitFor( { state: 'hidden' } );
+};
+
+export const waitAndSkipTourComponent = async (
+	page: Page,
+	containerClass: string
+) => {
+	try {
+		await page.waitForSelector( `${ containerClass }`, { timeout: 3000 } );
+		if ( await page.isVisible( `${ containerClass }` ) ) {
+			await page.click(
+				`${ containerClass } button.woocommerce-tour-kit-step-controls__close-btn`
+			);
+		}
+	} catch ( error ) {
+		// Do nothing. The tour component being not present shouldn't cause the test to fail.
+	}
+};
+
 export const saveWooPaymentsSettings = async ( page: Page ) => {
 	await page.getByRole( 'button', { name: 'Save changes' } ).click();
 	await expect( page.getByLabel( 'Dismiss this notice' ) ).toBeVisible( {
@@ -251,6 +273,14 @@ export const disablePaymentMethods = async (
 	await saveWooPaymentsSettings( page );
 };
 
+export const ensureOrderIsProcessed = async ( page: Page, orderId: string ) => {
+	await navigation.goToActionScheduler( page, 'pending', orderId );
+	await page.$eval(
+		'td:has-text("wc-admin_import_orders") a:has-text("Run")',
+		( el: HTMLLinkElement ) => el.click()
+	);
+};
+
 export const isWooPayEnabled = async ( page: Page ) => {
 	await navigation.goToWooPaymentsSettings( page );
 

tests/e2e/env/setup.sh

@@ -345,6 +345,9 @@ cli wp db query "DELETE p, m FROM wp_posts p LEFT JOIN wp_postmeta m ON p.ID = m
 echo "Setting up a coupon for E2E tests"
 cli wp wc --user=admin shop_coupon create --code=free --amount=100 --discount_type=percent --individual_use=true --free_shipping=true
 
+echo "Syncing COT data"
+cli wp wc cot sync
+
 # Log test configuration for visibility
 echo
 echo "*******************************************************"