Merge pull request #4 from testerxiaodong/e2e/plawright

feature: add e2d test with playwright in home auth and dashboard page

Author: testerxiaodong

Diff for: .eslintrc.json

@@ -1,3 +1,12 @@
 {
-  "extends": ["next/core-web-vitals", "next/typescript"]
+  "extends": ["next/core-web-vitals", "next/typescript"],
+  "overrides": [
+    {
+      "files": ["tests/**/*.ts", "tests/**/*.js"], // Playwright 测试文件路径
+      "rules": {
+        "react-hooks/rules-of-hooks": "off", // 禁用 React Hooks 规则
+        "react-hooks/exhaustive-deps": "off" // 禁用 React 依赖检查规则
+      }
+    }
+  ]
 }

Diff for: .github/workflows/playwright.yml

@@ -0,0 +1,40 @@
+name: Playwright Tests
+
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: npx playwright test
+        env:
+          NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
+          NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

Diff for: .gitignore

@@ -38,3 +38,8 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

Diff for: package-lock.json

@@ -6,7 +6,9 @@
     "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
@@ -37,6 +39,7 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@playwright/test": "^1.49.0",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

Diff for: package.json

@@ -0,0 +1,62 @@
+import { defineConfig, devices } from '@playwright/test'
+
+export default defineConfig({
+  testDir: './tests',
+  /* 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 : undefined,
+  /* 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. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost: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: [
+    // Setup project
+    { name: 'setup', testMatch: /.*\.setup\.ts/ },
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        storageState: 'tests/.auth/user.json',
+      },
+      dependencies: ['setup'],
+    },
+
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox'],
+        storageState: 'tests/.auth/user.json',
+      },
+      dependencies: ['setup'],
+    },
+
+    {
+      name: 'webkit',
+      use: {
+        ...devices['Desktop Safari'],
+        storageState: 'tests/.auth/user.json',
+      },
+      dependencies: ['setup'],
+    },
+  ],
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'npm run build && npm run start',
+    port: 3000,
+    reuseExistingServer: !process.env.CI,
+    timeout: 120 * 1000,
+  },
+})

Diff for: playwright.config.ts

@@ -0,0 +1,15 @@
+{
+  "cookies": [
+    {
+      "name": "sb-binfgbgsoetsbeapeoks-auth-token",
+      "value": "base64-eyJhY2Nlc3NfdG9rZW4iOiJleUpoYkdjaU9pSklVekkxTmlJc0ltdHBaQ0k2SWpsa1RXazVhSFJXWjFsNFRXMXpkSEVpTENKMGVYQWlPaUpLVjFRaWZRLmV5SnBjM01pT2lKb2RIUndjem92TDJKcGJtWm5ZbWR6YjJWMGMySmxZWEJsYjJ0ekxuTjFjR0ZpWVhObExtTnZMMkYxZEdndmRqRWlMQ0p6ZFdJaU9pSmpNVGsyT1dOa1ppMWtNVFE0TFRReE1XUXRPRGMxTXkxaVpXSXdNR1ZoWkRRellUY2lMQ0poZFdRaU9pSmhkWFJvWlc1MGFXTmhkR1ZrSWl3aVpYaHdJam94TnpNek16TXdOVFkyTENKcFlYUWlPakUzTXpNek1qWTVOallzSW1WdFlXbHNJam9pZEdWemRFQjBaWE4wTG1OdmJTSXNJbkJvYjI1bElqb2lJaXdpWVhCd1gyMWxkR0ZrWVhSaElqcDdJbkJ5YjNacFpHVnlJam9pWlcxaGFXd2lMQ0p3Y205MmFXUmxjbk1pT2xzaVpXMWhhV3dpWFgwc0luVnpaWEpmYldWMFlXUmhkR0VpT25zaVpXMWhhV3dpT2lKMFpYTjBRSFJsYzNRdVkyOXRJaXdpWlcxaGFXeGZkbVZ5YVdacFpXUWlPbVpoYkhObExDSndhRzl1WlY5MlpYSnBabWxsWkNJNlptRnNjMlVzSW5OMVlpSTZJbU14T1RZNVkyUm1MV1F4TkRndE5ERXhaQzA0TnpVekxXSmxZakF3WldGa05ETmhOeUo5TENKeWIyeGxJam9pWVhWMGFHVnVkR2xqWVhSbFpDSXNJbUZoYkNJNkltRmhiREVpTENKaGJYSWlPbHQ3SW0xbGRHaHZaQ0k2SW5CaGMzTjNiM0prSWl3aWRHbHRaWE4wWVcxd0lqb3hOek16TXpJMk9UWTJmVjBzSW5ObGMzTnBiMjVmYVdRaU9pSTVOMkkwT1dVMU1pMWhNV013TFRReFptSXRZVGxtTUMweFpUVmlZMlF6WVRWak1EZ2lMQ0pwYzE5aGJtOXVlVzF2ZFhNaU9tWmhiSE5sZlEuLUFqRzU0WjJPUE90LXE1akdwZ09PSUtGMFRpS0N2cWNMbVFWX29rSnY2ZyIsInRva2VuX3R5cGUiOiJiZWFyZXIiLCJleHBpcmVzX2luIjozNjAwLCJleHBpcmVzX2F0IjoxNzMzMzMwNTY2LCJyZWZyZXNoX3Rva2VuIjoiWDVJVHZ6VDNwaEhvQ0h6bDRrYTFGZyIsInVzZXIiOnsiaWQiOiJjMTk2OWNkZi1kMTQ4LTQxMWQtODc1My1iZWIwMGVhZDQzYTciLCJhdWQiOiJhdXRoZW50aWNhdGVkIiwicm9sZSI6ImF1dGhlbnRpY2F0ZWQiLCJlbWFpbCI6InRlc3RAdGVzdC5jb20iLCJlbWFpbF9jb25maXJtZWRfYXQiOiIyMDI0LTExLTEzVDEyOjI3OjMxLjc5MDY0M1oiLCJwaG9uZSI6IiIsImNvbmZpcm1lZF9hdCI6IjIwMjQtMTEtMTNUMTI6Mjc6MzEuNzkwNjQzWiIsImxhc3Rfc2lnbl9pbl9hdCI6IjIwMjQtMTItMDRUMTU6NDI6NDYuMTE4Nzc0OTM2WiIsImFwcF9tZXRhZGF0YSI6eyJwcm92aWRlciI6ImVtYWlsIiwicHJvdmlkZXJzIjpbImVtYWlsIl19LCJ1c2VyX21ldGFkYXRhIjp7ImVtYWlsIjoidGVzdEB0ZXN0LmNvbSIsImVtYWlsX3ZlcmlmaWVkIjpmYWxzZSwicGhvbmVfdmVyaWZpZWQiOmZhbHNlLCJzdWIiOiJjMTk2OWNkZi1kMTQ4LTQxMWQtODc1My1iZWIwMGVhZDQzYTcifSwiaWRlbnRpdGllcyI6W3siaWRlbnRpdHlfaWQiOiJiODY0ZjYxNC0xMDM3LTRhNmMtOTVlNS1kNDZiMmM1MDI1OTEiLCJpZCI6ImMxOTY5Y2RmLWQxNDgtNDExZC04NzUzLWJlYjAwZWFkNDNhNyIsInVzZXJfaWQiOiJjMTk2OWNkZi1kMTQ4LTQxMWQtODc1My1iZWIwMGVhZDQzYTciLCJpZGVudGl0eV9kYXRhIjp7ImVtYWlsIjoidGVzdEB0ZXN0LmNvbSIsImVtYWlsX3ZlcmlmaWVkIjpmYWxzZSwicGhvbmVfdmVyaWZpZWQiOmZhbHNlLCJzdWIiOiJjMTk2OWNkZi1kMTQ4LTQxMWQtODc1My1iZWIwMGVhZDQzYTcifSwicHJvdmlkZXIiOiJlbWFpbCIsImxhc3Rfc2lnbl9pbl9hdCI6IjIwMjQtMTEtMTNUMTI6Mjc6MzEuNzgyNzg1WiIsImNyZWF0ZWRfYXQiOiIyMDI0LTExLTEzVDEyOjI3OjMxLjc4MjgzOVoiLCJ1cGRhdGVkX2F0IjoiMjAyNC0xMS0xM1QxMjoyNzozMS43ODI4MzlaIiwiZW1haWwiOiJ0ZXN0QHRlc3QuY29tIn1dLCJjcmVhdGVkX2F0IjoiMjAyNC0xMS0xM1QxMjoyNzozMS43NjU4NDlaIiwidXBkYXRlZF9hdCI6IjIwMjQtMTItMDRUMTU6NDI6NDYuMTIzODk5WiIsImlzX2Fub255bW91cyI6ZmFsc2V9fQ",
+      "domain": "localhost",
+      "path": "/",
+      "expires": 1767886966.364104,
+      "httpOnly": false,
+      "secure": false,
+      "sameSite": "Lax"
+    }
+  ],
+  "origins": []
+}

Diff for: assets/images/AirPod Pro2-1.jpg renamed to public/assets/images/AirPod Pro2-1.jpg

@@ -0,0 +1,15 @@
+import test from '../fixtures/pageFixtrue'
+
+test.describe('Auth Page', () => {
+  test('should be able to login', async ({ authPage }) => {
+    await authPage.navigate()
+    await authPage.login('[email protected]', '123456')
+  })
+
+  test('should not be able to login with invalid credentials', async ({
+    authPage,
+  }) => {
+    await authPage.navigate()
+    await authPage.loginWithError('[email protected]', '1234567')
+  })
+})

Diff for: assets/images/AirPod Pro2-2.jpg renamed to public/assets/images/AirPod Pro2-2.jpg

@@ -0,0 +1,20 @@
+import test from '../fixtures/pageFixtrue'
+
+test.describe('Dashboard Page', () => {
+  test('ordersChartCheck', async ({ dashboardPage }) => {
+    await dashboardPage.navigate()
+    await dashboardPage.ordersChartCheck()
+  })
+  test('productDistributionCheck', async ({ dashboardPage }) => {
+    await dashboardPage.navigate()
+    await dashboardPage.productDistributionCheck()
+  })
+  test('productsPerCategoryChartCheck', async ({ dashboardPage }) => {
+    await dashboardPage.navigate()
+    await dashboardPage.productsPerCategoryChartCheck()
+  })
+  test('latestUsersChartCheck', async ({ dashboardPage }) => {
+    await dashboardPage.navigate()
+    await dashboardPage.latestUsersChartCheck()
+  })
+})

Diff for: assets/images/AirPod Pro2-3.jpg renamed to public/assets/images/AirPod Pro2-3.jpg

@@ -0,0 +1,13 @@
+import test from '../fixtures/pageFixtrue'
+
+test.describe('Home page', () => {
+  test('home page header show', async ({ homePage }) => {
+    await homePage.navigate()
+    await homePage.headerShow()
+  })
+
+  test('go to github', async ({ homePage }) => {
+    await homePage.navigate()
+    await homePage.gotoGithub()
+  })
+})

Diff for: assets/images/AirPod Pro2-4.jpg renamed to public/assets/images/AirPod Pro2-4.jpg

@@ -0,0 +1,22 @@
+import { test as baseTest } from '@playwright/test'
+import { HomePage } from '../pages/homePage'
+import { AuthPage } from '../pages/authPage'
+import { DashboardPage } from '../pages/dashboardPage'
+
+const test = baseTest.extend<{
+  homePage: HomePage
+  authPage: AuthPage
+  dashboardPage: DashboardPage
+}>({
+  homePage: async ({ page }, use) => {
+    await use(new HomePage(page))
+  },
+  authPage: async ({ page }, use) => {
+    await use(new AuthPage(page))
+  },
+  dashboardPage: async ({ page }, use) => {
+    await use(new DashboardPage(page))
+  },
+})
+
+export default test

Diff for: assets/images/AirPod Pro2.jpg renamed to public/assets/images/AirPod Pro2.jpg

@@ -0,0 +1,45 @@
+import { expect, Page } from '@playwright/test'
+import { HelperBase } from './helperBase'
+
+export class AuthPage extends HelperBase {
+  readonly email = this.page.getByLabel('Email')
+  readonly password = this.page.getByLabel('Password')
+  readonly loginButton = this.page.getByText('Login')
+  readonly successMessage = this.page.getByText('Logged in successfully')
+  readonly errorMessage = this.page.getByText('Invalid email or password')
+
+  constructor(page: Page) {
+    super(page)
+  }
+
+  async navigate() {
+    await this.page.goto('/auth')
+  }
+
+  async login(email: string, password: string) {
+    await this.email.fill(email)
+    await this.password.fill(password)
+    await this.loginButton.click()
+    // 等待消息可见并验证内容
+    await expect(this.successMessage).toHaveText('Logged in successfully', {
+      timeout: 4000,
+    })
+    await this.page.waitForURL('http://localhost:3000/admin/dashboard', {
+      waitUntil: 'load',
+    })
+    const dashboardHeader = this.page.locator('main h1', {
+      hasText: 'Dashboard Overview',
+    })
+    await expect(dashboardHeader).toBeVisible()
+  }
+
+  async loginWithError(email: string, password: string) {
+    await this.email.fill(email)
+    await this.password.fill(password)
+    await this.loginButton.click()
+    // 等待消息可见并验证内容
+    await expect(this.errorMessage).toHaveText('Invalid email or password', {
+      timeout: 4000,
+    })
+  }
+}