feat: Playwright > Cypress (#295)

* Playwright Init:

- remove Cypress and config
- Install Playwright w/ defaults
- Update Config with global setup/teardown
- Update Config to watch for `.play` files
- Update package scripts for Playwright
- Update CI Workflow e2e
- Update Bison CI Workflow to include e2e
- New e2e Auth Specs for Admin/User
- Cleanup of ENV files for Bison/Playwright/NextAuth

* Misc updates:
- Playwright config updated to start server
- Package Scripts slimmed
- Next Auth updated after bug found
- example SignIn callback added for NextAuth
- Playwright helper utils added
- Workflows updated with new package script

.github/workflows/tests.yml

@@ -88,32 +88,35 @@ jobs:
       - name: Install bison app packages
         run: yarn install --immutable
 
-      - name: Build production bison app
-        run: yarn build
-
-      - name: Lint bison app
-        run: yarn lint
-
       - name: Set up test database
         env:
           DATABASE_URL: postgresql://postgres:postgres@localhost/${{ needs.create-app.outputs.appName }}_test
           NODE_ENV: test
         run: yarn db:migrate
 
+      - name: Build production bison app
+        run: yarn build
+
+      - name: Lint bison app
+        run: yarn lint
+
       - name: Run bison app unit tests
         env:
           DATABASE_URL: postgresql://postgres:postgres@localhost/${{ needs.create-app.outputs.appName }}_test
           NODE_ENV: test
         run: yarn test:ci
 
-      - name: Run bison app E2E tests
-        uses: cypress-io/github-action@v4
-        with:
-          start: yarn test:server
-          wait-on: "http://localhost:3001"
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
         env:
           DATABASE_URL: postgresql://postgres:postgres@localhost/${{ needs.create-app.outputs.appName }}_test
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NODE_ENV: test
-          NEXTAUTH_URL: ${{ secrets.NEXTAUTH_URL }}
-          NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
+        run: yarn test:e2e
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -1,10 +1,6 @@
 node_modules
 .DS_Store
 
-# cypress
-cypress/videos*
-cypress/screenshots*
-
 # debug
 npm-debug.log*
 yarn-debug.log*
@@ -14,4 +10,4 @@ tmp
 lerna-debug.log
 .env
 
-packages/create-bison-app/dist/
+packages/create-bison-app/dist/

packages/create-bison-app/README.md

@@ -15,7 +15,7 @@ We're always improving on this, and we welcome suggestions from the community!
 - [Prisma](https://www.prisma.io/) w/ Postgres
 - [Chakra UI](https://chakra-ui.com/)
 - [React Hook Form](https://react-hook-form.com/)
-- [Cypress](https://www.cypress.io/) for E2E tests
+- [Playwright](https://www.playwright.dev/) for E2E tests
 - [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) and [Jest](https://jestjs.io/) for unit and API request tests
 
 ## Features

packages/create-bison-app/package.json

@@ -55,7 +55,6 @@
   "jest": {
     "testPathIgnorePatterns": [
       "node_modules",
-      "cypress",
       "template",
       "dist"
     ]

packages/create-bison-app/tasks/copyFiles.js

@@ -55,7 +55,7 @@ async function copyFiles({ variables, targetFolder }) {
 
     copyWithTemplate(
       fromPath("_.env.development.local.ejs"),
-      toPath(".env.local"),
+      toPath(".env.development.local"),
       variables
     ),
 
@@ -94,7 +94,6 @@ async function copyFiles({ variables, targetFolder }) {
         "chakra",
         "components",
         "context",
-        "cypress",
         "layouts",
         "lib",
         "prisma",
@@ -109,8 +108,8 @@ async function copyFiles({ variables, targetFolder }) {
         ".nvmrc",
         ".tool-versions",
         "constants.ts",
-        "cypress.config.ts",
         "jest.config.js",
+        "playwright.config.ts",
         "next-env.d.ts",
         "prettier.config.js",
         "tsconfig.json",

packages/create-bison-app/template/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   extends: ['plugin:echobind/react'],
-  ignorePatterns: ['generated', 'node_modules/', 'types', 'cypress', 'scripts'],
+  ignorePatterns: ['generated', 'node_modules/', 'types', 'scripts'],
 };

packages/create-bison-app/template/.github/workflows/main.yml.ejs

@@ -66,29 +66,20 @@ jobs:
           DATABASE_URL: postgresql://postgres:postgres@localhost/myapp_test
         run: yarn test:ci
 
-      # E2E Tests via Cypress
-      - name: Run Cypress E2E Tests
-        uses: cypress-io/github-action@v4
-        with:
-          # build: yarn build
-          start: yarn test:server
-          wait-on: 'http://localhost:3001'
+      # Install Playwright Browsers
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      # Playwright E2E tests
+      - name: E2E (Playwright)
         env:
           NODE_ENV: test
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           DATABASE_URL: postgresql://postgres:postgres@localhost/myapp_test
-
-      - name: Upload Cypress Screenshots
-        uses: actions/upload-artifact@v1
-        # Only capture images on failure
-        if: failure()
-        with:
-          name: cypress-screenshots
-          path: cypress/screenshots
-      - name: Upload Cypress Videos
-        uses: actions/upload-artifact@v1
-        # Test run video was always captured, so this action uses "always()" condition
+        timeout-minutes: 60
+        run: yarn test:e2e
+      - uses: actions/upload-artifact@v3
         if: always()
         with:
-          name: cypress-videos
-          path: cypress/videos
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

packages/create-bison-app/template/.vscode/extensions.json

@@ -7,7 +7,8 @@
     "pflannery.vscode-versionlens",
     "prisma.prisma",
     "DavidAnson.vscode-markdownlint",
-    "yzhang.markdown-all-in-one"
+    "yzhang.markdown-all-in-one",
+    "ms-playwright.playwright"
   ],
   "unwantedRecommendations": []
 }

packages/create-bison-app/template/_.env.development.ejs

@@ -6,7 +6,14 @@
 # Prisma supports the native connection string format for PostgreSQL, MySQL and SQLite.
 # See the documentation for all the connection string options: https://pris.ly/d/connection-strings
 
+# Include NODE_ENV for package script withEnv to work as expected
+
+APP_ENV="development"
+NODE_ENV="development"
+PORT=3000
+BASE_URL="http://localhost:3000"
+
 DATABASE_URL="postgresql://<%= db.dev.user %><% if (db.dev.password) { %>:<%= db.dev.password %><% } %>@<%= db.dev.host %>:<%= db.dev.port %>/<%= db.dev.name %>?schema=public"
-NEXTAUTH_SECRET=foo
-NEXTAUTH_URL=http://localhost:3000
-APP_ENV=development
+
+NEXTAUTH_SECRET="bisonDev"
+NEXTAUTH_URL="http://localhost:3000"

packages/create-bison-app/template/_.env.development.local.ejs

@@ -1,6 +1,19 @@
-# ENV vars here override .env.development when running locally
+# Include your development ENVs here
+
+# Environment variables declared in this file are automatically made available to Prisma.
+# See the documentation for more detail: https://pris.ly/d/prisma-schema#using-environment-variables
+
+# Prisma supports the native connection string format for PostgreSQL, MySQL and SQLite.
+# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
+
+# Include NODE_ENV for package script withEnv to work as expected
+
+APP_ENV="development"
+NODE_ENV="development"
+PORT=3000
+BASE_URL="http://localhost:3000"
 
 DATABASE_URL="postgresql://<%= db.dev.user %><% if (db.dev.password) { %>:<%= db.dev.password %><% } %>@<%= db.dev.host %>:<%= db.dev.port %>/<%= db.dev.name %>?schema=public"
-NEXTAUTH_SECRET=foo
-NEXTAUTH_URL=http://localhost:3000
-APP_ENV=development
+
+NEXTAUTH_SECRET="bisonDev"
+NEXTAUTH_URL="http://localhost:3000"

packages/create-bison-app/template/_.env.ejs

@@ -6,7 +6,14 @@
 # Prisma supports the native connection string format for PostgreSQL, MySQL and SQLite.
 # See the documentation for all the connection string options: https://pris.ly/d/connection-strings
 
+# Include NODE_ENV for package script withEnv to work as expected
+
+APP_ENV="production"
+NODE_ENV="development" # production // change if you truly want PROD
+PORT=3000
+BASE_URL="http://localhost:3000"
+
 DATABASE_URL="postgresql://<%= db.dev.user %><% if (db.dev.password) { %>:<%= db.dev.password %><% } %>@<%= db.dev.host %>:<%= db.dev.port %>/<%= db.dev.name %>?schema=public"
-NEXTAUTH_SECRET=""
-NEXTAUTH_URL=""
-APP_ENV=production
+
+NEXTAUTH_SECRET="bisonProd"
+NEXTAUTH_URL="http://localhost:3000"

packages/create-bison-app/template/_.env.local.ejs

@@ -1,6 +1,12 @@
-# ENV vars here override .env when running locally
+# Overwrite envs here to mimic production
+# Include NODE_ENV for package script withEnv to work as expected
+
+APP_ENV="production"
+NODE_ENV="development" # production // change if you truly want PROD
+PORT=3000
+BASE_URL="http://localhost:3000"
 
 DATABASE_URL="postgresql://<%= db.dev.user %><% if (db.dev.password) { %>:<%= db.dev.password %><% } %>@<%= db.dev.host %>:<%= db.dev.port %>/<%= db.dev.name %>?schema=public"
-NEXTAUTH_SECRET=""
-NEXTAUTH_URL=""
-APP_ENV=production
+
+NEXTAUTH_SECRET="bisonProd"
+NEXTAUTH_URL="http://localhost:3000"

packages/create-bison-app/template/_.env.test.ejs

@@ -1,7 +1,12 @@
 # Copy to .env.test.local to override
+# Include NODE_ENV for package script withEnv to work as expected
+
+APP_ENV="test"
+NODE_ENV="test"
+PORT=3001
+BASE_URL="http://localhost:3001"
 
-# ENV vars here override .env when running tests
 DATABASE_URL="postgresql://<%= db.dev.user %><% if (db.dev.password) { %>:<%= db.dev.password %><% } %>@<%= db.dev.host %>:<%= db.dev.port %>/<%= db.test.name %>?schema=public"
-NEXTAUTH_SECRET=foo
-NEXTAUTH_URL=http://localhost:3001
-APP_ENV=test
+
+NEXTAUTH_SECRET="bisonTest"
+NEXTAUTH_URL="http://localhost:3001"

packages/create-bison-app/template/_.env.test.local.ejs

@@ -1,7 +1,12 @@
 # ENV vars here override .env.test when running locally
+# Include NODE_ENV for package script withEnv to work as expected
+
+APP_ENV="test"
+NODE_ENV="test"
+PORT=3001
+BASE_URL="http://localhost:3001"
 
-# ENV vars here override .env when running tests
 DATABASE_URL="postgresql://<%= db.dev.user %><% if (db.dev.password) { %>:<%= db.dev.password %><% } %>@<%= db.dev.host %>:<%= db.dev.port %>/<%= db.test.name %>?schema=public"
-NEXTAUTH_SECRET=foo
-NEXTAUTH_URL=http://localhost:3001
-APP_ENV=test
+
+NEXTAUTH_SECRET="bisonTest"
+NEXTAUTH_URL="http://localhost:3001"

packages/create-bison-app/template/_.gitignore

@@ -34,9 +34,8 @@ yarn-error.log*
 
 .vercel
 
-cypress/videos*
-cypress/screenshots*
-cypress/logs*
-!cypress/videos/.gitkeep
-!cypress/screenshots/.gitkeep
-!cypress/logs/.gitkeep
+# Playwright
+/tests/e2e/temp/*.json
+/test-results/
+/playwright-report/
+/playwright/.cache/

packages/create-bison-app/template/components/auth/LoginForm.tsx

@@ -78,6 +78,7 @@ export function LoginForm() {
           <Input
             id="email"
             type="email"
+            data-testid="login-email"
             {...register('email', {
               required: 'Email is required.',
               pattern: {
@@ -92,6 +93,7 @@ export function LoginForm() {
         </FormControl>
         <PasswordField
           label="Password"
+          data-testid="login-password"
           isInvalid={Boolean(isSubmitted && errors.password)}
           {...register('password', {
             required: 'Password is required.',
@@ -110,7 +112,7 @@ export function LoginForm() {
         </NextLink>
       </HStack>
       <Stack spacing="6">
-        <Button variant="outline" type="submit" disabled={loading}>
+        <Button variant="outline" type="submit" disabled={loading} data-testid="login-submit">
           Sign in
         </Button>
         {signInError && <Text color="red.700">No User Found</Text>}