[React - Vue] - Migrate E2E Tests from Cypress to Playwright (#335)

.github/workflows/e2e.yml

@@ -0,0 +1,59 @@
+name: E2E Tests
+on: [deployment_status]
+
+jobs:
+  Setup:
+    if: github.event.deployment_status.state == 'success'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: pipx install pipenv
+      - uses: actions/setup-python@v5
+        with:
+          python-version: "3.10"
+          # Can't use cache because of https://github.com/actions/cache/issues/319
+          # cache: 'pipenv'
+      - name: Install bootstrapper dependencies
+        run: pipenv install --dev --deploy
+      - run: |
+          config_file=$(./scripts/vue_or_react.sh)
+          pipenv run cookiecutter . --config-file $config_file --no-input -f
+          cat $config_file
+      - uses: actions/upload-artifact@v4
+        with:
+          name: my_project
+          path: my_project/
+          retention-days: 1
+  Playwright:
+    needs: Setup
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    if: github.event.deployment_status.state == 'success'
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/download-artifact@v4
+        with:
+          name: my_project
+          path: my_project/
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+      - name: 📦 Install frontend dependencies
+        working-directory: ./my_project/client
+        run: npm install
+      - name: 🎭 Install Playwright
+        working-directory: ./my_project/client
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests against ${{ github.event.deployment_status.environment_url }}
+        working-directory: ./my_project/client
+        run: npx playwright test --reporter=html
+        env:
+          NPM_CONFIG_PRODUCTION: false
+          PLAYWRIGHT_TEST_BASE_URL: ${{ github.event.deployment_status.environment_url }}
+          CYPRESS_TEST_USER_PASS: ${{ secrets.CYPRESS_TEST_USER_PASS }}
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: my_project/client/playwright-report/
+          retention-days: 30

hooks/post_gen_project.py

@@ -118,15 +118,12 @@ def set_keys_in_envs(django_secret, postgres_secret):
     cookie_cutter_settings_path = join("app.json")
     postgres_init_file = join("scripts/init-db.sh")
     set_flag(env_file_path, "!!!DJANGO_SECRET_KEY!!!", django_secret)
+    set_flag(env_file_path, "!!!PLAYWRIGHT_SECRET_KEY!!!", django_secret)
     set_flag(pull_request_template_path, "!!!DJANGO_SECRET_KEY!!!", django_secret)
     set_flag(cookie_cutter_settings_path, "!!!DJANGO_SECRET_KEY!!!", django_secret)
     set_flag(env_file_path, "!!!POSTGRES_PASSWORD!!!", postgres_secret)
     set_flag(postgres_init_file, "!!!POSTGRES_PASSWORD!!!", postgres_secret)
     copy2(env_file_path, join(".env"))
-    cypress_example_file_dir = join(web_clients_path, "react")
-    cypress_example_file = join(cypress_example_file_dir, "cypress.example.env.json")
-    set_flag(cypress_example_file, "!!!POSTGRES_PASSWORD!!!", postgres_secret)
-    copy2(cypress_example_file, join(cypress_example_file_dir, "cypress.env.json"))
 
 
 def get_secrets():

{{cookiecutter.project_slug}}/.github/pull_request_template.md

@@ -22,4 +22,4 @@ Add user steps to achieve desired functionality for this feature.
 | user | password | has admin | notes |
 | --- | --- | --- | --- |
 | `[email protected]` | !!!DJANGO_SECRET_KEY!!! | :white_check_mark: | |
-| `cypress@example.com` | !!!DJANGO_SECRET_KEY!!! | :x: | Only use for automated E2E testing |
+| `playwright@thinknimble.com` | !!!DJANGO_SECRET_KEY!!! | :x: | Only use for automated E2E testing |

{{cookiecutter.project_slug}}/.github/workflows/playwright.yml

@@ -0,0 +1,24 @@
+name: Playwright Tests
+on:
+  deployment_status:
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    if: github.event.deployment_status.state == 'success'
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install dependencies
+        run: npm --prefix ./client i
+      - name: Install Playwright
+        run: npx --prefix ./client playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx --prefix ./client playwright test --reporter=html
+        env:
+          PLAYWRIGHT_TEST_BASE_URL:
+            {{ "${{ github.event.deployment_status.environment_url }}" }}
+          CYPRESS_TEST_USER_PASS:
+            {{ "${{ secrets.CYPRESS_TEST_USER_PASS }}" }}

{{cookiecutter.project_slug}}/.gitignore

@@ -31,11 +31,6 @@ wheels/
 .installed.cfg
 *.egg
 
-# Ignore Cypress environment variables & media
-client/cypress.env.json
-client/tests/e2e/screenshots/*
-client/tests/e2e/videos/*
-
 # PyInstaller
 #  Usually these files are written by a python script from a template
 #  before PyInstaller builds the exe, so as to inject date/other infos into it.

{{cookiecutter.project_slug}}/README.md

@@ -5,34 +5,38 @@
 ## Setup
 
 ### Docker
+
 If this is your first time...
+
 1. [Install Docker](https://www.docker.com/)
 1. Run `pipenv lock` to generate a Pipfile.lock
 1. Run `cd client && npm install` so you have node_modules available outside of Docker
 1. Back in the root directory, run `make build`
 1. `make run` to start the app
 1. If the DB is new, run `make create-test-data`
-    1. SuperUser `[email protected]` with credentials from your `.env`
-    1. User `cypress@thinknimble.com` with credentials from your `.env` is used by the Cypress
-       tests
+   1. SuperUser `[email protected]` with credentials from your `.env`
+   1. User `playwright@thinknimble.com` with credentials from your `.env` is used by the Playwright
+      tests
 1. View other available scripts/commands with `make commands`
 1. `localhost:8080` to view the app.
 1. `localhost:8000/staff/` to log into the Django admin
 1. `localhost:8000/api/docs/` to view backend API endpoints available for frontend development
 
-
 ### Backend
+
 If not using Docker...
 See the [backend README](server/README.md)
 
 ### Frontend
+
 If not using Docker...
 See the [frontend README](client/README.md)
 
-
 ## Testing & Linting Locally
+
 1. `pipenv install --dev`
 1. `pipenv run pytest server`
 1. `pipenv run black server`
 1. `pipenv run isort server --diff` (shows you what isort is expecting)
-1. `npm run cypress`
+1. `npx playwright test`
+1. `npx playwright codegen localhost:8080` (generate your tests through manual testing)

{{cookiecutter.project_slug}}/app.json

@@ -29,16 +29,10 @@
       "generator": "secret"
     }
   },
-  "addons": [
-    "heroku-postgresql:standard-0",
-    "papertrail:choklad"
-  ],
+  "addons": ["heroku-postgresql:standard-0", "papertrail:choklad"],
   "environments": {
     "review": {
-      "addons": [
-        "heroku-postgresql:essential-0",
-        "papertrail:choklad"
-      ]
+      "addons": ["heroku-postgresql:essential-0", "papertrail:choklad"]
     }
   },
   "buildpacks": [

{{cookiecutter.project_slug}}/clients/web/react/.gitignore

@@ -21,3 +21,10 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# Playwright files
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

{{cookiecutter.project_slug}}/clients/web/react/README.md

@@ -17,7 +17,7 @@ This app includes basic configurations for developers to have a starting point o
 - TN Forms
 - Vitest
 - React testing library
-- Cypress
+- Playwright
 
 ## Getting started
 
@@ -49,6 +49,7 @@ npm i
 First, create .env.local at the top-level of the client directory, and copy the contents of .env.local.example into it. Update the value of VITE_DEV_BACKEND_URL to point to your desired backend.
 
 Then run the project with:
+
 ```
 npm run serve
 ```
@@ -73,10 +74,16 @@ If you want to watch a single test you can specify its path as an argument to:
 npm run test:single path/to/test/file
 ```
 
-### Run e2e tests with Cypress
+### Run e2e tests with Playwright
 
 ```
-npm run cypress
+npm run test:e2e
 ```
 
-Will open cypress wizard. Make sure you run your app locally with `npm run start` and them choose the test you want to run from the wizard.
+Tests are run in headless mode meaning no browser will open up when running the tests. Results of the tests and test logs will be shown in the terminal.
+
+To open last HTML report run:
+
+```
+npx playwright show-report
+```