e2e: Initialize end to end testing

Initialize end to end testing in top level directory e2e. Everything related
to end to end testing will be in this directory. Initialize node package
with

    echo '{"private": true}' > e2e/package.json
    npm install --save-dev --prefix e2e playwright
    npm install --save-dev --prefix e2e @playwright/test@latest

Add `node_modules/` to .gitignore.

Setup basic playwright test config that will allow to parametrize the baseURL
of tests.

Add a minimal index.test.js test file that loads the Evy playground index.html
page. It runs two tests on it:

- ensure the title is "Evy | Playground"
- execute `Run` and ensure the console output contains expected test.

.gitignore

@@ -1,7 +1,10 @@
 /.hermit/
+/e2e/test-results
 /firebase/*.log
 /firebase/.firebase/
 /frontend/evy.wasm
 /frontend/version.json
 /frontend/wasm_exec.js
 /out/
+
+node_modules/

Makefile

@@ -11,7 +11,7 @@ all: build test lint tiny test-tiny check-coverage sh-lint check-prettier check-
 	@if [ -e .git/rebase-merge ]; then git --no-pager log -1 --pretty='%h %s'; fi
 	@echo '$(COLOUR_GREEN)Success$(COLOUR_NORMAL)'
 
-ci: clean check-uptodate all ## Full clean build and up-to-date checks as run on CI
+ci: clean check-uptodate all e2e ## Full clean build and up-to-date checks as run on CI
 
 check-uptodate: tidy fmt doc
 	test -z "$$(git status --porcelain)" || { git status; false; }
@@ -127,6 +127,8 @@ godoc: install
 # --- frontend -----------------------------------------------------------------
 NODEPREFIX = .hermit/node
 NODELIB = $(NODEPREFIX)/lib
+# TODO: BASEURL should be calculated dynamically for CI/PR.
+export BASEURL ?= https://evy.dev
 
 ## Serve frontend on free port
 serve:
@@ -140,10 +142,16 @@ prettier: | $(NODELIB)
 check-prettier: | $(NODELIB)
 	npx --prefix $(NODEPREFIX) -y prettier --check .
 
+e2e:
+	@echo "testing $(BASEURL)"
+	npm --prefix e2e ci
+	npx --prefix e2e playwright install --with-deps chromium
+	npx --prefix e2e playwright test --config e2e
+
 $(NODELIB):
 	@mkdir -p $@
 
-.PHONY: check-prettier prettier serve
+.PHONY: check-prettier e2e prettier serve
 
 # --- deploy -----------------------------------------------------------------
 

e2e/index.test.js

@@ -0,0 +1,15 @@
+const { test, expect } = require("@playwright/test")
+
+test("title", async ({ page, baseURL }) => {
+  await page.goto(baseURL)
+  await expect(page).toHaveTitle("evy | Playground")
+})
+
+test("console output", async ({ page, baseURL }) => {
+  await page.goto(baseURL)
+  await page.waitForLoadState("networkidle")
+  await page.getByRole("button", { name: "Run" }).click()
+  const console = page.locator("css=#console")
+  await expect(console).toContainText("x: 12")
+  await expect(console).toContainText("🍦 big x")
+})

e2e/package.json

@@ -0,0 +1,7 @@
+{
+  "private": "true",
+  "devDependencies": {
+    "@playwright/test": "^1.40.1",
+    "playwright": "^1.40.1"
+  }
+}

e2e/playwright.config.js

@@ -0,0 +1,6 @@
+const { defineConfig, devices } = require("@playwright/test")
+module.exports = defineConfig({
+  use: {
+    baseURL: process.env.BASEURL || "http://localhost:8080",
+  },
+})