feat: 修复e2e测试actions

.github/workflows/playwright.yml

@@ -1,27 +1,48 @@
-name: Playwright Tests
+name: E2E Tests
+
 on:
   pull_request:
-    branches: [main]
+    branches:
+      - main
+      - dev
+
+  merge_group: {}
+
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
 jobs:
   test:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: lts/*
+
       - name: Install pnpm
         uses: pnpm/action-setup@v4
-      - name: Install dependencies
-        run: pnpm install
+
+      - name: Set node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - name: Install
+        run: pnpm i
+
       - name: Install Playwright Browsers
         run: pnpm install:browser
+
       - name: Run Playwright tests
         run: pnpm test
+
       - uses: actions/upload-artifact@v4
-        if: always()
+        if: ${{ !cancelled() }}
         with:
           name: playwright-report
-          path: playwright-report/
+          path: packages/docs/playwright-report/
           retention-days: 30
+          if-no-files-found: warn

packages/docs/fluent-editor/demos/i18n-custom.spec.ts

@@ -1,4 +1,12 @@
-import { expect, test } from '@playwright/test'
+import { type Locator, expect, test } from '@playwright/test'
+
+async function hoverUntilTipVisible(button: Locator, tip: Locator) {
+  await button.evaluate(el => el.scrollIntoView({ block: 'center', inline: 'nearest' }))
+  await expect(async () => {
+    await button.hover()
+    await expect(tip).toBeVisible({ timeout: 1_000 })
+  }).toPass({ timeout: 15_000 })
+}
 
 test('uses custom i18n tip texts and switches locale', async ({ page }) => {
   await page.goto('/tiny-editor/docs/demo/i18n')
@@ -10,15 +18,15 @@ test('uses custom i18n tip texts and switches locale', async ({ page }) => {
   const switchBtn = block.getByRole('button', { name: /switch between Chinese and English/i })
   const tip = page.locator('.toolbar-tip__tooltip:visible')
 
+  await expect(page.locator('.vp-raw').first().locator('.ql-toolbar')).toBeVisible({ timeout: 30_000 })
   await expect(toolbar).toBeVisible({ timeout: 30_000 })
   await expect(editor).toBeVisible({ timeout: 30_000 })
   await expect(boldBtn).toBeVisible()
 
-  await boldBtn.hover()
-  await expect(tip).toBeVisible({ timeout: 5_000 })
+  await hoverUntilTipVisible(boldBtn, tip)
   await expect(tip).toHaveText('替换粗体文本')
 
   await switchBtn.click()
-  await boldBtn.hover()
+  await hoverUntilTipVisible(boldBtn, tip)
   await expect(tip).toHaveText('Replace bold text')
 })

packages/docs/fluent-editor/demos/toolbar-tip.spec.ts

@@ -1,18 +1,25 @@
-import { expect, test } from '@playwright/test'
+import { type Locator, expect, test } from '@playwright/test'
+
+async function hoverUntilTipVisible(button: Locator, tip: Locator) {
+  await button.evaluate(el => el.scrollIntoView({ block: 'center', inline: 'nearest' }))
+  await expect(async () => {
+    await button.hover()
+    await expect(tip).toBeVisible({ timeout: 1_000 })
+  }).toPass({ timeout: 15_000 })
+}
 
 test('has toolbar and shows tip on hover', async ({ page }) => {
   await page.goto('/tiny-editor/docs/demo/toolbar-tip')
 
   const toolbar = page.locator('.ql-toolbar').first()
   const editor = page.locator('.ql-editor').first()
   const boldBtn = toolbar.locator('.ql-bold')
+  const tip = page.locator('.toolbar-tip__tooltip:visible')
 
   await expect(toolbar).toBeVisible({ timeout: 30_000 })
   await expect(editor).toBeVisible({ timeout: 30_000 })
   await expect(boldBtn).toBeVisible()
 
-  await boldBtn.hover()
-  const tip = page.locator('.toolbar-tip__tooltip:visible')
-  await expect(tip).toBeVisible({ timeout: 5_000 })
+  await hoverUntilTipVisible(boldBtn, tip)
   await expect(tip).toContainText(/Bold|粗体/)
 })

packages/docs/package.json

@@ -8,7 +8,7 @@
     "build": "vitepress build fluent-editor",
     "build:v3": "node --env-file=fluent-editor/.env.v3 ./node_modules/vitepress/bin/vitepress.js build fluent-editor",
     "preview": "vitepress preview fluent-editor",
-    "install:browser": "pnpm exec playwright install --with-deps chromium firefox",
+    "install:browser": "pnpm exec playwright install --with-deps chromium",
     "test": "pnpm exec playwright test",
     "test:ui": "pnpm exec playwright test --ui",
     "report": "pnpm exec playwright show-report"

packages/docs/playwright.config.ts

@@ -1,77 +1,23 @@
 import { defineConfig, devices } from '@playwright/test'
 
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// import dotenv from 'dotenv';
-// dotenv.config({ path: path.resolve(__dirname, '.env') });
-
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
 export default defineConfig({
   testDir: './',
   testMatch: '*.spec.ts',
-  /* Run tests in files in parallel */
   fullyParallel: true,
-  /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
-  /* Retry on CI only */
   retries: process.env.CI ? 2 : 0,
-  /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : 2,
-  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  reporter: process.env.CI ? [['html'], ['github']] : 'html',
   use: {
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    // baseURL: 'http://127.0.0.1:3000',
-
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
   },
-
-  /* Configure projects for major browsers */
   projects: [
     {
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
     },
-
-    // {
-    //   name: 'firefox',
-    //   use: { ...devices['Desktop Firefox'] },
-    // },
-
-    // {
-    //   name: 'webkit',
-    //   use: { ...devices['Desktop Safari'] },
-    // },
-
-    /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
-    // },
-
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    // },
   ],
-
   timeout: 120 * 1000,
-  /* Run your local dev server before starting the tests */
   webServer: {
     command: 'pnpm dev',
     port: 5173,