test(e2e): migrate from cypress to playwright (#1540)

Author: meteorlxy

.eslintrc.cjs

@@ -15,14 +15,7 @@ module.exports = {
       },
     },
     {
-      files: ['**/e2e/**/*.cy.ts', '**/e2e/cypress/**/*.ts'],
-      extends: 'plugin:cypress/recommended',
-      rules: {
-        '@typescript-eslint/no-namespace': 'off',
-      },
-    },
-    {
-      files: ['**/tests/**/*.ts', 'tsup.config.ts'],
+      files: ['**/tests/**/*.ts', 'e2e/**/*.ts', 'tsup.config.ts'],
       rules: {
         '@typescript-eslint/explicit-function-return-type': 'off',
         'import/no-extraneous-dependencies': 'off',

.github/workflows/e2e.yml

@@ -35,24 +35,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Get cypress cache path
+      - name: Install playwright chromium
         working-directory: ./e2e
-        shell: bash
-        run: |
-          echo "CYPRESS_CACHE_PATH=$(pnpm cypress cache path)" >> $GITHUB_ENV
-
-      - name: Setup cypress cache
-        uses: actions/cache@v3
-        with:
-          path: ${{ env.CYPRESS_CACHE_PATH }}
-          key: cypress-${{ runner.os }}-node-${{ matrix.node }}-${{ hashFiles('pnpm-lock.yaml') }}
-          restore-keys: |
-            cypress-${{ runner.os }}-node-${{ matrix.node }}-
-            cypress-${{ runner.os }}-
-
-      - name: Install cypress binary
-        working-directory: ./e2e
-        run: pnpm cypress install
+        run: pnpm playwright install chromium
 
       - name: Build source files
         run: pnpm build

.gitignore

@@ -13,7 +13,8 @@ dist/
 coverage/
 
 # E2E temp files
-e2e/cypress/screenshots/
+e2e/playwright-report/
+e2e/test-results/
 
 # Node modules
 node_modules/

.vscode/extensions.json

@@ -2,6 +2,7 @@
   "recommendations": [
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
+    "ms-playwright.playwright",
     "vue.volar"
   ]
 }

CONTRIBUTING.md

@@ -43,7 +43,7 @@ pnpm build
 - [TypeScript](https://www.typescriptlang.org/) as the development language
 - [ESLint](https://eslint.org/) + [Prettier](https://prettier.io/) for code linting and formatting
 - [Vitest](https://vitest.dev/) for unit testing
-- [Cypress](https://www.cypress.io/) for end-to-end testing
+- [Playwright](https://playwright.dev/) for end-to-end testing
 
 ### Scripts
 
@@ -69,7 +69,7 @@ The `lint` script uses ESLint to check all source files.
 
 #### `pnpm test`
 
-The `test` script uses Vitest to run unit testings, and uses Cypress to run end-to-end testings.
+The `test` script uses Vitest to run unit testings, and uses Playwright to run end-to-end testings.
 
 ## End-to-end Testing
 
@@ -97,19 +97,6 @@ pnpm docs:serve
 
 ### Run E2E Tests
 
-After starting a dev server or a preview server, you can run e2e tests in another terminal:
-
-```bash
-# open Cypress GUI
-pnpm cy:open:dev
-pnpm cy:open:build
-# or, run tests in command line
-pnpm cy:run:dev
-pnpm cy:run:build
-```
-
-If you don't want to start a server and run tests in two different terminals, you can make use of the following commands:
-
 ```bash
 # run e2e tests in dev mode
 pnpm e2e:dev

CONTRIBUTING_zh.md

@@ -43,7 +43,7 @@ pnpm build
 - [TypeScript](https://www.typescriptlang.org/) 作为开发语言
 - [ESLint](https://eslint.org/) + [Prettier](https://prettier.io/) 用于代码检查和格式化
 - [Vitest](https://vitest.dev/) 用于单元测试
-- [Cypress](https://www.cypress.io/) 用于端到端测试
+- [Playwright](https://playwright.dev/) 用于端到端测试
 
 ### 开发脚本
 
@@ -69,7 +69,7 @@ pnpm build
 
 #### `pnpm test`
 
-`test` 命令使用 Vitest 来运行单元测试，使用 Cypress 来运行端到端测试。
+`test` 命令使用 Vitest 来运行单元测试，使用 Playwright 来运行端到端测试。
 
 ## 端到端测试
 
@@ -97,19 +97,6 @@ pnpm docs:serve
 
 ### 运行 E2E 测试
 
-在启动开发服务器或预览服务器后，你可以在另一个终端中运行 e2e 测试：
-
-```bash
-# 启动 Cypress 图形界面
-pnpm cy:open:dev
-pnpm cy:open:build
-# 或者，直接在命令行中运行测试
-pnpm cy:run:dev
-pnpm cy:run:build
-```
-
-如果你不想在两个不同终端内启动服务器和运行测试，你可以使用如下命令：
-
 ```bash
 # 在开发模式下运行 e2e 测试
 pnpm e2e:dev

e2e/cypress.config.ts

@@ -46,7 +46,7 @@
 ### Slots
 
 - <RouteLink to="/README.md"><span>text</span></RouteLink>
-- <RouteLink to="/README.md"><span>text</span><span>text</span></RouteLink>
+- <RouteLink to="/README.md"><span>text</span><span>text2</span></RouteLink>
 
 ### Hash and query
 

e2e/cypress/support/commands.ts

@@ -1,5 +1,5 @@
 <button id="home" @click="goHome">Home</button>
-<button id="404" @click="go404">404</button>
+<button id="not-found" @click="go404">404</button>
 
 <script setup lang="ts">
 import { useRouter } from 'vuepress/client';

e2e/cypress/support/e2e.ts

@@ -4,18 +4,16 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "cy:open:build": "cross-env E2E_COMMAND=build cypress open",
-    "cy:open:dev": "cross-env E2E_COMMAND=dev cypress open",
-    "cy:run:build": "cross-env E2E_COMMAND=build cypress run",
-    "cy:run:dev": "cross-env E2E_COMMAND=dev cypress run",
     "docs:build": "vuepress build docs --clean-cache --clean-temp",
     "docs:build-webpack": "cross-env E2E_BUNDLER=webpack pnpm docs:build",
     "docs:clean": "rimraf docs/.vuepress/.temp docs/.vuepress/.cache docs/.vuepress/dist",
     "docs:dev": "vuepress dev docs --clean-cache --clean-temp",
     "docs:dev-webpack": "cross-env E2E_BUNDLER=webpack pnpm docs:dev",
     "docs:serve": "anywhere -s -h localhost -p 9080 -d docs/.vuepress/dist",
-    "e2e:build": "pnpm docs:clean && pnpm docs:build && start-server-and-test docs:serve http-get://localhost:9080 cy:run:build",
-    "e2e:dev": "pnpm docs:clean && start-server-and-test docs:dev http-get://127.0.0.1:9080 cy:run:dev"
+    "e2e:build": "cross-env E2E_COMMAND=build playwright test",
+    "e2e:build-webpack": "cross-env E2E_COMMAND=build E2E_BUNDLER=webpack playwright test",
+    "e2e:dev": "cross-env E2E_COMMAND=dev playwright test",
+    "e2e:dev-webpack": "cross-env E2E_COMMAND=dev E2E_BUNDLER=webpack playwright test"
   },
   "dependencies": {
     "@vuepress-e2e/conditional-exports": "file:./modules/conditional-exports",
@@ -27,10 +25,8 @@
     "vuepress": "workspace:*"
   },
   "devDependencies": {
+    "@playwright/test": "^1.43.0",
     "anywhere": "^1.6.0",
-    "cross-env": "^7.0.3",
-    "cypress": "^13.7.2",
-    "process": "^0.11.10",
-    "start-server-and-test": "^2.0.3"
+    "cross-env": "^7.0.3"
   }
 }

e2e/docs/components/route-link.md

@@ -0,0 +1,29 @@
+import { defineConfig, devices } from '@playwright/test'
+import { BASE, BUNDLER, isCI, isDev } from './utils/env'
+
+const commandPart1 = isDev ? 'docs:dev' : 'docs:build'
+const commandPart2 = BUNDLER === 'vite' ? '' : `-${BUNDLER}`
+const commandPart3 = isDev ? '' : ' && pnpm docs:serve'
+
+export default defineConfig({
+  testDir: 'tests',
+  forbidOnly: isCI,
+  reporter: isCI ? 'github' : 'line',
+  retries: isCI ? 2 : 0,
+  workers: isCI || isDev ? 1 : undefined,
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  use: {
+    baseURL: `http://127.0.0.1:9080${BASE}`,
+    trace: 'on-first-retry',
+  },
+  webServer: {
+    command: `pnpm docs:clean && pnpm ${commandPart1}${commandPart2}${commandPart3}`,
+    url: 'http://127.0.0.1:9080',
+    reuseExistingServer: !isCI,
+  },
+})

e2e/docs/router/navigation.md

@@ -0,0 +1,12 @@
+import { expect, test } from '@playwright/test'
+
+test('should render root components correctly', async ({ page }) => {
+  await page.goto('', { waitUntil: 'domcontentloaded' })
+
+  await expect(page.locator('.root-component-from-theme p')).toHaveText(
+    'root component from theme',
+  )
+  await expect(page.locator('.root-component-from-user-config p')).toHaveText(
+    'root component from user config',
+  )
+})