Sets project up to run Playwright tests in CI against local app changes

.devcontainer/devcontainer.json

@@ -14,6 +14,7 @@
     // Features to add to the dev container. More info: https://containers.dev/features.
     "features": {
       "ghcr.io/devcontainers/features/python:1": {},
+      "ghcr.io/devcontainers/features/node:1": {},
       "ghcr.io/devcontainers/features/docker-in-docker:2": {}
     },
 

.devcontainer/on-setup.sh

@@ -3,10 +3,5 @@ wget -q https://raw.githubusercontent.com/dapr/cli/master/install/install.sh -O
 
 # Initialize dapr
 dapr uninstall --all # clean if needed
-dapr init
 
-# Install python dependencies
-pip install -r ./src/backend/requirements.txt
-
-# dotnet restore
-dotnet restore ./src/frontend/PetSpotR/PetSpotR.csproj
+scripts/setup

.github/workflows/playwright.yml

@@ -1,5 +1,4 @@
 name: Playwright Tests
-
 on:
   push:
     branches:
@@ -8,6 +7,14 @@ on:
     branches:
       - main
   workflow_dispatch:
+    inputs:
+      url:
+        description: URL to test
+        required: false
+        default: http://localhost:5114/
+
+env:
+  TEST_URL: ${{ github.event.inputs.url || 'http://localhost:5114/' }}
 
 jobs:
   test:
@@ -19,6 +26,17 @@ jobs:
     - uses: actions/setup-node@v3
       with:
         node-version: 16
+    - name: Cache Playwright Browsers
+      uses: actions/cache@v2
+      with:
+        path: ~/.cache/ms-playwright
+        key: ${{ runner.os }}-node-${{ hashFiles('tests/playwright/package.json') }}-${{ hashFiles('tests/playwright/playwright.config.ts') }}
+    - name: Dapr tool installer
+      if: ${{ env.TEST_URL == 'http://localhost:5114/' }}
+      uses: dapr/setup-dapr@v1
+    - name: Setup app locally
+      if: ${{ env.TEST_URL == 'http://localhost:5114/'}}
+      run: scripts/setup
     - name: Install dependencies
       run: |
         cd tests/playwright

.vscode/tasks.json

@@ -40,7 +40,7 @@
         {
             "label": "dapr-up-frontend",
             "type": "shell",
-            "command": [ "dapr run --app-id frontend --app-port 5114 --components-path ./iac/dapr/local --dapr-http-port 3501 --dapr-grpc-port 50001"],
+            "command": ["scripts/dev-frontend"],
             "isBackground": true,
             "dependsOn": "build",
             "problemMatcher": [
@@ -72,7 +72,7 @@
         {
             "label": "dapr-up-backend",
             "type": "shell",
-            "command": [ "dapr run --app-id backend --app-port 5000 --components-path ./iac/dapr/local --dapr-http-port 3502 --dapr-grpc-port 50002"],
+            "command": ["scripts/dev-backend"],
             "isBackground": true,
             "dependsOn": "build",
             "problemMatcher": [
@@ -102,4 +102,4 @@
            }
         }
     ]
-}
+}

scripts/dev

@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+
+set -e
+
+lsof -ti :5114,5000 | xargs kill || true
+
+dotnet watch --project "$(dirname "$0")/../src/frontend/PetSpotR/PetSpotR.csproj" run &
+$(dirname "$0")/dev-backend &
+$(dirname "$0")/dev-frontend &
+
+wait

scripts/dev-backend

@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+
+set -e
+
+dapr run --app-id backend --app-port 5000 --components-path ./iac/dapr/local --dapr-http-port 3502 --dapr-grpc-port 50002

scripts/dev-frontend

@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+
+set -e
+
+dapr run --app-id frontend --app-port 5114 --components-path ./iac/dapr/local --dapr-http-port 3501 --dapr-grpc-port 50001

scripts/setup

@@ -0,0 +1,16 @@
+#!/usr/bin/env bash
+
+set -e
+
+dapr init
+
+# Install python dependencies
+pip install -r ./src/backend/requirements.txt
+
+# dotnet restore
+dotnet restore ./src/frontend/PetSpotR/PetSpotR.csproj
+
+# install playwright browsers
+cd tests/playwright
+npm install
+npx playwright install --with-deps

tests/playwright/package.json

@@ -8,6 +8,6 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@playwright/test": "^1.30.0"
+    "@playwright/test": "^1.46.1"
   }
 }

tests/playwright/playwright.config.ts

@@ -7,6 +7,12 @@ import { devices } from '@playwright/test';
  */
 // require('dotenv').config();
 
+const test_url = process.env.TEST_URL?.trim() || undefined;
+
+if (test_url) {
+  console.log(`Testing against ${test_url}`);
+}
+
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
@@ -35,8 +41,9 @@ const config: PlaywrightTestConfig = {
   use: {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
     actionTimeout: 0,
+
     /* Base URL to use in actions like `await page.goto('/')`. */
-    // baseURL: 'http://localhost:3000',
+    baseURL: test_url ?? `http://localhost:5114/`,
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
@@ -96,12 +103,14 @@ const config: PlaywrightTestConfig = {
 
   /* Folder for test artifacts such as screenshots, videos, traces, etc. */
   // outputDir: 'test-results/',
+};
 
+if (test_url?.includes('localhost')) {
   /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   port: 3000,
-  // },
-};
+  config.webServer = {
+    command: '../../scripts/dev',
+    url: 'http://localhost:5114/'
+  };
+}
 
 export default config;

tests/playwright/tests/homepage.spec.ts

@@ -1,14 +1,14 @@
 import { test, expect } from '@playwright/test';
 
 test('has title', async ({ page }) => {
-  await page.goto('http://app.9e5524d3a2474ae58276.westus3.aksapp.io/');
+  await page.goto('/');
 
   // Expect a title "to contain" a substring.
   await expect(page).toHaveTitle(/PetSpotR/);
 });
 
 test('get started link', async ({ page }) => {
-  await page.goto('http://app.9e5524d3a2474ae58276.westus3.aksapp.io/');
+  await page.goto('/');
 
   // Click the get started link.
   await page.getByRole('button', { name: 'I lost my pet' }).click();