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