Playwright + No Babel

.circleci/config.yml

@@ -65,10 +65,6 @@ jobs:
       - run:
           name: Run tests
           command: yarn test:ci
-      - persist_to_workspace:
-          root: << pipeline.parameters.workspace_root >>
-          paths:
-            - project/vitest-coverage
 
   lint:
     executor: default
@@ -82,28 +78,6 @@ jobs:
           command: |
             yarn lint:ci
 
-  report_coverage:
-    executor: default
-    steps:
-      - checkout
-      - *attach_workspace
-      - *restore_cache
-      - *yarn_install
-      - run:
-          name: Merge reports into one file
-          command: |
-            mkdir reports
-            mkdir .nyc_output
-            ls -al cypress-coverage
-            cp cypress-coverage/coverage.node-*.json reports
-            cp vitest-coverage/coverage-final.json reports/from-vitest.json
-            yarn nyc merge reports
-            mv coverage.json .nyc_output/out.json
-      - run:
-          name: Convert finalized report from JSON to lcov
-          command: |
-            yarn nyc report --reporter lcov --report-dir coverage
-
 workflows:
   default:
     jobs:
@@ -116,36 +90,3 @@ workflows:
       - lint:
           requires:
             - install_dependencies
-
-      - cypress/run:
-          name: integration_tests
-          requires:
-            - install_dependencies
-          executor: default
-          pre-steps:
-            - checkout
-            - *attach_workspace
-            - *restore_cache
-            - *yarn_install
-          attach-workspace: true
-          browser: 'chrome' # actually use Chrome (and not Electron)
-          record: true # record results on Cypress Dashboard
-          parallel: true # split all specs across machines
-          parallelism: 3 # use X number of CircleCI machines
-          command-prefix: yarn # dont use npx
-          group: 'all tests' # name this group "all tests" on the dashboard
-          start: 'yarn dev' # start server before running tests
-          wait-on: http://localhost:3000 # wait until server is ready
-          post-steps:
-            - run:
-                name: Get each parallelized node's coverage report
-                command: cp cypress-coverage/coverage-final.json "cypress-coverage/coverage.node-$CIRCLE_NODE_INDEX.json"
-            - persist_to_workspace:
-                root: << pipeline.parameters.workspace_root >>
-                paths:
-                  - project/cypress-coverage
-
-      - report_coverage:
-          requires:
-            - unit_tests
-            - integration_tests

.eslintignore

@@ -1,8 +1,6 @@
 node_modules
 package.json
 yarn.lock
-.babelrc
-**/.babelrc
 .next
 .github
 bin

.eslintrc.js

