Basic UI tests with playwright

.github/workflows/build-on-pull-request.yml

@@ -6,6 +6,7 @@ on:
 
 jobs:
   build:
+    timeout-minutes: 30
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -18,5 +19,21 @@ jobs:
       - name: Setup Gradle
         uses: gradle/gradle-build-action@v2
 
+# run build
       - name: Build
         run: ./gradlew build
+
+# prepare ui test
+      - name: Install Playwright E2E Browsers
+        run: npx playwright install --with-deps
+
+# run ui tests
+      - name: E2E
+        run: ./gradlew npm_run_e2e
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -34,6 +34,7 @@ speed-measure-plugin*.json
 .history/*
 
 # misc
+/.angular
 /.sass-cache
 /connect.lock
 /coverage
@@ -47,3 +48,8 @@ testem.log
 .DS_Store
 Thumbs.db
 /gradle.properties
+
+# Playwright
+/test-results/
+/playwright-report/
+/playwright/.cache/

README.md

@@ -27,6 +27,17 @@ It contains multiple mocks - including the ones from the springwolf-core example
 
 To update the mock data, run `npm run update-mocks`.
 
+## E2E tests
+
+E2E tests are written with [playwright](https://playwright.dev).
+
+Execute them with: `npm run test`
+(This starts the angular dev server in the background as defined in `playwright.config.ts` in the `webServer` section)
+
+During development of test you might find the codegen feature useful:
+`npx playwright codegen localhost:4200`
+(This assumes that the angular dev server is running `npm run start`)
+
 ## Release
 
 Releasing is done by running the gradle task `publish`. For local development, use `publishToMavenLocal`.

angular.json

@@ -79,55 +79,15 @@
             "browserTarget": "springwolf-ui:build"
           }
         },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.css"
-            ],
-            "scripts": []
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "springwolf-ui:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "springwolf-ui:serve:production"
-            }
-          }
-        },
         "deploy": {
           "builder": "angular-cli-ghpages:deploy",
           "options": {}
         }
       }
     }
   },
-  "defaultProject": "springwolf-ui"
+  "defaultProject": "springwolf-ui",
+  "cli": {
+    "analytics": false
+  }
 }

build.gradle

@@ -12,8 +12,8 @@ version = '0.6.0' + (isSnapshot ? '-SNAPSHOT' : '')
 sourceCompatibility = '1.8'
 
 node {
-  version = '12.18.1'
-  npmVersion = '6.14.5'
+  version = '18.12.0'
+  npmVersion = '8.19.2'
   download = true
 }