test(e2e): switch to playwright (#108)

.eslintrc.cjs

@@ -20,16 +20,19 @@ module.exports = {
         'vue/match-component-file-name': 'off',
       },
     },
-    {
-      files: ['e2e/**/*.cy.ts', 'e2e/cypress/**/*.ts'],
-      extends: 'plugin:cypress/recommended',
-    },
     {
       files: ['tools/create-vuepress/**/*.vue'],
       rules: {
         'vue/no-v-html': 'off',
       },
     },
+    {
+      files: ['tools/create-vuepress/template/**/*.js'],
+      rules: {
+        'import/named': 'off',
+        'import/no-extraneous-dependencies': 'off',
+      },
+    },
     {
       files: ['**/tests/**/*.ts'],
       rules: {

.github/workflows/e2e.yml

@@ -34,24 +34,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
@@ -69,7 +54,7 @@ jobs:
           E2E_BUNDLER: ${{ matrix.bundler }}
 
   e2e-result:
-    if: ${{ always() }}
+    if: ${{ !cancelled() }}
     name: e2e result
     runs-on: ubuntu-latest
     needs: [e2e]

.gitignore

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

e2e/package.json

@@ -3,16 +3,16 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "cy:open": "cypress open",
-    "cy:run": "cypress run",
     "docs:build": "vuepress build docs --clean-cache --clean-temp",
-    "docs:build-webpack": "E2E_BUNDLER=webpack pnpm docs:build",
+    "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": "E2E_BUNDLER=webpack pnpm e2e:dev",
+    "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:build && start-server-and-test docs:serve http-get://localhost:9080 cy:run",
-    "e2e:dev": "start-server-and-test docs:dev http-get://127.0.0.1:9080 cy:run"
+    "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/bundler-vite": "2.0.0-rc.9",
@@ -30,8 +30,8 @@
     "vuepress": "2.0.0-rc.9"
   },
   "devDependencies": {
+    "@playwright/test": "^1.43.1",
     "anywhere": "^1.6.0",
-    "cypress": "^13.7.3",
-    "start-server-and-test": "^2.0.3"
+    "cross-env": "^7.0.3"
   }
 }

e2e/playwright.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig, devices } from '@playwright/test'
+import { BASE, BUNDLER, isCI, isDev } from './utils/env.js'
+
+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: 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/tests/plugin-blog/blog.spec.ts

@@ -0,0 +1,39 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('plugin-blog', () => {
+  test('generate type page', async ({ page }) => {
+    const types = ['article', 'timeline']
+
+    for (const type of types) {
+      await page.goto(`${type}/`)
+      await expect(page.locator('main')).not.toHaveText('404')
+      await expect(page.locator('article').first()).toBeVisible()
+    }
+  })
+
+  test('generate category main page', async ({ page }) => {
+    const categories = ['category', 'tag']
+
+    for (const category of categories) {
+      await page.goto(`${category}/`)
+      await expect(page.locator('main')).not.toHaveText('404')
+      await expect(page.locator('.article-wrapper')).toBeVisible()
+      await expect(page.locator('article')).toHaveCount(0)
+    }
+  })
+
+  test('generate category item page', async ({ page }) => {
+    const categoryConfig = {
+      category: ['category-a', 'category-b', 'category-c', '分类-1', '分类-2'],
+      tag: ['tag-a', 'tag-b', 'tag-c', 'tag-d', '标签-1', '标签-2'],
+    }
+
+    for (const [name, items] of Object.entries(categoryConfig)) {
+      for (const item of items) {
+        await page.goto(`${name}/${encodeURI(item)}/`)
+
+        await expect(page.locator('main')).not.toHaveText('404')
+      }
+    }
+  })
+})

e2e/tests/plugin-copy-code/copy-code.spec.ts

@@ -0,0 +1,24 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('copy-code', () => {
+  test('have copy code button', async ({ context, page }) => {
+    await context.grantPermissions(['clipboard-read', 'clipboard-write'])
+
+    await page.goto('copy-code/')
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+
+    const locator = page.locator('.vp-copy-code-button')
+
+    await expect(locator).toHaveCount(1)
+
+    await locator.first().click()
+
+    expect(locator.first()).toHaveAttribute('class', /copied/)
+
+    const content = await page.evaluate(() => navigator.clipboard.readText())
+
+    expect(content).toMatch(/const a = 1\r?\nconst b = 2\r?\n/)
+
+    await page.evaluate(() => navigator.clipboard.writeText(''))
+  })
+})

e2e/tests/plugin-copyright/copyright.spec.ts

@@ -0,0 +1,13 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('plugin-copyright', () => {
+  test('disable selection', async ({ page }) => {
+    await page.goto('')
+
+    await expect(page.locator('#app')).toHaveCSS('user-select', 'auto')
+
+    await page.goto('copyright/selection.html')
+
+    await expect(page.locator('#app')).toHaveCSS('user-select', 'none')
+  })
+})