diff --git a/dotcom-rendering/playwright/lib/load-page.ts b/dotcom-rendering/playwright/lib/load-page.ts index 6c7ece367b3..6268ebe6a0f 100644 --- a/dotcom-rendering/playwright/lib/load-page.ts +++ b/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 => { @@ -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 }); }; diff --git a/dotcom-rendering/playwright/tests/parallel-4/ophan.e2e.spec.ts b/dotcom-rendering/playwright/tests/parallel-4/ophan.e2e.spec.ts new file mode 100644 index 00000000000..87e7b4561a6 --- /dev/null +++ b/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; + }); +});