Use playwright test for better validation (#382)

Author: davidjgoss

.github/workflows/test-javascript.yml

@@ -49,6 +49,8 @@ jobs:
         working-directory: javascript
       - run: npm run lint
         working-directory: javascript
+      - name: Setup browsers
+        run: npx playwright install --with-deps
       - name: Acceptance tests
         working-directory: javascript
-        run: npm run validate
+        run: npm run acceptance

README.md

@@ -22,3 +22,15 @@ Once you have Node.js installed, you can use:
     make prepare
 
 This will build the Javascript package and copy the required artifacts to the Java and Ruby packages.
+
+### Screenshots
+
+In the JavaScript package, we use fixtures from the [Compatibility Kit](https://github.com/cucumber/compatibility-kit) (CCK) to generate sample reports, render them in a browser and check them against reference screenshots [with Playwright](https://playwright.dev/docs/test-snapshots).
+
+If the tests fail, you can see actual vs expected screenshots plus a visual diff for each affected test in the `test-results` directory.
+
+If fixtures are added or changed in the CCK, the screenshots will have to be updated accordingly. To do that, run:
+
+```shell
+npx playwright test --update-snapshots
+```

javascript/.gitignore

@@ -1,3 +1,5 @@
+test/__output__/*.html
+test-results/
 dist/
 .idea/
 .nyc_output/
@@ -10,7 +12,6 @@ node_modules/
 .built*
 .compared
 .codegen
-acceptance/
 storybook-static
 *-go
 *.iml

javascript/.mocharc.json

@@ -3,6 +3,7 @@
     "ts-node/register",
     "source-map-support/register"
   ],
+  "spec": "src/**/*.spec.ts",
   "extension": [
     "ts",
     "tsx"