diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 9605ba44c3..7f763acda8 100644 --- a/.eslintrc.cjs +++ b/.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', diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index 73fb5b1169..2110f6f036 100644 --- a/.github/workflows/e2e.yml +++ b/.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 diff --git a/.gitignore b/.gitignore index 5bb6562c2c..2dbbc3a315 100644 --- a/.gitignore +++ b/.gitignore @@ -13,7 +13,8 @@ dist/ coverage/ # E2E temp files -e2e/cypress/screenshots/ +e2e/playwright-report/ +e2e/test-results/ # Node modules node_modules/ diff --git a/.vscode/extensions.json b/.vscode/extensions.json index adc12201c8..3bc430862c 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -2,6 +2,7 @@ "recommendations": [ "dbaeumer.vscode-eslint", "esbenp.prettier-vscode", + "ms-playwright.playwright", "vue.volar" ] } diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index d5b92eed52..4e479e2e76 100644 --- a/CONTRIBUTING.md +++ b/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 diff --git a/CONTRIBUTING_zh.md b/CONTRIBUTING_zh.md index 8551dd66a4..4a38e48a7e 100644 --- a/CONTRIBUTING_zh.md +++ b/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 diff --git a/e2e/cypress.config.ts b/e2e/cypress.config.ts deleted file mode 100644 index 7b3a888176..0000000000 --- a/e2e/cypress.config.ts +++ /dev/null @@ -1,83 +0,0 @@ -import { defineConfig } from 'cypress' -import { fs, getDirname, path } from 'vuepress/utils' - -const __dirname = getDirname(import.meta.url) -const resolveSourceMarkdownPath = (...args: string[]): string => - path.resolve(__dirname, 'docs', ...args) - -export default defineConfig({ - e2e: { - baseUrl: 'http://localhost:9080', - specPattern: 'tests/**/*.cy.ts', - setupNodeEvents(on) { - on('task', { - 'hmr:title': async () => { - const hmrTitleSourceMarkdownPath = - resolveSourceMarkdownPath('hmr/title.md') - const hmrTitleSourceMarkdownContent = await fs.readFile( - hmrTitleSourceMarkdownPath, - 'utf-8', - ) - await fs.writeFile( - hmrTitleSourceMarkdownPath, - hmrTitleSourceMarkdownContent.replace( - '# HMR Title', - '# Updated Title', - ), - ) - return true - }, - 'hmr:frontmatter': async () => { - const hmrFrontmatterSourceMarkdownPath = - resolveSourceMarkdownPath('hmr/frontmatter.md') - const hmrFrontmatterSourceMarkdownContent = await fs.readFile( - hmrFrontmatterSourceMarkdownPath, - 'utf-8', - ) - await fs.writeFile( - hmrFrontmatterSourceMarkdownPath, - hmrFrontmatterSourceMarkdownContent.replace( - 'foo: HMR foo', - 'foo: Updated foo', - ), - ) - return true - }, - 'hmr:restore': async () => { - const hmrTitleSourceMarkdownPath = - resolveSourceMarkdownPath('hmr/title.md') - const hmrTitleSourceMarkdownContent = await fs.readFile( - hmrTitleSourceMarkdownPath, - 'utf-8', - ) - await fs.writeFile( - hmrTitleSourceMarkdownPath, - hmrTitleSourceMarkdownContent.replace( - '# Updated Title', - '# HMR Title', - ), - ) - const hmrFrontmatterSourceMarkdownPath = - resolveSourceMarkdownPath('hmr/frontmatter.md') - const hmrFrontmatterSourceMarkdownContent = await fs.readFile( - hmrFrontmatterSourceMarkdownPath, - 'utf-8', - ) - await fs.writeFile( - hmrFrontmatterSourceMarkdownPath, - hmrFrontmatterSourceMarkdownContent.replace( - 'foo: Updated foo', - 'foo: HMR foo', - ), - ) - return true - }, - }) - }, - experimentalRunAllSpecs: true, - }, - env: { - E2E_BASE: process.env.E2E_BASE ?? '/', - E2E_COMMAND: process.env.E2E_COMMAND ?? 'dev', - }, -}) diff --git a/e2e/cypress/support/commands.ts b/e2e/cypress/support/commands.ts deleted file mode 100644 index 06bd28ad88..0000000000 --- a/e2e/cypress/support/commands.ts +++ /dev/null @@ -1,34 +0,0 @@ -const URL_PREFIX = Cypress.env('E2E_BASE').replace(/\/$/, '') - -// override the default cy.visit command to prepend base -Cypress.Commands.overwrite('visit', (originalFn, ...args) => { - // cy.visit(url, options) - if (typeof args[0] === 'string') { - // @ts-expect-error: could not type this correctly - return originalFn(`${URL_PREFIX}${args[0]}`, args[1]) - } - - // cy.visit(options) - return originalFn({ - ...args[0], - url: `${URL_PREFIX}${args[0].url}`, - }) -}) - -// add a custom request command to prepend base -Cypress.Commands.add('requestWithBase', (url, options) => - cy.request(`${URL_PREFIX}${url}`, options), -) - -declare global { - namespace Cypress { - interface Chainable { - requestWithBase: ( - url: string, - options?: Partial, - ) => Chainable> - } - } -} - -export {} diff --git a/e2e/cypress/support/e2e.ts b/e2e/cypress/support/e2e.ts deleted file mode 100644 index 43c03b759d..0000000000 --- a/e2e/cypress/support/e2e.ts +++ /dev/null @@ -1 +0,0 @@ -import './commands' diff --git a/e2e/docs/components/route-link.md b/e2e/docs/components/route-link.md index 5861096cf3..18dc6cb88b 100644 --- a/e2e/docs/components/route-link.md +++ b/e2e/docs/components/route-link.md @@ -56,7 +56,7 @@ ### Slots - text -- texttext +- texttext2 - text - texttext diff --git a/e2e/docs/router/navigation.md b/e2e/docs/router/navigation.md index 2df4da53cb..624df7c8f1 100644 --- a/e2e/docs/router/navigation.md +++ b/e2e/docs/router/navigation.md @@ -1,5 +1,5 @@ - +