Explain playwright tests in CONTRIBUTING.md

CONTRIBUTING.md

@@ -24,9 +24,20 @@ The following checks must succeed before code can be merged:
 - Prettier
 - TypeScript compile
 - ESLint
+- Playwright
 
 The `./gradlew check` command executes them all. To reformat code, use `./gradlew prettierFormat`.
 
+The playwright tests also include visual regression tests. The reference images only exist for chromium on linux. All other variations have been deemed too flaky. If you are not on linux (or WSL), you can use docker to run the tests (check the current version of playwright in `package.json` and adjust `PLAYWRIGHT_VERSION` accordingly):
+
+```bash
+PLAYWRIGHT_VERSION=v1.49.0
+./gradlew frontendBuild
+docker run -v .:/app --workdir /app -it --rm mcr.microsoft.com/playwright:$PLAYWRIGHT_VERSION-noble npm run test:playwright
+```
+
+Exclude the playwright task from `./gradlew check` by passing `-x playwright`.
+
 ### Working on the GUI editor
 
 To run the editor GUI independently from AEM (and with mocked responses), the watch mode can be used:

src/test/playwright/basic.spec.ts

@@ -15,7 +15,7 @@ test('add step', async ({ page }) => {
 	await expect(page).toHaveScreenshot();
 	await page.getByRole('option', { name: 'Query JCR' }).click();
 	await page.getByLabel('Log Level: INFO').click();
-  await page.getByRole('option', { name: 'TRACE' }).click();
+	await page.getByRole('option', { name: 'TRACE' }).click();
 	await expect(page).toHaveScreenshot();
 
 	const step = page.locator('.hop-config.nodeQuery');
@@ -61,5 +61,4 @@ test('add step', async ({ page }) => {
     - text: /info JCR Hopper script finished after \\d+[hmsp]+ warn Not saving changes as dry run is enabled error Script execution aborted with exception/
     - button "!!"
 	`);
-
 });