feat(gha): add playwright tests & GHA workflow (#36)

feat(ci): add end-to-end testing harness

This change introduces end-to-end (e2e) testing to the project CI. The
following changes and additions were made:

1. Added the "e2e" module that contains a Playwright harness
2. Added example tests (real tests to follow in separate PRs)
3. PR deployment workflow runs the tests, and reports in PR comment
4. Report comment provides link to test results with trace information

.github/workflows/pr_deploy.yml

@@ -56,3 +56,64 @@ 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: [ get-ref, deploy ]
+    runs-on: ubuntu-22.04
+    permissions:
+      pull-requests: write
+      id-token: write
+    steps:
+      - uses: actions/checkout@v3
+      - uses: arikkfir/delivery-env-name@v1
+        id: env
+        with:
+          branch: ${{ needs.get-ref.outputs.ref }}
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20.x
+          cache: npm
+          cache-dependency-path: e2e/package-lock.json
+      - uses: google-github-actions/auth@v1
+        with:
+          workload_identity_provider: projects/8909046976/locations/global/workloadIdentityPools/github-actions/providers/github-oidc
+          service_account: playwright-uploader@arikkfir.iam.gserviceaccount.com
+      - uses: google-github-actions/setup-gcloud@v1
+        with:
+          version: 443.0.0
+      - run: |
+          npm ci
+          npx playwright install --with-deps
+        working-directory: e2e
+      - id: test
+        continue-on-error: true
+        env:
+          ENV_NAME: ${{ steps.env.outputs.name }}
+        run: npx playwright test
+        working-directory: e2e
+      - run: |
+          UPLOAD_URL="gs://${BUCKET_NAME}/${BUCKET_PATH}/"
+          WEB_URL="https://playwright.kfirs.com/${BUCKET_PATH}/index.html"
+          gcloud storage cp -r -P ./playwright-report/* "${UPLOAD_URL}"
+          
+          touch comment.txt
+          echo "End to end tests *"${{ steps.test.outcome  == 'success' && 'succeeded' || 'failed' }}"* ([click here for a full report](${WEB_URL}))" >> comment.txt
+          echo "Application URL: https://acme.${ENV_NAME}.greenstar.kfirs.com" >> comment.txt
+          echo "" >> comment.txt
+          echo "---" >> comment.txt
+          echo "" >> comment.txt
+          cat custom-summary.txt >> comment.txt
+          gh pr comment ${PR} --body-file comment.txt --edit-last || gh pr comment ${PR} --body-file comment.txt
+          
+          if [[ "${FAILURE}" == "true" ]]; then
+            exit 1
+          fi
+        env:
+          BUCKET_NAME: arikkfir-playwright-reports
+          BUCKET_PATH: ${{ github.repository }}/actions/${{ github.run_number }}/${{ github.run_attempt }}
+          ENV_NAME: ${{ steps.env.outputs.name }}
+          GH_TOKEN: ${{ github.token }}
+          PR: ${{ github.event.pull_request.number || github.event.issue.number }}
+          FAILURE: ${{ steps.test.outcome == 'failure' }}
+        working-directory: e2e

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,14 @@
+{
+  "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",
+    "@skilbourn/playwright-report-summary": "^1.1.1"
+  }
+}

e2e/playwright.config.ts

@@ -0,0 +1,70 @@
+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
+            ? [
+                ['dot'],
+                ['github'],
+                ['@skilbourn/playwright-report-summary', {outputFile: 'custom-summary.txt'}],
+                ['html', {open: 'never'}],
+            ]
+            : [
+                ['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' },
+        // },
+    ],
+});