Merge pull request #10359 from guardian/ravi/e2e-ophan

Ophan e2e tests and remove Ophan request cancellation

dotcom-rendering/playwright/lib/load-page.ts

@@ -9,13 +9,11 @@ const BASE_URL = `http://localhost:${PORT}`;
  * - default the base url and port
  * - default the geo region to GB
  * - prevent the support banner from showing
- * - abort all ophan requests
- * - use default waitUntil: 'domcontentloaded' rather than 'load' to speed up tests
  */
 const loadPage = async (
 	page: Page,
 	path: string,
-	waitUntil: 'load' | 'domcontentloaded' = 'domcontentloaded',
+	waitUntil: 'load' | 'domcontentloaded' = 'load',
 	region = 'GB',
 	preventSupportBanner = true,
 ): Promise<void> => {
@@ -32,12 +30,8 @@ const loadPage = async (
 			);
 		}
 	}, region);
-	// Abort all ophan requests as they hang and stop the page from firing the 'load' event
-	await page.route(/ophan.theguardian.com/, async (route) => {
-		await route.abort();
-	});
-	// Use default waitUntil: 'domcontentloaded' rather than 'load' to speed up tests
-	// If this causes any issues use 'load' instead
+	// The default waitUntil: 'load' ensures all requests have completed
+	// For specific cases that do not rely on JS use 'domcontentloaded' to speed up tests
 	await page.goto(`${BASE_URL}${path}`, { waitUntil });
 };
 

dotcom-rendering/playwright/tests/parallel-4/ophan.e2e.spec.ts

@@ -0,0 +1,128 @@
+import { isUndefined } from '@guardian/libs';
+import type { Page } from '@playwright/test';
+import { test } from '@playwright/test';
+import { cmpAcceptAll, cmpRejectAll, disableCMP } from '../../lib/cmp';
+import { loadPage } from '../../lib/load-page';
+
+const articleUrl =
+	'https://www.theguardian.com/politics/2019/oct/29/tories-restore-party-whip-to-10-mps-who-sought-to-block-no-deal-brexit';
+
+const frontUrl = 'https://www.theguardian.com/uk';
+
+const interceptOphanRequest = ({
+	page,
+	path,
+	searchParamMatcher,
+}: {
+	page: Page;
+	path: string;
+	searchParamMatcher: (searchParams: URLSearchParams) => boolean;
+}) => {
+	return page.waitForRequest((request) => {
+		const matchUrl = request
+			.url()
+			.startsWith(`https://ophan.theguardian.com/${path}`);
+		const searchParams = new URLSearchParams(request.url());
+		return matchUrl && searchParamMatcher(searchParams);
+	});
+};
+
+test.describe('Ophan requests', () => {
+	test('should make a view request on an article when consent is rejected', async ({
+		page,
+	}) => {
+		const ophanRequestPromise = interceptOphanRequest({
+			page,
+			path: 'img/1',
+			searchParamMatcher: (searchParams: URLSearchParams) => {
+				const platform = searchParams.get('platform');
+				const url = searchParams.get('url');
+				const viewId = searchParams.get('viewId');
+				return (
+					platform === 'next-gen' &&
+					url === page.url() &&
+					!isUndefined(viewId)
+				);
+			},
+		});
+		await loadPage(page, `/Article/${articleUrl}`);
+		await cmpRejectAll(page);
+		await ophanRequestPromise;
+	});
+
+	test('should make a view request on an article when consent is accepted', async ({
+		page,
+	}) => {
+		const ophanRequestPromise = interceptOphanRequest({
+			page,
+			path: 'img/1',
+			searchParamMatcher: (searchParams: URLSearchParams) => {
+				const platform = searchParams.get('platform');
+				const url = searchParams.get('url');
+				const viewId = searchParams.get('viewId');
+				return (
+					platform === 'next-gen' &&
+					url === page.url() &&
+					!isUndefined(viewId)
+				);
+			},
+		});
+		await loadPage(page, `/Article/${articleUrl}`);
+		await cmpAcceptAll(page);
+		await ophanRequestPromise;
+	});
+
+	test('should make event requests on an article', async ({
+		context,
+		page,
+	}) => {
+		await disableCMP(context);
+		const ophanExperienceRequestPromise = interceptOphanRequest({
+			page,
+			path: 'img/2',
+			searchParamMatcher: (searchParams: URLSearchParams) => {
+				const experiences = searchParams.get('experiences');
+				return experiences === 'dotcom-rendering';
+			},
+		});
+		await loadPage(page, `/Article/${articleUrl}`);
+		await ophanExperienceRequestPromise;
+	});
+
+	test('should make a view request on a front', async ({ context, page }) => {
+		await disableCMP(context);
+		const ophanRequestPromise = interceptOphanRequest({
+			page,
+			path: 'img/1',
+			searchParamMatcher: (searchParams: URLSearchParams) => {
+				const platform = searchParams.get('platform');
+				const url = searchParams.get('url');
+				const viewId = searchParams.get('viewId');
+				return (
+					platform === 'next-gen' &&
+					url === page.url() &&
+					!isUndefined(viewId)
+				);
+			},
+		});
+		await loadPage(page, `/Front/${frontUrl}`);
+		await ophanRequestPromise;
+	});
+
+	test('should make an event request on a front', async ({
+		context,
+		page,
+	}) => {
+		await disableCMP(context);
+		const ophanExperienceRequestPromise = interceptOphanRequest({
+			page,
+			path: 'img/2',
+			searchParamMatcher: (searchParams: URLSearchParams) => {
+				const experiences = searchParams.get('experiences');
+				return experiences === 'dotcom-rendering';
+			},
+		});
+		await loadPage(page, `/Front/${frontUrl}`);
+		await ophanExperienceRequestPromise;
+	});
+});