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

@@ -8,6 +8,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

@@ -8,5 +8,8 @@ const config = {
         port: 8080,
         timeout: 120 * 1000,
     },
+    use: {
+        screenshot: 'only-on-failure',
+    }
 };
 module.exports = config;

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

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