Tweak config to allow for higher tolerance

build.gradle.kts

@@ -144,6 +144,7 @@ aem {
 
 			inputs.dir("src/test/playwright")
 			inputs.file("configs/playwright.config.ts")
+			outputs.dir(project.layout.buildDirectory.dir(name))
 			outputs.dir(project.layout.buildDirectory.dir("reports/$name"))
 		}
 

configs/playwright.config.ts

@@ -1,7 +1,7 @@
 import { devices, PlaywrightTestConfig } from '@playwright/test';
 import { getPort } from 'get-port-please';
 
-const outputDir = '../build/reports/playwright';
+const outputDir = '../build/playwright';
 
 async function loadConfig(): Promise<PlaywrightTestConfig> {
 	const port = await getPort({ random: true });
@@ -21,7 +21,7 @@ async function loadConfig(): Promise<PlaywrightTestConfig> {
 		workers: process.env.CI ? 1 : undefined,
 		/* Reporter to use. See https://playwright.dev/docs/test-reporters */
 		reporter: [
-			['html', { open: 'never', outputFolder: outputDir }],
+			['html', { open: 'never', outputFolder: '../build/reports/playwright' }],
 			['junit', { outputFile: `${outputDir}/TEST-playwright.xml` }],
 		],
 		/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
@@ -43,6 +43,13 @@ async function loadConfig(): Promise<PlaywrightTestConfig> {
 			},
 		],
 
+		expect: {
+			toHaveScreenshot: {
+				maxDiffPixelRatio: 0.05,
+				maxDiffPixels: 10,
+			}
+		},
+
 		/* Run your local dev server before starting the tests */
 		webServer: {
 			command: `npm run watch:serve -- --listen=${port}`,