@@ -4,9 +4,8 @@
 module.exports = {
   extends: [
     'plugin:@typescript-eslint/eslint-recommended',
-    'airbnb',
+    'plugin:react/recommended',
     'plugin:jsx-a11y/recommended',
-    'plugin:cypress/recommended',
     'plugin:storybook/recommended',
     'plugin:prettier/recommended',
     'prettier',
@@ -15,22 +14,10 @@ module.exports = {
     browser: true,
     commonjs: true,
     es6: true,
-    'cypress/globals': true,
     node: true,
   },
-  parser: '@babel/eslint-parser',
-  plugins: [
-    'unicorn',
-    'cypress',
-    '@operation_code/custom-rules',
-    'import',
-    'lodash',
-    '@typescript-eslint',
-  ],
-  globals: {
-    cy: true,
-    Cypress: true,
-  },
+  parser: '@typescript-eslint/parser',
+  plugins: ['unicorn', '@operation_code/custom-rules', 'import', 'lodash', '@typescript-eslint'],
   rules: {
     // Import Rules
     'import/extensions': [
@@ -247,7 +234,7 @@ module.exports = {
               {
                 name: 'formik',
                 importNames: ['Form'],
-                message: `Please use our Form component to have good defaults defined.\n "import Form from 'components/Form/Form';"`,
+                message: `Please use our Form component to have good defaults defined.\n "import { Form } from 'components/Form/Form';"`,
               },
               {
                 name: 'react',
@@ -274,24 +261,31 @@ module.exports = {
       },
     },
     {
-      files: ['./**/*.test.ts', './**/*.test.tsx'],
+      files: ['./e2e/**/*.spec.ts'],
+      extends: 'plugin:playwright/recommended',
       rules: {
-        '@typescript-eslint/no-non-null-assertion': 'off',
+        'func-names': 'off',
+        'vitest/expect-expect': 'off',
+        'vitest/valid-expect': 'off',
+        'no-unused-expressions': ['off'],
+        'playwright/expect-expect': [
+          'warn',
+          {
+            assertFunctionNames: ['expect', 'assertError', 'assertFailedLogin'],
+          },
+        ],
       },
     },
     {
-      files: ['./pages/api/**/*.ts'],
+      files: ['./**/*.test.ts', './**/*.test.tsx'],
       rules: {
-        'no-console': 'off',
+        '@typescript-eslint/no-non-null-assertion': 'off',
       },
     },
     {
-      files: ['cypress/**/*.js'],
+      files: ['./pages/api/**/*.ts'],
       rules: {
-        'func-names': 'off',
-        'vitest/expect-expect': 'off',
-        'vitest/valid-expect': 'off',
-        'no-unused-expressions': ['off'],
+        'no-console': 'off',
       },
     },
     {

.github/workflows/playwright.yml

@@ -0,0 +1,63 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
+    steps:
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v5
+        with:
+          node-version-file: ".nvmrc"
+          cache: "yarn"
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Install Playwright Browsers
+        run: yarn playwright install --with-deps
+      - name: Run Playwright tests
+        env:
+          AIRTABLE_PAT: ${{ secrets.AIRTABLE_PAT }}
+        run: yarn test:e2e:headless
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        id: artifact-upload
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+      - name: Comment PR with artifact link
+        if: failure() && github.event_name == 'pull_request'
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const runId = context.runId;
+            const repo = context.repo;
+            const artifactUrl = `https://github.com/${repo.owner}/${repo.repo}/actions/runs/${runId}`;
+
+            const comment = `## ❌ Playwright Tests Failed
+
+            The Playwright tests have failed. Please download the test report artifact to see detailed information about the failures:
+
+            📊 [View test run and download artifact](${artifactUrl})
+
+            **How to view the report:**
+            1. Click the link above
+            2. Scroll to the bottom to the "Artifacts" section
+            3. Download the \`playwright-report\` artifact
+            4. Extract the zip file and open \`index.html\` in your browser
+
+            The report includes screenshots, videos, and detailed traces of the failed tests.`;
+
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: repo.owner,
+              repo: repo.repo,
+              body: comment
+            });

.gitignore

@@ -28,9 +28,6 @@ cypress-coverage
 vitest-coverage
 reports
 
-# nyc test coverage
-.nyc_output
-
 # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
 .grunt
 
@@ -86,3 +83,10 @@ out
 
 # Autogenerated static files
 public/sitemap.xml
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

components/Branding/ColorSection/ColorSection.tsx

@@ -21,11 +21,11 @@ function ColorSection() {
         hasTitleUnderline
         theme="white"
         columns={[
-          <div>
+          <div key="primary">
             <h3>Primary</h3>
             <Swatch colorName={primaryColor.name} hexCode={primaryColor.hexCode} />
           </div>,
-          <div>
+          <div key="secondary">
             <h3>Secondary</h3>
             <Swatch colorName={secondaryColor.name} hexCode={secondaryColor.hexCode} />
           </div>,

components/Branding/FontSection/FontSection.tsx

@@ -11,7 +11,7 @@ function FontSection() {
       theme="gray"
       hasTitleUnderline
       columns={[
-        <ul className="list-none w-full [&>li]:m-4">
+        <ul key="fonts" className="list-none w-full [&>li]:m-4">
           {Object.keys(fontsObject).map(item => {
             const fontStyle = {
               fontFamily: fontsObject[item],

components/Branding/LogoSection/LogoSection.tsx

@@ -39,7 +39,7 @@ function LogoSection() {
       theme="gray"
       hasTitleUnderline
       columns={[
-        <ul className="space-y-4 [&>li>p]:my-4">
+        <ul key="logos" className="space-y-4 [&>li>p]:my-4">
           {/* - SMALL LOGOS - */}
           <li>
             <h5 className="text-center">Small Logos</h5>

components/Content/__stories__/Content.stories.tsx

@@ -4,13 +4,13 @@ import Content from '../Content';
 type ContentStoryType = StoryObj<typeof Content>;
 
 const multiColumnArray = [
-  <div>
+  <div key="col1">
     <p>Column 1</p>
   </div>,
-  <div>
+  <div key="col2">
     <p>Column 2</p>
   </div>,
-  <div>
+  <div key="col3">
     <p>Column 3</p>
   </div>,
 ];

components/Content/__tests__/Content.test.tsx

@@ -5,7 +5,7 @@ import Content from '../Content';
 // eslint-disable-next-line unicorn/prevent-abbreviations
 const requiredProps = {
   columns: [
-    <div>
+    <div key="content">
       <p>some test content</p>
     </div>,
   ],
@@ -21,11 +21,11 @@ describe('Content', () => {
     createSnapshotTest(
       <Content
         columns={[
-          <div>
+          <div key="col1">
             <p>some multi-column test content</p>
           </div>,
-          <h6>OH YEAH!!</h6>,
-          <aside>Testing...</aside>,
+          <h6 key="col2">OH YEAH!!</h6>,
+          <aside key="col3">Testing...</aside>,
         ]}
         hasTitleUnderline
         id="test-id"

components/Content/__tests__/__snapshots__/Content.test.tsx.snap

@@ -13,16 +13,16 @@ exports[`Content > should render with many props assigned 1`] = `
     >
       <h3
         className="group flex uppercase text-center my-4 mx-0 border-solid border-b-4 border-b-primary"
+        id="testing-link"
       >
         <div
           className="relative"
           data-testid="Heading Content testing-link"
         >
           <a
-            className="hidden absolute top-2 -left-8 transition-all duration-200 ease-linear sm:inline sm:opacity-0 sm:group-hover:opacity-100"
+            className="absolute top-2 -left-8 invisible group-hover:visible focus-visible:visible"
             data-testid="Hash Link"
             href="#testing-link"
-            id="testing-link"
           >
             <span
               className="sr-only"

components/Form/MultiStepForm.tsx

@@ -154,6 +154,7 @@ export function MultiStepForm<
                 type="submit"
                 theme="secondary"
                 disabled={formikBag.isSubmitting}
+                data-loading={formikBag.isSubmitting}
                 data-testid={MULTI_STEP_STEP_BUTTON}
                 className={cx('group', isFirstStep && 'w-full')}
               >