Run e2e tests in PRs (#140)

* Run e2e tests PRs

* Main, not master

* Install playwright browsers in workflow

* Add github reporter

* Screenshots on failure for e2e tests

* Upload test results if failure

* Fix e2e tests that were failing

* Update to Node 16

* Update readme to reference Node 16.x

Co-authored-by: David Paquette <dave.paquette@outlook.com>

Author: dpaquette

.github/workflows/2wr-app.yaml

@@ -5,12 +5,12 @@ on:
     paths:
       - '2wr-app/**'
       - '.github/workflows/2wr-app.yaml'
-    branches: [ master ]
+    branches: [ main ]
   pull_request:
     paths:
       - '2wr-app/**'
       - '.github/workflows/2wr-app.yaml'
-    branches: [ master ]
+    branches: [ main ]
   workflow_dispatch:
 
 jobs:
@@ -20,7 +20,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [16.x]
 
     steps:
     - uses: actions/checkout@v2
@@ -30,6 +30,20 @@ jobs:
         node-version: ${{ matrix.node-version }}
     - run: npm ci
       working-directory: ./2wr-app
+    - run: npx playwright install
+      working-directory: ./2wr-app
+    - name: Write sample env file for e2e tests
+      run: 'cp ./2wr-app/.env-sample ./2wr-app/.env'
+    - run: npm run e2etest
+      working-directory: ./2wr-app
+    - name: Upload e2e Test Results
+      uses: actions/upload-artifact@v2
+      if: failure()
+      with:
+        name: e2e-test-results
+        path: ./2wr-app/test-results
+    - name: Clear sample env file from e2e tests
+      run: 'rm ./2wr-app/.env'
     - name: Write env file
       run: 'echo "$DEV_ENV" > ./2wr-app/.env'
       shell: bash

2wr-app/.gitignore

@@ -9,6 +9,9 @@ node_modules
 .env.local
 .env.*.local
 
+#test results
+/test-results
+
 # Log files
 npm-debug.log*
 yarn-debug.log*

2wr-app/README.md

@@ -18,7 +18,7 @@ In VSCode, you can get a walk-through of the code via the [CodeTour](https://mar
 
 ## Project Prerequisites
 
-1. Node.js 14.17.6 LTS
+1. Node.js 16.x.x LTS
 
 ## Project setup
 

2wr-app/playwright.config.js

@@ -22,6 +22,7 @@ const config = {
   },
   globalSetup: require.resolve("./tests/global-setup"),
   use: {
+    screenshot: "only-on-failure",
     // Tell all tests to load signed-in state from 'storageState.json'.
     storageState: "./tests/_storagestate/storageState.json"
   }

2wr-app/tests/welcome.spec.js

@@ -14,7 +14,7 @@ test.describe("Welcome page accessibility test", () => {
     await injectAxe(page);
   });
 
-  test("Check Accessability", async () => {
+  test("Check Accessibility", async () => {
     await checkA11y(page, null, {
       axeOptions: {},
       detailedReport: true,