feat(gha): add end-to-end testing framework

This change integrates Playwright Automation tool into the CI process.

.github/workflows/pr_deploy.yml

@@ -56,3 +56,27 @@ jobs:
         ghcr.io/${{ github.repository }}/migrations: ${{ needs.get-ref.outputs.sha }}
         ghcr.io/${{ github.repository }}/neo4j: ${{ needs.get-ref.outputs.sha }}
     secrets: inherit
+
+  e2e-tests:
+    name: End-to-end Tests
+    needs: deploy
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20.x
+          cache: npm
+          cache-dependency-path: e2e/package-lock.json
+      - run: npm ci
+        working-directory: e2e
+      - run: npx playwright install --with-deps
+        working-directory: e2e
+      - run: npx playwright test
+        working-directory: e2e
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: e2e/playwright-report/
+          retention-days: 30

README.md

@@ -51,3 +51,25 @@ $ telepresence intercept --namespace=MY-ENV greenstar-frontend --port 8080:http
 # If you want to intercept the frontend locally:
 $ telepresence intercept --namespace=MY-ENV greenstar-backend --port 8000:http --env-file ./backend/intercept.env
 ```
+
+### Testing
+
+End-to-end tests are available in the `e2e` directory. To run them use the following:
+
+```shell
+$ npx playwright test                     # Runs the end-to-end tests.
+$ npx playwright test --ui                # Starts the interactive UI mode.
+$ npx playwright test --project=chromium  # Runs the tests only on Desktop Chrome.
+$ npx playwright test example             # Runs the tests in a specific file.
+$ npx playwright test --debug             # Runs the tests in debug mode.
+```
+
+See [this blog post](https://playwright.dev/docs/intro) for more information.
+
+#### TBD
+
+Tests code generation:
+
+```shell
+$ npx playwright codegen # Auto generate tests with Codegen.
+```

e2e.iml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$/e2e" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

e2e/.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+/test-results/
+/playwright-report/
+/playwright/.cache/

e2e/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "greenstar-e2e",
+  "version": "0.0.0",
+  "description": "End-to-end tests for Greenstar",
+  "main": "index.js",
+  "scripts": {},
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@playwright/test": "^1.37.1"
+  }
+}

e2e/playwright.config.ts

@@ -0,0 +1,62 @@
+import {defineConfig, devices} from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+    testDir: './tests',
+    timeout: 30 * 1000,
+    expect: {
+        timeout: 5000
+    },
+    fullyParallel: true,
+    forbidOnly: !!process.env.CI,
+    retries: 0,
+    workers: 1,
+    reporter: process.env.CI ? 'github' : [
+        ['list', {printSteps: true}],
+        ['html', {open: 'never'}],
+    ],
+    use: {
+        actionTimeout: 0,
+        /* Base URL to use in actions like `await page.goto('/')`. */
+        // baseURL: 'http://127.0.0.1:3000',
+        trace: 'on',
+    },
+    projects: [
+        {
+            name: 'chromium',
+            use: {...devices['Desktop Chrome']},
+        },
+        // {
+        //   name: 'firefox',
+        //   use: { ...devices['Desktop Firefox'] },
+        // },
+        // {
+        //   name: 'webkit',
+        //   use: { ...devices['Desktop Safari'] },
+        // },
+        // {
+        //   name: 'Google Chrome',
+        //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+        // },
+        // {
+        //   name: 'Mobile Chrome',
+        //   use: { ...devices['Pixel 7'] },
+        // },
+        // {
+        //   name: 'Mobile Safari',
+        //   use: { ...devices['iPhone 13'] },
+        // },
+        // {
+        //   name: 'Microsoft Edge',
+        //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+        // },
+    ],
+});