[Issue #358]: Add e2e tests against PR preview env

.github/workflows/e2e-tests.yml

@@ -0,0 +1,57 @@
+name: E2E Tests
+
+on:
+ workflow_call:
+ inputs:
+ service_endpoint:
+ required: true
+ type: string
+ app_name:
+ required: false
+ type: string
+
+jobs:
+ e2e:
+ name: Run E2E Tests
+ runs-on: ubuntu-latest
+
+ env:
+ BASE_URL: ${{ inputs.service_endpoint }}
+ APP_NAME: ${{ inputs.app_name }}
+
+ steps:
+ - name: Checkout code
+ uses: actions/checkout@v4
+
+ - name: Set up Node.js
+ uses: actions/setup-node@v4
+ with:
+ node-version: '20'
+
+ - name: Install system dependencies
+ run: |
+ sudo apt-get update
+ sudo apt-get install -y libwoff1 libopus0 libvpx7 libevent-2.1-7 libopus0 libgstreamer1.0-0 \
+ libgstreamer-plugins-base1.0-0 libgstreamer-plugins-good1.0-0 libharfbuzz-icu0 libhyphen0 \
+ libenchant-2-2 libflite1 libgles2 libx264-dev
+
+ - name: Install Node.js dependencies
+ run: npm ci
+ working-directory: ./e2e
+
+ - name: Install Playwright browsers
+ run: npx playwright install --with-deps
+ working-directory: ./e2e
+
+ - name: Run e2e tests
+ run: npm run e2e-tests-ci
+ working-directory: ./e2e
+ env:
+ BASE_URL: ${{ inputs.service_endpoint }}
+ APP_NAME: ${{ inputs.app_name }}
+
+ - name: Upload Playwright report
+ uses: actions/upload-artifact@v3
+ with:
+ name: playwright-report
+ path: ./e2e/playwright-report

.github/workflows/pr-environment-update.yml

@@ -35,6 +35,9 @@ jobs:
 
  concurrency: pr-environment-${{ inputs.pr_number }}
 
+ outputs:
+ service_endpoint: ${{ steps.update-environment.outputs.service_endpoint }}
+
  steps:
  - uses: actions/checkout@v4
 
@@ -51,6 +54,19 @@ jobs:
  environment: ${{ inputs.environment }}
 
  - name: Update environment
- run: ./bin/update-pr-environment "${{ inputs.app_name }}" "${{ inputs.environment }}" "${{ inputs.pr_number }}" "${{ inputs.commit_hash }}"
+ id: update-environment
+ run: |
+ ./bin/update-pr-environment "${{ inputs.app_name }}" "${{ inputs.environment }}" "${{ inputs.pr_number }}" "${{ inputs.commit_hash }}"
+ service_endpoint=$(terraform -chdir="infra/${{ inputs.app_name }}/service" output -raw service_endpoint)
+ echo "service_endpoint=${service_endpoint}"
+ echo "service_endpoint=${service_endpoint}" >> "$GITHUB_OUTPUT"
  env:
  GH_TOKEN: ${{ github.token }}
+
+ e2e-tests:
+ name: Run E2E Tests
+ needs: [update]
+ uses: ./.github/workflows/e2e-tests.yml
+ with:
+ service_endpoint: ${{ needs.update.outputs.service_endpoint }}
+ app_name: ${{ inputs.app_name }}

Makefile

@@ -58,9 +58,9 @@ __check_defined = \
  release-image-name \
  release-image-tag \
  release-publish \
- release-run-database-migrations
-
-
+ release-run-database-migrations \
+ e2e-setup \
+ e2e-test
 
 infra-set-up-account: ## Configure and create resources for current AWS profile and save tfbackend file to infra/accounts/$ACCOUNT_NAME.ACCOUNT_ID.s3.tfbackend
  @:$(call check_defined, ACCOUNT_NAME, human readable name for account e.g. "prod" or the AWS account alias)
@@ -217,6 +217,21 @@ release-image-name: ## Prints the image name of the release image
 release-image-tag: ## Prints the image tag of the release image
  @echo $(IMAGE_TAG)
 
+########################
+## e2e ##
+########################
+
+e2e-setup: ## Setup end-to-end tests
+ @cd e2e && npm install
+ @cd e2e && npx playwright install --with-deps
+
+
+e2e-test: ## Run end-to-end tests
+ # make e2e-test APP_NAME=app BASE_URL=http://localhost:3000
+ @:$(call check_defined, APP_NAME, ...)
+ @:$(call check_defined, BASE_URL, ...)
+ @cd e2e && cd $(APP_NAME) && APP_NAME=$(APP_NAME) BASE_URL=$(BASE_URL) npx playwright test $(E2E_ARGS)
+
 ########################
 ## Scripts and Helper ##
 ########################

e2e/.env.example

@@ -0,0 +1,2 @@
+BASE_URL=http://127.0.0.1:3000
+APP_NAME=app

e2e/.gitignore

@@ -0,0 +1,6 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+*.png*

e2e/app/playwright.config.js

@@ -0,0 +1,16 @@
+import { defineConfig, devices } from '@playwright/test';
+
+import baseConfig from '../playwright.config';
+
+export default defineConfig({
+ ...baseConfig,
+
+ projects: [
+ ...baseConfig.projects,
+ // add Safari for derived app config
+ {
+ name: "webkit",
+ use: { ...devices["Desktop Safari"] },
+ },
+ ],
+});

e2e/app/tests/index.spec.js

@@ -0,0 +1,31 @@
+const { test, expect } = require('@playwright/test');
+
+import AxeBuilder from '@axe-core/playwright';
+
+test.describe('Generic Webpage Tests', () => {
+ test('should load the webpage successfully', async ({ page }) => {
+ const response = await page.goto('/');
+ const title = await page.title();
+ await expect(response.status()).toBe(200);
+ });
+
+ test('should take a screenshot of the webpage', async ({ page }) => {
+ await page.goto('/');
+ await page.screenshot({ path: 'example-screenshot.png', fullPage: true });
+ });
+
+ // https://playwright.dev/docs/accessibility-testing
+ test('should not have any automatically detectable accessibility issues', async ({ page }) => {
+ await page.goto('/');
+ const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+ expect(accessibilityScanResults.violations).toEqual([]);
+ });
+
+ // Example test of finding a an html element on the index/home page
+ // test('should check for an element to be visible', async ({ page }) => {
+ // await page.goto('/');
+ // const element = page.locator('h1');
+ // await expect(element).toBeVisible();
+ // });
+
+});