Migrate E2E tests from Cypress to Playwright

.github/workflows/buildAndTest.yaml

@@ -14,6 +14,12 @@ on:
       - checks_requested
   workflow_dispatch:
 
+permissions:
+  contents: read
+  issues: read
+  checks: write
+  pull-requests: write
+
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -60,22 +66,21 @@ jobs:
       - run: yarn run build:vue-json-form
       - run: yarn test:unit
         working-directory: ./vue-json-form
-      - name: Cypress run
-        uses: cypress-io/github-action@v6
-        with:
-          working-directory: ./vue-json-form
-          build: yarn run build
-          start: yarn dev
-          wait-on: 'http://localhost:5173'
-          record: true
-        env:
-          # pass GitHub token to allow accurately detecting a build vs a re-run build
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          # Cypress
-          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-          CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
+      - name: Install Playwright Browsers
+        run: yarn playwright install --with-deps chromium
+        working-directory: ./vue-json-form
+      - name: Run Playwright tests
+        run: yarn test:e2e
+        working-directory: ./vue-json-form
       - uses: actions/upload-artifact@v4
         if: always()
         with:
-          name: cypress-screenshots
-          path: cypress/screenshots
+          name: playwright-report
+          path: vue-json-form/playwright-report/
+          retention-days: 30
+      - name: Publish Test Results
+        uses: EnricoMi/publish-unit-test-result-action@v2
+        if: (!cancelled())
+        with:
+          files: |
+            vue-json-form/test-results/**/*.xml

.gitignore

@@ -149,3 +149,7 @@ dist
 # and uncomment the following lines
 .pnp.*
 
+# Playwright
+playwright-report/
+test-results/
+playwright/.cache/

.junie/guidelines.md

@@ -1,6 +1,6 @@
 Project-specific development guidelines for vue-json-form (monorepo)
 
-Audience: Advanced contributors familiar with Yarn workspaces, Vite, Vue 3, TypeScript, Vitest, and Cypress.
+Audience: Advanced contributors familiar with Yarn workspaces, Vite, Vue 3, TypeScript, Vitest, and Playwright.
 
 1) Monorepo overview and prerequisites
 - Package manager: Yarn 4 (Berry). Confirm with node -v (CI uses Node 20/22/24). Use the same major Node versions for reproducibility.
@@ -45,22 +45,22 @@ Audience: Advanced contributors familiar with Yarn workspaces, Vite, Vue 3, Type
     - Run: yarn workspace @educorvi/vue-json-form vitest run src/MapperFunctions/yourFunction.test.ts
     - Remove temporary files when done if they are only for demonstration.
 
-4) Testing: end-to-end (Cypress)
-- Location: vue-json-form/cypress/e2e/*.cy.ts
-- Dev server + Cypress (CI parity):
-  - CI does: build deps, then in ./vue-json-form runs build, starts dev, wait-on http://localhost:5173, then runs Cypress.
+4) Testing: end-to-end (Playwright)
+- Location: vue-json-form/tests/e2e/*.spec.ts
+- Dev server + Playwright (CI parity):
+  - CI does: build deps, then in ./vue-json-form installs Playwright browsers, runs Playwright tests.
   - Local equivalent from repo root:
     - yarn install --immutable
     - yarn build:vue-json-form
     - cd vue-json-form
-    - yarn build
-    - In one terminal: yarn dev  # Vite at http://localhost:5173
-    - In another terminal: yarn cypress  # Opens Cypress runner
-  - Headless run:
-    - From vue-json-form: npx cypress run
+    - npx playwright install --with-deps chromium  # First time only
+    - yarn test:e2e  # Runs tests headless
+  - Interactive mode:
+    - From vue-json-form: yarn playwright  # Opens Playwright UI
 - Tips
-  - Keep e2e fixtures and example schemas under vue-json-form/src/exampleSchemas for reproducible scenarios; CI records and uploads screenshots on failures.
-  - When adjusting ports/hosts, update wait-on in .github/workflows/buildAndTest.yaml and local commands accordingly.
+  - Playwright automatically starts the dev server before running tests (configured in playwright.config.ts).
+  - Keep e2e fixtures and example schemas under vue-json-form/src/exampleSchemas for reproducible scenarios; CI uploads test reports on failures.
+  - When adjusting ports/hosts, update baseURL in playwright.config.ts and webServer settings accordingly.
 
 5) Coding standards and project conventions
 - Languages/stack: TypeScript, Vue 3, Vite, Pinia, Sass. Typings for schemas are provided by @educorvi/vue-json-form-schemas.
@@ -93,5 +93,5 @@ Audience: Advanced contributors familiar with Yarn workspaces, Vite, Vue 3, Type
   - yarn install --immutable && yarn build
 - Iterate on vue-json-form only:
   - yarn build:vue-json-form && yarn workspace @educorvi/vue-json-form dev
-- Run Cypress like CI does:
-  - yarn build:vue-json-form && (cd vue-json-form && yarn build && yarn dev) in one terminal, and in another terminal run yarn cypress from vue-json-form
+- Run Playwright like CI does:
+  - yarn build:vue-json-form && (cd vue-json-form && yarn test:e2e)

demo/package.json

@@ -8,11 +8,9 @@
     "pre-commit": "echo 'No pre commit configured for demo'",
     "build": "vite build",
     "preview": "vite preview",
-    "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
-    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
-    "test:unit": "cypress run --component",
-    "test:unit:dev": "cypress open --component",
-    "check-types": "vue-tsc --noEmit -p tsconfig.cypress-ct.json --composite false"
+    "test:e2e": "playwright test",
+    "test:e2e:dev": "playwright test --ui",
+    "check-types": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
   },
   "publishConfig": {
     "access": "public"
@@ -29,17 +27,17 @@
     "vue-router": "^4.6.3"
   },
   "devDependencies": {
+    "@playwright/test": "^1.57.0",
     "@semantic-release/exec": "^7.1.0",
     "@tsconfig/node18": "^18.2.4",
     "@types/node": "^24.9.2",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/tsconfig": "^0.8.1",
-    "cypress": "^15.5.0",
     "npm-run-all": "^4.1.5",
+    "playwright": "^1.57.0",
     "semantic-release": "^25.0.1",
     "semantic-release-monorepo": "^8.0.2",
     "semantic-release-yarn": "^3.0.2",
-    "start-server-and-test": "^2.1.2",
     "typescript": "~5.9.3",
     "unplugin-vue-components": "^30.0.0",
     "vite": "^7.1.12",

demo/playwright.config.ts

@@ -0,0 +1,40 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:4173',
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'yarn preview',
+    url: 'http://localhost:4173',
+    reuseExistingServer: !process.env.CI,
+  },
+});

demo/tests/e2e/example.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('My First Test', () => {
+  test('visits the app root url', async ({ page }) => {
+    await page.goto('/');
+    await expect(page.locator('h1')).toContainText('You did it!');
+  });
+});

demo/tsconfig.json

@@ -6,9 +6,6 @@
     },
     {
       "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.cypress-ct.json"
     }
   ]
 }