Merge branch 'main' into dina/create-new-test-template-for-public-good

.eslintignore

@@ -9,6 +9,8 @@ node_modules
 /legacy
 .eslintrc.cjs
 svelte.config.js
+playwright.config.ts
+*.test.ts
 
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml

.github/workflows/visual-regression.yml

@@ -0,0 +1,38 @@
+name: Visual regression
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+  pull_request:
+
+jobs:
+  test:
+    name: Visual regression
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - run: corepack enable
+        shell: bash
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+
+      - run: pnpm install --frozen-lockfile
+        shell: bash
+
+      - name: Install Playwright Browsers
+        run: pnpm playwright install --with-deps chromium
+
+      - name: Start Commercial Templates
+        run: pnpm dev & npx wait-on -v -i 1000 http://localhost:7777
+
+      - name: Run Playwright
+        run: pnpm playwright test

.gitignore

@@ -4,6 +4,8 @@ node_modules
 /.svelte-kit
 /package
 /build-static
+/test-results
+/playwright/reference-images
 
 .env
 .env.*

package.json

@@ -21,6 +21,7 @@
 		"@guardian/eslint-config-typescript": "^9.0.1",
 		"@guardian/prettier": "^2.0.0",
 		"@guardian/source": "^3.0.0",
+		"@playwright/test": "^1.45.0",
 		"@rollup/plugin-alias": "^3.1.8",
 		"@rollup/plugin-commonjs": "^26.0.1",
 		"@rollup/plugin-node-resolve": "^15.2.3",

playwright.config.ts

@@ -0,0 +1,18 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+	testMatch: 'playwright/**/*.test.ts',
+	projects: [
+		{
+			name: 'Chrome Stable',
+			use: {
+				browserName: 'chromium',
+				channel: 'chrome',
+			},
+		},
+	],
+	testDir: './playwright',
+	snapshotPathTemplate: '{testDir}/reference-images/{arg}{ext}',
+};
+
+export default config;

playwright/manual-multiple.test.ts

@@ -0,0 +1,49 @@
+import { expect, test } from '@playwright/test';
+
+const viewport = { width: 1600, height: 1000 };
+
+const widths = ['360', '740', '980', '1300', '100%'];
+
+test.describe('Manual Multiple visual regression testing', () => {
+	for (const breakpoint of widths) {
+		test(`Manual Multiple: ${breakpoint}`, async ({ page }) => {
+			await page.setViewportSize(viewport);
+
+			await page.goto(
+				'https://guardian.github.io/commercial-templates/csr/manual-multiple/',
+				{
+					waitUntil: 'networkidle',
+				},
+			);
+
+			const referenceTemplateLocator = page
+				.frameLocator(`[name='width-${breakpoint}']`)
+				.locator('html');
+			// check that the template is present on the page
+			await referenceTemplateLocator.isVisible();
+			// scroll to it
+			await referenceTemplateLocator.scrollIntoViewIfNeeded();
+			// take a reference screenshot
+			await referenceTemplateLocator.screenshot({
+				path: `./playwright/reference-images/Manual-multiple-${breakpoint.replace('%', '')}.png`,
+			});
+
+			await page.goto('http://localhost:7777/csr/manual-multiple', {
+				waitUntil: 'networkidle',
+			});
+
+			const testTemplateLocator = page
+				.frameLocator(`[name='width-${breakpoint}']`)
+				.locator('html');
+			// check that the template is present on the page
+			await testTemplateLocator.isVisible();
+			// scroll to it
+			await testTemplateLocator.scrollIntoViewIfNeeded();
+			// compare screenshot to reference
+			await expect(testTemplateLocator).toHaveScreenshot(
+				`Manual-multiple-${breakpoint.replace('%', '')}.png`,
+				{ maxDiffPixelRatio: 0.004 },
+			);
+		});
+	}
+});

src/templates/csr/capi-multiple-paidfor/test.json

@@ -1,5 +1,5 @@
 {
-	"SeriesURL": "clever-cookware",
+	"SeriesURL": "solving-health-challenges",
 	"ComponentTitle": "",
 	"Article1Headline": "",
 	"Article1Image": "",