Merge pull request #529 from eecs-autograder/playwright-rebase

Set up Playwright for e2e tests, add landing page e2e tests

.editorconfig

@@ -7,14 +7,17 @@ trim_trailing_whitespace = true
 charset = utf-8
 indent_style = space
 
-# As we move tests over to Cypress, components to the Vue 3
-# composition API, and remove deprecated SCSS features,
+# As we convert components to the Vue 3
+# composition API and remove deprecated SCSS features,
 # we will gradually move from 4-space to 2-space indentation
 # on these file types.
 [src/**.{ts,scss}]
 indent_size = 4
-[test/**.{ts}]
+[tests/**.{ts}]
 indent_size = 4
 
-[*.{html,yml,yaml,vue,json,js,cy.ts}]
+[tests/e2e/**.ts]
+indent_size = 2
+
+[*.{html,yml,yaml,vue,json,js}]
 indent_size = 2

.github/workflows/node.js.yml

@@ -28,8 +28,9 @@ jobs:
 
     - run: npm ci
     - run: npm run lint
+    - run: npm run build
 
-  component-tests:
+  unit-tests:
     # Lint is fast. If we wait for it we guarantee a cache hit on dependencies.
     needs: lint
 
@@ -50,5 +51,36 @@ jobs:
         cache: 'npm'
 
     - run: npm ci
-    - run: npm run build
-    - run: npm run test
+    - run: npm test
+
+  e2e-tests:
+    # Lint is fast. If we wait for it we guarantee a cache hit on dependencies.
+    needs: lint
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v2
+      with:
+        submodules: 'true'
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+
+    - run: docker compose -f e2e_test_stack/docker-compose.yml build
+    - run: docker compose -f e2e_test_stack/docker-compose.yml pull
+
+    - run: npm ci
+
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+
+    - run: npm run e2e:once

.gitignore

@@ -20,3 +20,8 @@ yarn-error.log*
 *.sln
 *.sw*
 coverage
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

README.md

@@ -6,7 +6,6 @@ For information about contributing to Autograder.io, see our
 ## Setup
 Follow the [dev stack setup tutorial](https://github.com/eecs-autograder/autograder-full-stack/blob/master/docs/development_setup.md) for the [autograder-full-stack repo](https://github.com/eecs-autograder/autograder-full-stack).
 
-## Dev commands
 Our CI is currently configured to use NodeJS 16.
 The component tests (which now use vitest as their runner) should work with Node 20,
 but `npm run build` (which still uses vue-cli-services) will ONLY work with Node 16
@@ -17,17 +16,47 @@ by running:
 nvm install 16
 ```
 
-To run the component tests:
+Next, install npm dependencies:
 ```
-npm test
+npm ci
+npx playwright install --with-deps
 ```
 
+## Linting and Testing
 To run linters (eslint, Prettier, type checking, etc.):
 ```
 npm run lint
 npm run build
 ```
 
+To run the unit tests:
+```
+npm test
+```
+
+We recently started adding end-to-end tests written with Playwright.
+Running them requires building and starting the end-to-end test stack:
+```
+# Build the stack
+docker compose -f e2e_test_stack/docker-compose.yml build
+
+# Start the stack in the foreground
+npm run e2e:serve
+
+# Or start the stack in the background
+npm run e2e:served
+```
+
+To run the e2e tests headless:
+```
+npm run e2e
+```
+
+To run the e2e tests in UI mode:
+```
+npm run e2e -- --ui
+```
+
 ## Coding Standards
 In addition to the items listed here, all source code must follow our
 [Typescript/Vue coding standards](https://github.com/eecs-autograder/autograder.io/blob/master/coding_standards_typescript_vue.md).