chore(website): switch from Cypress to Playwright (#5814)

* chore(website): switch from Cypress to Playwright

* Touched up configs

* Fixed linting

* Remove remaining setup cruft

* Update .github/workflows/ci.yml

Co-authored-by: Brad Zacher <brad.zacher@gmail.com>

Co-authored-by: Brad Zacher <brad.zacher@gmail.com>

.github/actions/prepare-install/action.yml

@@ -33,7 +33,6 @@ runs:
       with:
         path: |
           ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          ~/.cache/Cypress
         key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
         restore-keys: |
           ${{ runner.os }}-yarn-

.github/renovate.json5

@@ -56,11 +56,6 @@
       matchPackagePrefixes: ['@types/jest'],
       groupName: 'jest',
     },
-    {
-      matchPackageNames: ['cypress', 'cypress-axe'],
-      matchUpdateTypes: ['minor', 'patch', 'pin', 'digest'],
-      groupName: 'cypress',
-    },
   ],
   postUpdateOptions: [
     // run yarn dedupe to cleanup the lockfile after updates

.github/workflows/ci.yml

@@ -175,7 +175,6 @@ jobs:
   website_tests:
     permissions:
       contents: read # to fetch code (actions/checkout)
-      actions: read # to correctly identify workflow run (cypress-io/github-action)
 
     name: Website tests
     needs: [build]
@@ -192,23 +191,18 @@ jobs:
       - name: Build
         uses: ./.github/actions/prepare-build
 
-      - name: Install Cypress
-        run: yarn cypress install
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
 
-      - env:
-          DEBUG: '@cypress/github-action'
-        name: Cypress run
-        uses: cypress-io/github-action@v2
-        with:
-          project: ./packages/website
-          start: yarn start
+      - name: Run Playwright tests
+        run: yarn playwright test --reporter=list
+        working-directory: packages/website
 
-      - uses: actions/upload-artifact@v3
+      - if: always()
+        uses: actions/upload-artifact@v3
         with:
-          name: screenshots
-          path: |
-            packages/website/cypress/screenshots/
-            packages/website/cypress/videos/
+          name: playwright-report
+          path: packages/website/playwright-report
 
   upload_coverage:
     name: Upload Codecov Coverage

.gitignore

@@ -9,9 +9,10 @@ yarn-error.log*
 packages/website/.docusaurus
 packages/website/.cache-loader
 packages/website/build
-packages/website/cypress/screenshots
-packages/website/cypress/videos
+packages/website/playwright-report
+packages/website/playwright/.cache
 packages/website/static/sandbox
+packages/website/test-results
 
 # Runtime data
 pids

packages/website/.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = {
   overrides: [
     {
       files: [
+        './*.config.*',
         './src/pages/*.tsx',
         './src/components/**/*.tsx',
         './src/components/hooks/*.ts',

packages/website/package.json

@@ -10,8 +10,7 @@
     "serve": "docusaurus serve",
     "start": "docusaurus start",
     "swizzle": "docusaurus swizzle",
-    "test": "cypress run",
-    "test:open": "cypress open",
+    "test": "playwright test",
     "typecheck": "tsc"
   },
   "dependencies": {
@@ -43,14 +42,14 @@
     "react": "^18.0.0"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.4.5",
     "@docusaurus/module-type-aliases": "~2.1.0",
+    "@playwright/test": "^1.27.1",
     "@types/react": "^18.0.9",
     "@types/react-helmet": "^6.1.5",
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "5.40.0",
     "copy-webpack-plugin": "^11.0.0",
-    "cypress": "8.7.0",
-    "cypress-axe": "^0.14.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.5.0",

packages/website/playwright.config.ts

@@ -0,0 +1,29 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+import { devices } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  forbidOnly: !!process.env.CI,
+  fullyParallel: true,
+  reporter: 'html',
+  retries: 0,
+  testDir: './tests',
+  use: {
+    baseURL: 'http://localhost:3000',
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+  ],
+  webServer: {
+    command: 'yarn start',
+    port: 3000,
+  },
+  workers: process.env.CI ? 1 : undefined,
+};
+
+export default config;

packages/website/tests/index.spec.ts

@@ -0,0 +1,7 @@
+import AxeBuilder from '@axe-core/playwright';
+import { test } from '@playwright/test';
+
+test('Index', async ({ page }) => {
+  await page.goto('/');
+  await new AxeBuilder({ page }).analyze();
+});

packages/website/tsconfig.json

@@ -16,11 +16,5 @@
     },
     "types": ["@docusaurus/module-type-aliases", "@docusaurus/theme-classic"]
   },
-  "include": [
-    "src/",
-    "plugins/",
-    "typings",
-    "./docusaurusConfig.ts",
-    "./rulesMeta.ts"
-  ]
+  "include": ["src", "tests", "plugins", "typings", "./*.ts"]
 }